html bangla

54
| | | | ( HTML Tut or i al i n ( HTML Tut or i al i n ( HTML Tut or i al i n ( HTML Tut or i al i n Bangl a) Bangl a) Bangl a) Bangl a) (Elements) ( Tag) ( Attributes) ( Paragraph) (Heading) (List) (Font) (Link) - - (Entity) (Comments) (Images) (Tables) (Colors) (Background) (Frame) (Layout) (Embed Music) (Vedio) (body) (Div) ++ (Form) (Upload) : Hypertext Markup Language. ,

Upload: bhorerpakhi

Post on 09-May-2015

616 views

Category:

Education


22 download

TRANSCRIPT

Page 1: Html bangla

��������� ������ �� ��������� ������ �� ��������� ������ �� ��������� ������ �� | | | | ������ ������ ������ ������ ( HTML Tut or i al i n ( HTML Tut or i al i n ( HTML Tut or i al i n ( HTML Tut or i al i n Bangl a)Bangl a)Bangl a)Bangl a) �������������������������������� ����� ������ ������ ������ �

������ (Elements) �� ( Tag)

������� ( Attributes)

������ ( Paragraph)

������ (Heading)

��� ���

���� (List)

��� ���

�� (Font)

���� (Link)

�-����

�-���� ����

���� (Entity)

� �� (Comments)

!�� (Images)

���� (Tables)

�� (Colors)

���"�# (Background)

�$� (Frame)

��%� (Layout)

����&� (Embed Music)

�'��( (Vedio)

��� (body)

��' (Div)

