Scribd
Upload
8 views29 pages

Introduction to HTML Basics

Hkgkskgsskhek

Uploaded by

imadaludeen
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views29 pages

Introduction to HTML Basics

Hkgkskgsskhek

Uploaded by

imadaludeen
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Chapter-4

Introduction to Web Design and HTML

Engr. Md. Shohel Rana


Lecturer In ICT
BAF Shaheen College Dhaka
Mobile No: 01751095830
E-mail: [Link]@[Link]
Youtube_channel: Shohel ICT Care
Facebook:
[Link]

1
HTML stands for Hyper Text Markup Language. Basically It is a programming
language used to create webpages. Static website can be created with the help of this
language.
HTML is called Markup Language which is the sum of some markup tags. And the
job of this markup tag is to show how to display different elements on the web page.
What can be done with HTML?
Programmers use HTML to organize text, audio, video, graphics, or animations on
webpages.
File extension of HTML is .html or .htm.
Notepad is used as an HTML editor. Editors like Dream Weaver, Notepad ++ are used
for added benefits.

Tim Barnes-Lee first discovered html in 1990 while working at the


CERN in Geneva. Html 2.0 was released in 1995, html 3.2
in January 1997 and html 4 in December of the same year.
The latest version of html is html 5.

Advantage of HTML: Tim Barner‟s Lee

1. Static website can be easily prepared by HTML.


2. The page prepared by HTML gets loaded easily.
3. It is easy to learn and use.
4. Every browser supports HTML.
5. The website prepared by HTML is cost effective.
6. It is not case-sensitive to programming.
7. It can be written in any text editor.

Disadvantage of HTML
1. Only static webpages can be developed, not dynamic webpages.
2. Security is weak in HTML.
3. There is no system to give input.

HTML Tag: In HTML, the keywords (html, head, title, body, etc.) written in angular
brackets (<> or </> symbols) are called tag or HTML tags. Such as <head> means head
tag.

2
Syntax of Tag
Less than sign + keyword + greater than sign i.e. <keyword>
Each html tag starts with „< >‟ and ends with „</>‟.
„<>‟ is called the starting or opening tag and „</>‟ is called the end or closing tag.
Note that the „/‟ sign is used to end the tag.

HTML syntax: There are some rules for writing the keywords used to compose a
program in any programming language, which is to comply with the program. All these
rules are called HTML syntax.

Types of Tag:
1. Container tag
2. Empty tag
Container Tag: These types of tags having both opening and closing tags are
called container tags.
e.g. <p>…</p>, <b>…</b> etc.
Empty Tag: Those who only have an opening tag and no closing tag are called empty
tags.
e.g. <br>, <hr>, <img> etc. It is also called Void Element element.

HTML element: An HTML element (or component) is formed by an opening tag, the
content between the two tags, and a closing tag.
<p>Rajshahi Govt City College</p>
Here,

• <p> → Opening tag


• Rajshahi Govt City College → Content
• </p> → Closing tag
• All together, this forms an HTML element

Basic structure of HTML:

3
HTML Attribute: An HTML attribute is something that increases the features or
functionality of an HTML tag and provides additional information.

Attribute has two parts - 1) Attribute Name and 2) Attribute Value

Rules for writing HTML attributes:

1. Structure of attribute:
attribute name = “attribute value”
Example: align=“right”
2. HTML attribute is written in opening tag .
3. The attribute has to be written with at least one cell space in opening tag .

<font> Tag:

Attributes of <font> tag

The <font> tag is used to record webpage information with HTML. There are usually
three things to do with the attribute of the <font> tag.

1. Font face: Font face refers to the font family. The font face determines which font to
use for the text of a web page.

Example: <font face=”Times New Roman”> .

2. Font size: Font size is used to present font sizes in different shapes on web pages.

Example: <font size=”15”> .

3. Font color: Font color is used to present fonts in different colors on web pages.

Example: <font color=”green”> .

