Information and

Communication Technology
Class XI-XII

Chapter-4
Website design and HTML
Website
 Web server and web client
abc
Web Server

Web sites stores in

web server

abc
Web Client Web Client
Web Client Web Client
 Web server :
 Web server in a computer which is connected to
Internet and stores(hosts) websites.

 Web client:
 Web client in a computer which is connected to
Internet and used by common user to visit(browse)
website


 Upload: transferring any information
from client’s computer to Server

 Download: transferring any

information from Server computer to
client’s computer


Who is the Owner of website!
What can a website contain:
Website
A place on the WWW (World
Wide Web) that contains
information about an:
individual, organization,
educational institution or
government or any other
purpose .

 
Website
May contain
text,
image,
audio,
video
graphics,
Database and
hyperlinks to other web pages
and files  
A Website is a collection of
Webpages.
Travelling from one web page
to another called navigation
Domain Type
Web address/URL/Domain Name
www.rajukcollege.net
www.facebook.com
www.google.com
www.yahoo.com
www.wikipedia.org
URL/Domain name/Web address
 Uniform Resource Locator

 ICANN ( Internet Corporation for Assigned

Names and Numbers)
 ICANN coordinates/control these domain
name/URL
Domain name
 A domain name is an
identification string that defines a
realm of administrative autonomy,
authority or control within
the Internet.
Domain name
 Domain names are formed by the rules and
procedures of the Domain Name
System(DNS). Any name registered in the
DNS is a domain name.

 www.rajukcollege.info
 www.facebook.com
 www.google.com
 www.yahoo.com
 www.wikipedia.org
 DNS

www.google.com 173.194.36.51
DNS
 Domain Name System
 Used to convert web address from text form to
numerical value
 Example:
 www.google.com to 174.194.36.51
 It is very hard to remember numerical value of
web address.
 People types web address in text form and DNS
convert it into numerical form

Rules to be obyed
Network
Network Protocol
 A set of rules that provide communication in a
network.
 Examples:
TCP/IP =
 Transmission Control Protocol
/Internet Protocol
 FTP= File Transfer Protocol
 HTTP= Hyper Text Transfer Protocol
 HTTP= Hyper Text Transfer Protocol

 TCP/IP= Transmission Control

Protocol/Internet Protocol
Logo of some popular web
browser
 Website is accessible through the Internet or
other network using a browser.
Title Bar

Address Bar

Content
web browser

 A web browser is a software use for visiting

website.
 Retrieving,
 presenting and
 traversing information from websites

 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
 Mosaic(first Internet Browser)
 UC
 Opening website by browser(Mozilla firefox )

Title bar

Address bar

Browser stores previously visited web addresses

When you try to type any address, browser will suggest
probable names
 For static website
 HTML(Hyper Text Markup Language)
 CSS(Cascading Style Sheet)
 For Dynamic website
 PHP,ASP, XML,DHTML, HTML5,Java Script
 PHP=Hypertext Pre-processor

 ASP=Active Server Page

 JSP= Java Server Page

 XML=Extensible Markup Language

For Database:
My SQL, SQL Server
For webbased Database
Web design language
 Web based database(for Dynamic website ):
 MySQL, SQL Server

 CMS(Content Management System):

 Zoomla, Wordpress
 Static Website

Server
Client
 Dynamic Website

Server
Client

Database
Types of website
 Static websites
Information are fixed. Can’t be changed by common
user. Only administrator is capable of changing.
It has no database

 Dynamic website
 Information are changeable. Can be changed by
common user and administrator both .
 It has database.