��) ( ����

��� ( �* ��

+++++

��, (Form)

�- ��)

�- ���.

����( ��

%/��� (Upload)

0/��� ��1

��2���2���2���2� ��������: ��&(.�����&(.�����&(.�����&(.��� %��%��%��%��

"�#$� ��������� ��"�#$� ��������� ��"�#$� ��������� ��"�#$� ��������� ������ �� ����� �� ����� �� ����� �� �

• �������� �� �3, 4�� Hypertext Markup Language.� ��� �*"��� ������ & �.,��,%/ ������ &।

Page 2: Html bangla

• (�.� ��'�/� 4�� 4�� �� ������ & � +�� %�� '�'�� ��2�� 4��।��� � ��2 2�� +4&। • � ��2��� %/�� �� (�.� �/& 6��7 ���� /����।��/� 8�� �+�+�+ ���2� �4�� 9 �/&��� %���� *� ����

/����

• ��/� &'�:�;� /� � ���2 �� ���<���� ���� %/�� 9 (�.� �/&� ������ 4(. �=�� 4�।+����>

PHP+Database ��2�� %/�� /=�,? ����+ Driven WebSite 6��7 ���� /����।

• webcoachbd.com �� �����.� ���� /@�� %/�� ���. �������� ��2�� /����।

�8 �&��+ ���� �������� ��2��(�3,�% �������� ��� ��3. ��2���)

��/��।Notepad open ��� 6��7 �4�।�8�4�� ��� � �� ��/�� ���.� ���� ���� /�� ��� ��� ���'A� ����� +��� �����

�8�� Netbeans or Dreamweaver.%� 8�� �0�(�.'� � ��&� ��'B� 3�� �4�� �4�� �2�� ���� ���� /���। �������� ��2�� �8 �C���� '�'�� &� ����-

• �������� ������(Elements)

• �������� ��(Tag)

• �������� �������(Attribute)

� ��>.���� ��,� /��� /������� ��D��� ��. 4� >>

��������� ����&� ��������� ����&� ��������� ����&� ��������� ����&� ������ �� ������ �� ������ �� ������ �� ( HTML El ement s)( HTML El ement s)( HTML El ement s)( HTML El ement s) ��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

������+������+������+������+(Elements): ������+ 4� HTML �� ��� ��F��G�।�� HTML page �� *���� �-�� ����� ��,� ���।������+ ���� ��(tag) �� �H��� 6��7। HTML ���������� ���� D�� ������।+���!� 8 %/�� ���2� +��� Web

page � ������ � 4�� /�� Paragraph text, ��� ����,���'���� ���� ����� +� ��!�� elements �� �/&��। ��� ������(Element) ��� ���� ��� ���. �I�। ���� ��� ��(opening tag) ,������ �� H���J � ��� ��� ���> �K

��� ��(closing tag) ।

1. <p> - opening paragraph tag

2. Element Content - paragraph words

3. </p> - closing tag

*���� Web page �� ���� *�.&�7. ��� ������(Element) 3�� ����� 4��L: HTML,head, title ��� body

elements । ����� ��>�. ���� %���� �� 4�.�!।

Page 3: Html bangla

<html> Element...</html>

+�� *3�� HTML ��2� ������ HTML ��C� *3�� ��� ���> less than ( greater than ( < >) ��M ���� 4.। �8��:

<html> । ��� ��!� ��2� /� ���> </html> ��� ���� 4��। �3,% <html> Welcome to Bangladesh </html>।Welcome to Bangladesh �� ��2� Web page � *���� 4��।%�� 2�� +4�& Notepad � ���2 Web page 6��7���� /��। �&�� %���� Notepad Open ���� 4��। *3��

start ���� All Programs > Accessories >Notepad

��/� Notepad 4�� /� ���N� ���� ��2�� 1.<html> 2.Welcome to Bangladesh 3.</html>

�'�� ��2� /� Notepad �� ��� ���� 4�� save � �O� ��� ��/� index.html ��� save ���।

�+' �� ������ Double click ��� open ���� । ��2�� �8 ��2� Browser � open 4�.�!। 2�� +4�& �� web

Page 6��7 4�. ����। <head> element

��� �P��� head, �P��� +Q�K ��E��� H�� ��.। <head> elements 8 �/�&� header ����,� ���। head

elements �� ��H� �2 �� +�+�� ��&�� *���,� 4. �। %�� ��� ������ �� �H��� *�� ���� /��। <title> element

<head> ������ �� ��R <title> ������ �2�� 4.। �8� �C���� title elements �� opening (<title>)���

closing(</title>) tag �� ��H� ��2 4. � browser �� ��� � ������ �4+�� *���,� 4.। 1.<html> 2.<head> 3.<title> My WebPage!</title> 4.</head> 5.</html>

<body> element

body element 8 web page �� *���,� +�� ��>. ���� H�� ���। �8 +� ��>. ���� %�� web page � ��2�� �� �

body element �� �� ��H� �2�� 4.। 1.<html> 2.<head> 3.<title>My WebPage!</title> 4.</head> 5.<body> 6.Hello World! All my content goes here! 7.</body> 8.</html>

�� ������� ��/��� ��/ �/1 ��� .html extension ��� �+' ��� �8��� ��&�� 2���� ��� ���&� 6��7 *3� (� � �/&

��2��।

Page 4: Html bangla

��������� �+�# ������ �� ��������� �+�# ������ �� ��������� �+�# ������ �� ��������� �+�# ������ �� ( HTML Tag Tut or i al i n Bangl a)( HTML Tag Tut or i al i n Bangl a)( HTML Tag Tut or i al i n Bangl a)( HTML Tag Tut or i al i n Bangl a) ��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

82� %/�� �������� �P��� �/� 4�� ��� , �� 4�� ��� +� +�. %/�� �� ��2�� /���। �� ��� '�� *���,� 4�� �8�

paragraph ��2�� paragraph �� ���, ���� ��2�� ���� �� ���। �� �� *H� ���� ��� %�!

�. ���� ��� ��(opening tag)

2.H���J � ���(contents)

�.��> ��� �� (closing tag)।

�������� �� �� �H��� %/�� web page � %/�� /!G �� ��, /S�� /���। 1.<p>A Paragraph Tag</p>

�� �� �T, �! 4��� �U� 4(. ����। ���� %�� ��� ���� �� ��2�� 4��। 1.<body> Body Tag (acts as a content shell) 2.<p>Paragraph Tag</p> 3.<h2>Heading Tag</h2> 4.<b>Bold Tag</b> 5.<i>Italic Tag</i> 6.</body>

CLOSI NGCLOSI NGCLOSI NGCLOSI NG �+�#�+�#�+�#�+�# 2�3�2�3�2�3�2�3� �+�#�+�#�+�#�+�#::::

��!� ��!� �� %�! 8��� closing tag �� � *� &� ���। �� ��� ������ H�� ��� �।�+ �� � 4�� line break tag ��� � <br/> ���/ *�� �� 4 । 8 ����> '�� ���4� �� 4 । �3,% ��� ��� ��2 �� ��� �/� ��� 4�� ��2 ���� ���

&�� � �� � ���4� �� 4 ।

%�� ��!� �� %�! 8����� ����>'�� ���4� �� 4. �8�� ���& ��, ��/� ��। 1.<img src="/../mypic.jpg" /> -- Image Tag 2.<br /> -- Line Break Tag 3.<input type="text" size="12" /> -- Input Field *��,�:

--Line Break--

Page 5: Html bangla

������������������������������������ ��5�6���5�6���5�6���5�6� ������ �������� �������� �������� �� ( HTML At t r i but e t ut or i al i n Bangl a)( HTML At t r i but e t ut or i al i n Bangl a)( HTML At t r i but e t ut or i al i n Bangl a)( HTML At t r i but e t ut or i al i n Bangl a)

��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

�� �� +V+�� ��� &�� ������ ���4� �� 4.। H��� 8�� %�� ��� ���� 6��7 ��� ��� attributes ���4� ��� ����

�� *W, �X� I� ���� /��। %� attributes value ���. ���� �� *W ( �X�� �� ���� /��। 1.<tag attributes ="value" attributes ="value">

1.<table width="150" height="100">

Class � id attribute �� ���4� *. ��� ��� ��!� �'Y� %�!। Class � id attribute +�+�� ������ ����� ���'� ��� ��� ��� /�,� � ��� ���� '� ��� %�! ����> ��� &'�:; ,�+�+�+ (����� +Z��, /���� ����� � � %���� ��

4�.�!। 1.<p>Paragraph type 1 Italics</p>

2.<p>Paragraph type 2 Bold</p>

*��,�

Paragraph type 1 Italics

Paragraph type 2 Bold

��������� 9:� ��5�6��������� 9:� ��5�6��������� 9:� ��5�6��������� 9:� ��5�6� ( HTML NAME ATTRI B� ( HTML NAME ATTRI B� ( HTML NAME ATTRI B� ( HTML NAME ATTRI BUTE)UTE)UTE)UTE)

Name attribute � Class � id attribute 4�� �'Y। Name attribute � *.� �, � � ����� ��/� �������� +�3 ��2

8.। 1.<input type="text" name="TextField" />

*��,�:

�� attribute � TextField *��,��� ��>�. '� ��� ��� ��� /�,� � ��� �� ���� ���� ����(javascript , css)

��������� ����� ��5��������� ����� ��5��������� ����� ��5��������� ����� ��5�6� �6� �6� �6� ( HTML( HTML( HTML( HTML---- TI TLE ATTRI BUTES)TI TLE ATTRI BUTES)TI TLE ATTRI BUTES)TI TLE ATTRI BUTES)

�� attribute � ��� �������� ������ �� ������ ��� �! popup �- 8�[ ��� ��� '�� 8�[ ��� 82� (� � �/�& 9

�������� �/� ��+ �2 4. �2� �! popup �-� *��,� ���। <h2 title="Hello There!">Titled Heading Tag</h2> *��,�

Ti t l ed Headi ng TagTi t l ed Headi ng TagTi t l ed Headi ng TagTi t l ed Headi ng Tag

��������� ����: ��5��������� ����: ��5��������� ����: ��5��������� ����: ��5�6� �6� �6� �6� ( HTML( HTML( HTML( HTML---- ALI GN ATTRI BUTES)ALI GN ATTRI BUTES)ALI GN ATTRI BUTES)ALI GN ATTRI BUTES)

8�� %/�� �������� +� �� ��W� /����, � ���� �� ��� � align attribute ���. ���� /���। align ���'Y '�� ��

Page 6: Html bangla

8. �8�� left, right & center । ���\ �4+�� left align � ���,��� 3��। 1.<h2 align="center">Centered Heading</h2>

Cent er ed Headi ngCent er ed Headi ngCent er ed Headi ngCent er ed Headi ng

1.<h2 align="left">Left aligned heading</h2>

2.<h2 align="center">Centered Heading</h2>

3.<h2 align="right">Right aligned heading</h2>

Lef t al i gned Lef t al i gned Lef t al i gned Lef t al i gned headi ngheadi ngheadi ngheadi ng

Cent er ed headi ngCent er ed headi ngCent er ed headi ngCent er ed headi ng

Ri ght al i gned headi ngRi ght al i gned headi ngRi ght al i gned headi ngRi ght al i gned headi ng

GENERI CGENERI CGENERI CGENERI C ATTRI BUTES:ATTRI BUTES:ATTRI BUTES:ATTRI BUTES:

Attribute ���. (� ��/& �� +Z��,'�� �1��& �� 8.। ���� ����� ��!� ������ ��. 4� 8 ���� HTML Tag �� +�3

+4�& ���4� �� 8.।

Attribute Options Function

align right, left, center +� � (Horizontally) aligns tags

valign top, middle, bottom ��](Vertically) aligns tags

bgcolor numeric, hexadecimal, RGB values Element �� background color �����, ���।

backgroundURL Background image �/� element �����, ���।

id ���4���7� ����,� ���8.7

Element �� Name 8 Cascading Style Sheets (css)

+�3 ���4� �� 4.।

class ���4���7� ����,� ���8.7

Element �� �^�7����+ 8 Cascading Style Sheets (css)

+�3 ���4� �� 4.।

width Numeric Value Tables, images, or table cells �� width ����,� ��� ।

height Numeric Value Tables, images, or table cells �� height ����,� ��� ।

Page 7: Html bangla

title ���4���7� ����,� ���8.7 %/�� elements �� "Pop-up" title ।

��������� A+���B�C ������ �� ��������� A+���B�C ������ �� ��������� A+���B�C ������ �� ��������� A+���B�C ������ �� ( HTML ( HTML ( HTML ( HTML Par agr aph Tut or i al i n Bangl a)Par agr aph Tut or i al i n Bangl a)Par agr aph Tut or i al i n Bangl a)Par agr aph Tut or i al i n Bangl a) ��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

��� ��2 �&�� *�� ��� �U�_ /��"� �� ���4� �� 4.। �� 2��� +H�� ��� ��E���। <p> �� �� ������ (/��"�) �����, �� 4.। �� �� ���4� ��� ��� /��"� ��-� �/�� ���� ������ �� ���

+J�` 4.। 1.<p>Avoid losing floppy disks with important schoo l...</p> 2.<p>For instance, let's say you had a HUGE school. ..</p>

*��,�: Avoid losing floppy disks with important school/wor k projects on them. Use the web to keep your content so you can access it from any where in the world. It's also a quick way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far)it is easy. For instance, let's say you had a HUGE sc hool or work project to complete. Off hand, the easiest way to transfer the documents from yo ur house could be a 3.5" floppy disk. However, there is an alternative. Place your docum ents, photos, essays, or videos onto your web server and access them from anywhere in t he world.

��������� A+���B���������� A+���B���������� A+���B���������� A+���B�CCCC---- F��G�C�H: F��G�C�H: F��G�C�H: F��G�C�H: ( HTML PARAGRAPH ( HTML PARAGRAPH ( HTML PARAGRAPH ( HTML PARAGRAPH –JUSTI FI CATI ON)JUSTI FI CATI ON)JUSTI FI CATI ON)JUSTI FI CATI ON)

( �, �P���� � %�� �8'�� ��� ��2�� justify ��� +����� +�� ���� ����� '�� �������� � justify ���4� ���

��� �& ���� /��। 1.<p align="justify">For instance, let's say you had a H UGE school or work...</p>

*��,�:

For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

��������� A+���B���������� A+���B���������� A+���B���������� A+���B�CCCC---- ��K����K ��K����K ��K����K ��K����K ( HTML PARAGRAPH ( HTML PARAGRAPH ( HTML PARAGRAPH ( HTML PARAGRAPH –CENTERI NG)CENTERI NG)CENTERI NG)CENTERI NG)

Page 8: Html bangla

( �, �P���� �� �� /��"� �� *���� ��� display window �� ��H� ��W� ����। 1.<p align="center">For instance, let's say you had a HU GE school or work...</p>

*��,�:

For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an

alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

��������� A+���B���������� A+���B���������� A+���B���������� A+���B�CCCC---- ����: L�: ����: L�: ����: L�: ����: L�: ( HTML PARAGRAPH ( HTML PARAGRAPH ( HTML PARAGRAPH ( HTML PARAGRAPH –ALI GN RI GHT)ALI GN RI GHT)ALI GN RI GHT)ALI GN RI GHT)

( �, �P���� �� �� /��"� �� *���� ��� display window �� ��/�� ��W� ����। 1.<p align="right">For instance, let's say you had a HUG E school or work...</p>

*��,�:

For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an

alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

������������������������������������ 9M�LN9M�LN9M�LN9M�LN ������ �������� �������� �������� �� ( HTML Headi ng Tut or i al i n Bangl a)( HTML Headi ng Tut or i al i n Bangl a)( HTML Headi ng Tut or i al i n Bangl a)( HTML Headi ng Tut or i al i n Bangl a)

��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

�������� � �4��� � ������ +H��� ��� � +���� �4+�� ��2 8.। �4��� �� �� ��H� �2 �- bold �4+�� *���,�4. ��� %�� 8 �4��� �� �]��� �/� ��',� ���। �4��� �]� ���� a 4�� b �� ��H� +7��c। �2�� a +����. �@ ��� b +����.�! �4��� 1.<body>

2.<h1>Headings</h1>

3.<h2>are</h2>

4.<h3>great</h3>

5.<h4>for</h4>

6.<h5>titles</h5>

Page 9: Html bangla

7.<h6>and subtitles</h6>

8.</body>

Headings

ar ear ear ear e

GREATGREATGREATGREAT

f orf orf orf or

titles

and subtitles

�U ��� ��>. ���8 *��� �4��� �� ��&Q ��� ��� option %�! । � �4��� �� built in attribute । �4��� ��2� +�.������ ��� ��� 4�. 8.।

9M�LN9M�LN9M�LN9M�LN �6N�6N�6N�6N A+���B�CA+���B�CA+���B�CA+���B�C �� ��O 6+6M���� ��O 6+6M���� ��O 6+6M���� ��O 6+6M��::::

%�� �4��� ��� paragraph ��+�3 ���4� ���� /��। ���� ��4�� ��. 4�। 1.<h1 align="center">Essay Example</h1>

2.<p>Avoid losing floppy disks with important schoo l/work projects...</p>

3.<p>For instance, let's say you had a

4.HUGE school or work project to complete. Off ... </p>

*��,�:

Essay Example

Avoid losing floppy disks with important school/work projects on them. Use the web to keep your content so you can access it from anywhere in the world. It's also a quick way to write reminders or notes to yourself. With simple html skills, (the ones you have gained so far by now) it is easy.

For instance, let's say you had a HUGE school or work project to complete. Off hand, the easiest way to transfer the documents from your house could be a 3.5" floppy disk. However, there is an alternative. Place your documents, photos, essays, or videos onto your web server and access them from anywhere in the world.

Page 10: Html bangla

��������� ���: 9P� ������ �� ��������� ���: 9P� ������ �� ��������� ���: 9P� ������ �� ��������� ���: 9P� ������ �� ( HTML Li ne Br eak)( HTML Li ne Br eak)( HTML Li ne Br eak)( HTML Li ne Br eak)��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

%�� %�� ���2�! ��� ��� ��� ����� 4�� ��� �'Y। ��� ��� ��� �� ��� ��> ��� %/��� ��� ��� 4�� ��2 �������� +48� ����। �������� � �� d� ��� ��� ���M� �� 4.। ��� ��� ���� paragraph !@( ����� HTML element(tables, lists, and

headings)� ���4� �� 4.। 1.<p> 2.Will Mateson<font color="red"><br/></font> 3.Box 61<font color="red"><br /></font> 4.Cleveland, Ohio<font color="red"><br/></font> 5.</p>

*��,�:��� ��� �� +4�8� ��I� address 6��7 ���� /��। Will Mateson

Box 61

Cleveland, Ohio

%�� ��I� +�e �f>� ���� /��। 1.<p>Sincerely,<br /> 2.<br /> 3.<br /> 4.Kevin Sanders<br /> 5.Vice President</p>

*��,�:

Sincerely, Kevin SandersVice President

%�( �� ��>. ��� �2 *�.&� �8 ��� ��� �� �� ��� closing tag �� *�.&� ���।

HTML HORI ZONTAL RULEHTML HORI ZONTAL RULEHTML HORI ZONTAL RULEHTML HORI ZONTAL RULE::::

Horizontal rule �� <hr/> �� �� *�� �� 4 । <hr/> ��� ���4� ��� screen �� �/� +� �� ��� *��,�

���। line break tag �� �� Horizontal rule tag �� ��� closing tag ���। 1.<hr /> 2.Use

Page 11: Html bangla

3.<hr /><hr /> 4.Them 5.<hr /> 6.Sparingly 7.<hr />

*��,�*��,�*��,�*��,�:

Use

Them

Sparingly

Horizontal rule ��� "g/�h � ��� ������ ��>. +��4 *�� ��� �U�_ ���4� �� 4.। 1.<font color="red"><hr /></font> 2.<p>1. "The Hobbit", JRR Tolkein.<br /> 3.2. "The Fellowship of the Ring" JRR Tolkein.</p>

*��,�:

1. "The Hobbit", JRR Tolkein.2. "The Fellowship of the Ring" JRR Tolkein.

*��,�*��,�*��,�*��,�:

Goal sGoal sGoal sGoal s

1. Find a Job

2. Get Money

3. Move Out

Start attributes ���. ���&� ����8.7 �]� 4�� ��1 ���� �� 8.। 1.<h4 align="center">Goals</h4>

2.<ol start="4" >

Page 12: Html bangla

3.<li>Buy Food</li>

4.<li>Enroll in College</li>

5.<li>Get a Degree</li>

6.</ol>

*��,�*��,�*��,�*��,�:

Goal sGoal sGoal sGoal s 4.Buy Food

5.Enroll in College

6.Get a Degree

��������� S��� ��T��������� S��� ��T��������� S��� ��T��������� S��� ��T� ( HTML ORDERED LI ST� ( HTML ORDERED LI ST� ( HTML ORDERED LI ST� ( HTML ORDERED LI STSSSS CONTI NUED)CONTI NUED)CONTI NUED)CONTI NUED)

%�( �� *���� H���4� ��1(ordered list) ��.�!। ����� +H�� a,i,j �]��� /�����, ���� �]� � �T, 4�� /�� �

�@ 4��� � �! 4���। type attribute ���4� ��� �]� /����, � �� 4.। 1.<ol type="a">

2.<ol type="A">

3.<ol type="i">

4.<ol type="I">

Or der ed Li st Types:Or der ed Li st Types:Or der ed Li st Types:Or der ed Li st Types:

Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals

a. Find a Job

b. Get Money

c. Move Out

A. Find a Job

B. Get Money

C. Move Out

i. Find a Job

ii. Get Money

iii. Move Out

I. Find a Job

II. Get Money

III. Move Out

��������� �6:�S� ����������� �6:�S� ����������� �6:�S� ����������� �6:�S� ��G G G G ( HTML UNORDERED LI ST( HTML UNORDERED LI ST( HTML UNORDERED LI ST( HTML UNORDERED LI STS)S)S)S)

<ul> �� +4�8� ���� ��1 6��7 �� 4.। ���� ��1 %�� ��� *�� �8�� a. squares i.discs j.circles । default

�4+�� +H��� full discs ���4� �� 4.। 1.<h4 align="center">Shopping List</h4>

2.<ul>

3.<li>Milk</li>

Page 13: Html bangla

4.<li>Toilet Paper</li>

5.<li>Cereal</li>

6.<li>Bread</li>

7.</ul>

*��,�*��,�*��,�*��,�:

Shoppi ng Li stShoppi ng Li stShoppi ng Li stShoppi ng Li st

• Milk

• Toilet Paper

• Cereal

• Bread

%�� type attributes ���4� ��� unordered list �� ����� ���� ���4� ���� /��। <ul type="square">

<ul> type="dics">

<ul> type="circle">

type="square" type="disc" type="circle"

� Milk

� Toilet Paper

� Cereal

� Bread

• Milk

• Toilet Paper

• Cereal

• Bread

o Milk

o Toilet Paper

o Cereal

o Bread

��������� 9L�C:H: ����������� 9L�C:H: ����������� 9L�C:H: ����������� 9L�C:H: ��G G G G ( HTML DEFI NI TI ON LI S( HTML DEFI NI TI ON LI S( HTML DEFI NI TI ON LI S( HTML DEFI NI TI ON LI STS)TS)TS)TS)

Definition list �� ���4� +H��� ��'H�� ��2�� /�। <dl> tag ���4� ��� Definition list 6��7 �� 4.। 8��Define �3,�% +�B�.� ���� �� ��� bold %��� ��2�� ����। Definition list tag �� ��H� %�( ��� tag � ,'� [

�+���� 4�� a. <dt> i. <dd> ।

<dl> tag: ��1 �� ���� &�� �� �� ���4� �� 4. ।

<dt> tag: 8�� +�B�.�(Define) ���� �� �� ���4� ��� �� �� ��2 4.।

<dd> tag: <dt> tag � �8 �� ��2 4�.�! �� +Z��, �2�� %���� 4. । 1.<dl>

2.<dt><b>Fromage</b></dt>

Page 14: Html bangla

3.<dd>French word for cheese.</dd>

4.<dt><b>Voiture</b></dt>

5.<dd>French word for car.</dd>

6.</dt>

*��,�*��,�*��,�*��,�:

Fromage French word for cheese. Voiture French word for car.

��������� ����� 9��L ������ �� ��������� ����� 9��L ������ �� ��������� ����� 9��L ������ �� ��������� ����� 9��L ������ �� ( HTML Col or code)( HTML Col or code)( HTML Col or code)( HTML Col or code)��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

Color set ��� ���� /c�� %�!। +H�� ��!� ��� �8�� ���, +�, ��, +��&, �7�। �������� � ��� value ��2�

+�. +�+�� ���� �� ��2 4.।���� ab� ��E��� ����� �� ��2 4�।

XYXYXYXY�� 9�Z��� ������� 9�Z��� ������� 9�Z��� ������� 9�Z��� �����::::

Black

Gray

Silver

White

Yellow

Lime

Aqua

Fuchsia

Red

Green

Blue

Purple

Maroon

Olive

Navy

Teal

������������������������������������---- �N A[�$ \��F�6 ��:�N A[�$ \��F�6 ��:�N A[�$ \��F�6 ��:�N A[�$ \��F�6 ��: ( HTML( HTML( HTML( HTML---- COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM: RGB VALUE)RGB VALUE)RGB VALUE)RGB VALUE)

%�� %/������ ���/� web design �� &�� HTML rgb ���4��� /���, ��� � ��� Non-IE browser, HTML

rgb +�/, ��� �। %/�� 8�� CSS ��2�� �� �4�� %/���� ���� �� ��>. +]�K &�।

Red, Green ��� Blue �� ���� ����� +��` 4�� rgb । *������ �� k(82� ��� ��� 3�� �) 4�� ill(82� 9

���� +Z��, 3��)। rgb ����� 4� rgb(RED,GREEN,BLUE)।

RED, GREENRED, GREENRED, GREENRED, GREEN �6N�6N�6N�6N BLUEBLUEBLUEBLUE �� ��:�� ��:�� ��:�� ��:::::

bgcolor="rgb(255,255,255)" White

bgcolor="rgb(255,0,0)" Red

bgcolor="rgb(0,255,0)" Green

bgcolor="rgb(0,0,255)" Blue

Page 15: Html bangla

������������������������������������---- �N A[�$�N A[�$�N A[�$�N A[�$::::9M`�L�a��� 9M`�L�a��� 9M`�L�a��� 9M`�L�a��� ( HTML( HTML( HTML( HTML---- COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM:COLORI NG SYSTEM: HEXADECI MAL)HEXADECI MAL)HEXADECI MAL)HEXADECI MAL)

*3� *3� Hexadecimal system ��R�� ��� ��� �� system ��� &�� ( �I�। practice ��� �H��� ��>.� ����+4& 4. 8��। �� Hexadecimal system +�� �U�_ "4��8�� ��� �4�� ���m�। Hexadecimal system � �������

standard color। Hexadecimal 4� b digit ����� �/W/�। *3� ��� digit(RR), Red value ����,� ��� /����, ��� digit(GG),

Green value ����,� ��� ��� +�,��> ��� digit(BB), Blue value ����,� ���।

��������� 9M��������� 9M��������� 9M��������� 9M`�L�a��� �N`�L�a��� �N`�L�a��� �N`�L�a��� �N bgcolor="#RRGGBB"

��������� ��������� ��������� ��������� ---- �N 9��L �N 9��L �N 9��L �N 9��L ( HTML( HTML( HTML( HTML---- COLORCOLORCOLORCOLOR CODE: BREAKI NG THE CCODE: BREAKI NG THE CCODE: BREAKI NG THE CCODE: BREAKI NG THE CODE)ODE)ODE)ODE)

���� ����� ��2�� 4�.�! ��'�� �T, Hexadecimal system �� Numbering system �� ��H,� ��� ab digit � �Y7�

���।

Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

Hexadecimal 0 1 2 3 4 5 6 7 8 9 A B C D E F

�� �T,�� �]� �4+�� ���4� �� 4.। �� �T,�� /�� �]�� ��/ � �� 4.।���� ��� ��4�� ��. 4��।

���� 6�d6���� 6�d6���� 6�d6���� 6�d6 9M`�L�a���9M`�L�a���9M`�L�a���9M`�L�a���::::

bgcolor="#FFFFFF"

�2�� "F" 4�� +��X, /���� ��� �� ���� ("#FFFFFF") +� ��� �����, ���। ���� ��>.� ��D��� %���� ��

4�.�!।

9M`�L�a���9M`�L�a���9M`�L�a���9M`�L�a��� a�Oa�Oa�Oa�O::::

(15 * 16) + (15) = 255

�/��� +=_� �D�। *3�� F �� ��(al) �� ab d� ��� ��� /����, ���� +�3 �8� ���� 4��। ill ��� �8��� *3���

����� ���� �U�_ +��,X।���� %�( ��4�� ��. 4��। ��4����4����4����4��:

bgcolor="#CC7005"

CC(RR - Red)

(12 * 16) + (12) = 204

70(GG - Green)

Page 16: Html bangla

(7 * 16) + (0) = 112

05(BB - Blue)

(0 * 16) + (5) = 5

��������� C&� ������ �� ��������� C&� ������ �� ��������� C&� ������ �� ��������� C&� ������ �� ( HTML Font Tut or i al i n Bangl a)( HTML Font Tut or i al i n Bangl a)( HTML Font Tut or i al i n Bangl a)( HTML Font Tut or i al i n Bangl a) ��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

<font> �� ���4� ��� (� � +��� �-�� 1��, +�& ��� ��� �8� �� 4.। size, color ��� face attributes ���4� ��� %/�� �� �� �1��& ���� /��।<basefont> �� ���4� ��� �/�&� +�� �-�� ��� 1��, +�& ���

��� � �+ �� 8.।

<font> ��� <basefont> �� ���4� � ��� �+�+�+(�+�+�+ �����.�� %���� �� 4�.�!) ���4� �� ����।

C&� \��� C&� \��� C&� \��� C&� \��� ( FONT SI ZE)( FONT SI ZE)( FONT SI ZE)( FONT SI ZE)

Size attribute �� +4�8� �� �� +�& I� �� 4.। �� �� %�� �� "4��8�� �� 4�� a(+����. �!) 4�� n(+����.

�@)। �� �� ���\ %�� 4�� j। 1.<p> 2.<font size="5">Here is a size 5 font</font> 3.</p>{}

*��,�*��,�*��,�*��,�:

Here is a size 5 font.

C&� �N C&� �N C&� �N C&� �N ( FONT COLOR)( FONT COLOR)( FONT COLOR)( FONT COLOR)

��� attribute �� +4�8� font �� color �+ �� 4.। 1.<font color="#990000">This text is hexcolor #990000</font > 2.<br /> 3.<font color="red">This text is red</font>

*��,�*��,�*��,�*��,�:

This text is hexcolor #990000 This text is red

C&� 9Ca C&� 9Ca C&� 9Ca C&� 9Ca ( FONT( FONT( FONT( FONT FACE)FACE)FACE)FACE)

�� face �� �U�_ +��, 4(. ���� ��� %/�� �+�1� � ��H,��� �� � ��1� ��. � 3�� �4�� %/�� 9 �� � ��2��

/��� � ��� �� /�����, ���\ �4+�� Times New Roman �� � ��2�� /���। 1.<p> 2.<font face="Bookman Old Style, Book Antiqua, Garamond">Th is paragraph 3.has had its font...</font>

Page 17: Html bangla

4.</p>

*��,�*��,�*��,�*��,�:

This paragraph has had its font formatted by the font tag!

96aC&� 96aC&� 96aC&� 96aC&� ( BASEFONT)( BASEFONT)( BASEFONT)( BASEFONT)

Basefont �� �� +4�8� %/�� (� � �/�&� ���\ �� �+ ���� /���।���� basefont ���4� ��� +I� /3 ��2�� 4�। 01.<html> 02.<body> 03.<basefont size="2" color="green"> 04.<p>This paragraph has had its font...</p> 05.<p>This paragraph has had its font...</p> 06.<p>This paragraph has had its font...</p> 07.</basefont> 08.</body> 09.</html>

*��,�*��,�*��,�*��,�:

This paragraph has had its font formatted by the basefont tag!This paragraph has had its font formatted by the basefont tag!This paragraph has had its font formatted by the basefont tag!

���> ���� �� font � basefont ���4� � ��� �+�+�+ (�+�+�+ �����.�� %���� �� 4�.�!) ���4� �� '��। Attributes: Review

Attribute= "Value" Description

size= "Num. Value 1-7" Size of your text, 7 is biggest

color= "rgb,name,or hexidecimal" Change font color

face= "name of font" Change the font type

ef� gh�� ij�ef� gh�� ij�ef� gh�� ij�ef� gh�� ij� G���G���G���G���::::

�� �� �1��& ��� �8��� H���� 1�� �� 8.। 1.<p><font size="7" face="Georgia, Arial" color="ma roon">C</font>ustomize 2.your font to achieve a desired look.</p>

*��,�*��,�*��,�*��,�:

Page 18: Html bangla

Customize your font to achieve a desired look.

��������� ��N� ������ �� ��������� ��N� ������ �� ��������� ��N� ������ �� ��������� ��N� ������ �� ( HTML Li nk)( HTML Li nk)( HTML Li nk)( HTML Li nk)��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

���� �� �H��� (� � +������ ��H� ��[��7 +��8� +�W�/� 4.। anchor tag �� +4�8� +��8� ���. ���� 6��7 �� 4.।

�-, ���&, ��, �� +4�8�( ���� 6��7 �� 8.।

������������������������������������---- M��A���`k M��A���`k M��A���`k M��A���`k | HTML| HTML| HTML| HTML---- HYPERTEXT REFERENCE HYPERTEXT REFERENCE HYPERTEXT REFERENCE HYPERTEXT REFERENCE ( HREF)( HREF)( HREF)( HREF)

href attribute ��� ��� �����A �����, ��� 8� +�3 ���� �� +�J��/��,।

Hypertext reference 4�� /�� Internal, Local, Global ।

Internal: ��� �/�&� ��H� ���� 6��7 4(.।

Local : %/�� web site �� �'��� ��� �/�&�� +�3 ���� 6��7 4(.। Global: %/�� web site �� ��4�� ��� web site �� +�3 ���� 6��7 4(.।

Internal - href="#anchorname"

Local - href="/../pics/picturefile.jpg"

Global - href="http://www.tizag.com/"

��������� 9�`k ��N��������� 9�`k ��N��������� 9�`k ��N��������� 9�`k ��N� ( HTML� ( HTML� ( HTML� ( HTML---- TEXT LI NKS)TEXT LI NKS)TEXT LI NKS)TEXT LI NKS)

<a> ��� </a> tag d� 83o�� +��8��� ���� ��� ��> ��R.। href attribute �� +4�8� ��� H���� +��8� W�/� 4��� ��H,��� 4.। href attribute �� opening tag �� ��H� �2�� 4.। opening ��� closing tag �� ��H� ��2 ��� ��!�,

� /�� web �/�& ���� �4+�� ��2 8��। 1.<a href=" http://www.tizag.com/ " target="_blank" >Tizag Home</a> 2.<a href=" http://www.espn.com/ " target="_blank" >ESPN Home</a> 3.<a href=" http://www.yahoo.com/ " target="_blank" >Yahoo Home</a>

*��,�*��,�*��,�*��,�: Global Link

Tizag Home ESPN Home Yahoo Home

��������� ��N� ��#l��������� ��N� ��#l��������� ��N� ��#l��������� ��N� ��#l� ( HTML� ( HTML� ( HTML� ( HTML---- LI NKLI NKLI NKLI NK TARGET)TARGET)TARGET)TARGET)

Target attribute d� ��R., 4. �/& 2���� 4�� /J3� window �� �3� ���� 2���� 4�� ��� browser window �� ।

Page 19: Html bangla

target=" _blank" ��� � browser window �� ��� � page �2� ।

_self" current window �� ��� � page Load ��.।

_parent" Loads new page into a frame that is superior to where the link lies

_top" +� frames cancel ���, current browser window ��� � page Load ��.।

���� �� ��4�� ��. 4�� �8 ��'�� %/�� &��*. web site ESPN.COM �� +�3 ���� ���� 4.। Target attribute � ���'�� browser 8�[ 4. �8� ESPN.COM web site � �2�� +�. �+� ��� � window +4 open 4�� 8�� ���

��,� %/�� web site �� +�3 3��� /��। 1.<a href=" http://www.ESPN.com " target="_blank">ESPN.COM</a>

*��,�*��,�*��,�*��,�: _blank Target:

ESPN.COM

��������� ���� ��������� ���� ��������� ���� ��������� ���� ������ �� ������ �� ������ �� ������ �� ( HTML E mai l )( HTML E mai l )( HTML E mai l )( HTML E mai l )��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

�������� ����� �� &�� %/�� �������� standard anchor tag <a> ���4� �����। ��/� href attribute , +��

+�� ��M ��/� inverted comma �� ��H� ��p� ����� I��। <a href= "mailto: [email protected]" >Email Example</a>

*��,�*��,�*��,�*��,�:

Email Example

g�$��mg�$��mg�$��mg�$��m ������������������������������������ ���� 9��L���� 9��L���� 9��L���� 9��L::::

%/�� ����� I��. �����[ ��� ��>. �8� ���� /��� �8 4�� a. subject i.body

Subject - ����� �� subject � %/�� ���&� �8��� information +���4 ���� /���।

Body - ����� �� body �� %/�� ���&� information +���4 ���� /���। <a href= "mailto: [email protected]?subject=Web Page Email&body=This email is from your website" > 2nd Email Example</a>

�'�� 8�� ��� ���2 ��� �4�� 82�� ��� �� ����� ������ �/� �O� ���� �2� subject ��� body �� �+ �8� 4� 8�� �8

%/�� (Subject ��� body ��) ��q2 ��� �����।

�� �� +���H %�! � 4� %/�� � ��R�� /���� �8 %/�� ��! ���� %/�� (� �+� �3�� %+� ��� ��� ��� �%a

Page 20: Html bangla

�3��। *��,�:

2nd Email Example

��������� �:����������� �:����������� �:����������� �:�� ���� ��N� ���� ��N� ���� ��N� ���� ��N� ( HTML Emai l Li nk, Anchor )( HTML Emai l Li nk, Anchor )( HTML Emai l Li nk, Anchor )( HTML Emai l Li nk, Anchor )��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

����� ���� 6��7 �� +4&। 8�� %/�� �� ��� %/�� site � Email ���� ��� ����� ���� �� �H��� � ���� /���।

�+2�� �8 ��>�. �� Email /S�� �+ ��>. ��q2 ��� ���� /���। <a href="mailto: [email protected]?subject=Feedback" > [email protected]</a>

*��,�*��,�*��,�*��,�:

mailto: [email protected]?subject=feedback

���� +�. ���4���7� +���H,�� Email ���2 ��. 4.। mailto: [email protected]?subject=feedback

<a href="mailto: [email protected]?subject=Feedback&body=Sweet site!">

ferdous@ webcoachbd.com</a>

*��,�*��,�*��,�*��,�: Complete Email:

mailto: [email protected]?subject=feedback&body

=sweet site!

�������������������������������� ������������������������ ���������������� (HTML-download links)

�������� &�� ��� place �� �- ���� �� ��। �������� &�� image link ���4� ���� ��>.� ��� &�� 4�.

/�@।�+�U�_ thumbnail ���� ���4� �� ����। /����, ��+�� ��D��� %���� �� 4�.�!। HTML Code:

<a href="http://www.webcoachbd.com/pics/htmlT/blanktext.zip">Text Document</a>

*��,�*��,�*��,�*��,�: Download a Text Document:

Text Document

��������� �LCn ��N��������� �LCn ��N��������� �LCn ��N��������� �LCn ��N� ( HTML� ( HTML� ( HTML� ( HTML---- DEFAULT LI NKS; BASE)DEFAULT LI NKS; BASE)DEFAULT LI NKS; BASE)DEFAULT LI NKS; BASE)

<base> �� �� �������� head element �� ��H� �2 4.।�'�� default URL �+ �� 4. �/�&� +�� ������ &��।

%/�� �4� �/�&� &�� <base> tag W/� ���� /���। view source print? 1.<head> 2.<base href=" http://www.webcoachbd.com/ ">

Page 21: Html bangla

3.</head>

��������� �:�����F ������ �� ��������� �:�����F ������ �� ��������� �:�����F ������ �� ��������� �:�����F ������ �� ( HTML Ent i t i es Tut or i al i n Bangl a)( HTML Ent i t i es Tut or i al i n Bangl a)( HTML Ent i t i es Tut or i al i n Bangl a)( HTML Ent i t i es Tut or i al i n Bangl a)��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

���� 4� symbol �� �r��� ��>.। ���� symbol �8�� �����, , ��/��, 6������ ��s *��� ����� (� � �/& *��,�

���� 4�� ���� ��>�. &��� 4��। *���� ���� �� ���� ��� 3�� �8��:

a.*���� Entity ��/��+# (ampersand) ���. ���� 4.- &

i.��/� Entity �� �� – copy

j.���> semicolon �8� ���� 4.-;

��A������A������A������A����

&copy���_ ���2 � 6��7 ��� © - Copyright symbol.

g�$��m 9pag�$��m 9pag�$��m 9pag�$��m 9pa %�� /��"� �� ��� �4��� �� �� ��H� ���2�! ��&� ��H� ��� ��C� ��H� ��� �t+ ����� /�� �� ���� /�� �। %��

���� ���4� ��� �����[ �t+ ���� /��। ���� ��4�� ��. 4��। 1.<p>Everything that goes up, must come &nbsp;&nbsp ;&nbsp;&nbsp;down!</p>

*��,�*��,�*��,�*��,�:

Everything that goes up, must come down!

%�� �������� � ��+ ��� ��� �"� ��� ��M ���4� ��� �� 6��7 ���। �+� ��M (� � �/& � ��2�� ���� ���� ���4�

���� 4��। 1.<p> 2.Less than - &lt; <br /> 3.Greater than - &gt; <br /> 4.Body tag - &lt;body&gt; 5.</p>

*��,�*��,�*��,�*��,�:

Less than - <Greater than - > Body tag - <body>

Page 22: Html bangla

������������������������������������ ��&���&���&���&� 6�6�6�6� �q6+�q6+�q6+�q6+ ( HTML Comment s Tut or i al i n Bangl a)( HTML Comment s Tut or i al i n Bangl a)( HTML Comment s Tut or i al i n Bangl a)( HTML Comment s Tut or i al i n Bangl a)

��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

���� %/��� (� � ���'�/� �4+�� ��� ��� /3 ��2�� �8 d� %/�� � �� u� ���� /���� �8 ��v ��v ��� ��&� d� ���: �� 4��।

���� ���� %�� ����� ignore ���। a. �������� �P��� �� �'��� note ���2 � ���&� &�� reminder ���2

i.�:�;� ������ & �8�� &'�:; �� ��!� ���� � � �� *�.&�। .

j.Temporarily comment *�.&� 8�U� /8, �������� ������ �+Z��, 3��। <!--Note to self: This is my banner image! Don't fo rget --> <img src="http://www.webcoachbd.com/pics/ferdousSug ar.jpg" height="100" width="200"/>

����� �� �� ���� ��( opening tag ��� closing tag %�!। <!-- Opening Comment

-- > Closing Comment

��������� ��������� ��������� ��������� ---- <<<<!!!!- -- -- -- - �� 9�t��� ��&� M �� 9�t��� ��&� M �� 9�t��� ��&� M �� 9�t��� ��&� M f��6 f��6 f��6 f��6 - -- -- -- - >:>:>:>:

(� � ���'�/� �4+�� %/�� ���� �& �+Z��, �2�� /��� �+�U�_ �+Z��, �&��� <!— -- > ���� �� �� �'�� �2��

/���। <!-- <input type="text"> size="12" /> -- Input Fiel d -->

82� �������� �������� *��,� ���� �� �2� ���� ��� �I�. �����। <input type="text" size="12" />

*��,�*��,�*��,�*��,�: Input Field:

��������� 2�6 ������ �� ��������� 2�6 ������ �� ��������� 2�6 ������ �� ��������� 2�6 ������ �� ( HTML I mages Tut or i al i n Bangl a)( HTML I mages Tut or i al i n Bangl a)( HTML I mages Tut or i al i n Bangl a)( HTML I mages Tut or i al i n Bangl a)��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

Page 23: Html bangla

!�� �� ����w/��, ��>. �� +I� ���4� %���� &��� 4��। <img/> �� ���4� ��� %�� (� � �/& � ���& ���. %+��

/��। 1.<img src="/sunset.gif" />

*��,�*��,�*��,�*��,�:

������������������������������������---- 2�62�62�62�6 SRC:SRC:SRC:SRC:

Src attribute ����w/��, ��>.। Src �� �3, �++,(source) �3,% ����&� �%a � �82�� picture file � ���W�।

��� �/�. %�� ����&� �++, ����,1 ���� /��। a. Standard URL ���4� ���

(src=http://www. webcoachbd.com/pics/htmlT/sunset.gif)

i. web server � file ��/ � %/��� ���

(src="/../sunset.gif")

�� picture file �� location �� +�3 .�������� file �� location �� +Z�, %�!। URL Types:

Local Src Location Description

src="/sunset.gif" picture file ��� .html file ��� directory �� ��W� ���।

src="/../sunset.gif" picture file /��,��� directory �� ��W� ��� .html file ��।

src="/../pics/sunset.gif"pic directory �� picture file /��,��� directory �� ��W� ��� .html file ��

��।

������������������������������������---- ALTERNATI VE ATTRI BUTALTERNATI VE ATTRI BUTALTERNATI VE ATTRI BUTALTERNATI VE ATTRI BUTE:E:E:E:

Alt attribute ����,1 ��� ������' �- �3,�% 82� ���& *����, 4. � �2� ������' �-� *����, 4. । ���& *����,

� 4(.� ��� 4�� /�� ���� �` 4�. ���! � browser ���& ���� 2��& /�� �। 1.<img src=" http://example.com/brokenlink/sunset.gif " alt="Beautiful

Sunset" />

*��,�*��,�*��,�*��,�:

Page 24: Html bangla

������������������������������������---- 2�62�62�62�6 HEI GHTHEI GHTHEI GHTHEI GHT �6N�6N�6N�6N WI DTH:WI DTH:WI DTH:WI DTH:

����&� height ��� width I� ��� &�� height ��� width attribute ���4� �� 4.। 1.<img src="/sunset.gif" height="50" width="100">

*��,�*��,�*��,�*��,�:

������������������������������������---- VERTI CALLYVERTI CALLYVERTI CALLYVERTI CALLY �6N�6N�6N�6N HORI ZONTALLY ALI GNHORI ZONTALLY ALI GNHORI ZONTALLY ALI GNHORI ZONTALLY ALI GN 2�62�62�62�6::::

Align ��� valign attribute ���4� ����&� ��W� ��H,�� ���� /��।

1. align (Horizontal)

o right

o left

o center

2. valign (Vertical)

o top

o bottom

o center

���� ��4�� ��. 4�� 1.<p>This is paragraph 1, yes it is...</p> 2.<p> 3.<img src="/sunset.gif" align="right"> 4.The image will appear along the...isn't it? 5.</p> 6.<p>This is the third paragraph that appears...</p >

*��,�*��,�*��,�*��,�:

This is paragraph 1, yes it is. I think this paragraph serves as a nice example to show how this

image alignment works. The image will appear along the right hand side of the paragraph. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph. If we were talking about beautiful tropical sunsets, this picture would be perfect. But we aren't talking about that, so it's rather a waste, isn't it? This is the third paragraph that appears below the paragraph with the image!

������������������������������������---- ��F� ��N� �Ma�6 6+��F� ��N� �Ma�6 6+��F� ��N� �Ma�6 6+��F� ��N� �Ma�6 6+6M��6M��6M��6M��::::

Page 25: Html bangla

���&�� ���� �4+�� ���4� �� 8.। 1.<a href=" http://www.webcoachbd.com/ "> 2.<img src="/sunset.gif"> 3.</a>

*��,�:

������������������������������������---- THUMBNAI LS:THUMBNAI LS:THUMBNAI LS:THUMBNAI LS:

Thumbnails 4� �! +��&� ���& 8 �@, '� ���� ����&� +�3 ���� ���। �� ���� �H��� picture quality �U ��

8.।Thumbnails �� ��N ���� ���& 8 ���& ���� �4+�� �& ���। 1.<a href="/sunset.gif"> 2.<img src="/thmb_sunset.gif"> 3.</a>

��������� 9��6� ������ �� ��������� 9��6� ������ �� ��������� 9��6� ������ �� ��������� 9��6� ������ �� ( HTML Tabl es Tut or i al i n Bangl a)( HTML Tabl es Tut or i al i n Bangl a)( HTML Tabl es Tut or i al i n Bangl a)( HTML Tabl es Tut or i al i n Bangl a) ��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

���� 4� Horizontal +�� ��� vertical ����� ����+। � tabular data *��,��� �U�_ ���� ����w/��,। �P����� ������

��.u��� &�� (�.� ��&������ ��! � %�� ���� ����w/��, । +�� ��� ����� ����+����� cell ���। +�� ��������

���� <table> �� ���. ���� 4. ��� </table> �� ���. ��> 4.।

a.<tr> �� Horizontal +�� �����, ���।

i <td> �� 9 Horizontal +��� data cell �����, ���।

j <th> �� data cell �� ���� heading �4+�� �& ���।

x <tfoot> �� ������ footer �8� ��� &�� ���4� 4.। 1.<table border="1"> 2.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></t r> 3.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></t r> 4.</table>

*��,�*��,�*��,�*��,�:

Row 1 Cell 1 Row 1 Cell 2

Page 26: Html bangla

Row 2 Cell 1 Row 2 Cell 2

g:�w�� a��� �6N ���g:�w�� a��� �6N ���g:�w�� a��� �6N ���g:�w�� a��� �6N ����� �6d���� �6d���� �6d���� �6d��::::

Rowspan ���4� ��� �������� +��� ��D� ��� colspan ���4� ��� �������� ����� ��D� �� 4.। %/�� 8������� header ���� �� �4�� <th> �� ���4� ���� 4��। <th> �� ���4� ���� default �4+�� header � ��)

%��� ��2��। 01.<table border="1"> 02.<tr> 03.<th>Column 1</th> 04.<th>Column 2</th> 05.<th>Column 3</th> 06.</tr> 07.<tr><td rowspan="2">Row 1 Cell 1</td> 08.<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> 09.<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></ tr> 10.<tr><td colspan="3">Row 3 Cell 1</td></tr> 11.</table>

*��,�*��,�*��,�*��,�:

Row 1 Cell 1 Row 1 Cell 2

Row 2 Cell 1 Row 2 Cell 2

CELL PADDI NGCELL PADDI NGCELL PADDI NGCELL PADDI NG �6N�6N�6N�6N SPACI NGSPACI NGSPACI NGSPACI NG

�2�� cellpadding ���� ��R. ������ ��, � ��� ������ ��H� H���J � ��� (��2, +�2�) �� ��H� �t+ (space) � ��

��� ��� cellspacing ���� ��R. ������ ��� cell �� ��H� �t+(space) � �� ��� । 01.<table border="1" cellspacing="10" 02.bgcolor="rgb(0,255,0)"> 03.<tr> 04.<th>Column 1</th> 05.<th>Column 2</th> 06.</tr> 07.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></ tr> 08.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></ tr> 09.</table>

*��,�*��,�*��,�*��,�:

Column 1 Column 2

Row 1 Cell 1 Row 1 Cell 2

Page 27: Html bangla

Row 2 Cell 1 Row 2 Cell 2

1.<table border="1" cellpadding="10" bgcolor="rgb(0,255,0)"> 2.<tr> 3.<th>Column 1</th> 4.<th>Column 2</th> 5.</tr> 6.<tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></t r> 7.<tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></t r> 8.</table>

*��,�*��,�*��,�*��,�:

Column 1 Column 2

Row 1 Cell 1 Row 1 Cell 2

Row 2 Cell 1 Row 2 Cell 2

��������� 6+��B�&L �N ������ �� ��������� 6+��B�&L �N ������ �� ��������� 6+��B�&L �N ������ �� ��������� 6+��B�&L �N ������ �� ( HTML ( HTML ( HTML ( HTML Backgr ound Col or s Tut or i al Backgr ound Col or s Tut or i al Backgr ound Col or s Tut or i al Backgr ound Col or s Tut or i al i n Bangl a)i n Bangl a)i n Bangl a)i n Bangl a) ��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

bgcolor ������ � ����>'�� (� � �/& ��� ������ ���"�# ��.u� ���। Bgcolor ������ ��� ���� ���������� �� ��H� ���4� �� 8. ��� +����. '� 4. <body> ��� <table> �� �� ��H� ���4� ����। �����[ �4+��

���"�# 1�� ���� ���� �+�+�+ ���"�#(CSS �����.�� %���� �� 4�.�!) ��2�� /���। �S��S��S��S�:

<tagname bgcolor ="value">

1.<body bgcolor="Silver"> 2.<p>We set the background of this paragraph to be silver. The body tag is 3.where you change the pages background. Now contin ue the lesson to 4.learn more about adding background colors in your HTML! 5.</p> 6.</body>

*��,�*��,�*��,�*��,�:

We set the background of this paragraph to be silver. The body tag is where you change the pages background. Now continue the lesson to learn more about adding background colors in your HTML!

9��6��9��6��9��6��9��6�� 6+��B�&L6+��B�&L6+��B�&L6+��B�&L � ����� 9x�# ��� � ����� 9x�# ��� � ����� 9x�# ��� � ����� 9x�# ��� ::::

Page 28: Html bangla

01.<table bgcolor="lime" border="1"><tr> 02.<td>A lime colored table background using color names.</td> 03.</tr></table> 04. 05. 06.<table bgcolor="#ff0000" border="1"><tr> 07.<td>A red colored table background using hexadec imal values "#FF0000".</td> 08.</tr></table> 09. 10. 11.<table bgcolor="rgb(0, 0, 255)" border="1"><tr> 12.<td>A blue colored table background using RGB va lues "rgb(0, 0, 255)".</td> 13.</tr></table>

*��,�*��,�*��,�*��,�:

A lime colored table background using color names.

A red colored table background using hexadecimal values "#FF0000".

A blue colored table background using RGB values "rgb(0, 0, 255)".

9��6�� a��� �6N ���9��6�� a��� �6N ���9��6�� a��� �6N ���9��6�� a��� �6N ���� ����� 9x�# ���� ����� 9x�# ���� ����� 9x�# ���� ����� 9x�# ���:::: 1.<table> 2.<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> 3.<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> 4.<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> 5.<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> 6.<tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> 7.<tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> 8.</table>

*��,�*��,�*��,�*��,�:

This Row is Yellow!

This Row is Gray!

This Row is Yellow!

This Row is Gray!

This Row is Yellow!

This Row is Gray!

��O 6+��B�&L��O 6+��B�&L��O 6+��B�&L��O 6+��B�&L COLOR COLOR COLOR COLOR �6N �6N �6N �6N FONT COLOR:FONT COLOR:FONT COLOR:FONT COLOR:

1.<table bgcolor="#000000"> 2.<tr><td bgcolor="#009900"> 3.<font color="#FFFF00" align="right">Green Bay</font></td> 4.<td><font color="#FFFFFF">13</font></td></tr>

Page 29: Html bangla

5.<tr><td bgcolor="#0000FF"> 6.<font color="#DDDDDD" align="right">New England</font></td> 7.<td><font color="#FFFFFF">27</font></td></tr> 8.</table>

*��,�*��,�*��,�*��,�:

Green Bay 13

New England 27 1.<table bgcolor="#777777"> 2.<tr><td> 3.<p><font face="Monotype Corsiva, Verdana" size="4" color="#00FF00"> 4.This paragraph tag has... 5.</font></p> 6.</td></tr> 7.</table>

*��,�*��,�*��,�*��,�:

This paragraph tag has a gray background with green colored font. You should see Monotype Corsiva font if you have it installed, or Verdana as the backup. Both fonts are widely accepted as standard fonts.

��������� 6+��B�&L ������ �� ��������� 6+��B�&L ������ �� ��������� 6+��B�&L ������ �� ��������� 6+��B�&L ������ �� ( HTML Backgr ound Tut or i al i n ( HTML Backgr ound Tut or i al i n ( HTML Backgr ound Tut or i al i n ( HTML Backgr ound Tut or i al i n Bangl a)Bangl a)Bangl a)Bangl a) ��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

���"�# ������ �� +4�8� �������� ����� ���&�� ���"�# ���& �4+�� ��2�� 8.। 1.<table height="50" width="100" 2.background=" http://www.tizag.com/pics/htmlT/background.jpg " > 3.<tr><td>This table has a background image</td></ tr> 4.</table>

*��,�*��,�*��,�*��,�:

This table has a background image

������������������������������������---- 6+��B�&L6+��B�&L6+��B�&L6+��B�&L ���A����A����A����A�::::

�/��� ��4��� ��2 ���.�! �8 ���� �� %�� !��� %���� +�� ��� ��� +�+� 4. �� । 8�� ���� �� %�� !��� %����

���. �@ 4. ��� ���"�# !�� ���/ 4��। 1.<table height="200" width="300" 2.background=" http://www.tizag.com/pics/htmlT/background.jpg " > 3.<tr><td>This table has a background image</td></tr>

Page 30: Html bangla

4.</table>

*��,�*��,�*��,�*��,�:

This table has a background image

������������������������������������---- A+���:lLA+���:lLA+���:lLA+���:lL 6+��B�&L6+��B�&L6+��B�&L6+��B�&L ���'Y �� ����� +y(.� ���. ���'Y /���,� ���"�# !�� ��� �A/��� ���"�# !�� 6��7 �� 8.। �A/��� ����&�

������ gif ����� �2�� 4�� jpeg ����� �.। 1.<table height="100" width="150" 2.background=" http://www.tizag.com/pics/htmlT/pattern.jpg " > 3.<tr><td>This table has a background patterned im age</td></tr> 4.</table>

*��,�*��,�*��,�*��,�:

1.<table background=" http://www.tizag.com/pics/htmlT/transparent.gif " > 2.<tr><td>This table has a red transparent backgrou nd image</td></tr> 3.</table>

*��,�*��,�*��,�*��,�:

��������� 9y� ������ �� ��������� 9y� ������ �� ��������� 9y� ������ �� ��������� 9y� ������ �� ( HTML Fr ame)( HTML Fr ame)( HTML Fr ame)( HTML Fr ame)��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

�$� �� �H��� ��� +�. ��� ��&� ���# �� ���� ���� �������� �P��� *��,� �� 8.।

������������������������������������---- A GENERI C FRAME PAGEA GENERI C FRAME PAGEA GENERI C FRAME PAGEA GENERI C FRAME PAGE::::

�$��� ���� ���4� 4� ��� �$� � ���� %� ��� �$� � �� ���� 82�। ��� ���� ����� �O� ��� �2� �+� (� � �/&� ����

�/�& �2��। 1.<html> 2.<head> 3.</head> 4.<frameset cols="30%,*"> 5.<frame src="/menu.html"> 6.<frame src="/content.html">

Page 31: Html bangla

7.</frameset> 8.</html>

*��,�: �2�� �O� ����

frameset – � �� parent tag 8 �$� page �� characteristics ����,� ���।/J3� /J3� �$�frameset �� ��H�

����, ��� 3��। frameset cols="#%, *" - Cols(column) 8 �$� �� width ����,� ���। �/��� ��4��� %�� ���� (1st column)

���,�� ����! 8 total page �� jk% ��� "*", �� �3, total page �� nk% content(2nd column) ����,��� 4.।

frame src="/" (� � �/& �� ������ �$�� ��� 4.।

6+:�� 6� ����� 9x�#6+:�� 6� ����� 9x�#6+:�� 6� ����� 9x�#6+:�� 6� ����� 9x�# ������������:::: 1.<html><head></head> 2.<frameset rows="20%,*"> 3.<frame src="/title.html"> 4.<frameset cols="30%,*"> 5.<frame src="/menu.html"> 6.<frame src="/content.html"> 7.</frameset> 8.</html>

frameset rows="#%, *" -�� �3, frameset cols="#%, *" - ���।

FRAMEBORDER AND FRAMFRAMEBORDER AND FRAMFRAMEBORDER AND FRAMFRAMEBORDER AND FRAMESPACI NG:ESPACI NG:ESPACI NG:ESPACI NG:

FrameBorder ��� FrameSpacing attribute �� +4�8� �$� �� Spacing ��� ��� �$��� ��H� ugly gray lines

����' �� 8.। 1.<html><head></head> 2.<frameset border="0" frameborder="0" framespacing="0" rows="20%,*"> 3.<frame src="/title.html"> 4.<frameset border="0" frameborder="0" framespacing="0" cols="30%,*"> 5.<frame src="/menu.html"> 6.<frame src="/content.html"> 7.</frameset> 8.</html>

*��,�: �2�� �O� ����

NORESI ZE AND SCROLLINORESI ZE AND SCROLLINORESI ZE AND SCROLLINORESI ZE AND SCROLLI NG:NG:NG:NG:

Page 32: Html bangla

Noresize attribute �� +��z` �$��� %�� ��+�& ���� /�� �।

scrolling="(yes/no)"- �$� �� �'��� scroll 4�� � 4�� �। 1.<html><head></head> 2.<frameset border="2" frameborder="1" framespacing="2" rows="20%,*"> 3.<frame src="/title.html" noresize scrolling="no"> 4.<frameset border="4" frameborder="1" framespacing="4" cols="30%,*"> 5.<frame src="/menu.html" scrolling="auto" noresize> 6.<frame src="/content.html" scrolling="yes" noresize> 7.</frameset> 8.</html>

���"4���"4���"4���"4 ������������ ���������������������������� ���&���&���&���& ���2���2���2���2 *��+*��+*��+*��+ ������������ ��2����2����2����2��।।।।

��������� 9�\� ������ �� ��������� 9�\� ������ �� ��������� 9�\� ������ �� ��������� 9�\� ������ �� ( HTML Layout Tut or i al i n Bangl a)( HTML Layout Tut or i al i n Bangl a)( HTML Layout Tut or i al i n Bangl a)( HTML Layout Tut or i al i n Bangl a)��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%�� �������� ��%� 4� 2�� ��E��� ��>.। ������ �'�� ���� W/� ��� ��������

��%� 6��7 �� 4.। 1.<table bgcolor="black" border="1" heigh="200" width="300"> 2.<tr><td> 3.<table bgcolor="white" heigh="100" width="100"> 4.<tr><td>Tables inside tables!</td></tr> 5.</table> 6.</td></tr></table>

*��,�*��,�*��,�*��,�: ������������������������ �'���'���'���'�� ����������������

Tables inside tables!

��������� G�&L�Ll��������� G�&L�Ll��������� G�&L�Ll��������� G�&L�Ll 9�\� 9�\� 9�\� 9�\�

Standard layout +H��� �/�� ���W� ����, ���'���� ��� content � *��,� �-। ����� 4��

'� (� � +� �� 6���`�। 01.<table cellspacing="1" cellpadding="0" border="0" 02.bgcolor="black" height="250" width="400"> 03.<tr height="50"><td colspan="2" bgcolor="white"> 04.<table title="Banner" id="banner" border="0"> 05.<tr><td>Place a banner here</td></tr> 06.</table> 07.</td></tr> 08.<tr height="200"><td bgcolor="white"> 09.<table title="Navigation" border="0">

Page 33: Html bangla

10.<tr><td>Links!</td></tr> 11.<tr><td>Links!</td></tr> 12.<tr><td>Links!</td></tr> 13.</table> 14.</td><td bgcolor="white"> 15.<table title="Content" id="content" border="0"> 16.<tr><td>Content goes here</td></tr> 17.</table> 18.</td></tr></table>

*��,�*��,�*��,�*��,�:

Place a banner here

Links!

Links!

Links!

Content goes here

01.<table title="Shell" height="250" width="400" 02.border="0" bgcolor="black" cellspacing="1" cellpadding="0"> 03.<tr height="50"><td bgcolor="white"> 04.<table title="banner" id="banner"> 05.<tr><td>Banner goes here</td></tr> 06.</table> 07.</td></tr> 08.<tr height="25"><td bgcolor="white"> 09.<table title="Navigation" id="navigation"> 10.<tr><td>Links!</td> 11.<td>Links!</td> 12.<td>Links!</td></tr> 13.</table> 14.</td></tr> 15.<tr><td bgcolor="white"> 16.<table title="Content" id="content"> 17.<tr><td>Content goes here</td></tr> 18.</table> 19.</td></tr></table>

*��,�*��,�*��,�*��,�:

Page 34: Html bangla

Banner goes here

Links! Links! Links!

Content goes here

��������� ���F� ������ �� ��������� ���F� ������ �� ��������� ���F� ������ �� ��������� ���F� ������ �� ( HTML Embed Musi c Tut or i al i n Bangl a)( HTML Embed Musi c Tut or i al i n Bangl a)( HTML Embed Musi c Tut or i al i n Bangl a)( HTML Embed Musi c Tut or i al i n Bangl a)��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

(� � �/& � music {� ��� ���� +4&। Embed �� �� +4�8� music {���� 4. ��� src attribute �� +4�8� media

file �� ������ I� �� 4.। 1.<embed src="/Madine Ko Jain.mp3" />

EMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTES – ezHl:� a�f a{lezHl:� a�f a{lezHl:� a�f a{lezHl:� a�f a{l��$��$��$��$::::

Embeded media player �� ��4�� ��/ �� �1��& ���� ����� attribute �� �+ ���� 4��। a. width - media player �� *+W�

i. height - media player �� �X�

j. hidden – 8�� �� �� +�� 4. ��� media player � *���,� 4�� �। %�� +�/��� ��� �� attribute� ���4� ����

8�� %/�� �&�� 3��� (� � �/& � �� music � �'�&� �K �� option � ��। 1.<embed src="/last breath.mp3" width="360" height="165" />

EMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTESEMBED ATTRI BUTES – ��xle|��} ��xle|��} ��xle|��} ��xle|��} ::::

Embeded media player �� �8,*T�7 �� �1��& ���� ����� attribute �� �+ ���� 4��।

Page 35: Html bangla

autostart – �� attribute �� ��� �� false � true । 8�� �� true ��. 4. ��� (� � �/& �2�� +�3 +�3 �� ���� 4��।

loop - �� attribute �� ��� �� false � true। true �+ �� 3��� ��� ���/ 4�� %� false 3��� 4�� �।

volume - �� attribute d� media file �� volume �+ �� 4.। �� +7� 4� k-akk। view source print? 1.<embed src="/beethoven.mid" autostart="false" loop="false" 2.volume="60" />

������������������������������������ ���L~���L~���L~���L~ ������ �������� �������� �������� �� ( HTML Vi deo Tut or i al i n Bangl a)( HTML Vi deo Tut or i al i n Bangl a)( HTML Vi deo Tut or i al i n Bangl a)( HTML Vi deo Tut or i al i n Bangl a)

��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

Page 36: Html bangla

Music ��� �� �� �'��( ��� �� <embed /> �� ���. (� � �/& � *��,� �� 8.। image �� �� �� embed �� �� ��� closing �� ��

*�.&� ���। src attribute �� �H��� +I� URL(local � global) I� ��� �'��( (� � �/�& *��,� �� 8.।

1.<embed src=" http://www.webcoachbd.com/files/html/htmlexample.mpeg"

2.autostart="false" />

*��,�:

%/�� href attribute �� �H���( +I� URL I� ��� �'��( (� � �/�& *��,� �� 8.। 1.<a href=" http://www.webcoachbd.com/pics/flash/motiontween1easy.swf">

2.motiontween1easy.swf</a>

(�� �� �O� ��� play)

��������� ��������� ��������� ��������� ---- ���L~� ��:���L~� ��:���L~� ��:���L~� ��:

Flash movies (.swf), AVI's (.avi), and MOV's (.mov)। embed �� �+� ������ +�/, ���। .swf files - �� ����� 4�� |�

Page 37: Html bangla

.wmv files – �� ����� 4�� ���}+� ���#& ���� �/।

.mov files - �� ����� 4�� �/� P�� �� ����

.mpeg files – �� ��� standard ���� 8 Moving Pictures Expert Group d� compression movie

��� 6��7 4�.�!।

�/��� ���� ����� ��H� ����� ���� ���4� 4. swf, mpeg �� ���� ���� ।

��������� ��������� ��������� ��������� ---- EMBED ATTRI BUTES:EMBED ATTRI BUTES:EMBED ATTRI BUTES:EMBED ATTRI BUTES:

Src attribute �� �� <embed /> �� �� %�� attribute ��.�! �+���� 4�� volume, autostart, hidden, and

loop ।

autostart - �� attribute �� ��� �� false � true । 8�� �� true ��. 4. ��� �/& �2�� +�3 +�3 �'��( � ���� 4�.

8��। hidden - �� attribute �� �H��� play/stop/pause ��.u� ���। embedded object is hidden or not. Values are true or false. (Hide your embeded media if you just want background noise).

loop - �� attribute �� ��� �� false � true। true �+ �� 3��� �'��( � ���/ 4�� %� false 3��� 4�� �।.

playcount - Setting a playcount �+ �� �3, 4�� media� x number /8, repeat 4�� ����� 4(.� repeat /�����, (playcount="2" �� �3, video � ��� ����).

volume - �� attribute d� media file �� volume set �� 4.। �� +7� 4� k-akk।

��������� 6�L ��������� 6�L ��������� 6�L ��������� 6�L ( HTML Body)( HTML Body)( HTML Body)( HTML Body)��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

Body tag 8 web page �� +�� element H�� ���। Tables, Lists, Forms, paragraph element ������

Body element �� ��H� �2�� 4.।

HTML HTML HTML HTML ---- BODY MARGI NS:BODY MARGI NS:BODY MARGI NS:BODY MARGI NS:

Attributes

Leftmargin: body element. �� �� /��� ���&�।

topmargin :body element �� �/��� ���&�। 1.<body topmargin="50"> 2.<body leftmargin="50">

*��,�*��,�*��,�*��,�:

Top Margin

Page 38: Html bangla

Left Margin

HTML HTML HTML HTML ---- BASE TEXT:BASE TEXT:BASE TEXT:BASE TEXT:

Text attributes �� �H��� Body tag �� �'���� +�� �- �� ��� I� �� 8.। 1.<body text="red" > �

view source print? 1.<body text="rgb(255,0,0)" >

������������������������������������ �L��L��L��L� ������ �������� �������� �������� �� ( HTML Di v ( HTML Di v ( HTML Di v ( HTML Di v Tut or i al i n Bangl a)Tut or i al i n Bangl a)Tut or i al i n Bangl a)Tut or i al i n Bangl a)

��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

<div> �� ����� �� �� /_ �4+�� �& ��� ���� body �� �� ��।

Div ������ ���� 4�� block ������ 8� � ��� �3�� ����� �� ������ ���_ ���।

�+�+�+ �� �U�_ Div ������ ���� ����~/��,।

���� ���' ���m� ������� attributes ��. 4��। id

width

height

title

style

��,���� strong visualization �� &�� ���'� style attribute �� �H��� ��� *��,� �� 8.। 1.<body>

2.<div style="background: green">

3.<h5 >SEARCH LINKS</h5>

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

5.</div>

6.</body>

Page 39: Html bangla

SEARCH LINKS

Google

��������� �L� 9�\���������� �L� 9�\���������� �L� 9�\���������� �L� 9�\�

���� ��%� �3� �$� !@( j. �\����' �4+�� div ������ ���4� �� 8.।

beginning and ending �� �� �H��� div ������ +�� �������� ������ H�� ���� /��। 01.<div id="menu" align="left" >

02.<a href="/">HOME</a> |

03.<a href="/">CONTACT</a> |

04.<a href="/">ABOUT</a>

05.</div>

06.<div id="content" align="left" bgcolor="white">

07.<h5>Content Articles</h5>

08.<p>This paragraph would be your content paragra ph with all of your readable material.</p>

09.</div>

*��,�*��,�*��,�*��,�:

HOME | CONTACT | ABOUT

Content Articles

This paragraph would be your content paragraph with all of your readable material.

01.<div id="menu" align="left" >

02.<a href="/">HOME</a> |

03.<a href="/">CONTACT</a> |

04.<a href="/">ABOUT</a> |

05.<a href="/">LINKS</a>

06.</div>

07.<div id="content" align="left" >

08.<h5>Content Articles</h5>

Page 40: Html bangla

09.<p>This paragraph would be your content

10.paragraph with all of your readable material.</p >

11.<h5 >Content Article Number Two</h5>

12.<p>Here's another content article right here.</p >

13.</div>

*��,�*��,�*��,�*��,�:

HOME | CONTACT | ABOUT | LINKS

Content Articles

This paragraph would be your content paragraph with all of your readable material.

Content Article Number Two

Here's another content article right here.

��������� 96�� �6N ������ ��������� 96�� �6N ������ ��������� 96�� �6N ������ ��������� 96�� �6N ������ ( HTML Bol d & I t al i c)( HTML Bol d & I t al i c)( HTML Bol d & I t al i c)( HTML Bol d & I t al i c) ��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

<b> bold tag ���4� ��� %�� �- ��) ���� /��। 1.<b>This text is entirely BOLD!</b>

*��,�*��,�*��,�*��,�: Bold:

This text is entirely BOLD!

�-�� highlight ���� bold tag ���4� ���� /��।. 1.<p><b>Don't</b> touch that!</p>

*��,�*��,�*��,�*��,�:

Don't touch that!

dictionary fashion.��2� &�� %�� bold tag ���4� ���� /��। 1.<p><b>Cardio:</b> Latin word meaning of the heart .</p>

*��,�*��,�*��,�*��,�: Dictionary

Cardio: Latin word meaning of the heart.

Page 41: Html bangla

HTML HTML HTML HTML ---- I TALI C( S)I TALI C( S)I TALI C( S)I TALI C( S)

The italics tag � key word or phrase �� highlight ���� ���4� �� ����। �� tags %/�� font face ��

stylize � ��� %�J �� ����� ��� �-�� �&� ����। Emphasized tag *.� italics tag �� ��। 1.Italic <i>tag</i>! 2.<em>Emphasized</em> Text! 3.Create a <blockquote>blockquote</blockquote>! 4.Format your <address>addresses</address>!

*��,�*��,�*��,�*��,�: HTML Italics:

Italic tag! Emphasized Text! Create a blockquote!Format your addresses! 1.<b>HTML</b> 2.<i>Hyper Text Markup Language</i> � 1.<b>HTML</b> 2.<em>Hyper Text Markup Language</em>

*��,�*��,�*��,�*��,�: HTML Dictionary

HTML Hyper Text Markup Language or HTML Hyper Text Markup Language

HTML BOLD AND I TALI CHTML BOLD AND I TALI CHTML BOLD AND I TALI CHTML BOLD AND I TALI CSSSS

<b> and the <i> tags �'.��� ��+�3 text format �� &�� ���4� �� 8.।

��H� ���� }� I� 3��� ��� � ���2 �����। 1.<p>Phillip M. Rogerson <b><i>MD</i></b></p>

*��,�*��,�*��,�*��,�:

Phillip M. Rogerson MD

Page 42: Html bangla

<b> and the <i> tags �'.��� �- ����� ���4� ���� ��/� '� ��R 8.। 1.<p>Include several external 2.links throughout your texts as references to your viewers, 3.we will discuss 4.<a href="/" target="_blank" title="Tizag Links"> 5.<b><i>HTML Links</i></b> 6.</a> 7.in a later lesson.</p>

*��,�*��,�*��,�*��,�: Format Links:

Include several external links throughout your texts as references to your viewers, we will discuss HTML Links in a later lesson.

��������� 9��L �6N ��������� 9��L �6N ��������� 9��L �6N ��������� 9��L �6N pre pre pre pre �+�# �+�# �+�# �+�# ( HTML Code & Pr e)( HTML Code & Pr e)( HTML Code & Pr e)( HTML Code & Pr e)��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

code tag �� �H��� %/�� text �� computer code �� �� ��� ��2�� /���। � +H�� '�� text �� font face,

size, ��� letter spacing /����, � ���� /��। 1.This text has been formatted to be computer <code >code</code>!

*��,�*��,�*��,�*��,�: Computer Code

This text has been formatted to be computer code !

Use this tag to separate any computer code you wish to display on your website. It is not always necessary, but the tag exists if you so desire.

HTML HTML HTML HTML ---- CODE LI NKSCODE LI NKSCODE LI NKSCODE LI NKS

/J3� link �4+�� %/�� web page � ��2�� /���। 1.<p>Feel free to search <a href=" http://www.google.com" target="_blank"> 2.<code>Google</code> 3.</a> for 4.anything you wish to find on the internet.</p>

*��,�*��,�*��,�*��,�: Code Links:

Feel free to search Google for anything you wish to find on the internet.

HTML HTML HTML HTML ---- <PRE> PREFORMATTI NG<PRE> PREFORMATTI NG<PRE> PREFORMATTI NG<PRE> PREFORMATTI NG

<pre> tag �� +���H 4� HTML coding �� +�. �8'�� %�� ��� ���, �t+ ����,� ��� ���� I� �+'�� �- *���,�

4��।�3,�% �8'�� ��� ��2��� �+'��� %�/� ��2��। 1.<pre> 2.Roses are Red,

Page 43: Html bangla

3. �2�� ��.� �t+ %�!Violets are blue, 4.I may sound crazy, 5. �2�� ��.� �t+ %�!But I love you! 6.</pre>

*��,�*��,�*��,�*��,�: Roses are Red, Violets are blue, I may sound crazy, But I love you!

��������� iA�������������� iA�������������� iA�������������� iA�����,,,,a�6���a�6���a�6���a�6���,,,,��������������������������2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%�� 1.<p>This text is <sup>superscripted!</sup></p>

*��,�*��,�*��,�*��,�: Superscript:

This text is superscripted!

HTML HTML HTML HTML – EXPONENTSEXPONENTSEXPONENTSEXPONENTS

���� exponential ���4� �� &�� <sup> tag ���4� ���� 4.। 1.2<sup>3</sup> = 8 2.14<sup>x</sup>

*��,�*��,�*��,�*��,�: Exponents:

23 = 814x

HTMLHTMLHTMLHTML – C��:��C��:��C��:��C��:��::::

�/��+ � *��K ��2 8. ��� ��2� reference ��.� &�� <sup> tag ���4� 4. 8 �� ���� ����,� ���।1.<p>"It was a lover's tryst<sup>1</sup>." 2.<hr /> 3.1. Secret meeting between lovers

*��,�*��,�*��,�*��,�: Footnote

"It was a lover's tryst1."

1. Secret meeting between lovers

HTML HTML HTML HTML ---- SUBSCRI PTSUBSCRI PTSUBSCRI PTSUBSCRI PT

Page 44: Html bangla

1.<p>This text is <sub>subscripted!</sub></p>

*��,�:

This text is subscripted! 1.<p>H<sub>2</sub>0 - Water 2.<p>O<sub>2</sub> - Oxygen 3.<p>CO<sub>2</sub> - Carbon Dioxide

*��,�:

H2O - Water O2 - Oxygen CO2 - Carbon Dioxide

HTML HTML HTML HTML – STRI KETHROUGHSTRI KETHROUGHSTRI KETHROUGHSTRI KETHROUGH

<del> tag �� �H��� ��� ��2�� }+ ��(. 8.। 1.<p>This text is <del>scratched</del> out!</p>

*��,�*��,�*��,�*��,�: Strikethrough

This text is scratched out!

HTML HTML HTML HTML ---- CHECK OFF TASK:CHECK OFF TASK:CHECK OFF TASK:CHECK OFF TASK: 1.<ol> 2.<li>Clean my room</li> 3.<li><del>Cook Dinner</del></li> 4.<li><del>Wash Dishes</del></li> 5.</ol>

*��,�*��,�*��,�*��,�:

1. Clean my room

2. Cook Dinner

3. Wash Dishes

��������� C�l ��������� C�l ��������� C�l ��������� C�l ( HTML For m)( HTML For m)( HTML For m)( HTML For m)��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

web server 4�� �3�(name, email address, credit card, �����) "4��� �U�_ webmaster �� &�� Forms ����w/��, tool �4+�� �&। %/�� ��4� ���8.7 form ��,� 4�� ��/� "4� ���। %/�� �2� �3�� �� +�. ���� /��� ,

order ���� /���, ���4���7� /��+�2�� &� ���� /���,%/�� forum � 9 ���[��� ���&���� ���� /��� ����� ।

TEXT FI ELDSTEXT FI ELDSTEXT FI ELDSTEXT FI ELDS

Page 45: Html bangla

��'�� +Z��, forms 6��7 ���� 4. �+ %/���� %�� &��� 4��। Input fields 4�� form ��� sandwich �� ���� ।<input> tag �� ��!� attributes %�! �++� +]�K &� ���� ।

type - �� attribute input field �� *���'� ��H,�� ���। �8�� text, submit, ��� password ।

name - �� attribute� given field �� ����� ��� 8�� /����, �� %/�� reference %��� /���।

size - �� attribute� field �� horizontal width �+ ��� । maxlength – �� attribute� character �� maximum �]� ��H,�� ��� <form method="post" action="mailto: [email protected] "> Name: <input type="text" size="10" maxlength="40" n ame="name"> <br /> Password: <input type="password" size="10" maxlengt h="10" name="password"> </form>

*��,�*��,�*��,�*��,�: Input Forms

Name:

Password:

HTML HTML HTML HTML ---- I NPUT TAGS:I NPUT TAGS:I NPUT TAGS:I NPUT TAGS:

Input fields �� ��H� �8+� �&��+ � '�,[ �+���� 4�� checkboxes, text fields, radios, ��� form submission

buttons। <input /> tag �� ��� closing tag *�.&� ���।

HTML -Type Attribute:

Type attributes �� +4�8� �� *���� input tag ����,� ���� /��।���� ������� input tag ��. 4��।

a. "text"

i. "password"

j. "checkbox"

x. "radio"

l. "submit"

b. "reset"

HTML HTML HTML HTML – CHECKBOXES:CHECKBOXES:CHECKBOXES:CHECKBOXES:

Checkboxes +H��� ���4���7�� �� single question �� �������� �!� ���� ��.। Check boxes allow for multiple items to be selected for a certain group of choices. checkbox ��

name ��� value attributes 8 radio button �� name ��� value attributes �� %��� ���।

Page 46: Html bangla

<form method="post" action="mailto: [email protected] "> Select your favorite cartoon characters. <input type="checkbox" name="toon" value="Goofy">Go ofy <input type="checkbox" name="toon" value="Donald">D onald <input type="checkbox" name="toon" value="Bugs">Bug s Bunny <input type="checkbox" name="toon" value="Scoob">Sc ooby Doo <input type="submit" value="Email Myself"> </form>

*��,�*��,�*��,�*��,�: Checkboxes:

Select your favorite cartoon characters.

Goofy

Donald

Bugs Bunny

Scooby Doo Email Myself

HTML HTML HTML HTML ---- SUBMI T BUTTONS:SUBMI T BUTTONS:SUBMI T BUTTONS:SUBMI T BUTTONS:

Input type �� ��H� "submit" �/��� +��� �� 6��7� �U�_ ��q2�8�� ।specifies a very unique button. 82�

%�� submit button � �/ ���� �2� ��, �� ��, � activate 4��।

�8�4�� %�� submission button 6��7 ����! �� ���� attribute *�.&� � 4�� value attribute। %�� �8

�C�� value attribute �� �� �4+�� ���,�� ���� � button �/� *���,� 4��। "Submit" or "Continue" �C���� value attribute �� �� �4+�� ���4� 4.। .

1.<input type="submit" value="Submit" /> 2.<input type="submit" value="Continue Please!" />

*��,�: Submit Buttons

Submit

Continue Please!

HTML HTML HTML HTML ---- RESET BUTTONS:RESET BUTTONS:RESET BUTTONS:RESET BUTTONS:

+�,��> input type 4� reset button। Setting the type to reset button �O� ��� �H��� %/�� form �� +���!�

%�� /���,� Q'��� ��W. ���. �8�� /����।"start over" button �� %/�� reset button �� �� ���4� ����

/����। view source print? 1.<input type="reset" value="Reset Fields" /> 2.<input type="reset" value="Start Over" />

*��,�*��,�*��,�*��,�: Reset Buttons:

Page 47: Html bangla

Reset Fields

Start Over

��������� 9�`k �C� ��������� 9�`k �C� ��������� 9�`k �C� ��������� 9�`k �C� ( HTML Text Fi el d)( HTML Text Fi el d)( HTML Text Fi el d)( HTML Text Fi el d)��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

Text fields 4� �! %.��U_ 8 %/��� ��� �- ��/� ���� ��� �+� �3� web server /S�� +48� ����। �+�

�3����� scripting language �8�� (PHP, PERL, or ASP) �� �H��� *�}. 4.।

HTML HTML HTML HTML ---- TEXT FI ELD SI ZE:TEXT FI ELD SI ZE:TEXT FI ELD SI ZE:TEXT FI ELD SI ZE:

Size attribute �� �H��� text area �� size ��.u� �� 8.। default size 4� +H��� ik characters ��f,�। 1.<input type="text" size="5" /> 2.<input type="text" size="15" /> 3.<input type="text" size="25" />

*��,�*��,�*��,�*��,�: Text Fields:

HTML HTML HTML HTML ---- TEXT FI ELD MAXLENGTHTEXT FI ELD MAXLENGTHTEXT FI ELD MAXLENGTHTEXT FI ELD MAXLENGTH::::

maxlength attribute ����,1 �� !@ ���4���7 �� ���� characters ��/� ���� /��� ����� %/�� 8�� +�&����,1 ���( 3���। characters ��/� �� +7��c ���� maxlength attribute � ���4� �� 4.। size ���

maxlength ��� 4(. *�.&�। 1.<input type="text" size="5" maxlength="5" /> 2.<input type="text" size="15" maxlength="15" /> 3.<input type="text" size="25" maxlength="25" />

*��,�*��,�*��,�*��,�: Maxlength Attribute

HTML HTML HTML HTML ---- TEXT FI ELD VALUE:TEXT FI ELD VALUE:TEXT FI ELD VALUE:TEXT FI ELD VALUE:

value attribute ���4� ��� %/�� %�� �3��� �- ���) ��!� ���2 �2�� /��� �8 +��� ��2�� /���। view source print?

Page 48: Html bangla

1.<input type="text" size="5" maxlength="5" value="55555" /> 2.<input type="text" size="15" maxlength="15" value="Corndog" /> 3.<input type="text" size="25" maxlength="25" value="Tizag Tutorials!" />

Text Field Values: 55555

Corndog

Tizag Tutorials!

��������� 9�`k ��� � ��������� 9�`k ��� � ��������� 9�`k ��� � ��������� 9�`k ��� � ( HTML Text Ar ea)( HTML Text Ar ea)( HTML Text Ar ea)( HTML Text Ar ea) ��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

�-� ��� �� �� �� � ��&� �3�� �3� �� �� %��� ���m� 4 । Paragraphs, essays, or memos +�=4 � �/` ����-� ��� �� �+�� 8. ��� +��� �� 8.।�-� ��� �� opening ��� closing �� ��.�!। �-� ��� �� ��

�'�� ��� ��!� ��2�� � (� � �/& �� �-� ��� �� *���,� 4.। 1.<textarea>Text Area!</textarea> *��,�

HTML HTML HTML HTML ---- TEXT AREA COLS AND RTEXT AREA COLS AND RTEXT AREA COLS AND RTEXT AREA COLS AND ROWS:OWS:OWS:OWS:

Adjust the of the text area � size �� appearance �� I� ���� 4�� ��� attributes *�.&� �

4�� cols androws। *��� attribute �� &�� +�2��� �� ���� 4��। 8� �@ �� 4�� �� �@ text area 4��। 1.<textarea cols="20" rows="10">Text Area!</textarea> 2.<textarea cols="40" rows="2">Text Area!</textarea> 3.<textarea cols="45" rows="5">Text Area!</textarea>

*��,�:

Page 49: Html bangla

HTML HTML HTML HTML ---- TEXTAREA WRAP:TEXTAREA WRAP:TEXTAREA WRAP:TEXTAREA WRAP:

wrap attribute � ��-� �8,��/ ��H,�� ��� 82� textarea � text field � ��2 ��2�� ��2�� +��� ���> ��� %�+।

Wrap �� ��� H���� �+�� %�!।�8��:

a.soft

i.hard

j.off

wrap attribute �� Soft ��� word�� text area� �'��� ���@�. ���� but form +��� �� 4. �2� ��@�� word���2 8. � (Line breaks �/�� �8� 4. � )

wrap attribute �� Hard ��� word�� text area� �'��� ���@�. ���� ��� ��� �� ���> Line breaks �/�� �8�

4. । ��/� form +��� ���� ��2 8. �8'�� text box � ��2 �!� I� �+'�� ��2��।

wrap attribute �� Off ��� word�� text area� �'��� ���@�. ���� � ��� ��� ���� ����� ���� 3��। 1.<textarea cols="20" rows="5" wrap="hard"> 2.As you can see many times word wrapping is often the desired 3.look for your textareas. Since it makes everythin g nice and 4.easy to read. 5.</textarea>

*��,�:Text Area Wrapping:

1.<textarea cols="20" rows="5" wrap="off"> 2.As you can see many times word wrapping is often the desired 3.look for your textareas. Since it makes everythin g nice and 4.easy to read. 5.</textarea>

*��,�: No Wrapping

Page 50: Html bangla

HTML HTML HTML HTML ---- TEXTAREA READONLY:TEXTAREA READONLY:TEXTAREA READONLY:TEXTAREA READONLY:

readonly attribute �� value ��� yes � no। readonly attribute �� �� yes 3��� %/�� ��H� textarea ��

�-�� ��/ ���� /���� ��� /����, � ���� /���� �।

1.<textarea cols="20" rows="5" wrap="hard" readonly="yes"> 2.As you can see many times word wrapping is often the desired 3.look for your text areas. Since it makes everythi ng nice and 4.easy to read. 5.</textarea>

*��,�:

HTML HTML HTML HTML – DI SABLEDDI SABLEDDI SABLEDDI SABLED

disabled attribute *�.��� ��� textarea � ��2 highlight 4. �, H�+� �� H�� ��� ��� �� ��2�� /����, � ���� /��

�। 1.<textarea cols="20" rows="5" wrap="hard" disabled="yes"> 2.As you can see many times word wrapping is often the desired 3.look for your text areas. Since it makes everythi ng nice and 4.easy to read. 5.</textarea>

*��,�:

������������������������������������ 9��L~9��L~9��L~9��L~ 96�$��96�$��96�$��96�$�� ( HTML Radi o but t on)( HTML Radi o but t on)( HTML Radi o but t on)( HTML Radi o but t on)

Page 51: Html bangla

��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

Radios 4� �� *�� ��/� ��, 8 ���4���7�� �8��� ��� �/�� �+��� ���� ���। ����( ���� � �� �� �� I�'��

���� 4��।"multiple choice" �� H���� P�& ��� *��� &�� Radios ���4� �� +����. '�। 1.Italian: <input type="radio" name="food" />

2.Greek: <input type="radio" name="food" />

3.Chinese: <input type="radio" name="food" />

*��,�*��,�*��,�*��,�: Radios:

Italian:

Greek:

Chinese:

��� ��, � ���� �'Y �+ ����(� %�( ��4�� ��. 4�। 1.Italian: <input type="radio" name="food" />

2.Greek: <input type="radio" name="food" />

3.Chinese: <input type="radio" name="food" />

4.

5.Male: <input type="radio" name="gender" />

6.Female: <input type="radio" name="gender" />

*��,�*��,�*��,�*��,�: Multiple Radios:

Italian:

Greek:

Chinese:

Male:

Female:

������������������������������������---- RADI O CHECKED:RADI O CHECKED:RADI O CHECKED:RADI O CHECKED:

checked ������,�� +4�8� %/�� radio �� �������� ���\ �4+�� �J�~ %�� �3�� ��� ���. �2�� /���। 1.Italian: <input type="radio" name="food" checked="yes" />

Page 52: Html bangla

2.Greek: <input type="radio" name="food" />

3.Chinese: <input type="radio" name="food" />

*��,�:Default Italian:

Italian:

Greek:

Chinese:

��������� \A��L ��������� \A��L ��������� \A��L ��������� \A��L ( HTML Upl oad For m)( HTML Upl oad For m)( HTML Upl oad For m)( HTML Upl oad For m) ��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

upload form ���4� ��� ��&� pictures, movies, � ����� ���&� webpages upload ���� /��। �� upload

form 4� �� H���� input form । %/�� +H��'�� type attribute ���. �� �� �4+�� file ���2 upload form 6��7

���� /���। 1.<input type="file"/>

ezHl:ezHl:ezHl:ezHl::::: UPLOAD FORMUPLOAD FORMUPLOAD FORMUPLOAD FORM

MAX FI LE SI ZEMAX FI LE SI ZEMAX FI LE SI ZEMAX FI LE SI ZE

upload ��� �� size �� +7�� ���H ���. %/�� %/�� webserver �� �=���� space �U ���� /���। �� &��

%�� hidden input field ��� %�( ��!� specific attributes �8� ����। 1.<input type="hidden" name="MAX_FILE_SIZE" value="500" /> 2.<input type="file"/>

�2�� value 100 ��� file +��,X 100kb 4�� /���। *��,�:

��������� �AL�: ��G ��������� �AL�: ��G ��������� �AL�: ��G ��������� �AL�: ��G ( HTML Dr op down l i st )( HTML Dr op down l i st )( HTML Dr op down l i st )( HTML Dr op down l i st ) ��2���2���2���2� ��������: �����E+�����E+�����E+�����E+ %��%��%��%��

Drop down lists 4� ��E��� ���,�� forms. %/�� internet � ���2�!� Drop down lists �2�( ���[�� �*��� � %/�� �8 W�� 3��� �++� ��>. d� /��, 3��। Drop down lists � ���� �/+� 3�� 8 %/�� ���� select ����

/���। Drop down lists ���� <select> and <option> tags ���. 6��7 4.। <select> tag �� �H��� Drop down lists

Page 53: Html bangla

�� ������ ���,��� 4.। <option> tag �� �H��� Drop down lists �� ���� 6��7 �� 4.। 1.<select> 2.<option>California -- CA</option> 3.<option>Colorado -- CO</option> 4.<option>Connecticut -- CN</option> 5.</select>

ezHl:ezHl:ezHl:ezHl::::: DROP DOWN LI STDROP DOWN LI STDROP DOWN LI STDROP DOWN LI ST

selected attribute�� +4�8� %�� /!G�� ��>.��� select �� ��W. *��,� ���� /��।

HTML HTML HTML HTML ---- SELECTI ON FORMS:SELECTI ON FORMS:SELECTI ON FORMS:SELECTI ON FORMS:

size attribute ���4� ��� %/�� drop down list �'��� /��� ��1 *��,� ���� /���। size attribute � select ��� �8 ������� options �� +�3 *��,� 4�� ��1� scroll ��� /���,।

selected attribute�� +4�8� %�� /!G�� ��>.��� select �� ��W. *��,� ���� /��। 1.<select size="3"> 2.<option>California -- CA</option> 3.<option>Colorado -- CO</option> 4.<option>Connecticut -- CN</option> 5.</select>

ezHl:ezHl:ezHl:ezHl::::: SELECTI ON FORMSSELECTI ON FORMSSELECTI ON FORMSSELECTI ON FORMS

California -- CAColorado -- COConnecticut -- CN

HTML HTML HTML HTML ---- SELECTI NG MULTI PLES:SELECTI NG MULTI PLES:SELECTI NG MULTI PLES:SELECTI NG MULTI PLES:

multiple attribute �� �H��� %/�� ���� ��H� ��>. select ���� /���। 1.<select multiple="yes" size="3"> 2.<option>California -- CA</option> 3.<option>Colorado -- CO</option> 4.<option>Connecticut -- CN</option> 5.</select>

ezHl:ezHl:ezHl:ezHl::::: MULTI PLE SELECTI ONSMULTI PLE SELECTI ONSMULTI PLE SELECTI ONSMULTI PLE SELECTI ONS

California -- CAColorado -- COConnecticut -- CN

Page 54: Html bangla