4
The font tag can also be used with the paragraph tag using the style attribute.

Structure:
<p style=“ font-family: font name; font-size: size number; color: color name”>Text</p>
Example:
<p style=“ font-family: Times New Roman; font-size: 20; color: red”> Text</p>

Code

<html>
<head><title>Font tag</title></head>
<body>
<font face="Times New Roman" size="3" color="red">BAF Shaheen
College Dhaka</font><br>
<font face="Algerian" size="5" color="green">BAF Shaheen College
Dhaka</font><br>
<font face="Verdana" size="7" color="blue">BAF Shaheen College
Dhaka</font>
</body>
</html>
Output:

Code

<html>
<head><title>Font tag</title></head>
<body>
<p style="font-family: Times New Roman; font-size: 20; color:red">
BAF Shaheen College Dhaka</p>
<p style="font-family: Algerian; font-size:20; color: green">
BAF Shaheen College Dhaka</p>
<p style="font-family: Verdana; font-size:20; color: blue">
BAF Shaheen College Dhaka</p>
</body>
</html>
Output:

5
There are three methods of specifying colors in HTML namely-

1. With the name of the color


Common colors like black, white, red, green, blue. When writing color values in
HTML, their names are written directly. The names of 16 basic colors are written
below:

Black Gray Silver White


Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal

2. With the RGB value of the color


The sum of these three colors Red, Green and Blue is rgb. Each has a value from 0
(when there is no color) to 255 (when the color is full). The rgb format is rgb (red,
green, blue). But it is better not to use this method as some browsers do not support
this method. Some of the color determination methods in this method are shown
below-
rgb (255, 255, 255) White
rgb (0,0,0) Black
rgb (255,0,0) Red
rgb (0,255,0) Green
rgb (0,0,255) Blue

3. With the hexadecimal value of the color


Minimum value is 00 in hexadecimal system which is 0 in RGB system and maximum
value is FF which is 255 in RGB system. A hexadecimal value starts with a hash " # "
sign and then 3 pairs of 6 hexadecimal numbers are written. The first hexadecimal
number pair specifies the red color, the second hexadecimal number pair specifies the
green color, and the third hexadecimal number pair specifies the blue color.
The code will look like below –
That is, the format is #RRGGBB
#FFFFFF White
#000000 Black
#FF0000 Red
#00FF00 Green
#0000FF Blue
6
Text Formatting tag:
The tags used to display text in different formats are called formatting tags. The
format in which the text should be displayed should be written between the opening tag
and closing tag of the formatting tag. Following is the usage of various formatting tags-

Tag Explanation
<b>……………….</b>
<strong>…………<strong> Makes text thick or bold.
<i>…….</i>
<em>…….</em> Makes text italic.
<u>……..</u>
<ins>…….</ins> Underlines the text.
<del>……</del>
<strike>…….</strike>
<s>………….</s> Used to mark the cut in the middle of
the text.
<big>……<big> Makes text larger.
<small>……</small> Makes text smaller.
<mark>……</mark> Makes text mark.
<sub>……..</sub> Makes text subscript.
<sup>…….</sup> Makes text superscript.

Code Output
<html> Bold text
<head> Italic text
Underline text
<title>Formatting Tag</title> Strike text
</head> Subscriptedtext
<body> Superscripttext

<b>Bold text</b><br>
<i>Italic text</i><br>
<u>Underline text</u><br>
<s>Strike text</s><br>
Subscripted<sub>text</sub><br>
Superscript<sup>text</sup><br>
</body>
</html>

7
Subscript Tag: If you want to write a text one space lower than normal, you have to
use Subscript tag.
The structure of Subscript tag is: <sub>…………..</sub>

For Example:
H2SO4
2H2+O2=2H2O
ABlog10X

<html>
<head>
<title>Some example of subscript tag</title>
</head>
<body>
H<sub>2</sub>SO<sub>4</sub> <br>
2H<sub>2</sub> + O<sub>2</sub> = 2H<sub>2</sub>O<br>
A<sub>B</sub>log<sub>10</sub>X
</body>
</html>