Static website Vs Dynamic website
Static Website Dynamic website
1) Can’t be changed by user 1) Both Admin & User can
request. Only Admin can change it
change.
Static website Vs Dynamic website
Static Website Dynamic website
1) Can’t be changed by user 1) Both Admin & User can
request. Only Admin can change it
change.
2) No Database used 2) Database used
Static website Vs Dynamic website
Static Website Dynamic website
1) Can’t be changed by user 1) Both Admin & User can
request. Only Admin can change it
change.
2) No Database used 2) Database used
3) Use HTML, CSS for 3) Use PHP, ASP,XML etc
developing and MySQL & SQL server for
database
Static website Vs Dynamic website
Static Website Dynamic website
1) Can’t be changed by user 1) Both Admin & User can
request. Only Admin can change it
change.
2) No Database used 2) Database used
3) Use HTML, CSS for 3) Use PHP, ASP etc
developing language MySQL & SQL
server for database
4) Simple structure & easy to 4) Complex structure & hard
develop to develop
Static website Vs Dynamic website
Static Website Dynamic website
1) Can’t be changed by user 1) Both Admin & User can
request. Only Admin can change it
change.
2) No Database used 2) Database used
3) Use HTML, CSS for 3) Use PHP, ASP etc
developing language MySQL & SQL
server for database
4) Simple structure & easy to 4) Complex structure & hard
develop to develop
5) Faster load 5) Slower load
Static website Vs Dynamic website
Static Website Dynamic website
1) Can’t be changed by user 1) Both Admin & User can
request. Only Admin can change it
change.
2) No Database used 2) Database used
3) Use HTML, CSS for 3) Use PHP, ASP etc
developing language MySQL & SQL
server for database
4) Simple structure & easy to 4) Complex structure & hard
develop to develop
5) Faster load 5) Slower load
6) Hard to update 6) Easy to update
7) Fixed number of pages 7) New pages can be
generated
Static website Vs Dynamic website
Static Website Dynamic website
8) No change in Runtime 8) Can be changed in runtime

9) One way Communication 9) Two way Communication

10) Cheap 10) Costly

11) Non Interactive 11) Interactive

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)
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 taka the decision to
change the website with the tools like PHP,
MySQL etc.
 (d) Analyze the logic of the decision
mentioned in the stem.
 Rishad wanted to develop a website. So he
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.


TLD= Top Level Domain
TOP LEVEL DOMAIN
Top Level Domain/Generic Domain/Domain Type

Top level Domain type Example

domain
.com Commercial institute microsoft.com
.int International organization

.mil US military army.mil

.edu Educational institute aiub.edu
.net ISP or other network service bangla.net
provider
.org volunteer/non-profitable wikipedia.org
organization
.info Information provider rajukcollege.info
Top level Domain type Example
domain
.bd
.in
.uk
.us
.au
.jp
.ru
Stem:
 ICT Teacher of a college Mr. Nasif took some training
on webdesign. The Principal assigned him to develop
a dynamic website containing all necessary
information of their institute. Mr. Nasif opened an
website name www.xyzcollege.com . When the
website was checked by an IT expert, he suggested
Mr. Nasif to rename the website

 C) why the IT expert suggested to change the name?

 D) “The Principal opened the website for the benifit of
the students”-explain
Basic Structure of a website
Web site have 4 types of structure/Model

 Hierarchical(Tree) Structure of website

 Network(Relational/web link) Structure of
website
 Linear(Sequential) Structure of website
 Hybrid(Combinational) Structure of website
 Grand father

Father Uncle Aunty

You Bro Sis

Hierarchical/Tree structure of website

Home

About Us Product Service Contact

Desktop Laptop
Network/Web link structure of website
Linear structure

Page1 Link Page2 Link Page3

Linear structure

Main
Page

Sub-topic Sub-topic Sub-topic Sub-topic

