2
��������� �� �-���
(For All Users)
�� ����� �� ���
(https://www.facebook.com/faruk.ice09)
(http://www.WebTechnologyBlog.com)
3
������������ ������������
�������� �������������������� � !�� !�� !�� !� ����
" #$%&� !'!"
����������������
(&)*��+ ,- ���.�
(https://www.facebook.com/groups/Wordpress2Smashing)
(&)*��+(&)*��+(&)*��+(&)*��+ ,-,-,-,- (�&�+��(�&�+��(�&�+��(�&�+��
(http://www.wpbangla.com)
�/� �/� �/� �/�
�� ����� �� ���
(https://www.facebook.com/faruk.ice09)
(http://www.WebTechnologyBlog.com)
�0.�0.�0.�0.
1��� %�+� �+1�
(https://www.facebook.com/zamil.hossainsezan32)
23232323����
Extra Network
www.otirikto.net
5
��� +7��*-
��� �� ����% ��-���(https://www.facebook.com/faruk.ice09) -8��/ ���9 :�;& �+��< ��=��.>��&� �������� �?) ����@������ ��A��&�� (ICE) ����B� 4C4<& ��D* । ��4��&4 ���/� ���9 �� E4��: 1�� +�� +�� �&� ���4 �����B । E� ���/ ����� ��F��4 G�9�& �/� �; ���। G�9�& ��/�4�
�/���/� #�>+� ��� ��+�9 । ����B �/���/ ���4 । �� ����� ��� #� ��B� ���/�9�� । ���.�
%IJ ��� 1��� %�+� �+1� ���&� (https://www.facebook.com/zamil.hossainsezan32)
+�� -���& %� , (&)*��+ ,- ���& @�� #��� -���K�� �� ����� । ��-E*�& 1��4 -��� ��4 ��+
��� ��� �-��� ����4 %�� । ��� ���� �� ��� �/ ���� �+�+�+ �� ��9 ./�4 -��� । ��-�
�����.� ,�-� �L>�� 1��4 -��� ���������-�� @-�( �-��� ����4 %�� । 1��� ���&� +��
EB�EB ���� @�� ���� ���/ �D ���4 ����� । ��-� @�� ���� E��; @J+% �.�&�9� ( ��&��4 /M1/��
���&�9� E� ���� ��� ���� ���/ �D ���4 -���9 । 1��� %�+� �+1� ���� #��� #��� L6�. +� +��
(&)*��+ $- ���.� (https://www.facebook.com/groups/Wordpress2Smashing/)- �(
#��� #��� L6�. 4�.� �%J ���*� ��� ��1� #�<.� %�4 -�� । �����4 �� ��� ���� N�OP� .C�;�4
./��� �� ���� 1��� +�L��� �; ��� ।
�� ����� +�Q*R ��� । #S$% ��� #S��4 98 �� ����� ���� � +7TU* ��- � ���C4 � ���1� ��� ����& .&� �; ����� � । �-��.� ��1 ��1 V�B� �L>��
���� +�� ��W 9�8�& �.�। �&� ��� +�� +�� । X� ��4��U ��� �, 4� E E 1��� +�� +�� �&� ��� ।
- ����� �� ���
6
+T+T+T+T��-Y��-Y��-Y��-Y
#L>&#L>&#L>&#L>&-������������ +T��+T��+T��+T��
!.!.��������� �<?
!.�.��������� �< ��1 ��B
!.�.E E ��&1� %��
!.'.(�&� �)1���� 16 HTML-� �� E��;?
#L>&#L>&#L>&#L>&-������������ Z�Z�Z�Z� ��������
�.!.��������� �>�+� [>���
�.�.��������� Z� ���
�.�.��������� Z� ��� ��B E �\G�� ����� 1� .���
�.�.!.�>B (HTML Tag)
�.�.�.��������� �����?� (HTML Element)
�.�. �. ��������� ):��?� (HTML Document)
�.�.'.��]��@�(Attribute)
�.'.)���- �)�������
#L>&#L>&#L>&#L>&-�4���4���4���4�� %) %) %) %) +��� +��� +��� +���
�.!. %) +��� (<head>…</head> �>B)
�.�.����� �>B(<title>…</title>)
�.�. �� �>B(<meta>)
�.�.!. name ��]��@��� �>�%��
�.�.�.HTTP-EQUIV ��]��@��� �>�%��
�.'.��� �>B(<link>)
�.^. �+ �>B(<base>)
7
�._.`�� �>B(<style>…</style>)
�.a.�bc �>B(<script>…</script>)
#L>&#L>&#L>&#L>&-������������ ��)��)��)��) + + + +������������
'.!.��) +��� (<body>…</body> �>B)
'.�.bgcolor �� �>�%�
'.�.!.���������-� ��&� �>�%�
'.�.background �� �>�%��
'.�.!.(�&�� �>�d4 ���1 �����
'.'.text �� �>�%�
'.^.link �� �>�%�
'._.vlink �� �>�%�
'.a.alink �� �>�%�
'.e. %�) �>B (<h1> ��� </h6>)
'.".->�$� �>B (<p>….</p>)
'.! . f� �>B (<br>)
'.!!.�� f�� 2+( ) �� �>�%�
'.!�. %&�� 2+ <pre>…….</pre> �>�B� �>�%�
'.!�.�)��1�� �����
'.!'.<acronym> �>�B� �>�%�
'.!^.�S�T��� �/ g4���<hr> �>B
'.!_.Marquee �>�B� �>�%�
'.!a.�h�> EB ��
#L>&#L>&#L>&#L>&- -M��-M��-M��-M�� (�&�(�&�(�&�(�&� -�1 -�1 -�1 -�1 ��?����?����?����?�� �>�%��>�%��>�%��>�%�
8
^.!.��?�� �>�%�� <font>….</font> �>B�
^.�.��9� �>B �>�%� ��� �i��� `�� -���4*� ��
^.�. 1���� �?� �>����� �>�%��
^.'.����D #N�+T�% (HTML Entities)
^.^.��������� @-.��� jU<���B�
^._. ��` ���& ��9� ���
#L>&#L>&#L>&#L>&-9&�9&�9&�9&� (�&�(�&�(�&�(�&� -�1 -�1 -�1 -�1 ��`��`��`��` g4��g4��g4��g4��
_.!.5��� ��` (Ordered List)
_.�.��#)�(Unordered List)
_.�. ��`) ��`।
#L>&-+4� (�&� -�1 ����1� �>�%�
a.!.<img> �>�B� ��F��4
a.�.+4�*4
#L>&-��� (�&� -�1 ��� g4��
e.!.%�-����� <a>….</a> �>B
e.!.!.href ����3 %�-���ik) )��]��@��� �>�%�
e.!.�.Title ��]��@��� �>�%�
e.!.�.Target ��]��@��� �>�%�
e.�.�?���� ��� g4��
e.�.���1�� ��� �%+�� �>�%�
e.'.��������� ����� ���
e.^.+4�*4
#L>&-�&� (�&�(�&�(�&�(�&� -�1 -�1 -�1 -�1 ���� ���� ���� ���� g4��g4��g4��g4��
9
".!. ���� g4��� (<table>...</table>)�>B
".�. ����� �>�l4 ��]��@� +T�%
".�.!.align ��]��@��� �>�%�
".�.�.width ��]��@��� �>�%�
".�.�.Border ��]��@��� �>�%�
".�.'.Cellspacing ��]��@��� �>�%�
".�.^.Cellpadding ��]��@��� �>�%�
".�._.bgcolor ��]��@��� �>�%�
".�.a.rowspan ��]��@��� �>�%�
".�.e.colspan ��]��@��� �>�%�
".�.<caption> �>�B� ��]��@� +T�%
".'. ������ �>�$@�?) ����1� �>�%�
".^.��������� �>�$@?) ���-
#L>&-.�� (�&� -�1 ����� �>�%�
! ! ! ! .!!!!.������������ g4��g4��g4��g4�� (<form>...</form>) �>B�>B�>B�>B
! ! ! ! .!!!!.!!!!.Method ��]��@���]��@���]��@���]��@�
! ! ! ! .!!!!.����.Action ��]��@���]��@���]��@���]��@�
! ! ! ! .!!!!.����.Enctype ��]��@���]��@���]��@���]��@�
! .�.��������� ��-�� �>B� ! ! ! ! .����.!!!!. �i� �i� �i� �i� ��m��m��m��m g4��g4��g4��g4��
! ! ! ! .����.����.----+(&)*+(&)*+(&)*+(&)* ��m��m��m��m g4��g4��g4��g4��
! ! ! ! .����.����. ���i ���i ���i ���i g4��g4��g4��g4��
! ! ! ! .����.''''. ��)( ��)( ��)( ��)( ������������ g4��g4��g4��g4��
! ! ! ! .����.^̂̂̂. �i� �i� �i� �i� ���&���&���&���& g4��g4��g4��g4��
10
! ! ! ! .����.____.������������ g4��g4��g4��g4��
! ! ! ! .����.aaaa.+����+����+����+���� ������������ g4��g4��g4��g4��
! ! ! ! .����.eeee.���1���1���1���1 ������������ g4��g4��g4��g4��
! .�.".���+� ��� g4��
! ! ! ! .����.! ! ! ! .n-)@�n-)@�n-)@�n-)@� ��`��`��`��` g4��g4��g4��g4��
! .�.!!.�-��) ��� g4��
#L>&-�B�� (�&� -�1 o��� �>�%�
!!.!.��������� iframe �>B
#L>&-��� ������������������������������������ ��@� ��@� ��@� ��@�
!�.!.<table> �>B �>�%� ��� ��@� g4��
!�.�.CLASS ( ID ��]��@�
!�.�.��������� <div> �>B
!�.'.<div> �>B �>�%� ��� ��@� g4��
#L>&- 4��
!�.!.��������� 4.01- �� +�� �>B
11
#L>&-��� +T��
��������� �<?
��������� %� (�&� �)1���� �T����R E �.�& (�&� -1 g4�� �� %&। �-�� E�. ��1� .N (�&� �)1���
� )��-� %�4 �� 4�� �-��� #�p� ��������� ����� 1��4 %��। HTML �� -TU*q- %� Hyper
Text Markup Language 4�� �� �� �$�� �>r��&1 �&। ��������� - � Markup Language ( �� %& , E �4G�� Markup �>�B� +��; �� �� Markup �>�B� �1 %� (�&� -�1 ����s �����?� ����� �.�*�
���� 4 ���.*� ��। E��- ���� (�&� -�1 �i�, ���1, �������,#�)(, ���)( �4>�. �����?� ���4 -�� ;
�� �� �����?�G�� (�&� -�1 �.�*� �� � ����� �.�*� ���� 4 ��L*�U ��� %� ��*�- �>B � ��������� �>�B� �1। E �� (�&� -�1� #@�-�� %� ��������� �)। f@1�� ��� (�&� -1 (�-�
��� �@�+� ��� ��� �t� ��� View Page Source �t� ���� <html>……..</html> �>�B� ��W ��9� �)
./�4 -(& E& E %� ��������� �)।
��������� �< ��1 ��B�
�� ��&,(�&� -1 g4�� �� , -�1� ����s ����?��� � O��6F ��, �)1�� �� �� -�1� �@���� .(& %& ��������� �>�%� ���। ��������� �� �T� �N> ���� ��������� ):��?�((�&� -1) g4�� �� E ����s u���* (f@1��) �1 ���। ��������� � L� %& (�&� -1 ���*�U� ���R�T��।
E E ��&1� %���
��������� �/� 16 ��. �� �i� ��)�� +��(&>� �>�%� � ����( %��, �-�� ��7@���
Notepad ��� E �i� ��)�� ��9 +/��� �) ��/�4 -����। 4�� ��->�)� @s4 +v�U Notepad++ � ��( @s4 ��)�� E/�� �-�� ��� +�� �) ��/�4 ( 4� �@�-�� ./�4 -���� E��- Adobe
Dreamweaver, HTML Kit �>�%� ���4 -���। �-44 ��� �-��.� Notepad++ �>�%� ���4 ���।
��� ��������� �)�� �� ����� 16 E��� ���� f@1� %��� %��। E��� Internet Explorer,
Mozilla Firefox, Google Chrome �4>�.।
(�&� �)1���� 16 HTML-� �� E��;?
�O� 4� ��B 1�� ��� (�&� �)1�� ��; (�&� �)1�� %� ���� (�&� -�1� ��w� �I�� g4�< �� E/��
�� ��u���� ���� � । �/� �x %� ��u���� ��? E�� L�� #>�@?� /� 98 ��� �+��� �>�%� ���4
12
-�� � � ���.� #>�@�?� y���4 �B�� ���4 %& �G��� %� �� ��� ��u����। ��� �+� ��& ��+
(�&� �)1���� 16 �� ��������� � E��;? ����& �। (�&� �)1���� 16 ��������� -� E��; �।
��������� �>�%� ��� �-�� ZL��Y (�&� -�1 ����s ����?� �.�*� ���4 -����। ��-� CSS(Cascading
Style Sheets) �>�%� ��� (�&� -�1 ����s `�� �>�%� ���4 -����। (�&� �)1���� 16 ���������,
�+�+�+ ( ����- 1���� %��। �� �4��� �>�%� ��� `>��� (�&� +�� g4�� �� E& (`>��� (�&� +�� %�
E/�� �� ��u���� ���� �)। ��z (�&� )��-� %�4 %�� ��( #��� ��9� 1��4 %��।
)���� ��� %�`
+� ���� ��4{�4 ���&
hostghor.com
#L>&-��� Z� �� ��������� �>�+� [>����
��������� �� BI��� ����� �B �� %&। ���� %� %) +��� E <head> �>B �.�& Z� %& �� </head>
�>B �.�& �D %& #6�� %� ��) +��� E <body> �>B �.�& Z� %& �� </body> �>B �.�& �D %&। �� ��
13
��� +����� <html> ( </html> �>�B� ��W �/�4 %��। ��� ���� ��� ��������� �� �>�+� �I��� .�/ ���-
<html>
<head>
�/�� CSS, Java Script �) �>�%� ���4 -����।
<title>
�/�� (�&� -�1� ������ (title) �>�%� ���4 -����।
</title>
</head>
<body>
���� (�&� -�1� E�4<& ����?� +�T% (Text,Image,Table,Form,Audio,Video �4>�.) �� �>�B� ��L> ��/�4 %��।
</body>
</html>
��������� Z� ����
Notepad++ � ���� �T4� -1 /��� ����� �) G�� ��- ���-
15
��� File name:-�� ��i index.html � index.htm �� Save as type:-�� ��i All types(*.*)�+��k ���
save ���� �t� ���। @-��� �.��� Save in #-�� ��� �I� ��� �.�4 -��� ����� ��& +� �����।
��� �/�� ����� )i��- +� ����9। )i��- �B�& ./�� ����� 9��� �4 ���� ��� g4�� %�&�9-
������� E �� ���� f@1� �.�& (�-� ���� ����� �4 �@�-�� ./�4 -����-
�) �) �) �) ���|D�����|D�����|D�����|D�� ��� �/�� <head> ( <body> ��� ��� +��� ./�4 -�0 ,-��4*<�4 ��4� +��� ��
�) ���& ��F��4 ���� ���, 4� ��B ���� �� ��� ��/ %) +���� (�&� -�1� �������� 16 <title >
�>B �>�%� �� %�&�9।�/�� <title> My first web page </title> �>�%��� ��� f@1��� ����� ��� “My
first web page” �/�� ./ E�0। �G�� ���& -����4*�4 ��F��4 ����� �� %�&�9। ��-� ��) +����
(<body>….</body>)-� h1,h2,h3,h4,h5,h6 �� 9&�� �>B }� %�) � ������ �>�%� �� %�&�9। �T�4 ��
���*����� ������ �>�%� �� %& <h1>,<h2,………..<h6> �� 9&�� �>B }�। <p>……</p> �>B }� (�&� -�1
->�$� �/ %&। �/�� ���� L�U �.�� �Y -�� ��F��4 ����� ���।
HTML Z�Z�Z�Z� ������������ ��B��B��B��B E E E E �\G���\G���\G���\G�� �������������������� 1�1�1�1� .����.����.����.����
16
!. ��������� ):��?� (HTML Document)
�. ��������� �����?�(Element)
�.��������� �>B(Tag)
'.��������� ��]��@�(Attribute)
��D& G�� ���~ ����� �� %��
!!!!.�>B�>B�>B�>B (HTML Tag): �>B %� ���������-�� �U E� �L>�� ��������� �) �/ %&। ��4�� �>B
Z� %& �� (<)��r� f��� �.�& ,��-� ��� �<(&)* �� �D %& )� ��r� (> ) f��� �.�&।�E��� <html>,<head>,<body> %� �� ��� �>B। ��4� �>B ��. ��. #�* �%� ��� #�*J ��4� �>�B� �1
��. �� �� Case Sensitive �& , 4�� Small Letter- � �/ ��। �>B �/� ���� G��-TU* ��&� %� E
�>B �.�& Z� %& +� �>B �.�&� �D ���4 %�� ZL� �D �<(&)* –�� -T��* �� ��B ��� |+ (/) �.�4 %��। E��- �>�+� �I���4 ��� .�/�9 E, %) +��� Z� %�&�9 <head> �>B �.�& �� �D %�&�9 </head> �>B
�.�&।��9� �>B ��&�9 E�.� �D �>B �>�%� � ����( %& , �G�� #-��� �>B । E��� �� ->�$� ��/�4
�D �>B </p> �>�%� � ����( %�� �� #-��� �>B।
����.������������������������������������ �����?������?������?������?� (HTML Element): ��������� �>�B� }�� ��������� �����?� B�I4 ।
��������� �����?� %� ���������-�� ����� E� �L>�� (�&� -�1 ����s �����?� �.�*� �� %& ।����
��������� ):���?�� ���� ����� �����?� ���- html, head, title �� body। �98 ��( #��� �����?�
��&�9।
��������� �����?� �4G�� g���;> ��� ��� 4 ��~q--
• Start Tag/Opening Tag �.�& Z� %&। • End Tag/Closing Tag �.�& �D %&। • Start ( End �>�B� ��W Element Content ���। • ��9� N�R Element Content �( ���4 -��। • ��9� Element-�� End Tag �( ���4 -��।
�>-�� ������ ��W� 16 ���� ����� �� E� E��- �� ->�$� ��/�4 ���� <p> �>B �.�& Z� ���4
%& 4�-� ->�$��� ��D&�� �� +����D </p> �.�& �D ���4 %&। �/�� ->�$��� Z� ( �D �>B
(<p>Element Content</p>)���&� %� ->�$� �����?�। #����� �>B �� ������?�� -�*�>� ��W�4 -�� �, �+�� Z�� ( �D �>B ���Y ����� %� ��������� �����?�।
17
����. ������������������������������������ ):��?�):��?�):��?�):��?� (HTML Document): ��������� �����?� }� B�I4 (�&� -1�� %�
��������� ):��?� । ��������� ):���?�� �L� ��� #� %� head ( body +���। ��������� ):��?�
������� #�p� something.html/.htm Extension �.�& save ���4 %��।
''''.��]��@���]��@���]��@���]��@�(Attribute): ���� (�&� -�1 ����s �i�, ���1 � ��( ��9� ���4 -�� �� ��.� #��� ,
`�� ����s L��U� %�4 -��। (�&� -�1 �� ������?�� #��� , `�� -���4*���< �4G�� ���.; (&)*�
%� ��]��@��।�� ��W�4 �; %0…? ���� @.%��U� �L>�� ��D&� -���� �� E�- @-��� @.%��U ./��
Q������� %�)G�� -�1� �� �.�� ./�0 ��z ��� E�. �� )��.�� � �W/�� ./�� 4%�� �� ���?
% �� �1� �� E�� ��]��@��� +%�E>।@-��� @.%��U �� “<h1>My First Heading</h1>” ����� ���
����� �����: ��+�& +� ��� f@1� ����) ��� ./�� “My First Heading ” �/� -�1� �W/�� ./�0।
<h1 align=”center”> My First Heading </h1>
�/�� align ��� ���� ��]��@� �>�%� �� %�&�9 E� value %� “center”,E� ��� %�)�� (�&� -�1�
�W/�� ./ E�0। �+�� ��4� ��]��@��� �� � ���L� ��� ���4 -��। ��]��@��� +L�Uq-�� %�-
<HTML Tag Attribute_Name=”Attribute_Value”>………</HTML Tag>
)���-)���-)���-)���- �)��������)��������)��������)�������
������ �� ��� (�&� -�1� Source Code ./�� ��� ./�4 -� E, <html> �>�B� @-�� <!doctype> ��� ������ �>B ��&�9 ।���� �� %& Doctype Declaration । ��������� ��� f@1�� �) %�� )���- +%�1� �?����� ���4 -��। �� 4� )���- .���<। �� �1 %� ):���?�� L�U ���.*� �� #�*J ):��?��� �� �D& ���4, HTML �� �44� �+*�, W3C }� ��&��4 ��� �4>�.? Doctype Declaration �� +L�U �- %��
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
�/� ��� %) ( ��) +��� ���& ��F��4 ���� ���, 4� ��B ���� �� ��� ��/ +�F
��������� �)�� #�p� <html>…………</html> �>�B� ��W �/�4 %��। ���� Z� �� E�-
18
#L>&-�4�� %) +���
%) %) %) %) +��� +��� +��� +��� (<head>…</head> �>B�>B�>B�>B):
��� �4N�� 1���9 E ��������� ��� #� ���& B�I4-E� ��� #� %� %) +��� । ��� �� +���� E ��9� ���& ����� ��� 4 #�p� <head>…</head> �� �>�B� ��L> �/�4 %��। <head>……….</head> �>B �.�&
%) +��� B�I4। %) +���� ):��?� +7��*4 4�> ���। E��- ):���?�� �����, ):���?�� ��D&��,
):���?� �>�l4 `���<� � �bc �4>�.। �� +���� E ��9� �/ %& 4 (�&� -�1� ��)�4 ./ E& �; ����� ��� ZL� ./ E& �� EG�� ./ E& � +G�� ++*���) ��� �1 ���। %) +����
(<head>……….</head> �>�B� ��W) ���~� �>B G�� ����
�.����� �>B
/. �� �>B
B.��� �>B
�. �+ �>B
�.`�� �>B
� .�bc �>B
����.�������������������� �>B�>B�>B�>B (<title>…</title>): %) ������?���� ��� �>B %�0 ����� �>B E
<title>……</title> �>B �.�& B�I4। �� �>�B� ��W E ��9� ��/ %& 4 f@1�-�� ����� ��� ./ E&। �T�4
(�&� +���� ��D& ��� +�� +B�4 ��/ ���� +�N� ����� �� �� �>�B� ��W �/ %&। +�* ��A� E�4
�-�� (�&� -1�� +%�1 ���)�i ���4 -�� � 16 E�E� title �� G�R #-��+<� । ���� Valid HTML
Document g4�� ���4 #�p� title �>B �>�%� ���4 %��। E��- �-�� E�. www.youtube.com �� (�&�
+��� E� 4�� f@1��� ����� ��� ./�4 -���� Broadcsst Yourself; �� �1�� ����� �� %�&�9 ./��-
<head>
<title> Broadcsst Yourself</title>
</head>
�������������������� �>�B��>�B��>�B��>�B� N�Y N�Y N�Y N�Y E E E E ������������ �������� +�+�+�+� +�&+�&+�&+�& ������������ �/�/�/�/ .����.����.����.����
19
►����� �>�B� �\ +/> ' -e ��� ��L> �� ���।
► ����� �>�B� ��W #6 �� �>B �>�%� �� E�� �। E���
<title><p>Paragraph Here</p></title> - �� ���।
////. �� �� �� �� �>B�>B�>B�>B(<meta>): ����� �>�B� -�� �>�%� �� %& <meta> �>B। �� �>B �>�%� �� %&
):��?� +7��*4 4�> +�s��� ��� 16। E��- (�&� -1�� � g4�� ����9 4� -���&, 4� (�&� +���� �I��, 4� #66 ��( 4�>, (�&� +���� ��D&�� �� ��( #��� ��9�। +�* ��A� ���)�i �� 16 � �>�B� G�R
#-��+<�। �� �� �D �>B ��। <meta> �>�B� +L�� �- %��
<meta name=”meta_Name” content=”meta_Content”>
�� �>�B� +�� name, http-equiv ( content ��� �4��� ��]���� �>�%� �� %& । name ( http-equiv
��]��@��� +�� content ��]���� �>�%� �� %& � �� ��]���� �� �� ��L*�U ��� 16।
���~ name ( http-equiv ��]���� ���& ����� �� %��
!!!!.name ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
i.<meta name=”Developer” content=”Abdullah Al -Faruk”>
�/�� name ( content attribute �>�%� ��� developer ( 4� �� .(& %�&�9।
ii.<meta name=”keywords” content=”html,java,css,php,joomla”>
�/�� -�1� �<(&)*G��� �� .(& %�&�9।
iii.<meta name=”Description” content=”This tutorial about web design & developing” >
�/�� (�&� -�1� +�N� �U*� .(& %�&�9।
iv.<meta name=”robots” content=”noindex/nofollow/all/index”>
robots �<(&)* �>�%��� ��� �-�� (�&� -1�� +�* ��A� ���)i ���4 -��� �।
v. �� ):��?��� ���.; +�& #h� -�����) ��� 16 refresh �>�%� �� %&।
<meta name=”refresh” content=”3,http://www.iceschool.com”>
20
#6 ��� �/ E&�-
<meta http-equiv=” refresh” content=”3,http://www.iceschool.com”>
�� ��� ��4 �4� ����� -� -� (�&� -1�� ����) %��।
����.HTTP-EQUIV ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
�� ���.; +�& -�� (�&� -1�� update ���4 <meta> �>�B� �� attribute �>�%� �� %&।
<meta http-equiv=”expires” content=”sat,30 dec,2011,12.00AM,GMT”>
�� ��� 30 dec-�� -�� f@1� +�*� ��� ):���?�� ���� S4�� ��- +��% ����।
BBBB. ������������ �>B�>B�>B�>B(<link>): ���� ):���?�� +�� ������ ):���?�� +�EB �-� �� %& <link> �>B
�>�%� ���।��( +%1��� �� E& ���� ):���?�� +�� �i���� �� ����� +�EB g4�� �� %& ��� �>B
�>�%� ���। ��� �>B +L�U4 �>�%� �� %& ):���?� �i���� �� `���<� � �bc +�EB ��� 16।
��� �+�+�+ ��� +�& ��� �>B ���& ��F��4 1��। ):���?� ��� �>B�>�%��� ��&��
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
����. �+ �+ �+ �+ �>B�>B�>B�>B(<base>): ���� (�&�+���� +�F ����� ���� (�&� -�1 �)�� ��� �%�+�� �>�%���
16 �>�%� �� %& �+ �>B। <base> �>�B� �L>�� �� ):���?�� �+� URL 1���& .(& %&। ):���?��
%�-���� g4��� 16 <base> �>B �>�%� �� O��L1��। E���
<base href=”http://www.iceiuacademy.com/html/”>
�� E�. ���.� iceiuacademy �� %��-1 %& �� �� -�1 ��� E�. Admission Form ��� ������
-�1� ��� �.�4 �� 4�� �� 16 ��. ��� �>�%� � ��� %��-�1� ����� +�� +�+�� ��� �.� �� E&। E���
<head>
<base href="http://www.iceiuacademy.com/admissionform" />
<base target="_blank" />
</head>
��� +���� ��� Base Tag ���& ��F��4 ����� ���।
21
����.`��`��`��`�� �>B�>B�>B�>B(<style>…</style>): <style> ( </style> �>B �>�%��� �L>�� �� ):���?�
`���<� E�� �� %&। �� ���.� �/� ��1 �B�� �, �+�+�+ ��� +�& �B��। `�� �>�B� +�� type
��� ���� ��]��@� �>�%� �� %& । E���
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
����.�bc�bc�bc�bc �>B�>B�>B�>B(<script>…</script>): <script>( </script> �>�B� �L>�� ):���?� client-side
script E�� JavaScript EB �� %&। 1��bc ��� +�& �� �B��, �/� �B�� �।
���� #-�����.� +�, +��*+ , �>��� ��� ��� ��9� ?
www.extratelecombd.com
22
#L>&-��� ��) +���
��)��)��)��) +��� +��� +��� +��� (<body>…</body> �>B�>B�>B�>B):
��� 1�� ���� ��������� ):���?�� �L� ��� #� %�- %) +��� ( ��) +���। %) +��� ���& -T��* ����� �� %�&�9,�/� ��� ��) +��� ���& ��F��4 ����� ���। 4� ��B ���� �� ��� ��/ ��� ��
+���� E ��9� ���& ����� ��� 4 #�p� <body>…</body> �� �>�B� ��L> �/�4 %��। <body>……</body>
�>B �.�& ��) +��� B�I4। Body Section �� ��� �>B� (<body> ( </body>) #-��� #�*J ��.� �>�%� � ����( %��। ���� (�&� -�1� E�4<& ����?� (Image, Text, Table, Form, Frame, Paragraph, Heading
Etc.) �� +���� ��/�4 %��। <body> �>�B� +�� �� 9&�� ��]��@� �>�%� ��� (�&� -1�� ��D*U<& ���
4� %&।
�.bgcolor
/.background
B.text
�.link
�.vlink
� .alink
����.bgcolor �������� �>�%���>�%���>�%���>�%�� �� ��]��@� �>�%� ��� (�&� -�1� �>�$@�?)� �� -���4*� �� E&।
E��- ����� �)��: ���/ color.html ��� +� ��� �@�-�� ./���
<html>
<head>
<title>Show a Background Color</title>
</head>
<body bgcolor=”red”>
<h1>Background Color is RED</h1>
</body>
23
</html>
�/�� <body bgcolor=”RED”> �>�%��� ��� �>�$@�?)� �� �� %��। ���� ��D& �N ��� �/�� ��� bgcolor=”red” �>�%��� ��� �>�$@�?)� �� �-(� �� ./�0 , ��z ��� E�. �� ���� %�� �� ./�
4�� ��� �� ���? % ��� +�L� ��9। �� �4��� @-�& (�&� -�1 ��� +� �� E&, � ��D�& ���~
����� �� %�-
������������������������������������-���� ��&���&���&���&� �>�%���>�%���>�%���>�%��
(�&� -�1 ��� +� ��� �4��� -��4 ��9। 5�S+�� ���~ ��.� ����� �� %�।
������������ -��4�-��4�-��4�-��4�
+L�� ��9� ��� E�� ���, +., ��, +��1, �<� ��9। ��������� � ��� �>�%� ��� +�& +�+�� ��.� �� �/ E�4 -��। ���� !_�� ����� ����� �� .(& %��
!_!_!_!_�������� ����� ����� ����� ����� ������������: Black Gray Silver White
Yellow Lime Aqua Fuchsia
Red Green Blue Purple
Maroon Olive Navy Teal
�}4<&�}4<&�}4<&�}4<& -��4�-��4�-��4�-��4�
��� 1�� ����� �� �4��� RED-GREEN-BLUE(RGB)। � �4��� ����� ��&� +���& #66 ��&� +C�;। Red, Green �� Blue �� �4��� ����� +��; %�0 rgb । ��4>��� �� (E/� �� ��� ��� �) %�4 �^^(E/� � ����� +7��* ���)। rgb ������� %� rgb(RED,GREEN,BLUE)। ����� @.%�U �N> ���-
Red, Green �������� Blue �������� ��������: bgcolor="rgb(255,255,255)" White
bgcolor="rgb(255,0,0)" Red
bgcolor="rgb(0,255,0)" Green
bgcolor="rgb(0,0,255)" Blue
24
�^^ ���� E��� ����� ����� ���� N�Y +��*�।
4C4<&4C4<&4C4<&4C4<& -��4�-��4�-��4�-��4�
��������� -� ��&� 16 9& �)�1��� ���� %i�)�+�� �) ��%� �� %&।�� �)�� B�I4 %& ����� ��&�
5�S+�� �� ��4�� ���� 16 ���� �)�1� ��&�9।�E���”RRGGBB”-�/�� RR=Red;GG=Green;BB=Blue.। �) �/�
+L�U ��&� %�-"#RRGGBB" #�*J ���� ��� w� +�� (#) 4�-� 5���& �� ���� 16 ��� �)�1� +��1 ���� 16
��� �)�1� �� +����D �<� ���� 16 ��� �)�1�। ��� ��� 1�� )�+�� ( %i�)�+�� ��� ��? ��� " -E*h !
�� +/> �>�%� ��� E +/> G�� B�I4 %& 4 %� )�+�� ��� �� ��� " ( A ��� F -E*h !_ �� +/> �>�%� ���
E +/> G�� B�I4 %& 4 %� %i�)�+�� ���।
)�+��� 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
%i�)�+��� 0 1 2 3 4 5 6 7 8 9 A B C D E F
------------------��&� B�� �8�9। ��N�Y %� E �� ���� N�Y +����~ �� �� F %�
+��*� ��।
@.%�U�
bgcolor="#FFFFFF"
bgcolor=”#0055AA”
[��� �� 4C4<& -��4� %� @R�।�-�� ��� �>�%� �����]
�� �)G�� �-��.� ��� �/�4 %�� � ��� +�* ��� #��� ��� ��* -��� +/� ��� �-�� -9�P�
��� �)�� ��+�& �.��� %��। #�� �-�� ��� �-�� +��(&>� �>�%� ���4 -���।
[��� �� ���������-� E/�� E/�� ��� +� ��� .��� %�� ��� +�+�& @-��� �4��� -��4 �>�%�
���। ]
////.background �������� �>�%���>�%���>�%���>�%�� �� ��]��@� �>�%� ��� (�&� -�1� �>�$@�?) ���1 �>�%� ��
%&। ���1 �>�%��� -��4 %�-
<body background=”����1� ��.����1� ���>�” >
<body background=”web.png” > �/�� web %� ����1� �� �� .png %� 4� ���>�।
E �m�� ��������� ):��?��� +� �� %�&�9 +� �m�� #�p� �>�l4 ���1�� ���4 %��।
(�&��(�&��(�&��(�&�� �>�d4�>�d4�>�d4�>�d4 ���1���1���1���1 ������������������������
.gifGraphic Interchange Format (��� �>�l4)
25
.jpegJoint Photographic Experts Group (�� �i����� %� .jpg )
.png Portable Network Graphic(.gif ( .jpeg �� -��� �� #���)
.BMPWindows Bitmap.
BBBB.text �������� �>�%���>�%���>�%���>�%�� �� ��]��@� �>�%� ��� (�&� -�1� +�� �i��� �� ��L*�U �� %&। E���
<body text=”GREEN”> ,�� ��� <body> ( </body> �>�B� ��L> +�� �i��� �� +��1 ./��।
����.link �������� �>�%���>�%���>�%���>�%�� �� ��]��@� �>�%� ��� (�&� -�1� E�4<& %�-���i� ����� �� ��L*�U
�� %&।�E���<body link=”BLUE”> ,�� ��� (�&� -�1� E�4<& ����� �� �<� ./��।
����.vlink �������� �>�>�>�>�%���%���%���%�� E G�� %�-���i� ��� Already Visit �� %�&�9 4�.� �� ��L*�U �� %&
�� Attribute �>�%� ���। %&।�E���<body vlink=”RED”> ,�� ��� Visited Link �� �� �� ./��।
����.alink �������� �>�%���>�%���>�%���>�%�� �4*��� E ����� @-� �+*� �-� �� %�&�9 4� �� ��L*�U �� %& ��
Attribute �>�%� ���।�E���
<body alink=”GREEN”> �� ��� Link �� �� +��1 ./��।
(�&� -�1 ����� ��� �>�%� �� %& ��� 4 ��� +���� ��F��4 ����� ���।
��) +���� ����s �>B �>�%� ��� (�&� -�1 ����s ����?��� �.�*� ( 4�.� OP� ���
+1�� %&। ���~ ����s �>�B� ��F��4 �U*� .(& %��
%�) %�) %�) %�) �>B�>B�>B�>B (<h1> ��� ��� ��� ��� </h6>):
%�) #�*J ������, �� ��D�&� � -�$��� ������ �>�%� ���4 �� �>B �>�%� �� %&।
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> �� 9&�� �>B �>�%� ��� ������ .(& %&।��.� 5� %�� h1>h2>h3>h4>h5>h6> #�*J
26
h1 �>�%� ���� �8 ����� �?� ./ E�� 4�-� 5�6�& 9� ./ E��। +L�U4 ������ (�&� -�1� �M -� ��D
���। align ��]��@� �>�%� ��� ��.� #��� -���4*� �� E&।�E���
<html>
<body>
<h1 align=”left”>Left Alignment</h1> �� �)��।
<h2 align=”right”>Right Alignment</h2> %�) (�&� -�1� )��.�� ./��।
<h3 align=”center”>Center Alignment</h3> %�) (�&� -�1� �W/�� ./��।
<h4 align=”justify”>Justify Alignment</h4> %�) #��� �8 %�� (�&� -�1� �� -�� +�-���� 1&B �M� ����।
</body>
</html>
->�$�->�$�->�$�->�$� �>B�>B�>B�>B (<p>….</p>):
->�$� g4�<� 16 <p>......</p> �>B �>�%� �� %&।�� �D �>B #-���।->�$��� #��� �I� ��� 16
align ��]��@� �>�%� �� %&। E���
<p align=”center”>Here a Paragraph</p>
align=”left”[�)�� �%+�� left align ��� �� �>�%� � ����( %��]
align=”right”[(�&� -�1� )� ��1*� ���� ���G�� #��� ����]
align=”center”[ #��� ���,����� )� ( �� �h +�� %�� �]
align=”justify”[ ->�$��� ����� )� ( �� @�& �h +�� %��]
->�$��� E�E���� �`��1 ��� 16 ��( ��9� �>B �>%� �� %& EG�� ���~ ����� �� %��
27
f� f� f� f� �>B�>B�>B�>B (<br>): ���� ->�$� ��D ������ ->�$� ��/�4 S4�� ��� ->�$� �>B �>�%� � ���
<br> �>B �>�%� �� E&। �� �>B�� ��� f� �>B �� %& , ��U �� �>B �� ��� �M� �� ��/ S4�� ���
g4�� ���। ZL� ->�$��� 1�E � �-�� E �� ��� <br> �>B �.�& ��� f� g4�� ���4 -���। E��-
<p> You can use a web page editor like Microsoft FrontPage, Adobe Dreamweaver or
similar to create web pages. Webpage editor software works like Microsoft Word™ (a
complicated editor program used for creating and editing pages of books, letters etc.)<br>
Second option is to learn html codes and write html pages in a simple text editor. As
mention eerier, your codes will be seen as WebPages when viewed in a web browser.
�� ��� ��� ��. ��. ->�$� -(& E��।
�������� f�� f�� f�� f�� 2+ 2+ 2+ 2+( ) �������� �>�%���>�%���>�%���>�%��
���������-� ���L� 2+,�>��1 ���� (Enter Key), �>� -����4*4 %�& ZL� ���� 2+ +C�; ���।4� ��
�i��� ��W #�4��� 2+ +C�; ���4 %��   �>�%� ���4 %��। E4G�   �>�%� �� %��,44G�� 2+ +C�; %��।�E���
<p> Java script is an    interpreted object oriented promramming.</p>।�/�� �4���
2+ g4�� %��।
%&�� %&�� %&�� %&�� 2+ 2+ 2+ 2+ <pre>…….</pre> �>�B��>�B��>�B��>�B� �>�%���>�%���>�%���>�%��
��� E�.   �>�%� ���4 � �� 4�� <pre> �>B �>�%� ���4 -��।�� �>�B� ��W 2+,�>��1 ����
(Enter Key), �>� -����4*4 %& � #�*J E4G� 2+ �>�%� �� %& 44G�� 2+ g4�� %&। E���
<pre>Hyper Text Markup
Language</pre>
Output: Hyper Text Markup
Language
28
�)��1���)��1���)��1���)��1�� ������������������������
�� ��D�& ���� ��F��4 ->�$� ��/�� � ��D�&� ���� ������ .(& E�4 -�� ������ E, � ->�$��� @-� �@+
�+*� �/�� �������� ���� �&4�� ��i ./ E��, E .�/ �@1� +%�1 ��W�4 -�� ->�$� �� ��D&�� �<। � 16
�>�%� �� %& title ��]����। @.%���
<html>
<head>
<title> Use of title attribute in a paragraph tag</title>
</head>
<body>
<p title="HTML is a Markup Language">HTML is an acronym for HyperText Markup Language.
HTML documents, the foundation of all content appearing on the World Wide Web (WWW), consist
of two essential parts: information content and a set of instructions that tells a computer how to
display that content. The computer application.That translates this description is called a Web
browser. </p>
</body>
</html>
�@�-��� ./�� ����� ->�$��� @-� E �� ��� �@+ �+*� �/�� ���� ��i� ��W "HTML is
a Markup Language" �/�� ./�0।
<html>
<head>
<title> Use of title attribute in a paragraph tag</title>
</head>
<body>
<p title="HTML is a Markup Language">HTML is an acronym for HyperText Markup Language.
HTML documents, the foundation of all content appearing on the World Wide Web (WWW), consist
of two essential parts: information content and a set of instructions that tells a computer how to
29
display that content. The computer application.That translates this description is called a Web
browser. </p>
</body>
</html>
<acronym> �>�B��>�B��>�B��>�B� �>�%���>�%���>�%���>�%��
(�&� -�1 �� ���� ����D ��\� @-� �+*� �/�� � �\ +7��* ���� 4�> �&4�� ��i ./ E&।<acronym> �>B �>�%� ��� �� �1�� �� %&।�E���
<p><acronym title=” HTML is a Markup Language”>HTML</acronym> is the basic markup
language for web page.It is created by Tim Berners Lee.It is controlled by < acronym
title=”World Wide Web Connection”>W3C</ acronym ></p>
�@�-���
�S�T����S�T����S�T����S�T��� �/ �/ �/ �/ g4���g4���g4���g4���<hr> �>B��>B��>B��>B�
(�&��-�1 �S�T��� �/ g4�� ��� 16 <hr> �>B �>�%� �� %&। �� �� �D �>B ��। ���~� ��]��@�G�� �>�%� ��� �� �@���� -���4*� �� E&�
30
*align: �/� #��� -���4*� ���4�
align=”center”[�)�� �>��]
align=”left”
align=”right”
*color: �/� ��� ��L*�U ���4।
*size: �/� @�4 ��U*& ���4। �� �� �-�i�� %&।
*width: �/� �+F4 ��U*& ���4। �� �� �4�� � �-�i� @�&� %�4 -��।
@.%���
<hr align=”center” size=”10” width=”50” color=”RED”>
Marquee �>�B��>�B��>�B��>�B� �>�%���>�%���>�%���>�%��
��� ����s ��@1 (�&� +��� ./�4 -� E , +��4� +�.G�� -�1� ���.� ��� #6�.�� E& <marquee>
�>B �>�%� ��� �� �1�� �� E&।��N�Y +L��4 %�) � ->�$��� b� ���� %&।�E���
<marquee>�-�� E �/G�� b� ���4 �� 4 �/�� ��/�4 %��</marquee>
marquee �>�B �>�l4 ��]��@�G�� %�-
direction=”left”[ �/G�� )� ��� ��� E��]
direction=”right”[�� ��� )��]
direction=”up”[��� ��� @-�]
direction=”down”[@-� ��� ����]
@.%�U�
<marquee direction=”right” scroll amount=”2”>HTML Is The Basic Of Web
Design</marquee>
�h�> EB ���
31
��������� �) ���� �8 %�� +/� ��� ��&1�<& �) /��1 �� ���4, -���4*� ���4 � ��W�4 +�� %&।� ���U ��)� ����s #�� �h�> EB �� E&, E�4 /�� +%�1 ��1� �@1� � )��-� +%�1 ��W�4
-��।�� �h�> f@1� � (�&� -�1� @-� �� ��� ��� � #�*J �h��> E �/ %& 4 ��� ++* ��)�
��� �� �@�-�� ./ E& �। �h�> EB ��� ��&� %��
<!--Your Comment Here-->
���� @.%�U ./��-
<html>
<body>
<h1> First Heading</h1> <!--This is first heading-->
<p> HTML documents, the foundation of all content appearing on the World Wide Web (WWW),
consist of two essential parts: information content and a set of instructions that tells a
computer how to display that content. </p> <!--This is a paragraph about html-->
</body>
</html>
)���� ��� %�`
+� ���� ��4{�4 ���&
hostghor.com
32
#L>&- -M�� (�&� -�1 ��?�� �>�%�
��?����?����?����?�� �>�%���>�%���>�%���>�%�� <font>….</font> �>B��>B��>B��>B�
�?� (�&� -�1� #4>h G��-TU* ���� �����?�। ��C�4 `�� ��. ��?�� E ����Y4 ��+ 4�� ��?�� �-��* �� %&। � +�� �-��*� +�*� ��&B ./ E�� CSS-�। ��?�� -��-TU* ��&h� -(& E�� HTML ( CSS �>�%���
�L>��। �?� +�|; �1 ��� 16 HTML –� <font>…</font> �>B �>�%� �� %&। �� +�� color, face �� size ��]��@� �>�%� ��� �?� `�� -���4*� �� E&। � �4��� @-.�� )������) #�*J �� -����4* CSS
�>�%� �� @R�।
i.Color ��]��]��]��]��@�����@�����@�����@��� �>�%���>�%���>�%���>�%��
��?�� ��� ��L*�U �� %& �� ��]��@��� +%�E>। E���
<font color=”#ff0022”>Some Text Here</font>
ii.Face ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
��?�� �@���� ��L*�U �� %& �� ��]��@��� �L>��। 4�� ��� ��?�� �� @��/ ���4 %�� E� 4 +�
��7@��� ���। E���
<font face=”Arial”> Some Text Here </font>।
�/�� ���L� ��?�� �� @��/ �� E�4 -�� ��z 4�.� ��W �� �>�%� ���4 %��। E���
<font face=”Arial”,”Times New Roman”,”Solaiman Lipi”> Some Text Here </font>।
iii.Size ��]��@��]��@��]��@��]��@������������ �>�%���>�%���>�%���>�%��
��?�� ��� ��� �� %& -�&?� �%+��। �� -�&?� %� !/a� ���� +��। �)�� �%+�� �� �� ��� !�
-�&?�। �� +�� + � - ��� +% ! ��� a -E*h +/> �>�%� ��� ��?�� ��� -���4*� �� E&। ��4 �Y E�B
�?� +�1 �� -�&?� ��� -����4*4 %&।@.%���
!. <font size=+1>Web development</font>[ �� �� !' -�&?� ]
�.<font size=-2>Web development</font> [ �� �� e -�&?� ]
�%+�� ��� %& #����� ��W�4 -��9� �; ���� ����� �� E�-
33
�)�� �� !�+ (size=�/�� E �.���*�)
! � �� 16 �%+� �� E�- !�+(!*�)= !�+�=!'
� � �� 16 �%+� �� E�- !�+(-�*�)= !�-'=e
Size Attribute ���& ���� @.%�U ���~ .(& %��
<html>
<head>
</title>Font Size</title>
</head>
<body>
<font face=”arial” size=”-2”> Error! Hyperlink reference not valid.>
<font face=”arial” size=”-1” > www.webtechnologyblog.com </font><br>
<font face=”arial” > www.webtechnologyblog.com </font><br>
<font face=”arial” size=”+1” > www.webtechnologyblog.com </font><br>
<font face=”arial” size=”+2”> www.webtechnologyblog.com </font><br>
<font face=”arial” size=”+3” > www.webtechnologyblog.com </font><br>
<font face=”arial” size=”+4” > www.webtechnologyblog.com </font><br>
</body>
</html>
�.�*��
34
+�G�� ��]��@� �>�%� ��� ���� �) ���� .(& %��
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
��9���9���9���9� �>B�>B�>B�>B �>�%��>�%��>�%��>�%� ������������ �i��� �i��� �i��� �i��� `��`��`��`�� -���4*�-���4*�-���4*�-���4*� �������� E&।E&।E&।E&। E��� E��� E��� E���
*�������������������� ./�4� ./�4� ./�4� ./�4�
i.<I>Some Text Here</I>
ii.<address>Some Text Here</address>
iii.<cite>Some Text Here</cite>
* �m �m �m �m ./�4� ./�4� ./�4� ./�4�
35
i.<B> Some Text Here</B>
ii.<EM>Emphasized Text</EM>
iii.<strong> Some Text Here</strong>
*�?)�����?)�����?)�����?)���� ./�4� ./�4� ./�4� ./�4�
<U> Some Text Here</U>
* �m �m �m �m + �������������������� + �?)�����?)�����?)�����?)���� ./�4� ./�4� ./�4� ./�4�
<B><I><U> Some Text Here</U></I></B>
*#66�#66�#66�#66�
1.<blockquote> ..</blockquote> [ @�C�4 ��� ��� 16 ]
2.<Q>…..</Q> [ ������ @�C�4 ��� ��� 16 ]
3.<dfn>Definition</dfn>[ �� )������ .&� 16]
4.<samp>Sample Computer Code Text</samp>
5.<kbd>keyboard</kbd>
6.<var>Variable</var>
7.<code>…….</code>[ Programming code ��W��� 16 ]
8.<sample>Program �� Sample Output</sample>
9.<strike>�W ���� .B</strike>
10.<big>Text Font �8 ./� 16</big>
11.<small> Text Font 9� ./� 16
12.<TT>��-������ �4 ./�4 </TT>
13.<blink>Text �� �� ��� 16</blink>
36
14.<sub>:H<sub>2</sub>O[Output:H2O]
15.<sup>a<sup>2</sup>+b<sub>2</sub>[Output(a2+b2)]
1���� 1���� 1���� 1���� �?��?��?��?� �>������>������>������>����� �>�%���>�%���>�%���>�%��
����s �?� �>�%� ��� ):��?��� ��D*U<& ��� 4� E&। ��z �� ���� �8 +�� %� �-�� �>�l4 �?���
�@1��� ��7@��� �( ���4 -��। �#��& �@1� �-�� ):��?��� ./�4 -��� �। ��4 ��� (�&� +��
g4��� @��p �>%4 %��। �� +�� +�L��� 16 ��7@��� �>�l4 +�� �?�+�T%�� ��&��� 1���� �?�
�>�����4 �B �� %�&�9। (�&� -�1 �-�� �>�l4 �?��� E�. �@1��� ��7@��� �( ��� �� E�. �-��
1���� �?� �>����� �� @��/ ���� 4�� � �>����� �L> ��� ���� �?� ��9 �(& %��।��� �>����� �?�
./�4 �& �9��9। ��� �/� �?� �>����� +�� -����4 %�। -M��� 1���� �?� �>����� �� %��
I.cursive
Ii.fantasy
Iii.monospace
Iv.sans-serif
v.serif
�������������������� @.%��U@.%��U@.%��U@.%��U +����+����+����+���� �?��?��?��?� �>������>������>������>����� �>�%��>�%��>�%��>�%� ./�� ./�� ./�� ./�� %��%��%��%��
<html>
<head>
<title>Generic Font Families</title>
</head>
<body>
<h3> Generic Font Families</h3>
<p style="font-family:serif; font-size:14pt;">serif family</p>
<p style="font-family:sans-serif; font-size:14pt;">sans-serif family</p>
<p style="font-family:cursive; font-size:14pt;">cursive family</p>
<p style="font-family:fantasy; font-size:14pt;">fantasy family</p>
<p style="font-family:monospace; font-size:14pt;">monospace family</p>
37
</body>
</html>
�.�*��
����D����D����D����D #N�+T�%#N�+T�%#N�+T�%#N�+T�% (HTML Entities):
��9� #N� ��&�9 EG�� +�+�� HTML ��)� ��W �/ E& �।�E��� (&,””,<>)।��� ��9� #N� ��&�9 EG�� �<��)* �.�& ��/ E& �। E���(∞,µ,α,Ủ,µ �4>�.)। �+� N�Y ��9� �) �>�%� �� %& E�.��� �� %&
Entity Code।��4� #N��� �� L��U� Entity Code ��&�9 -+/>B4 ( �\B4।�E��� µ �� Entity Code %�-
+/>B4 �\B4
μ ; μ
��9� Entity Code ���~ .(& %��
#N� +/>B4 �� �\B4 ��
“ " #quot;
< < < > > >
& & & ® ® ®
© © © µ μ μ
38
♥ ♥ ♥ ♠ ♠ ♠ ♣ ♣ ♣ ♦ ♦ ♦
��� +�* ��� �-�� �-�� ��&1�<& Entity Code +$% ��� ���4 -���।
������������������������������������ @-.���@-.���@-.���@-.��� jU<���B� jU<���B� jU<���B� jU<���B�
������������������������������������-�������� +��+��+��+�� @-.�+�T%�� �� ��B �B �� E&।E��
!.V� ����� �� V� ���� ��� �� ��.� ��B -�� ��� f� g4�� %&। E��� ��� ->�$� �>B�� ��� ���� ��/�� 4�.� �@�-�� ��. ��. ���� ./ E��। @.%��U� +%�E> ./�� %�-
<p>First Paragraph </p><p> Second Paragraph</p>
�@�-���
First Paragraph
Second Paragraph
#�*J �� ���1� ���� ��� V� g4�� ����9। ���������-� <p>,<h1> ��� <h6>, <hr> �4>�. %� V� ����
�����?�।
�. �i� ����� �� �� ���� ���4 -��। ��.� ��B -�� ��� f� g4�� %& �। V� ���� �����?� ��.
+�� �����?�� �i� ���� �����?�।
��` ��` ��` ��` ���&���&���&���& ��9���9���9���9� ������������
�� @-.��� ��W #6 @-.� �-� ��� %� ��`। ��` ��4G�� ��&� ��� ���।�E��-
!.��4�� @-.� -��-��� ��`) %�4 %��।�E��-
<p><B>HTML</p> �� ��� ��U <B> �>B �D %& ��।
�. ��`) 5� +�I� %�4 %��। E��-
<p><B>HTML</p></B> �� ��� ��U <B> �>B 5� ��� ��� ��।
�.V� ���� @-.��� #6 V� ���� @-.��� ��W ��`) �� E�4 -��।�E���
<p>html is the basic of <h1>Web Design</h1></p>
39
4.V� ���� @-.��� �i� ���� @-.��� ��W �` �� E�� �।�E���
<B>Something<p>Paragraph here</p></B> �� ���।
�5��� ���& ���4 +L�U 4�>
www.cricketw.com
#L>&-9&� (�&� -�1 ��` g4�� ���.� g.��P� 1<��� ����s ��1� 16 ��` g4�� ���4 %&। E��- �1� ��`, ���&� ��` , ����� ��` �4>�.। ����s +/> � �4<� �.�& �� ��` g4�� �� %&। �I� 4��� 4�>��<�� (�&� -�1 OP���� @-�-��� 16 ��` �����?� (<li>….</li>) �>�%� �� %&। <li>….</li> �>B �>�%� ��� 4�>��<� ��` g4�� �� %&। �� �D �>B #-���। �4� ����� ��������� ��` ��.>��। <ol> �>B �.�& Z� L���%� � #�)�) ��`(ordered list), <ul> �>B �.�& Z� ��� L���%�4%<� � ��#�)�) ��` �� <dl> �>B �.�& Z� ��� +X�T�� ��`(definition list)। 4�� ordered ( unordered list-� %� HTML-�� �L� ��`। ��� �/�� �� ��� ���&� ����� ���-
1.<ol> - ordered list(Numbered List)
2.<ul> - unordered list(Bulleted List)
40
����. 5���5���5���5��� ��`��`��`��` (Ordered List):
4�>��<�� �+��&� ��� #S+�� @-�-��� 16 Ordered List �>�%� �� %&। ��� ���� V� ���� @-.�।
Ordered List ��� �� %& <ol>….</ol> �>�B� �L>��। �� +�� type ��]��@� �>�%� ��� ��L*�U �� %&
�+��&� ��� ��� %��। ����� @.%�U�� ./���
�) �) �) �) ���|DU����|DU����|DU����|DU� !. ���� ��L*�U ��� �.�4 %�� E ���`� L�� ��� %�� । ' ��� ���� ��� ��L*�U ��� �.�&�9 E ���.� g4�� ��` %�� 5��� ��` 4� ��� <ol>….</ol> �>B �>�%� ����9।
�. ��-� E �����G��� ��` g4�� ��� 4�.��� <li>…</li> �>�B� ��W �/�4 %��। ��� �@�-�� ./��-
An Ordered List:
• Coffee
• Tea
• Milk
@-��� �@�-�� �N ��� �/�� ��`G�� g4�� %�&�9 !,�,�... 5�S+��, �� �)��। ��z ��� E�. �� ���.� ��`G�� a,b,c….� i,ii,iii….5�S+�� %� 4�� ��� �� ���? % �� ��1� 16 ��&�9 ��( �� ����� L���%� ��`(ordered list) ��&�9। �G�� +L�� !,�,� ����� -����4* ��� ��� � �U* %�4 -�� 4 �8 %�4� � 9� %�4�। type ��]��@� �>�%� � � ��� -���4*� �� %&-
1.<ol type="a"> // a,b,c…�� 5�� ./��।
2.<ol type="A"> //A,B,C... �� 5�� ./��।
3.<ol type="i"> // i,ii,iii... �� 5�� ./��।
4.<ol type="I">// I,II,III... �� 5�� ./��।
�������������������� @.%�U@.%�U@.%�U@.%�U ./��� ./��� ./��� ./���
41
�������������������� �4�4�4�4 ���������������� ./��� ./��� ./��� ./���
Letters list:
• Apples
• Bananas
Lowercase letters list:
• Apples
• Bananas
Roman numbers list:
• Apples
• Bananas
Lowercase Roman numbers list:
• Apples
• Bananas
Start ��]��@� �.�& ���1� �0SE&< ��� %�4 ��` Z� �� E&। E��-
42
�.�*��.�*��.�*��.�*�: 4.Buy Food
5.Enroll in College
6.Get a Degree
////.��#)���#)���#)���#)�(Unordered List)
� L���� ���` �� Serial Number ��� � , �� -����4* ����s Symbol �>�%� �� %&। <ul>…<ul> �>B �>�%�
��� Unordered List ��� �� %&। Type Attribute �>�%� ��� ����s Symbol .(& %&।����� @.%�U
./���
�.�*��.�*��.�*��.�*�:
An Unordered List:
• Coffee
• Tea
• Milk
<ul> �>�B� +%�E> ����� ��` g4�< �� %&। ����� ��` ��� �4� ��� E�� !. squares(■) �.disc �.circles(○) । default �%+�� +L��4 full discs �>�%� �� %&। <ul> �>�B� +�� type ��]��@� �>�%� ��� ����s �+�� .(& E�4 -��। E��-
43
<ul type="square">
<ul> type="dics">
<ul> type="circle">
����� @.%�U�� ./���
�.�*��
Disc bullets list:
• Apples
• Bananas
Circle bullets list:
• Apples
• Bananas
Square bullets list:
• Apples
• Bananas
��`) ��`) ��`) ��`) ��`���`���`���`�
45
)���� ��� %�`
+� ���� ��4{�4 ���&
hostghor.com
#L>&-+4�+4�+4�+4� (�&�(�&�(�&�(�&� -�1 -�1 -�1 -�1 ����1�����1�����1�����1� �>�%��>�%��>�%��>�%� �& +�� (�&� +���� ��9� � ��9� ���1 �>�%� �� %�& ���। ���1 �>�%�� ( &� -1�� .C�;�P� ( ��D*U<&
%�& (�I। (�&� -1�� OP� ��� +1�4 E�� ����s `����� �?�, ��D*U<& �>�$@?) ��� ��&1� 4���
����1� G��( #���। (�&� -1�� OP� ��� +1�4 ���1 �>�%� �� %&। <img> �>B �>�%� ��� (�&� -�1
���1 +E�� ���4 %&।�� �� �D �>B ��, 4�� �� +�� src ��]��@� �>�%� ��� ���1 ����� 1���& �.�4
%&। E��-
46
<img src=”����1� �����/����1� ��.()�)����1� ���>�”>
<img src=”image/web.jpg”>
�/�� ��W�� %�0 E Image ��� �m�� � web.jpg ��� ���� ���1 ��&�9।
��z �-�� E �m�� HTML ����� +� ����9� +/��� E�. ���1�� ��/� 4�� ����1� ����� ./�4 %��
�। E��-
<img src=”web.jpg”>
���� ���1 �>�%� � ��� +�+�� �� (�&� +���� ���1 B>��� ��� ���1 ����� 1���& .(& E�4
-��। E���
<img src=”http://www.image.google.com/ html/html5.jpg”>
<img> �>�B ��( ��9� ��]��@� �>�%� �� %& EG�� ���� ����� �� %�-
����.width(((( height ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
(�&� -�1 ���� ���1 �� -���� 1&B ���& �.��*4 %�� 4 ���.*� �� %& <img> �>�B� width ( height ��]��@� ��
�L>��। ��.� �� ��� �� %& �-�i��। width ( height ��]��@� �>�%��� ��� (�&� -1 �4 �) %& ��U
f@1��� S4� ��� ���1 +�1 �� ���4 %& �। width ( height ��]��@� �>�%� ��� 9� ���1�� �8 �� �8
���1�� 9� �� E&। �>�%����L�
<img src=”image/web.jpg “width=”300” height=”200”>
////.Align ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
����1� #��� ���.; ���4 align ��]��@� �>�%� �� %&। E���
<img src=”html.jpg” align=”left”>
�i��� ��W ���1 �>�%� ���4 %�� align ��]��@��� ���~� �>�� G�� �>�%� �� %&�
*align=”top”[ �i��� #��� ����1� @-� �.�� ]
47
*align=”middle”[ �i��� #��� ����1� �W ���� ]
*align=”bottom”[ �i��� #��� ����1� ����� �.�� ]
.........................................................................................................
*align=”left”[ ����1� #��� (�&� -�1� �� �.�� ]
*align=”right”[ ����1� #��� (�&� -�1� )� �.�� ]
BBBB.Border ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
�)�� �%�+�� ����1� �� �)*� ��� �। ���1 �)*� g4�� ���4 �� ��]��@� �>�%� �� %&। �)*��� ��
�)�� �%�+�� ��� ��� � �� -���4*� �� E& � 4�� � -���4*��� �1�� `���<��� �L>�� �� E&।�� ��
L� %& �-�i��। �>�%����L�
<img src=”faruk.png” border=”4”>
����.hspace (((( vspace ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
->�$��� ��W ���1 ���� �i� ��� ����1� �S�T��� .T�� (@�&-�/�-��)���.*� �� %& hspace �� @�� .T��(@-�� ( ����) ���.*� �� %& vspace ��]��@� �>�%� ���।�E���
<p>Use of hspace and vspace Attribute <img src=”wp.jpg” hspace=”20” vspace=”10”></p>
����.Alt ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
�� ���U f@1� E�. ���1 �.�*�� �>�* %& � �@1� ���1 �� ��� ��/ � L<�� -1 �) %�� ���U E�.
���1 �) � %& 4�� ����1� ��� ���� ��B � �i � ���� ./ E&,E� @-� �+*� �/�� ���1
+7��* ������-� �L> ���� 4�> -(& E& � +�+�� �i� ./ E&। alt ��]��@� �>�%� ��� �� �1�� �� %&।�E���
<img src=”joomla.jpg” alt=”joomla admin panel picture”>
<img src=”photo.jpg” alt=”my photo with my friends”>
48
����1� ��� E�. alt ��]��@� -� �>�l4 �i��� ./& �� +� E�4 �T� �i��� +�� ���� � E& + ���U
�i����� ���<� �L> �/ E�4 -��।�E���
<img src=”joomla.jpg” alt=”[joomla admin panel picture]”>
�� ��� E�. �� �i��� ����s �i� `��� �- �.�4 �� 4�� <img> �>B�� � �>�B� ��W ��`) ���4 %��।
E���
<I><img src=”joomla.jpg” alt=”joomla admin panel picture”></I>
<img> �>�B� +�� title ��]��@� -�� �L>�� �)��1�� ����� �>�%� �� E&। �� ��� �@+(���� +�&
Alt �i��� -����4* title ��]��@��� �i� ./��। E���
<p><img src=”mmm.png” title=”HTML A Markup Language”>HTML is an acronym for
HyperText Markup Language. HTML documents, the foundation of all content appearing on the
World Wide Web (WWW), consist of two essential parts: information content and a set of
instructions that tells a computer how to display that content. The computer application.That
translates this description is called a Web browser. </p>
�@�-����@�-����@�-����@�-���
49
+4�*4�+4�*4�+4�*4�+4�*4�
!.(�&� -�1 �Y�4� ���1 �>�%� ����� �।
�.#��� �8 +��1� ���1 �>�%� ����� �।
�. Width ( height ��]��@��� �L>�� ���1 +�1 ���.; ��� ��&
���.; +��1� ���1 �-��) ���।
'.alt ��]��@� �>�%� ���।
^.(�&�� ���1 �-��) ���� 4� �&���� ��9�� /�- %�& E&
4� ��� /�- ���� ���1 �-��) ����� �।
_.��� -�1 ��+�� #���G�� ���1 �>�%� ����� �।
#L>&-������������ (�&�(�&�(�&�(�&� -�1 -�1 -�1 -�1 ������������ g4��g4��g4��g4�� %�-�����%�-�����%�-�����%�-����� <a>….</a> �>B��>B��>B��>B�
��� %� (�&� +���� #64� G��-TU* ���� ��D&। ���������-�� �L>�� ��� ���� ��� (�&� -1 g4�� ��� ��z +G�� ��Y �� %& ��� �>�B� +%�E>; �98( ���� (�&� +���� +�� #6 ������ (�&� +���� +�EB �� %& ��� �>�B� �L>��।(�&� -�1� �� ���� �t� ��� #6 E �� -�1 E(& E&। #>�� �>B (<a>…</a> �>B) �� +%�E> ��� g4�< �� %&। ZL� �i� �& �-�� ���� ��� ��� ��n�+� @-� ��� �.�4 -���,��� 9��� @-� ��� �.�4 -���,�8 �� (�&� -�1� O��-Y g4�< ��� �� �����G���4 ��� �.�4 -��� �4>�.।��� �>�B� +�� href, title, ( target ��]��@� �>�%� �� %&। ��� �>�B� +L�U q-�� %�-
<a href=” E -1�� +�EB ���4 �� 4� �I��” target="���� �t� ���� S4� -1�� �4*�� -�1� �) %�� ��� S4� @��?)�4 /���� 4 �I� ��� �.�4 %��" title=”����� @-� �@+ ���& B�� Bh�> (�&� -1 +7��* ��B� L�� �.�” > f@1�� E ./�4 ��, E� @-� �t� ���� Bh�> -�1 E(& E�� </a> ।���� @.%�U ./��-
<a href="http://www.google.com/" target="_blank" title=”Search Engine”>Google Home</a>
�� ��� ��� ):���?� Google Home �/�� ./�4 -�, E�4 �t� ���� www.google.com (�&� +��� E(& E��।
��� �>�B� +�� �>�l4 ��]��@�G�� ���~ ��F��4 ����� �� %��
����.href( %�%�%�%�-���ik-���ik-���ik-���ik ����3 ����3 ����3 ����3 ) ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%�� ��B*� -�1� ����� (URL) ��L*�U �� %& �� ��]��@��� �L>��। E���
50
<a href=”http://www.facebook.com ” target=”_self” >Facebook</a>
f@1�� ZL� Facebook ./ E��,E� @-� �t� ���� www.facebook.com (�&�� ���� �� E��।
Hypertext reference %�4 -�� Internal, Local, Global ।
!.�?����( Internal): ��� -�1� ��L> ��� g4�< ���4 �?���� %�-���i� �����+ �>�%� �� %&। � ��D�& ���~ ��F��4 ����� �� %�&�9।
�. ���( Local): ��� 1�� ���������-�� �L>�� ZL� ���� ��� (�&� -1 g4�� �� E&। �� ���� #���G�� -1 g4�� ��� ����� +�� #6�� +E�� ��� ���� +7TU* (�&� +�� g4�� �� %&। �� �� �1�� #�*J (�&� +���� ����s -�1� +�� �h+�EB B�8 4� %& ��� %�-���i� �����3� �L>��। E��-�-�� �-�� (�&� +���� %� -�1� 16 index.html, About Us -�1� 16 about.html; Blog -�1� 16 blog.html; Tutorial -�1� 16 tutorial.html �4>�. ��� ����s -1 g4�� �����। �/� �-�� ����� %� -�1� +�� #66 -�1�� +E�� �����; �� �1�� ��� 16 index.html ���� ����� �4 ��) ��/��-
<a href="about.html” target="_blank"> About Us </a>
<a href=" blog.html” target="_blank"> Blog </a>
<a href=" tutorial.html” target="_blank"> Tutorial </a>
[��� �� +�� ��������� ����� �/�� ��� �m�� �/ %�&�9 ��� L�� �(& %�&�9। ��. ��. �m�� �/�� +�N�Y �)������ @��/ ��� �.�4 %��]
�. ��( Global): �� -��4�4 ���� (�&� +���� +�� #6��� (�&� +���� +�EB �� %&। E��- �-�� E�. �-�� (�&� +��� �+����� ��� �.�4 �� 4�� index.html ���� ����� �4 ��) ��/��-
<a href=”http://www.facebook.com ” target=”_self” >Facebook</a>
////.Title ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
%�-������ +�� title ��]��@� �>�%� ��� �@1��� 4� Bh�> -1 +7��* ��B� L�U .(& E�4 -��
���� �����- ��+�1� �L>��। E���
<a href=”http://www.WebTechnologyBlog.com” title=“���1�� B�8 4���� �E���� +��......”> < a>
�/� ����� @-� �@+(�� ���� “���1�� B�8 4���� �E���� +��......” �� �/�� �����- �%�+�� ./ E��।
���� �)��1�� �����( �� %&।
BBBB.Target ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
51
���� �t� ���� �4�� -�1�� �4*�� -�1 Open %�� ��� �4�� Window 4 Open %�� 4 ��L*�U �� %&
target ��]��@��� �L>��। target ��]��@� +L�U4 o�E�� (�&� -�1 �>�l4 %& , 4�� +L�U (�&� -�1(
�� �>�%� �� E&।��� ��]��@� �>��%� � ���� �4*�� -�1� ��B*� -�1�� (�-� %��।@.%�U�
<a href=”http://www.facebook.com “ target=”_blank”>Facebook</a>
�� ��� �4�� Window 4 Open %��
<a href=”http://www.facebook.com “ target=”_self”>Facebook</a>
�� ��� �4*�� -�1 Open %��।
�?�����?�����?�����?���� ������������ g4���g4���g4���g4��� �?���� ����� �L>�� �� �\G0 ��� -�1� #6 �� #� ��� #6 �� -�1� ���.` �� #��� +�� +�EB B�8 4��। ���� ��B ��� 1�� �+�� E ����� ���� (�&� +���� ����s -�1� +�� ��� g4�� �� %&। ��� ��� 1�� ����� ���� -�1� ��4� ����s #��� +�� ��� g4�� �� E&। ���� (�&� -1 E/� #��� �8 %& 4/� �� �1�� �� %&। E��-@����-�)&�4 (http://en.wikipedia.org) �-�� E�. “HTML” ���/ +�* ���� 4�� ���� #��� �8 ):��?� ./�4 -����। � -�1� ����� �.�� ����� �4 ���� �i ./�4 -���। � -�1� E�4<& ����?�G��� %�) ��i� ��W ./�4 -����। �/� �-�� E %�)-�� @-� �t� ����� � ����?� -�1� E/�� ��9 4 �-�� +��� .Cp�� %��। E�. � ����?� -�1� ��.� ���� ��� 4�� 4 ������� ���1�� ���&�4 ��� �+��। �O� .�/ �� �1� ����� �� E&-
52
���� ):���?�� �� #���( %�)��) �����*/����4 ��� 16 <a> �>�B� name ��]��@� �>�%� �� %&। ��-� href ��]��@��� �L>�� ��� E/�� � �����*�� �� ���4 �� ( E��-@-��� � �i) +/�� �� ���4 %��।
���� @.%�U ./���
�) ���|DU� !. �-�� ���� a,",!!,!�,!_,!e,� � ���� �8 ->�$� ��/��।
�. !" � ���� �N> ��� ��� ���� name="C7" �.�& Chapter 7 � ����4 ��� ��/�9। Chapter 7 +�� ���� ��� ���U ��� ������� ���1�� ���&�4 Chapter 7 � ./�4 -�� �; ���.� �@+ b� ��� ./�4 %��। ��� ��� �� Chapter 7 �� ��� ��� -�1� @-��� �.�� �/�4 E�4 ��� (/�� �t� ���� ��� Chapter 7 � ������� ���1�� ���&�4 ./�4 -�। �� �1�� ��� 16-
�. !" � ���� ��� Chapter 7 � E ��� ����4 ��� ��/�9�� ' � ���� href��]��@� �>�%� ��� 4�� �� �� %�&�9। ���� �� ��� �/ /�� .��� E �� ��� E �� ����?��� E �� ��� �� ���4 -���।
���1�����1�����1�����1�� ������������ �%+���%+���%+���%+�� �>�%���>�%���>�%���>�%��
53
��� #��� (�&� +��� .�/ E �� ��� ����1� @-� �@+ �+*� ���& B�� �+*� ��C�4 -���4*� %�& E& E ���� ����� ���.*� ���। �� �1�� ���4 ��� �>�B�(<a> ( </a>) ��W <img> �>B�� ��`) ���4 %&।���1��
��� �%+�� �>�%� ��� ��&� %��
<html>
<body>
<a href="http://www.WebTechnolohyBlog.com">
<img src="smiley.gif" alt="Web Design tutorial" width="32" height="32" />
</a>
</body>
</html>
��N�Y ���� �� ����D��� ��� �/ .��� E, �/�� #�p� alt �>�%� ���4 %�� ��U �@1� E�. ���1 ��
��� ��/ 4�� alt �� �i���� ��� �%�+�� ./��।
������������������������������������ �������������������� ������������ �i� ��� ��� E��� g4�< ���� ����� ���( +��� ���4 %�� ZL� href ��¡��@��� ��4� �����*) ��� ��L> ��B E (�&� +���� �I�� �9� 4� ��� ��� ����� �I�� �.��� %��।�E���
<a href= "mailto:[email protected]" >Email Example</a>
�/�� mailto: %� ����� N�Y ���� �����।
�.�*��.�*��.�*��.�*�:
Email Example �� ����� @-� �@+ ���& E�, ���� `�+��� mailto:[email protected] �/ ./��।�/�� �t� ���� �-�� f@1� [email protected] ��� �I��& ���� ��� -�I�& �.��।
�-�� ���� �-�� ����� ���� #�4��� ��� ��D& EB ���4 -��� E� %�0-!.subject �� �.body
!.subject ������� subject-� �-�� �-�� ����� ������ ���/ �.�4 -���। subject �� -����4* title ��]��@� �>�%� �� E�4 -��।
�.body body- 4 ����� ��D&�� ���/ �.�4 -���।
@.%�U�
<a href= "mailto: [email protected]?subject=Web Page Email&body=This email is from your website" > 2nd Email Example</a>
�.�*�:
2nd Email Example
54
�/�� �t� ���� �-�� �&� ��� /���� �� To �� 1&B& [email protected] �� Subject �� 1&B& Web Page Email ( Body 4 This email from your site �G�� �B�& #������� �+��।
**�-�� E�. �� �@ �-�� +��� ��� ���� 4�� �- ��� ����� �L>�� � ���4 -���। E��-
<a href=”mailto: [email protected]?subject=Feedback&body=Good Job”> % [email protected] </a>
��� �>�%���<� O��L��* ���� +�+�� ��� ��n+ .(& E�4 -��।
<a href=”mailto: [email protected]?subject=Feedback”> [email protected]</a>
+4�*4� !.��� g4��� -� E�� ��� ./�� 4 �I���4 �1 ���9 ���?
�.����� .�/ ��� +�I� ��� �.�&�9� ���?
�.)@���) ��� �.�� .�/ ��� -� �I� ��9 ���?
'.�-�� +�� %` ��� -� ���( .�/ ��� +�� ��� ( ��� �)��k�� �I� ��9 ���?
�+���� �+���� �+���� �+���� ��X-���X-���X-���X-� �.�4�.�4�.�4�.�4 �������� ?
�������� ������������ !_!^�'�^!_ !_!^�'�^!_ !_!^�'�^!_ !_!^�'�^!_ ����
55
#L>&-�&� (�&�(�&�(�&�(�&� -�1 -�1 -�1 -�1 ���� ���� ���� ���� g4��g4��g4��g4�� ���� ���� ���� ���� g4���g4���g4���g4���<table>….</table> �>B��>B��>B��>B�
����s ��1� 16 (�&� -�1 4�> @-�-��� 16 ������ G�R #-��+<�। �98 -��� (�&� -1�� ��&��� ��B
�B ��� ����s #�� �i�, ���1 �4>�. �-� ��� ���� OP� (�&� -1 g4�� �� E&। <table>….</table>
�>B �>�%� ��� (�&� -�1 ���� g4�� �� %&। ���� �>�B� ��W ��( ��9� �>B ��� EG�� ���� g4��� 16
#�p� ��&1�। �>BG�� ��~�-�
�.<tr>….</tr> [ �� �>B }� row � +�� g4�� �� %& ]
/.<td>….</td>[ �� �>B }� +���4 )� ��-�� �� %& ]
B.<th>….</th>[ �� �>B }� +��� %�) .(& %& ]
[ ��� �� +�G�� �>�B� �D �>B Optional। ]
���� Z� ���, ���� ��� ����� 9��� �4 ���� ���� g4�� ����
@-��� �������4 �N> ���- �/�� ��� �/+�� �� �4��� ��� ��&�9। ��( �N> ���-��4� ����� ����
��� %�) ��&�9। ���� g4�� ��� +�& ���� �/+�� g4�� ��� ���4 %& ; ��-� ��4� �/ +���4 E4G�� )� �/ %& 44G�� ��� g4�� %&। ��D&� ����� ��W� 16 ���~ L�- L�- ����� �� %�-
@-��� ���Y E ������ ./�� %�&�9 4� ��� +���� ��� g4�� ���-
<tr> <!—�� ��� ���� +�� g4�� % � -->
<th>Name</th> <!— ������ ��4� ����� %)� .(& %�&�9-->
<th>Roll No.</th>
<th>Age</th>
</tr>
[��� �� �N> ��� ��4� <th>…</th> �>B +���� ���� �B ��� �.�&�9]
56
��� ��� �}4<& +���� g4�� ���-
<tr> <!—�� ��� ���� +�� g4�� %�� -->
<td>Faruk</td> <!— ������ ��4� +�� )� ��-�� �� %�&�9-->
<td>0818002</td>
<td>22</td>
</tr>
��� +�� �)�� <table>...</table> �>�B� ��W �/�4 %��। +7TU* �) ���~ .(& %�-
f@1�� ����� �4 ./ E���
����� ����� ����� ����� �>�l4�>�l4�>�l4�>�l4 ��]��@���]��@���]��@���]��@� +T�%�+T�%�+T�%�+T�%�
57
������ ��D*U<& ��� 16 �>�l4 ��]��@�G�� %�- align, width, border, cellspacing, cellpadding �� bgcolor।���~ �G�� ����� �� %��
align ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
Q������� ���� ���� (�&� -�1� ���.�� #��� ���, �-�� ���� align ��]��@� �>�%� ��� �� #��� -���4*�
���4 -���।�E���
<table align=”left”> [�� �)��]
<table align=”right”>[ ���� (�&� -�1� )��.�� ����]
<table align=”center”>[ ���� (�&� -�1� ��� ����]
width ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
������ ��F4 ��U*& �� %& width ��]��@�� �L>��। �� ��� �� ��]��@� �>�%� �� E&-
!.<table width=”60%”>[ ��N�Y ������ ��F4 %�� f@1��� _ %]
��N�Y f@1� 9� ���� ����( 9� %��।
�. <table width=”100”>[ ��N�Y ������ ��F4 %�� ! �-�i� ]
� � �>�%� �� @R�। ��N�Y ������ ��� +�+�& �I� ����।
[��� �� width ��]��@� �>�%� � ���� f@1� ���1� �4 ��� ���� �.�*� ���� #�*J ����� E -���� )� ���� + -���� 1&B 1��8 ���� �.��*4 %��]
Border ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
�)�� �%�+�� ������ ���.�� �� �)*� ��� �। �)*� .(& %& border ��]��@�� �L>��। ��z
+���( ������ ��4� ��) �)*� .(& E& �।@-��� @.%��U �N> ��� ��� <table border=”1”> �.�&�9 ; E�
��� ������ ���.�� ���� �)*� ./�0।
Cellspacing ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
Cellspacing ��]��@� �>�%� ��� +� +T��%� ��L> �M� �� ��L*�U �� %&। cellspacing ���4 �W& ������ ��� cell �� ��L> 2+(space) � �� #�।�)�� �%+�� cellspacing ��]��@��� �� � ���।�� �� %& �-�i��। E��� <table cellspacing=”3”>
���� @.%�U ./���
58
�.�*��
Cellpadding ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
+� �)*� ��� +� ��?��?�� .T�� ���.*� ���4 �� ��]��@� �>�%� �� %&।�)�� �%+�� �� �� ! �-�i� ��� #�*J +�
�)*� ��� +� ��?��?�� .T�� ! �-�i�।�� �� �-�i�� %&।�E��� <table cellpading=”2”>
���� @.%�U ./���
�.�*��
59
bgcolor ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
�� ��]��@��� �L>�� ������ �>�$@�?) ��� �>�%� �� E&। E���
<table bgcolor=”red”> �� ��� �>�$@?) ��� �� ./��।
rowspan ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
���L� +��� +�G���� ���� +�� -���4 ��� 16 <td> ( <th> �>�B� +�� rowspan ��]��@� �>�%� �� %&।�EG�� +��� ��<�T4 ���4 ��0� 4�.� ��L> +����& @-��� +���� +�� rowspan ��]��@� �>�%� ���4 %��।�E���
<td rowspan=”2”>
<th rowspan=”2”>
�/�� � }� ��� +��� ��Y �� %�&�9।
����� @.%�U�� �N> ���-
60
����� �4 �@�-�� ./ E��-
colspan ��]��@�����]��@�����]��@�����]��@��� �>�%���>�%���>�%���>�%��
colspan �� �>�%� rowspan �� �4�। ZL� colspan ����� ��<�T4 ����।�EG�� ����� ��<�T4 ���4 ��0� 4�.�
��L> +����& @-��� ����� +�� colspan ��]��@� �>�%� ���4 %��।�E���
<td colspan=”2”>
<th colspan=”2”>
����� @.%�U�� �N> ���-
����� �4 �@�-�� ./ E��-
61
<caption> �>�B��>�B��>�B��>�B� ��]��@���]��@���]��@���]��@� +T�%�+T�%�+T�%�+T�%�
<caption> �>B �>�%� ��� ������ ������ .(& %&। align ��]��@� �>�%� ��� ������ �� #���� caption �� %��
4 ��L*�U �� %&। �)�� �%+�� caption ������ @-�� ���।
<caption align=”top”>
<caption align=”bottom”>
<caption align=”left”>
<caption align=”right”>
���� @.%�U ./��-
����� �4 �@�-�� ./ E��-
������ ������ ������ ������ �>�$@�?)�>�$@�?)�>�$@�?)�>�$@�?) ����1�����1�����1�����1� �>�%���>�%���>�%���>�%��
�>�$@?) ��¡��@� �� +%�E> ���1�� ������ �>�$@?) ���1 �%+�� ./�� E&। ����� @.%�U�� ./���
62
�.�*���.�*���.�*���.�*��
������������������������������������ �>�$@?)�>�$@?)�>�$@?)�>�$@?) ���-����-����-����-�: @-��� @.%��� ./ E�0 E ���� �� ��� 9��� ����� +�� ��� �� +�� %& �� । E�. ���� �� ��� 9��� ����� ��& �8 %& 4�� �>�$@?) 9�� ���-� %��।
�.�*��
63
���&� v� ��-� E �� �)k ����4 f@1 ���
www.ashianskyshopbd.com
#L>&-.�� (�&� -�1 ����� �>�%�
������������ g4��g4��g4��g4�� (<form>...</form>) �>B��>B��>B��>B�
���������-� ��� #4>h G��-TU* ���� ��D&। �& ��4� (�&� +���� ��9� � ��9� ���*� �>�%� �� %&।
�@1� ��� ��-�� (�h�>,#)*� $%�, �����, ���) �&� 16 ���������-� ��� �>�%� �� %&। ����&����&����&����& ��*��*��*��* %�%�%�%� 4�>4�>4�>4�> +$�%�+$�%�+$�%�+$�%� 16161616 ��9���9���9���9� ���m����m����m����m� ������������������������। ��* g4��� �>�l4 �>B %� <form>….</form> �>B।�>B।�>B।�>B। ������������ �>B�>B�>B�>B �>�%��>�%��>�%��>�%� ������������ ������������ ZL�ZL�ZL�ZL� ������������ g4��g4��g4��g4�� ���4���4���4���4 -��-��-��-�� ��z��z��z��z ���������������� ��-���C4��-���C4��-���C4��-���C4 )�)�)�)� +�*��+�*��+�*��+�*�� -I��-I��-I��-I�� (((( )�G��)�G��)�G��)�G�� ��++��++��++��++ ������������ 16161616 ���������������� +�*�+�*�+�*�+�*� +�)+�)+�)+�) �>r��&1�>r��&1�>r��&1�>r��&1 E�� E�� E�� E��-�-����-�-����-�-����-�-����- .���.���.���.��� %��।%��।%��।%��। <form> �>�B� +�� method, action �� enctype
��]��@� �>�%� �� %&। �� ��]��@�G�� �-44 ���.� ��1 �B�� �, �-����-�-����-�-����-�-����- �.�&�.�&�.�&�.�& ������������ ��++��++��++��++ ������������ +�&+�&+�&+�& �G���G���G���G�� ��1��1��1��1 �B��।�B��।�B��।�B��। ��]��@�G�� ���& ���~ %�� L�U .(& %�-
64
����.Method ��]��@����]��@����]��@����]��@��
Method ��]��@� �>�%� ��� ���* �.R )� +��*�� +���� �� %&। ��� Method �>�%� ��� )� +���� �� %& -
1.Get Method (<form method=”GET”></form>)(�)��)
2.Post Method (<form method=”POST”></form>)
URL �� +�� ���*� )� +���� ��� 16 Get Method �>�%� �� %&।�E��� �@1� E�. �� ( -+(&)* �.�&
��B� ��� 4�� Address ��� ����� �4 ./ E���
http://www.sitename.com/login.php?/username=faruk&password=1254893/
�8 �� 4�> +��*�� +���� ��� 16 Post Method �>�%� �� %&। ��N�Y 4�> �����&` ��)� #� �%+��
+��*�� +���� %&।
////.Action ��]��@����]��@����]��@����]��@��
+�*� )��� ��++ ��� 16 �� �$� � �bc �>�%� ���� Action ��]��@��� �L>�� 4 1���& .(& %&� E���
<form action=”registration.php” method=”post”>
BBBB.Enctype ��]��@����]��@����]��@����]��@��
#�L� 4�>+7s ���*� N�Y Get Method �>�%� ���� �� �� -(& E& �। ��N�Y Post Methot ( Enctype ��]��@�
�>�%� ���� �� �� -(& E&। �� ��]��@� }� ���*� ��C�4 ��L*�U ��� .(& %&। E���
<form method=”post” action=”order.php” enctype=”text/plain”>
��������� ��-�� �>B� ���������-� ��� �� #��� ��� �>B ��&�9 । 4� ��L> input �>B�� ��� �>�l4। <input /> �>B �� ��
closing �>�B� ��&1� ��। Input fields %�0 form-�� �U। Input fields �� ��L> E+�� �1��+ #h��*�
65
+G�� %�� Text Field, Password Field, Radio button, Check Box, Text Area, Button, �� form
submission buttons। ����s ��m ���& ���~ ����� �� %��
�i� �i� �i� �i� ��m��m��m��m g4���g4���g4���g4���
����s (�&� +��� ��1�`�� ���4 B�� ���� ���� ��� ��+ E/�� First name, Last name ��� ����s �i� ��m/�� ���, �� �i� ��m %� 9� �&4�NY E �-��� E��� �i� ��-�� ���4 �.��। �@1� �� ( -+(&)* ��m (�� ��� �i� ��/ E& ��� ��m) g4�� ��� 16 <input> �>B �>�%� �� %&। <input> �>�B� +�� �>�l4 ��]��@�G�� %�- type, name, size, maxlength। +�G�� ��]��@� �>�%� ��� ���� @.%�U ./��-
<html>
<body>
<form>
First name:<input type="text" size="20" maxlength="20" value="Here Your Firstname" name="firstname"><br/>
Last name: <input type="text" size="20" maxlength="20" value="Here Your Lastname" name="lastname">
</form>
</body>
</html>
����� �4 �@4-�� ./ E��-
�) ���|DU�
1.type =”text” [ �� ��� ���m �i� �/ E��।]
2.name - �� ��¡��@��� �.�& ��m�� ����4 ��� �/ %&। �-����- �.�& ��� ��++ ��� +�& �� ��¡��@��� ���� �� L�� ����� �� �� %&।
3.Size=”20”[ �� ��� � #N� �+F ��m -(& E��। default size %� +L��4 � characters ]
4.maxlength=”20”[ �� ��� ���m � #N��� ��� ��- �� E�� �। maxlength attribute ���.*̀ �� 98 �>�%���< 4� �0�4 characters ��-�� ���4 -��� ����� �-�� E�. +�1 ���.*̀ ���( ����। characters ��-�� � +<��� ���4 maxlength attribute �� �>�%� �� %&। size �� maxlength ��� %(& ��&1�]
6.value=”Your Name Here”[ �i� ���m ��>�� �)�� �%+�� ����,�� -���4*��EB>]
-+(&)*-+(&)*-+(&)*-+(&)* ��m��m��m��m g4���g4���g4���g4���
66
Password Field �i� ���m� �4�। ZL� type=”password” %��।#66 ��]��@�� �>�%� �i� ���m� �4�। E���
<form>
Password: <input type="password" name="password" />
</form>
����� �4 �@4-�� ./ E��-
���i ���i ���i ���i g4���g4���g4���g4���
��� ��� �.�& �� #-�� �+��k ��� 16 ���i g4�� �� %&। �/�� �� � ���L� #-�� �+��k �� E��। E���
�@�-���
��)( ��)( ��)( ��)( ������������ g4���g4���g4���g4���
���L� #-�� ��� ��� �Y ���� #-�� �+��k ��� 16 Radio Button g4�� �� %&। checked ��¡��@�,�� +%�E> �-�� ��)( ���� #��������� �)�� �%+�� �C�R ��B ��� �� �.�& �/�4 -���। E���
67
�@�-���
�i� �i� �i� �i� ���&���&���&���& g4���g4���g4���g4���
�@1� ��� �8 �� ���?� -��� 16 Text Area g4�� g4�� �� %&।��ik ���& �� opening �� closing �>B ��&�9। �ik ���& �>B �� ��4� �� ��9� ��/�� 4 (�&� -1 �� �ik ���& 4 �.��*4 %&।
E���
<form>
<p>Comment:</p>
<textarea rows=”5” cols=”8”> text area </textarea>
</form>
�/�� rows ( cols �� �L>�� Textarea Size ��L*�U �� %&।
������������ g4���g4���g4���g4���
��� g4��� 16 ���~� �) ��- ����
68
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
+����+����+����+���� ������������ g4���g4���g4���g4���
���*� )� +�*�� +���� ��� 16 +���� ��� g4�� �� %&। E/� ��� submit button � �- .�� 4/� ��* �� �4*�� activate %��। ��N�Y ��� E �\�� value ��¡��@� �� �� �%+�� ���*�� ���� 4 ��� @-� �.��*4 %��। "Submit" or "Continue" �� �\ ��� value ��¡��@� �� �� �%+�� ��� �>�l4 %&। E���
<form>
<input type=”submit” value=”Login”>
<input type=”submit” value=” Continue”>
<input type=”submit” value=”Press”>
</form>
�@�-���
���1���1���1���1 ������������ g4���g4���g4���g4���
���1��( ��� �%�+�� �>�%� �� E&। E���
<input type=”image” src=”button.bmp”>
���+� ��� g4���
���+� ��� �t� ��� �L>�� �-�� ��* �� +���9� ��� -���*� Q���� #��& ���& E�4 -����। E��-
<input type="reset" value="Reset" />
69
n-)@�n-)@�n-)@�n-)@� ��`��`��`��` g4���g4���g4���g4���
n-)@� ��` �� �L>�� �-�� �@1��� 16 ��� ��� 4��� g4�< ���4 -���� E/� ��� �@1� E��� ��� �+��k ��� �.�4 -���।L�� �-��� ��� ��* g4�< ���4 �� %� �� �/�� ��1��� ��& � �� +� E�4 �+��k ��� �.�4 -�� (#���G�� � �� ��L>) ��� ���� #-�� �/�4 %��,4/� n-)@� ���`� �L>�� +� +%�1� ���4 -���। n-)@� ��` g4�< ���4 ���� <select> �>B �.�& �) Z� ���4 % � ��-� E �����G�� ��� �@1� �9� ���� +G��� ��4�� <option> �>�B� ��L> �/�4 %��।�E���
<html>
<body>
<form>
<select name="color">
<option value="bl">Black</option>
<option value="wh">White</option>
<option value="ye" selected="selected">Yellow</option>
</select>
</form>
</body>
</html>
@-��� @.%��� ./�� selected ��¡��@��� ���� ��� #-�� Yellow ./�0 �-�� E�. �� White ���� ./� 4%�� � ��� ���� selected ��¡��@� �>�%� �����। ��4�� <option> �>�B value ��¡��@� ��9 �� /�� G��-T�* E/� ���*� )� +�*�� -I���।value ��¡��@��� �� L�� ( E�� bl,mr..) �� ���4 %&।
<select> �>�B��>�B��>�B��>�B� size ��¡��@����¡��@����¡��@����¡��@�� <select> �>�B size ��¡��@� �.�& �-�� �I� ��� �.�4 -��� E ���` �&�� ����� ./�� E�� @-��� @.%���� E�. size=2 .� 4%�� ��� #-�� ./�� ���� b� ��� ./�4 %��।
<select name="color" size=2>
<option value="bl">Black</option>
<option value="wh">White</option>
<option selected="selected" value="ye"> Yellow </option>
</select>
<select> �>�B��>�B��>�B��>�B� multiple ��¡��@����¡��@����¡��@����¡��@��
70
multiple ��]��@��� �L>�� �-�� ���� #�L� ��D& �+��k ��� O�EB �.�4 -���। E��-
<select multiple=”yes”>
<option value="bl">Black</option>
<option value="wh">White</option>
<option selected="selected" value="ye"> Yellow </option>
</select>
E�. selected ��¡��@� @�I�& .� 4%�� �� #-�� �� �+���k) ./���।
�-�� #-�� ��` E�. #��� �8 %& 4%�� ,- ���4 -���।<optgroup> �����?� �.�& �� �� E&। E���
<html>
<body>
<form>
<select name="TutorialInfo">
<optgroup label="Web Design">
<option value="html"> HTML Tutorial</option>
<option value="css"> CSS Tutorial</option>
<option value="photoshop"> Photoshop Tutorial</option>
</optgroup>
<optgroup label="Web Development">
<option value="js"> JavaScript Tutorial</option>
<option value="php"> PHP Tutorial</option>
<option value="database"> MySql Tutorial</option>
</optgroup>
</form>
</body>
</html>
����� �4 �@�-�� ./ E��-
71
�-��) ��� g4���
upload form �>�%� ��� �@1� pictures, movies, � ����� ���1� webpage upload ���4 -��। ��� upload form %� �� L���� input form । �-�� +L����� type attribute �.�& �� �� �%+�� file ���/ upload form g4�< ���4 -���। E���
Upload File: <input type="file"/>
upload ��� �� size �� +<�� ��L �.�& �-�� �-�� webserver �� �T�>�� space �N ���4 -���। �� 16 ��� hidden input field �� ��( ��9� specific attributes EB ����।
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
input type="file"/>
�/�� value 100 ��� file +��*� 100kb %�4 -���।
)���� ��� %�`
+� ���� ��4{�4 ���&
hostghor.com
72
#L>&-�B�� (�&� -�1 o��� �>�%�
������������������������������������ iframe �>B��>B��>B��>B�
���� (�&� -�1� ��W ������ (�&� -1 �.�*� ���4 iframe �>B �>�%� �� %&। �� �>�B� �+��>i %��
<iframe src=" E (�&� +���� ./�4 �� �/�� +� (�&� +���� �I�� �.�4 %�� "></iframe>
iframe �>�B� +�� E +�� ��]��@� �>�%� �� %&�
1.width
2.height
3.frameborder
Width ( height ��]��@� �>�%� ��� iframe (�&� -�1 �4��: 1&B ���& �.��*4 %�� 4 ��L*�U �� %&।
��.� �� �-�i�� ���, 4�� �-�� ���� �� �4���4 ��� ���4 -���। E���
<iframe src="iframe.htm" width="200" height="200"></iframe> �
<iframe src="demo_iframe.htm" width="50%" height="60%"></iframe>
Frameborder ��]��@� �>�%� ��� iframe-�� �)*� .T� �� %&। E���
<iframe src=" iframe.htm" frameborder="0"></iframe>
�� �� ! �>�%� ���� �)*� ���� E��।
#L>&-��� ������������������������������������ ��@� ��@� ��@� ��@� ���� (�&� -1�� OP� ��� +1�4 ��@��� G�� #-��+<�। (�&� -1�� ����s ��B (+�� ( ����) ����
��� -��4� %� ��������� ��@�।���� ��D*U<& (�&� -1 g4�� ���4 #�p� ��@� +7��* �����
1��4 %��। ��� �N> ���� ./�4 -� E, #�L�� (�&� +��� ���L� +�� ( ��� ���& B�I4। ��B ZL��Y
73
��������� �>�%� ���� ��@� g4�� �� %4 ��z �4*��� ��������� ( �+�+�+ ���Y ��@� g4�� �� %&। ����� ��@� g4�� �� E& –
!. ���� �>B (<table>...</table>) �>�%� ���। [��N�Y ZL� ��������� %��� %��]
�. �)� �>B (<div>...</div>) �>�%� ���। [��������� ( �+�+�+ ���� .��� %��]
����� ��Y �N> ��� ���� (�&� -1�� ����s ��B �B �� %�&�9। ��� %� ��@�।
<table> �>B�>B�>B�>B �>�%��>�%��>�%��>�%� ������������ ��@� ��@� ��@� ��@� g4���g4���g4���g4���
<table> �>B �>�%� ��� �4��� � ( ��� ��� ����; ���� (�&� -�1� @.%�U ���~ .(& %��
<html>
<body>
<table width="500" border="0">
<tr>
74
<td colspan="2" bgcolor=#FFA500">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td bgcolor=#FFD700;width=100px;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td bgcolor=#EEEEEE height=200px width=400px">
Content goes here</td>
</tr>
<tr>
<td colspan="2" bgcolor=#FFA500">
Copyright © 2012| Error! Hyperlink reference not valid.>
</tr>
</table>
</body>
</html>
�@�-���
75
E�.( ���� �>B �>�%� ��� OP� ��@� g4�� �� E& 4�� �� �+�� ��@� �)1�� ��� �%+�� �>�%� �� %& �, ��
-����4* <div> �>B �>�%� �� @R�।
CLASS (((( ID ��]��@����]��@����]��@����]��@��
`���<�(CSS) ( �bc(JavaScript)�>�%��� 16 (�&��-�1� ����s @-.��� ����s ��]��@� �>�%� �� %&। �� �L> #64� %� ID, CLASS ( STYLE। ID Attribute-�� �L>�� ��4�� @-.��� ��s��� ��s ���
����4 �� E&। �� CLASS Attribute-�� �L>�� ���L� @-.��� ��� ,�-� +.� �%�+�� ����4 �� E&।�E��� ��� ->�$��� E�. ��� ��. ��� �)1�� ���4 �� 4�� 4�.��� ���� ��� ID ��� �.�& �/ E�4 -�� E�4 ��� ��� 4�.� `�� ��L*�U ��� +�& ���.` ��� �.�4 -�� �� ->�$��� �)1�� ���4
%��।
<p id=”1”> This is first Paragraph </p>
<p id=”2”> This is second Paragraph</p>
��� #���G�� ->�$��� E�. ��� ��� �)1�� �� 4�� 4�.��� ��� CLASS ��� ����4 ��� �/ E�4
-��। E��-
<p class=”2”> This is first Paragraph </p>
<p class=”2”> This is second Paragraph </p>
<p class=”2”> This is third Paragraph </p>
style ��]��@� �>�%� ��� ����s ��������� @-.��� `�� �� %&। �� �+�� �+�+�+-�� #�। �)�
�>B ������ +�& �� �B�� 4� ���� ��� ����।�E���
<a href=”first.htm” STYLE=”font-style:bold”>Link to first Document</a>
76
�� ��� ������ �i� �� ./ E��।
������������������������������������ <div> �>B��>B��>B��>B�
<div>...</div> �>B #66 �>B �� -Y �%+�� �1 ��� #���� body �>B �� �4। <div> �>B %�� V� ���� �����?� E ���������-�� ����s @-.��� ,- ���� +1�4 �>�%� �� %&। �)� �>B #�*J �)���� �>�B� �1 %� ���� (�&� -1�� ����s #�� �B �� �� ����s #��� ����s �)1��� +%E> ��। �+�+�+ �� N�Y Div �����?� #��� G�R-��*। �+�+�+ ���& �1 ��� +�& �)� �>�B� -��-TU* �>�%� ����� ��W E��। ���� <div> �>�B �>�l4 �4�G�� ��]��@� .& %���
Id �� +%�E> �� ������?�� ���� �@��� ���) .(& %&।
Align �� ��]��@��� �� left,right,center, justify %�4 -��।
Width ������?�� ��F4
Height ������?�� @�4
Title �����?� +7��* #�4��� 4�> �.�।
style .�*��.� strong visualization �� 16 �)��� style attribute �� �L>�� ��� �.�*� �� E&।
���� @.%�U ./���
<html>
<body>
<div style="background:#ff0011" align="center">
<h1>Visit My blog </h1>
<a href="http://www.webtechnologyblog.com">WebTechnology</a>
</div>
<div style="background:#00ff11" align="center">
<p>This is a paragraph</p>
</div>
</body>
</html>
�@�-���
77
./�� (�&� -�1 ��� ��. �)���� g4�� %�&�9। ������ @.%�U ./���
<html>
<head>
<title>Use of DIV Tag</title>
</head>
<body>
<div id="menu" align="center" style="background:#aa0000" >
<a href="/">HOME</a> |
<a href="/">HTML</a> |
<a href="/">CSS</a> |
<a href="/">PHP</a>
</div>
<div id="content" align="center" style="background:#aa0000" >
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
<h5 >Content Article Number Two</h5>
<p>Here's another content article right here.</p>
</div>
</body>
</html>
�@�-���
78
<div> �>B�>B�>B�>B �>�%��>�%��>�%��>�%� ������������ ��@� ��@� ��@� ��@� g4���g4���g4���g4���
����� @.%��U ./�� ��� �1 �)� �>B �>�%� ��� �� %�&�9-
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2012| Error! Hyperlink reference not valid.>
</div>
</body>
</html>
79
�@�-���
#L>&- 4��
������������������������������������ 4.01- �������� +��+��+��+�� �>B��>B��>B��>B� �>B �U*�
+L�U �>B+�T%
<!DOCTYPE> ):���?�� L�U ���.*� ���।
<html> ��������� ):��?� ���.*� ���।
<body> ��������� ):���?�� ��) #� ���.*� ���।
<h1> to <h6> ��������� %�) ���.*� ���।
<p> �� �>B �.�& ->�$� ��� �� %&।
<br /> ��� ��� f� g4�� ���।
80
<hr /> �S�T��� �/ g4�� ���।
<!--...--> ���� �h�> ��� �� %&।
���>��-�� �>B+�T%
<acronym> ����D �\ +7��* 4�> �.�।
<abbr> �U*��T�� �� ��9� 4��� L��।
<address> #���� 4�> 4��� L��।
<b> �i��� �m ���।
<bdo> �i��� �.� ���.*� ���।
<big> �8 �i� ��� ���।
<blockquote> ����� g4���4 �>�%� �� %&।
<cite> �i��� ����� %��� ./&।
<code> �i��� ��7@�� ��)� �4 ./&।
<del> �i��� �W ���� .B ./&।
<dfn> �i��� )������ ��* ./&।
<em> �m ./&।
<i> �i��� ����� %��� ./&।
<ins> �3���) �i��� ./&।
<kbd> �<��)* �i��� ./&।
<pre> ���>��� �� -���4*� � ��� �i� �.�*� ���।
<q> ��* ������� 16 �>�%� �� %&।
<samp> �i��� ��7@�� ��)� �4 ./&।
<small> 9� �i� ��� ���4 �>�%� �� %&।
<strong> �m �i� �.�*� ���।
81
<sub> +��bc �i� �.�*� ���।
<sup> O-��bc �i� �.�*� ���।
<tt> �����- �i� �.�*� ���।
������������ g4���4g4���4g4���4g4���4 �>B+�T%�>B+�T%�>B+�T%�>B+�T%
<form> ��� g4��� �>B।
<input /> ��-�� ��m g4���4 �>�%� �� %&।
<textarea> �i� ���& g4�� ���4 �>�%� �� %&।
<button> ��� g4�� �� %&।
<select> n-)@� ��` �+��k �� %&।
<optgroup> �� ���` ��� L��U� ��D&G���� ��Y ���।
<option> ���`� �����G���� ./&।
<label> ��-�� ������?�� ���� �.�*� ���।
<fieldset> ���*� +�� ������?�� ��-�� �)*� g4�� ���।
<legend> <fieldset> �>�%� ��� E �)*� .(& %& 4� ����� �.�4 �>�%� ��
%&।
���1���1���1���1 �>�%����>�%����>�%����>�%��� �>B+�T%�>B+�T%�>B+�T%�>B+�T%
<img /> ���1 ��� ���4।
<map> ���1 �>�-� 16 �>�%� �� %&।
<area /> ���1 �>�-� ��W 1&B ��L*�U ���।
������������ g4���4g4���4g4���4g4���4 �>B+�T%�>B+�T%�>B+�T%�>B+�T%
<a> ��� ����� �>B
<link /> ):���?�� +�� ����� �� ):���?���� +�EB �-�।
82
��`��`��`��` g4���4g4���4g4���4g4���4 �>B+�T%�>B+�T%�>B+�T%�>B+�T%
<ul> ��#)� ��` ��� ���।
<ol> #)*� ��` ��� ���।
<li> ��` ����� ��� ���।
<dl> )������ ��` ��� ���।
<dt> )������ ���`� ���� ��* ��� ���।
<dd> ���*� �U*� ��� ���।
���� ���� ���� ���� g4���g4���g4���g4��� �>B+�T%��>B+�T%��>B+�T%��>B+�T%�
<table> ���� g4��� �>B
<caption> ������ ������ .(& %&।
<th> ���� +��� %)� �.�4 �>�%� �� %&।
<tr> ���� �/+�� g4���4 �>�%� �� %&।
<td> ������ ���� +� g4���4 �>�%� �� %&।
<thead> ������ %)� ����?�
<tbody> ������ ��) ����?�
<tfoot> ������ ���� ����?�
<col /> ����� �� � ���L� ��� g4���4 �>�%� �� %&।
<colgroup> ����� ��� ,- g4���4 �>�%� �� %&।
):���?��):���?��):���?��):���?�� `��`��`��`�� ��L*��U���L*��U���L*��U���L*��U� �>B+�T%�>B+�T%�>B+�T%�>B+�T%
<style> ):���?�� `�� ��� �� %&।
<div> ):���?� ��. ��. +��� g4���4 �>�%� �� %&।
�� �� �� �� ����������������