Superscript tag: If you want to write a text one space upper than normal, you have to
use Superscript tag.

The structure of Superscript tag is: <sup>…………...</sup>

For Example:
E=mc2
(a+b)2 = a2+2ab+b2
(a+b)3=a3+3a2b+3ab2+b3

<html>
<head><title>Some example of superscript tag</title></head>
<body>
E=mc<sup>2</sup> <br>
(a+b)<sup>2</sup> = a <sup>2</sub> +2ab+b<sup>2</sup> <br>
(a+b)<sup>3</sup>=a<sup>3</sup>+3a<sup>2</sup>b+3ab
<sup>2</sup> +b<sup>3</sup>
</body>
</html>

8
If subscript and superscript tags are used together in any content, subscript must be used
first and superscript after.

For Example:

a12 +b23

(a1 + b1)3 = a13 + 3a12b1 + 3a1b12 + b13


c
ab

<html>
<head>
<title>Some example of superscript tag</title>
</head>
<body>
a<sub>1</sub><sup>2</sup>+b<sub>2</sub><sup>3</sup> <br>
(a<sub>1</sub>+b<sub>1</sub>)<sup>3</sup>=a<sub>1</sub><sup>3</sup>+3
a<sub>1</sub><sup>2</sup>b<sub>1</sub>+3a<sub>1</sub>b<sub>1</sub>
<sup>2</sup>+b<sub>1</sub><sup>3</sup> <br>
a<sup>b<sup>c</sup></sup>
</body>
</html>

Image tag:

We add various types of image or picture to make the webpage beautiful and easy to
understand. The <img> tag is used to add an image or picture to a webpage. The <img>
tag contains only attributes and has no closing tag.

Images are usually added in the following formats to webpages-

 JPG (Joint Photographic Group)


 JPEG (Joint Photographic Experts Group)
 PNG (Portable Network Graphics)
 GIF (Graphics Interchange Format)
 SVG (Scalable Vector Graphics)
 BMP (bitmap)

9
Attributes of Image Tag:

Attributes Value Use


src Image_path/ Used to determine the url or address of
[Link] the image.
alt Alternative text The „alt‟ attribute is used to specify an
alternate text for an image. If the browser
fails to load the image for some reason, it
will display the alternate text instead of
the image.
width Any number (pixel) Used to set the width of the image.
height Any number (pixel) Used to set the height of the image.
border Any number (pixel) Used to write the amount of border
around the image.
align Left, right, middle etc Indicates the position of the image or text.
title Content related text Sets the title of the image. That is, after
the name is loaded on the page, the name
can be seen by hovering over the image.
hspace Any number (pixel) Used to specify the amount of space left
and right of the image.
vspace Any number (pixel) Used to display blank space above or
below the image i.e. vertically.

Structure of <img> Tag:


<img src = “path or URL” >

Example-4: The HTML code required to display the image named [Link] stored in
the photo folder of E drive, in a 200×300 size on a webpage stored on the desktop-

<html>
<head>
<title>Image</title>
</head>
<body>
<img src="E:\photo\[Link]" width="200" height="300">
</body>
</html>

Hyperlink: Linking or connecting one web page to another web page / website is called
hyperlink.
10
Linking can be done with both text or images. Usually when you move the mouse
pointer over a link, it changes shape to a hand icon. Usually linked text is underlined
and colored blue.

Advantages of hyperlinks:

1. By clicking on linking text or image one can go to different pages of the same
website or from one website to another website.
2. Related information can be displayed quickly.
3. Saves browsing time.

Syntax of hyperlink is:

<a href = "url" > Linking Text or Image </a>


a - anchor tag, href = hyper reference. ; URL is a specific path or address.

Types of hyperlink:

1. Internal Hyperlink: Creating a link from one web page of a website to another
web page located on the same server is called an internal hyperlink. Relative
URLs are used for internal links. Relative URL does not need to specify protocol
and host name. Only file names located on the server are required.

For example: <a href=”shohel [Link]”> Click here</a>


Clicking here with the mouse pointer on the Click here text will display the shohel
[Link] file on the same server. If the linking is not with the text but with the
image named [Link]

The code would have been –


<a href=”shohel_info.html”><img src=" [Link]" ></a>

2. External Hyperlink: Creating a link from one web page to another web page
located on a separate server is called an external hyperlink. Absolute URLs are used
for external links. The absolute URL needs to specify the protocol, host and file
name.

For example: <a href=”[Link] Go to facebook</a>


Here, if you click the mouse pointer on the Go to facebook text, the
[Link] website will be displayed.

11
Heading tag and its use:

Heading tag is used to write the title of a document or paragraph through HTML. There
are total six types of heading tags in HTML they are - <h1> </h1> , <h2> </h2> , <h3>
</h3> , <h4> </h4> , <h5> </h5> and <h6> </h6>.

h1 is the largest heading followed by h6 the smallest

Example:

Code
<html>
<head>
<title> Heading tag</title>
</head>
<body>
<h1>Pabna University of Science and Technology </h1>
<h2> Pabna University of Science and Technology </h2>
<h3> Pabna University of Science and Technology </h3>
<h4> Pabna University of Science and Technology </h4>
<h5> Pabna University of Science and Technology </h5>
<h6> Pabna University of Science and Technology </h6>
</body>
</html>

Output

12
There are two methods for presenting Bengali text on webpages-

Method-1:

1. Specifying Bengali font name in face attribute in <font> tag.


For example: <font face=”sutonnyMJ”>
2. Use any editor to write what you want to write in Bengali and copy it inside the
<font> tag to present [In this case the Bengali text will not appear readable in English.]
3. Save the HTML document.

Code

Output

Method-2:

1. Bengali written directly within the <font> tag.


[Avro keyboard must be installed in this case.]
2. To select unicode or UTF-8 in Encoding while making the document will be [But in
this case it will display in SolaimanLipi font.]

Code

Output

13
Marquee Tag Through this tag the text can be moved from one side of the screen to the
other. The format of this tag is:<marquee>……………</marquee>

Non-breaking Space: The most common character entity in HTML is the non-breaking
space. By default, HTML removes spaces within text. If the text contains 10 spaces,
HTML will truncate 9 of them. So to add lots of spaces to the text &nbsp; Character
are used.

pre tag:
The pre tag is used to show a text exactly as it should be. This tag is named after pre
from the word preformatted. The word preformatted means: a predetermined format.

Example:

Code Output
<html> Line1 Line1 Line1
<head>
<title>Before use pretag</title>
</head>
<body>
Line1
Line2
Line3
</body>
</html>

14
Notice, I wrote line1, line2, line3 in the code but it doesn't show in the output. Showing
side by side: Line1 Line2 Line3. Now to display this text as it is, the text should be
placed inside the pre tag. That is, the code will be like below:

Code Output
<html> Line1
<head> Line2
<title>After use pretag</title>
</head> Line3
<body>
<pre>
Line1
Line2
Line3
</pre>
</body>
</html>

List Tag:
Many times it is necessary to use List tag to display the content of the webpage in the
form of list to present it beautifully and visually.

List tags are mainly of three types:


1. Ordered List
2. Unordered List
3. Definition List

Required tags and attributes of list tags:

Tag Explanation Attributes


<ol>……</ol> Determines the order list.
<ul>……</ul> Defines an unordered list. type = ” ”
<li>…….</li> Defines list items. start=” ”
<dl>…….</dl> Defines the definition list. reversed=” ”
<dt>…….</dt> Definition defines the term. /reversed
<dd>……..</dd> Definition defines description.

15
[Link] List:

A list in which the list contents are arranged in numerical or alphabetical order is called
an ordered list. Ordered list starts with <ol> tag and each list item starts with <li> tag.
Paragraphs, line breaks, images, links and other lists can be placed inside this list item.
We can easily change the type of number displayed in the list item using the type
attribute-

<ol type="1|a|A|i|I">

Type Description Examples


1 Default value - Decimal numbers 1, 2, 3, 4
a Alphabetically ordered (lowercase) a, b, c, d
A Alphabetically ordered (uppercase) A, B, C, D
i Roman Numerals (lowercase) i, ii , iii, iv
I Roman Numerals (uppercase) I, II, III, IV

Code Output
<html> Numbered with numbers
<head><title>HTML Ordered List</title>
</head> 1. Windows
<body> 2. Linux
<h4> Numbered with numbers </h4> Numbered with uppercase letters
<ol type = "1">
<li>Windows</li> A. Windows
<li>Linux</li> B. Linux
</ol> Numbered with lowercase letters
<h4> Numbered with uppercase letters </h4>
<ol type = "A"> a. Windows
<li>Windows</li> b. Linux
<li>Linux</li>
</ol> Numbered with uppercase roman
<h4> Numbered with lowercase letters
numbers
</h4>
<ol type = "a"> I. Windows
<li>Windows</li>
<li>Linux</li> II. Linux
</ol>
<h4> Numbered with uppercase roman
numbers </h4>
<ol type = "I">
<li>Windows</li>
<li>Linux</li>
</ol>
</ol>

16
<h4> Numbered with lowercase roman Numbered with lowercase roman numbers
numbers </h4>
<ol type = "i"> i. Windows
<li>Windows</li> ii. Linux
<li>Linux</li>
</ol>
</body>
</html>

The start attribute is used to specify the number position at which the list item of the
ordered list will start. If the list item in the ordered list starts at position 4 then-
Code Output
<html> Numbered with numbers
<head>
<title>HTML Ordered List</title> 4. Windows
</head> 5. Linux
<body> Numbered with uppercase letters
<h4> Numbered with numbers </h4>
<ol type = "1" start=”4”> D. Windows
<li>Windows</li> E. Linux
<li>Linux</li>
Numbered with lowercase letters
</ol>
<h4> Numbered with uppercase letters </h4> d. Windows
<ol type = "A" start=”4”> e. Linux
<li>Windows</li>
<li>Linux</li> Numbered with uppercase roman
</ol> numbers
<h4> Numbered with lowercase letters </h4>
IV. Windows
<ol type = "a" start=”4”>
<li>Windows</li> V. Linux
<li>Linux</li>
</ol> Numbered with lowercase roman numbers
<h4> Numbered with uppercase roman iv. Windows
numbers </h4>
<ol type = "I" start=”4”> v. Linux
<li>Windows</li>
<li>Linux</li>
</ol>
<h4> Numbered with lowercase roman numbers
</h4> <ol type = "i" start=”4”>
<li>Windows</li>
<li>Linux</li>
</ol>
</body>
</html>

17
Code Output
<html>
<head> Random ordered list
<title>Some important ordered list</title>
</head> 100. Mango
<body> 200. Orange
<h4> Random ordered list</h4>
<ol type=”1” start=”100”> 300. Lichi
<li>Mango</li><ol>
<ol type=”1” start=”200”>
<li>Orange</li></ol> Number will show reversely
<ol type=”1” start=”300”>
<li>Lichi</li></ol> 4. Rajshahi
<h4>Number will show reversely</h4>
<ol type="1" start="4" reversed > 3. Naogaon

<li>Rajshahi</li> 2. Bogra
<li>Naogaon</li>
<li>Bogra</li> Series of a letter
</ol>
<h4>Series of a letter</h4> aa. Mouse
<ol type="a" start="27">
<li>Mouse</li> ab. Printer
<li>Printer</li>
<li>CPU</li> ac. CPU
</ol>
</body>
</html>