Page1 Page2 Page3
`
Combined/Hybrid structure of website
Stem: describe structure of the web given
below

P-3

P-1
P-4

Home page
P-5
P-2

P-6
ICT teacher Ms. Asma suggest the students to develop a website by
following the structure given below. One of the students, Ohona
developed an website following the figure-1 and another student Aritro
followed the figure-2 for developing website

1 2 3
C) Identify Ohona’s
website
Figure1 D) Explain why Aritro’s
web site is convinient

Figure-2
Stem: CB 2017

Home page

Page-1 Page-2

Page-5
Page-3 Page-4

Explain the structure of the above stem

Ch-19
Describe structure of the figrure

Page Page

Page

Page Page
What is structure of the website?
Explain the structure

Page 2 Page 1

Home page

Page 4 Page 3
 Chayon developed a website where each
page is connected to other pages by multiple
paths.

 Describe details structure of chayon’s website

Stem:
 Web pages of the website of ‘Ka’ college is arranged
in some specific sequence.
 c) explain the structure of the website of ‘Ka’ college
 Two friends Ela and Anjum developed a
website consisting the first, Last, Next,
Previous links.

 (c) Explain the structure of the website

Describe
Dinaj-19
 The pages of the online e-paper are arranged one after
another from the very beginning. For this reason the interest
of the readers is increasing day by day for this paper. For
this, a multinational company, named A , become careful so
that they can find the company information easily. Because,
the pages of the web sites are linked form many sides.
Besides, they keep an eye for the beautification of the
website. company B has arranged the pages in such a way
so that the pages are linked with the main page.
 C) explain the arrangement of the structure of a webpage of
a news paper in the stem.
 D) give logical opinion of convenient uses of webpage
structures of A and B companies in the stem
Stem: (next page)
 Mohon was browsing a website. Whenever
he tried to visit any page he needed to go
home page first. The home page was well
decorated with many attractive advertisements.
First time he was comfortable with browsing.
But when he tried to visit an image it took long
time to load. Although he was able to visit the
webpage all pictures were not visible.
 C) describe the structure of the website.
 D) how to solve the problem.
 So many advertisement and images
 VIRUS/malware
 Slow Internet Speed
 Too many people want to loging same site at
same time
 Browser
 Proxy Server

Steps for Design, Developing/Creating
and publishing a website
 1. Specification

 2. Analysis

 3. Design

 4. Develop

 5. publishing/Implementation

 6. Test and refine

Step for developing a website
 1.Specification
 Specify the purpose
 Collect information
 Client interview,
 Project brief
 Persons (from differ...)
 The business/product/Service
 Target audience
 Long/short term goal
 Project time line
 2. Analysis

 initialtechnical specification
 Project plan/schedule,
 Resource/funding plan
 demo site flowchart
 Infrastructure requirements
 Database requirements
 E-commerce compatibility
3.Design

 Logo design,
 Banner design

 Site structure
 Content (Information and image collection
 Site diagram, page description diagram,

 Visual Design
 Flow chart, Draft, feedback, refine design ,
select design
4. Development
 4. Develop

 Coding and conversion

 (by HTML, CSS, ASP, Java

Script, PHP etc)

 For Database:

 MySQL, SQL Server

 Content Management System
(CMS)
 Joomla, wordpress

 Inventory management System,

 Confirm/refine tech specs,
 Review/Adjust project time line,
5. Implementation/Publishing
 Domain Name Registration
 Hosting (book place in server)
 Site Upload ,
 Link between domain name and host
 SEO(Search Engine Optimization)
 Social Network Integration
 Launch site
 Tutorial and training
6. Test and refine

 Implement maintenance
plan
 Monthly maintenance
 Quality assuring testing,
 prioritize important issue,
 refine site
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:
 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.
Meanwhile presently Government also ordered to all
school and college to develop website for representing
updated information.

 D) what steps should be taken if the Rajuk college

authority want apply the Government's order
appropriately.
Stem:
 A Company named Delta wants to develop a website for
them where they express only introduce themself. They
appointed a web developer for that work. Web developer
told the authority to express in the website they need
domain name & hosting. The company agreed with that.
But company told the developer not to expenses more
and quality of the web should be same as required.

 C. What are the difference between domain & hosting ?

which is express in the stem.
 d According to stem which type of hosting should be
used. Write the answer with logic.
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 Business Information

 Keeping It Fresh

 Links From Others & Virtual Marketing

 The information within a site can be quickly
accessed.  

 The site may provide links to other sites on the same

topic

 The site creator/author doesn’t need to be present

when someone is retrieving information.

 The author can usually be contacted through an

emailing address or a message board connected to
the site.
 There is no need to carry a hard copy of information
with you. (No heavy book)

 Information is easy to gather and print selectively.

 Easy to use the information to create your own

resource.
Disadvantage of Website!
Disadvantage of Website
 It may be difficult for researchers to locate, especially if
there are many similar sites.

 The information on the site may not be reliable.

 Information may be interpreted incorrectly or used

inappropriately.

 A connection to the web is needed to access the

information, which will be impossible if a computer and
connection is not available.
 It may be difficult to reach your target audience.
 Because the author is not present when others
are retrieving information there is no opportunity
to ask questions or have things explained in
greater detail etc.

 The site may go down or the computer may

crash.

 Site may be difficult to use if experience with

the internet is limited.
 Crashes & Uptime

 Difficultly Reaching The Right People

 SPAM

 Bad Publicity
Markup languages
 Markup languages are designed for the
processing, definition and presentation
of text.
 The language specifies code for formatting,
both the layout and style, within a text file.
The code used to specify the formatting are
called tags. 
 Example:
 HTML,HTML5, XML
 Timothy Berners-Lee

 CERN
 Switzerland
HTML
 Hyper Text Markup Language  is a Programming language for
creating WebPages. WebPages are usually viewed in a web
browser.

 They can include writing, links, pictures, and even sound

and video.

 HTML is used to mark and describe each of these kinds of

content so the web browser can show them correctly.

 Cascading Style Sheets (CSS) and JavaScript can be included

in HTML code. CSS is used to change how a webpage looks.
JavaScript is used to add features to WebPages and make
them more interactive.
Structure of A simple HTML program

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

<body>
…………………………………………….
…………………………………………….
…………………………………………….
…………………………………………….
</body>
</html>
HTML Tags

 HTML tags are keywords (tag names)

surrounded by angle brackets:
 <tagname>content</tagname>

 HTML tags normally come in pairs like

 <p> …………….. </p>
 <h1> …………….</h1>
 <b>……………….</b>
Details of tags
 Each tag works in pair
 Starting tag
 Closing tag

 Tags are not shown but their results are

displayed in browser

 The end tag is written like the start tag, but

with a slash before the tag name
How to create an HTML file in notepad
How to create an HTML file in notepad (Contd.)
Syntax of a simple HTML file

<html>

<head>
<title> Welcome to College </title>
</head>

<body>
……………….
</body>
</html>
Tips and Notes
 Tip: 
 The <!DOCTYPE html> declaration is NOT
case sensitive.
Syntax of a simple HTML file

<!DOCTYPE html>
<html>

<head>
<title> Welcome to College </title>
</head>

<body>
……………….
</body>
</html>
HTML
FORAMTTING TAGS
<b> tag
 Used to make the text bold
 Example: Result

 <html> Bangladesh
 <head>
 </head>
 <body>
 <b> Bangladesh</b>
 </body>
 </html>
Also used to make text bold
 <Strong>
 ---------------------
 </Strong>
<u> tag
 Used to make the text underlined

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

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

 Example:
 <html> Result:
 <body>
 <ins> Dhaka </ins>
 </body>
 </html> Dhaka
Try <ins>
 <ins> is alternate of <u>
<i> tag
 Used to make the text italic

 Example:
 <html>
 <head>
 </head>
 <body> Result:
 <i> uttara</i>
 </body>
 </html> uttara
different tags can be applyed on the same
text

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

Result:

Bangladesh
  <i>Bangladesh</i>

opening Tag Element/ Closing Tag

Component
 <B>Bangladesh</B>
<big> tag
 Used to make the text bigger

 Example:
 <html>
 <head>

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

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

 Example:
 <html>
Result:
 <body>
 < small > School </small >
 </body>
 </html> School
X Y
3
<sup> tag
 Used for superscript

 Syntax:
 ^{………text……}

 Example:
 <html> Result:
 <body>
 X ³Y
 </body>
 </html>
X3 Y
X^N²
H 2O
<sub> tag
 Used for subscript any text

 Syntax:
 _{………text……}

 Example:
 <html> Result:
 <body>
 H ₂ O
 </body>
 </html> H2O
<p> tag
 Used to make a new paragraph

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

 Example:
 <html>
 <body> Result:
 <p> Dhaka</p><p> Bangladesh</p>
 </body>
 </html>
Dhaka
Bangladesh
<DIV> tag
 Used to divide in different sections

 <div>

 </div>
 Align an Image/object/text

 <p align="center"> Content/Element </p>

Value Ending Tag

Opening Tag

Attribute

 <div align="center">. . . . . . . . . . . </div>

Pair tag:

 If a tag has both opening and closing

 Example:
 <b> </b>
 <i> </i>
 <p> </p>
 <h1> </h1>
 Also called container tag
Non Pair tag/Empty tag

 If a tag has only opening

 Example:

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

 Syntax:
 ……text……<br> …… text….

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

 </body>
 </html>

 * NB: End tag not needed My Name is

Messi
<HR> Tag

  for drawing a horizental line

  

 <body>
 <hr>
 </body>

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

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

 Example:

Result:
 <html>
 <body>


<h1> Today’s Headline</h1>
</body>
Today’s Headline
 </html>
Try your self
 <h1> Headline 1</h1>
 <h2> Headline 2</h2>
 <h3> Headline 3 </h3>
 <h4> Headline 4 </h4> Result
 <h5> Headline 5 </h5> Headline 1
 <h6> Headline 6 </h6> Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
Del tag

 <del> My Name </del>

 Out put:

 My Name
<Strike> tag (same as del)

 <strike> My Name </strike>

 Out put:

 My Name
 <font size="5" color="red"> Uttara
</font>
 <font size=“2" color=“Blue"> Uttara </font>
 <font size="10" face="Arial Black"
color="Blue"> Uttara </font>
 <font size=“3" face=“Times New
Roman" color=“Green"> Uttara </font>
Color Name Code
BLACK #000000
WHITE #FFFFFF
RED #FF0000
YELLOW #FFFF00
GREEN #008000
Maroon #800000
Gray #808080
Set background color

 Example:
 <body style="background-color:red;">

Out Put:

 
Div tag
 defines a division or a section in an HTML
document.
 used to group block-elements to format them
with styles.

 Example:
Out PUT:
 <div style="color:RED">
 This is a colorful line This is a colorful line
 </div>

Marquee tag
 <marquee> please drive slow </marquee>

 <marquee scrollamount="2"> please drive slow

</marquee>

 <marquee scrollamount="2“ Direction=“UP”> please

drive slow </marquee>

 Direction:up,down,left,right
Comilla-19
 <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>
 <html>
 <head> </head>

 <body>
 <i>Uttara</i> <br>
 <b>Dhaka </b><br>
 <u>Bangladesh </u><br>
 H₂O<br>
 </body>
 </html>
Stem: write HTML code the show
the following ouput

Head line
Dhaka

Bangladesh

AABBBCCCC
A4 B2
 <h1> Head Line</h1>
 <Hr>
 <i><b> Dhaka</i></b> <br>
 <u> Bangladesh</u> <br>
 <del>AABBBCCCC</del> <br>
 A ⁴B ₂
What is the output?
 We all <u>should </u>love<br> our
<b>country</b>

 We all should love

 our country
What output u get if opened by browser

 <!DOC Type HTML>

 <html>
 <head>
 <title>Welcome</title>
 </head>
 <body>
 <b>UHSC</b> <br>
 <u>Dhaka</u> <br>
 </body>
 </html>
Benefit of HTML for creating website
 Its plain text so is easy to edit. 
 Its also fast to download
 Is very easy to learn 
 It totally free (need not buy any software) 
 Its supported by most browsers.
 Can be used to present any kind of data. 
 Tags can be used very loosely
 i.e. used to be able to omit end tags etc. 
 Widely used; established on almost every
website.
Disadvantage of HTML
1. It can create only static and plain pages so if we
need dynamic pages then HTML is not useful.

2. Need to write lot of code for making simple

webpage.

3. Security features are not good in HTML.

4. If we need to write long code for making a

webpage then it produces some complexity.
 <html>
 <head>
 </head>

 <body>

 </body>
 </html>
LIST TAG
UL=UNORDERED LIST
OL=ORDERED LIST
UL tag
 used to create Unordered List
 Example:
 <ul>
 <li> Messi</li>
 <li> Ronaldo</li> Out PUT:

 </ul> * Messi
* Ronaldo
UL tag
 used to create Unordered List
 Example:
 <ul Type=“Circle”>
 <li> Messi</li>
 <li> Ronaldo</li> Out PUT:

 </ul> Messi
Ronaldo
UL tag
 used to create Unordered List
 Example:
 <ul Type=“Square”>
 <li> Messi</li>
 <li> Ronaldo</li> Out PUT:

 </ul> Messi
Ronaldo
UL tag
 used to create Unordered List
 Example:
 <ul Tpye=“Disc”>
 <li> Messi</li>
 <li> Ronaldo</li> Out PUT:

 </ul> * Messi
* Ronaldo
OL tag
 used to create Ordered List

 Example:

<ol>
<li> Messi</li>
Out PUT:
<li> Ronaldo</li> 1. Messi
2. Ronaldo
</ol>
OL tag
 used to create Ordered List

 Example:

<ol Type=“a”>
<li> Messi</li>
Out PUT:
<li> Ronaldo</li> a. Messi
b. Ronaldo
</ol>
OL tag
 used to create Ordered List

 Example:

<ol Type=“A”>
<li> Messi</li>
Out PUT:
<li> Ronaldo</li> A. Messi
B. Ronaldo
</ol>
OL tag
 used to create Ordered List

 Example:

<ol Type=“i”>
<li> Messi</li>
Out PUT:
<li> Ronaldo</li> i. Messi
ii. Ronaldo
</ol>
 <ol type=”1” start =”5”>

 <ol type=”a” start =”2”>

 <ol type=”A” start =”4”>

 <ol type=”i” start =”3”>

 M-19

<OL Type=“A”>
<li>Mizan </li>
<li>Rahman </li>
<li>Anika </li>
<ol>

<UL type ="Circle">

<li> Mahin</li>
<li> Nihan</li>
<li> Zarif</li>
<li> Rafin</li>
</ul>
 <UL type ="Circle">
 <li> Mahin</li>
 <li> Nihan</li>
 <li> Zarif</li>
 <li> Rafin</li>
 <ul>
 Home page of ABC college has a list of
different faculties: Sc, B.St and humanities.

 Write HTML code

 What about it?

 b. Sc
 c. B.St
 d. Human
<img> tag
 Used to insert an image in website

 Syntax:
 <img src=“ImageName.extension”>

 Example: Result:
 <html>
 <body>
 <img src=“Car.jpg”>
 </body>
 </html>
 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 = “ ImageName ” >

Tag Attribute Value

<Tag Attribute = “ Value ” >

Explain different parts of the
following tag:
 Source as Attribute

 <img src=“Car.jpg”>

Tag

Image name and File format

As value
<img src="Car.jpg" width="200" height="100">
<img src="abc.jpg" alt="sorry! NOT found">

 * ‘ALT’ for failure to show the image

 Identify different parts
<img src = “ ImageName ” width=“10” height=“15”
alt=“sorry”>
 If an image is kept in a particular location
 Image name is XYZ.jpg

 located in a folder named Picture and the

folder is located in D drive of hard disc

 <img src=“D:\Picture\XYZ.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=“300” height=“200”>
Attribute and value

 <Tag Attribute = “Value”>

 ………………………..
 ………………………..
 </Tag>
Hyper link
 Used to make hyperlink
 Example:
 <html>
 <body>
 <a href=“http://www.google.com”> Click here
</a>
 </body>
 </html>
Result:
Click here

Syntax:
<a href= “ FileName or Source or URL”>…link text……</a>
Opening Tag URL as Value

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

</a>

Link text as content

Closing Tag

Hyper reference as attribute

 Website of Shila’s college provide both way
communication between server and browser.
 She made a website and click “ourboard”.
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

 <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 details of a
company
 <a href=“http://www.twitter.com”>
 Social Network
 </a>
 <a href=“details.html”> click to details</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>

3 Types of Hyper link
 External Hyperlink : go to another
website

 Internal Hyperlink : go to another page

of same website

 Local Hyperlink: go Top or buttom of the

same page
 <a href="#top">go to top</a>
 <a href="#Bot">Bottom</a>
 Link to call home page itself
 <a href="#">Home</a>
 Now these will jump any particular point of your
page: 
 <a href="#tips">Some useful Tips for you! </a>
 ……………….
 <a name=”tips” /a>
 ……………….
The table tag

 <table border=“2”>
 ……………..
 ……………..
 ……………..

 </table>
 Ctreate the table given below

<table border=“2”>

<Tr> </Tr>

<Tr> </Tr>

<Tr> </Tr>

<Tr> </Tr>

</table>
 Create the table given below
<table border="2">

<Tr> <th> Roll </th> <th> Name </th> </Tr> Roll Name

<Tr> <td> 1 </td> <td> Dipu </td> </Tr> 1 Dipu

<Tr> <td> 2 </td> <td> Jashim </td> </Tr> 2 Jashim

</table>
<table border="5">

<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>
<Tr> <td> 103</td> <td> Tareq</td> <td>4.88</td></Tr>
</table>
CB: 2017

 Write HTML code for showing the above stem

 <table border=“1”>
 <tr> <th colspan=“2”>ICT </th></tr>

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

 </table>
You need to click on “Board” for visiting
www.board.edu.bd to see ICT marks
 <table boarder=“1”>
 <Caption> HSC-2019
 </Caption>
 <tr>
 <td align=“Center” colspan=“2”> ICT</td>
 </tr>
 <tr> <td> Subjet</td> <td> <a
href=“http://www.board.edu.bd”>Board</a></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>
 <Table border="3">
 <caption>Students </caption>
 <TR>
 <TH colspan="2"> Dhaka</TH>
 <TH colspan="2"> Gazipur</TH>
 </TR>
 <TR>
 <td> Uttara</td><td> Khelkhet</td>
 <td> Tongi</td><td> Shib bari</td>
 </TR>
 </Table>
 <Table border="2">

<tr> <th colspan="2">ICT </th></tr>

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

<tr> <td> 30</td> <td> </td> </tr>

</Table>

Dhaka
Uttara Tongi Gazipur
<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”>
 <caption><u>Data Communication Medium</u><caption>
 <tr> <th> Name of Medum</th> <td>Type of Medum </td>
</tr>
 <tr><td>Twisted Pair </td><td rowspan=“2”>Wire</td>
 </tr>
 <tr><td>Fiber optic Cable</td>
 </tr>
 <tr> <td>Infrared</td><td>wireless</td></tr>
 </Table>
 <table border="1" cellpadding="10">

 <tr> <td> A </td> <td> B </td> </tr>

 <tr> <td> C </td> <td> D </td> </tr>

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

 <tr> <td> A </td> <td> B </td> </tr>

 <tr> <td> C </td> <td> D </td> </tr>

 </table>
 <table border="1">
 <tr>
 <td bgcolor="RED">January</td>
 <td bgcolor="Yellow">$100</td>
 </tr>
 </table>
Stem: 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>
Stem: DB 2017 : explain basic syntax of the stem,
describe necessary steps to SHOW the stem in
Internet
 <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>
Hyper link
 <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
SL Website
No
1 Social Network
2 Search Engine Hyper link
3 Job portal

<table border=“1”>
<TR> <TH> SL NO</TH> <TH>Website</TH>
</TR>

<TR><Td> 1</Td> <Td><a

href=“http://www.facebook.com”> Social Network</a>
</Td>
</TR>
<TR><Td> 2</Td> <Td> Search Engines
</Td>
</TR>
</table>
Cumilla-19

 Write html code with inserting a picture in the

blank cell
DB 17

 Write the necessary code with HTML in order to see the

information of the 2nd table in Mozilla Firefox
 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.

 <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> </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>
Stem: Click google word for
opening www.google.com
Stem: Ctg 2017

 Write HTML code for test.html of the above

stem .
 Write HTML code so that if we click on
image.jpg to visit www.moedu.gov.bd.
Stem:

Bio-data
Name: ABC

Roll: 120
(A+B)2= A2 + 2AB + B2

 Write HTML code for the stem

 Show different ways to add the

 “Write an Equation” and “Formula” in
separately with the stem
 Ans:
 (A+B) ²= A²+2AB+B²
 <br>, <p>, <DIV>
Explain the website structure of scenerio-1 of the stem.
Write down html code to display the website www.rajukcollege.net
when click on the picture(Monogram.jpg) of scenerio-2 of the stem
and analyze the role of the tag you used.
 
 <a href =“http://www.moedu.gov.bd”>
<img src=“image.jpg”> </a>
Write HTML code

A BC
X T
P Q
Y R S

How can you add picture.jpg instead of X

How can you go to google.com by clicking ‘S’
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> <title>Alor shopan </title></head>
 <body>
 <img src=“Campus.jpg”>
 <UL>
 <li>IT </li>
 <li> Physical Sc</li>
 <li> Biology</li>
 </UL>
 <a href=“Notice Board.html”> click here for view
notice board</a>
 </body>
 </HTML>
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
 ()
 Home Page
 <html>

 <body>
 <a href=“admission.html”> click here to admission</a>

 <a href=“Resut.html”> click here to show the result </a>

 </body>
 </html>
Output?
 <HTML><title>XI-Final Exam</title>
 <body>
 <h2>Rajuk Uttara Model College</h2>
 <table border="2” >
 <tr><td> Name </td><td>Image</td></tr>
 <tr><td> RUMC </td><td>
 <img src=”college.jpg”></td></tr>
 </table>
 </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>
c) What are the HTML code written by the students. Explain
its attributes
d) Write HTML code for the table above.

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
 <html>
 <head>
 </head>
 <body>
 <a href=“http://www.xiadmissionboard.edu.bd”>
 <img src=“C:Picture\logo.jpg” width=“300”
height=“300”>
 </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=“200” height=“300”>
<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.

 Hyper ref attribute URL as value
Link text

<a href=“http\\:www.moedu.gov.bd”> goto

ministry of education </a>

Close anchor tag

Start anchor tag
Stem:
 Teacher discussed about two types of
website during the deliver his lecture in the
class and once he said out of two one is
interactive and other is not. Then he taught
how hyperlink is to be done.
 Write a html code for linking Dhaka board
with your webpage according to the stem.
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.
 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.
 <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>
 </html>
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.
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.
  Rajuk Uttara Model College
  4 wings are:
 i.EM-MS
 ii. EM-DS
 iii. BM-MS
 Iv. BM-DS
Write down HTML code to display the stem into the home page of
your college.
How will you represent 4 wings of the college in tabular form
considering Sl.No and Wings are table head and List of wings as
title of the table.
 C) Draw home page for the code given below:

 <!DOCTYPE html
 <head>
 <title>home page</title><head>
 <body>
 <h1><center>Welcome to my world</center></h1><br><br<br>
 <div align=center>
 <img src="d:\myfolder\myphoto.jpeg" width=100 height=100 alt="My
Picture">
 <br><h2>Personal info..</h2>
 Name: Samin Zaman<br>Roll:1025<br> Class:XII-SC-
C<br>Position:1^st
 <br>Address: Sector:6,Road:10,<u>house no:14</div>
 <a href="biodata.docx">click to see my detailed
information</a></body></html>
 <!DOCTYPE html
 <head>
 <title>home page</title><head>
 <body>
 <h1><center>Welcome to my world</center></h1><br><br<br>
 <div align=center>
 <img src="d:\myfolder\myphoto.jpeg" width=100 height=100 alt="My Picture">
 <br><h2>Personal info..</h2>
 Name: Samin Zaman<br>Roll:1025<br> Class:XII-SC-
C<br>Position:1^st
 <br>Address: Sector:6,Road:10,<u>house no:14</div>
 <a href="biodata.docx">click to see my detailed
information</a></body></html>

 In order to make his website visible in the internet, Samin discussed the
matter with his friend Asif. In reply, Asif suggested Samin to perform some
publishing work.
 Discuss about necessities of Asif’s suggestion
Stem: write HTML code

Picture

Students Info:
Notice Board:
Result:
 <html>
 <Table border=“2”>
 <tr>
 <p align=“Center”>
 <img src=“picture.jpg”>
 <ul type=“square”>
 <li> Student info</li>
 <li> Notic board</li>
 <li> Result:</li>
 </ul>
 </p>
 </tr>
 </table>
 </html>
 <table border="1">
 <tr> <th> Title </th> </tr>
 <tr> <td> Natore <br>
 <img src="xyz.jgp">
 </td> </tr>
 <tr>
 <td><OL Type="A" start="4">
 <li> Pencil </li>
 <li> Pen </li>
 <li> Book </li>
 </OL>
 </td>
 </tr>
 </table>
 <video src="a.mp4" controls></video>