[Link] List:

A list in which the list contents are marked with bullet marks is called an unordered
list. Unordered list starts with <ul> tag and each list item starts with <li> tag.
Paragraphs, line breaks, images, links and other lists can be placed inside this list item.
We can easily change the type of bullet displayed in the list item using the type
attribute-
<ul type="disc|circle|square">

Type Description
none No list item
disc Default. A filled circle
circle An unfilled circle
square A filled square

18
Some examples of unordered lists are given below:
Code Output
<html>
<head> For a filled circle
<title> HTML unordered List</title>
 C
</head>
 C++
<body>
 Java
<h4>For a filled circle</h4> For a hollow circle
<ul type="disc">
<li>C</li> o C
<li>C++</li> o C++
<li>Java</li> o Java
</ul>
<h4>For a hollow circle</h4> For a filled square
<ul type="circle">
<li>C</li>  C
<li>C++</li>  C++
<li>Java</li>  Java
</ul>
<h4>For a filled square</h4>
<ul type="square">
<li>C</li>
<li>C++</li>
<li>Java</li>
</ul>
</body>
</html>

FBW

Types of Website structure Ordered list

III. Linear E. Coffee

IV. Tree F. Tea

V. Web linked G. Milk

VI. Hybrid

19
Web programming language Types of list tag

150. HTML aaa. Ordered list

250. CSS aab. Unordered list

350. PHP aac. Definition list

Nested list t When another list is created within a list, it is called a nested list.

Code Output

<html>
Nested list
<head>
<title> HTML nested D. Chapter Four
List</title>  Lesson One
</head>  Lesson Two
<body> E. Chapter Five
<h4>Nested list</h4>
ii. Lesson Two
<ol type="A" start="4">
iii. Lesson Three
<li>Chapter Four
<ul type="square"> F. Chapter Six
<li>Lesson One</li>
<li>Lesson Two </li>
</ul>
</li>
<li>Chapter Five
<ol type="i" start="2">
<li>Lesson Two</li>
<li>Lesson Three </li>
</ol>
</li>
<li>Chapter Six</li>
</ol>
</body>
</html>

20
FBW
Nested list

D. Chocolates
 Dairy milk
 Kit Kat

IV. Fruits

ii. Apple
iii. Grapes

10. Vegetables

HTML Definition Lists:


HTML Definition Lists are used to provide some text or information about the elements
of the list.
For that there are <dl> , <dt> and <dd> Tag| Definition Lists are created by <dl>.
Definition terms and definition descriptions are defined using <dt> and <dd> tags.

Code
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt>HTTP</dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

Output
HTML
This stands for Hyper Text Markup Language
HTTP
This stands for Hyper Text Transfer Protocol

21
HTML Table: Tables are a way of arranging or sorting large amounts of data.

Requirements of table in HTML: There is some information that is presented in the


form of a table instead of paragraphs or boxes, which is more meaningful and pleasant.
For example, It is better to present the students in a class in the structure of a table in
order to publish their roles, names, categories and numbers obtained on the web.

Required tags in the table:

Tag Explanation
<table>……</table> A table is set.
<th>….</th> Indicates the title of the table row.
<tr>……</tr> The table is divided into rows.
<td>……</td> Tables are divided into data cells.
<caption>….</caption> This tag is used if the table has a name. However,
head tags can be used instead of these tags.

Required attributes of the table:

Attributes Explanation
border = “ ” Used if the table has a grid line.
rowspan = “ ” <td> Table cells can be split into multiple rows using rowspan
within the tag.
colspan = “ ” <td> Table cells can be divided into multiple columns using
colspan within the tag.
cellspacing=” ” Used to determine spaces from one cell to another.
cellpadding=” ” Inside a cell, the desired amount of space can be placed in the
cell.

22
Example-1:

Co d e Output
<html>
<head>
<title> </title>
</head>
<body>
<table border="01" cellspacing="0">
<caption>Student</caption>
<tr> d. Write the HTML code to display
<th>Roll</th>
the stimulus table on the webpage.
<th>Name</th>
</tr>
<tr>
<td align="center">110601</td>
<td align="center">Shohel</td>
</tr>
<tr>
<td align="center">110602</td>
<td align="center">Rana</td>
</tr>
</body>
</html>

23
Example-2:

Code Output
<html>
<head>
<title> </title>
</head>
<body>
<table border="01">

<tr>
<td align="center" colspan="02">
GSM and CDMA Technology
</td> d. Write the HTML code to
</tr> display the stimulus table
<tr> on the webpage.
<td align="center" rowspan="03">GSM</td>
<td>Robi</td>
</tr>

<tr>
<td align="right">Teletalk</td>
</tr>
<tr>
<td>Airtel</td>
</tr>
<tr>
<td>CDMA</td>
<td align="center">Citycell</td>
</tr>
</table>
</body>
</html>

24
Example-3:

Code Output
<html>
<head>
<title> </title>
</head>
<body>
<table border="01" cellspacing="0">

<tr>
<td align="center" colspan="02"> d. Write the HTML code to
BAF Shaheen College Dhaka get the output like the
</td> stimulus image, where an
</tr> image named [Link] will
<tr>
be displayed and clicking
<td>x<sup>2</sup>+y<sup>2</sup><br>
H<sub>2</sub>SO<sub>4</sub></td> on FB will open facebook.
<td align="center" rowspan="02">
<img src="[Link]">
</td>
</tr>
<tr>
<td><a href="[Link]
FB</a></td>
</tr>
<tr>
<td>
<ol type="1">
<li>CSE</li>
<li>ICT</li>
</ol>
</td>
<td><br></td>
</tr>

</table>
</body>
</html>

25
Example-4:

Code Output
<html>
<head>
<title> </title>
</head>
<body>
<table border="01" cellspacing="0">
<caption>HSC-2022</caption>
<tr>
<td
align="center"colspan="02">ICT</td>
</tr>
<tr height="150">
<td align="center">Subject</td> d. Write the HTML code to get the
<td align="center"> output like the stimulus image,
<a where clicking on Board will
href="[Link] open [Link].
</td>
</tr>

</table>
</body>
</html>

26
Example-5:

Student Name Compulsory Optional


Harry Porter Bangla English ICT Physics
Math
Biology

d. Write the html code to create the table that will be created if all the rows of stimulus
table are converted to columns and all columns are converted to rows.

In fact, for this type of question, you should think like this by equalizing the row
columns for easy understanding –

Student Name Compulsory Optional


Harry Porter Bangla English ICT Physics
Math
Biology

After converting to Row-Column and Column-Row the modified table is as follows:

27
Code Output
<html>
<head>
<title> </title>
</head>
<body>
<table border="01" cellspacing="0">

<tr>
<td align="center">Student Name</td>
<td align="center" colspan="03">Harry
Porter</td>
</tr>
<tr>
<td align="center"
rowspan="03">Compulsory</td>
<td colspan="03">Bangla</td>
</tr>
<tr>
<td colspan="03">English</td>
</tr>
<tr>
<td colspan="03">ICT</td>
</tr>
<tr>
<td align="center">Optional</td>
<td>Physics</td>
<td>Math</td>
<td>Biology</td>
</tr>
</table>
</body>
</html>

28
Steps to publish a website:

1. Domain Name Registration: Select a beautiful name that is easy to remember and
makes sense and do the domain registration of that name.

2. Web Page Design: The web page should be designed. In this case, it is better to take
the help of professional web designers. There are many companies that design web
pages for money.

3. Website hosting on web server: After completing domain registration and web page
design, websites should be hosted on a reliable server. There are many organizations
that provide this hosting service for a fee.

4. Web site linked to search engine: This step is not essential. The website should be
linked to the search engine for more promotion.

29

You might also like