মুক্ত বিশ্বাস হচ্ছে সকল সাফল্য, সকল অর্জনের ভিত্তি। বিশ্বাসই রোগ নিরাময় করে, মেধাকে বিকশিত করে, যোগ্যতাকে কাজে লাগায়, দক্ষতা সৃষ্টি করে। ব্যর্থতাকে সাফল্যে আর অশান্তিকে প্রশান্তিতে রূপান্তরিত করে।
ব্যক্তিগত খেয়াল বা আবেগ আর জীবনের লক্ষ্যকে এক করে ফেলবেন না। লক্ষ্যকে যখন সর্বোচ্চ গুরুত্ব দেবেন তখন তা আপনাব্যর্থরা অবচেতনভাবে ব্যর্থতার সঙ্গে নিজেদের সংযুক্ত করে। সচেতনভাবে সাফল্যের সঙ্গে একাত্ম হলে সহপাঠী বা প্রতিবেশীর সঙ্গে সুসম্পর্ক আর বন্ধুত্ব এক নয়। চেতনা ও আদর্শের মিল রয়েছে এমন কারো সঙ্গেই বন্ধুত্ব হতে পারে।সাফল্যই আপনার দিকে আকৃষ্ট হবে।কে আবেগের ঊর্ধ্বে নিয়ে যাবে
Visual Basic 2008 is the version of Visual Basic launched by Microsoft in 2008. Visual Basic 2008 is almost similar to Visual Basic 2005 but it has added many new features. Visual Basic 2008 is a full fledged Object-Oriented Programming(OOP) Language. However, you don't have to know OOP to learn VB2008. In fact, if you are familiar with Visual Basic 6, you can learn VB2008 effortlessly because the syntaxes and interface are similar. Visual Basic 2008 Express Edition is available free for download from the Microsoft site. (OOP will be explained in lesson 4).
1.2 Visual Basic 2008 IDE
The Integrated Development Environment when you launch Visual Basic 2008 Express is shown in Figure 1.1 below. The IDE consists of a few panes, namely:
The Recent Projects Pane- it shows the list of projects that have been created by you recently
The Getting Started Pane- It provides some helpful tips to quickly develop your applications
The VB Express Headlines pane- It provides latest online news about Visual Basic 2008 Express. It will announce new releases and updates
Figure 1.1: Visual Basic 2008 IDE
1.3 Creating First Application
To start creating your first application, you need to click on file and select new project. The following VB2008 New Project dialog box will appear, as shown in Figure 1.2.
Figure 1.2
The dialog box offers you five types of projects that you can create. As we are going to learn to create windows Applications, we will select Windows Forms Application
At the bottom of this dialog box, you can change the default project name WindowsApplication1 to some other name you like, for exampe, MyFirstProgram. After you have renamed the project, click OK to continue. The following IDE Windows will appear, it is almost similar to Visual Basic 6. It consists of an empty form, the common controls toolbox, the solution explorer and the properties, as shwon in Figure 1.3
Figure 1.3
Now we will show you how to create your first program. First of all, drag one common button into the form and change its default name to calculate, as shown in Figure 1.4
Figure 1.4
Next, click on the calculate button and key in the following code at the source code window(Figure 1.5) as shown below
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click Dim num1, num2, sum As Single num1 = 100 num2 = 200 sum = num1 + num2 MsgBox(" The Sum of " & num1 & " and " & num2 & " is " & sum)
End Sub
Figure 1.5
Now run your first application! And you can see the follow message box showing the sum of two numbers,as shown in Figure 1.6
his is a traffic light simulator that works
like the actual traffic lights. It can be programmed fairly easily
using Visual Basic 6. In this
program, you have to insert one timer and set its interval to any
figure. Here we set it to 3000, which is equivalent to 3 seconds. Next
you insert three shapes and set their shape properties to circle and
fill them with three colors, green, amber (or yellow) and red. Use the
following code to set one color on and the other two colors off:
This is a typical calculator that
consists of the number buttons, the operator buttons and some
additional
buttons such as the memory button and the clear button. To
design the interface, you need to insert 25 command buttons, and one
label that functions as the display panel. Name the display panel
simply as panel. The number buttons from 1 to
9 are grouped together as a control array and named as ButtonNum while
0
is a standalone command and named as Bzero. The simplest way to create
the control array is to insert a command button then right click to
copy it then click paste, you will be presented with a pop-up dialog as
shown below:
Click yes and a new command button will appear. Repeat the process
nine times and you will get all the nine buttons in the array. We name
the control array ButtonNum as each number is differentiated by its
index. The nine button's names are ButtonNum(1),
ButtonNum(2),ButtonNum(3)............,ButtonNum(9).
The four basic operators are
also grouped together as a control array and named as Operator. Other
buttons are named appropriately according to their functions. The label
is named as panel.
One of the most important procedures in the program is to display
the number on the panel. To display the number on the panel, click on
any number button and enter the following code, as shown below:
Private Sub ButtonNum_Click(Index As Integer)
If Num_of_digit >
0 Then
If Num_of_digit <
30 Then
panel. Caption =
panel.Caption + Right$(Str(Index), 1)
Num_of_digit =
Num_of_digit + 1
End If
Else
panel.Caption =
Right$(Str(Index), 1)
Num_of_digit = 1
End If>
CheckValue
End Sub
The Num_of_digit is a variable that is used to check the
number of digits that appear on the display panel. The procedure
will ensure that if the number of digits is more than one, the
preceding digit will be pushed to the left and the succeeding
digit will remain on the right. However, if the number of digits
is zero, the digit clicked will just appear on the rightmost
position of the panel.
The index of a particular number button is displayed on the display panel using the syntax
Right$(Str(Index), 1). Make sure you label the
number button with a number that corresponds with the index of the
button. For example, you must label ButtonNum(6) with the number 6 so as it corresponds to its index, as shown in the Figure on the right.
The subroutine CheckValue is to assign the value displayed on the panel to the variable displayValue. This value can then be manipulated using any of the arithmetic operators.
We introduce the variables a,b,c,d,e,f to accept the value of the first number entered by the user and we use the variable key
to determine what arithmetic operation to be carried out when the Equal
button is pressed. We also use the boolean newNumber to determine the
number entered is new or not.
The Code
Sub CheckValue( )
displayValue = Val(panel.Caption)
End Sub
'The code for the operators is as follow:
Private Sub Operator_Click(Index As Integer)
CheckValue
If Index = 11 Then
a = displayValue
key = 1
ElseIf Index = 12 Then
b = displayValue
key = 2
ElseIf Index = 13 Then
c = displayValue
key = 3
ElseIf Index = 14 Then
d = displayValue
key = 4
ElseIf Index = 15 Then
f = displayValue
key = 5
End If
Num_of_digit = 0
newNumber = True
End Sub
'The code for the Equal button is as follow:
Private Sub Equal_Click()
CheckValue
If newNumber = True Then
If key = 1 Then
e = displayValue + a
ElseIf key = 2 Then
e = b - displayValue
ElseIf key = 3 Then
e = displayValue * c
ElseIf key = 5 Then
e = (f * displayValue) / 100
ElseIf key = 4 And displayValue <> 0 Then
e = d / displayValue
Else
GoTo error
End If
If Abs(e) < 1 Then
panel.Caption = Format(e, "General Number")
Else
panel.Caption = Str(e)
End If
Else
panel.Caption = displayValue
This is a simple calculator that uses a combo box that includes four operators, addition, subtraction,
multiplication and division. It can perform the above four basic calculations by
changing the arithmetic operators.
The Code
Private Sub Combo1_()
Select Case Combo1.ListIndex
Case 0
Label1 = Str$(Val(Text1.Text) + Val(Text2.Text))
Case 1
Label1 = Str$(Val(Text1.Text) - Val(Text2.Text))
End Select
End Sub
Private Sub Command1_Click()
Select Case Combo1.ListIndex
Case 0
Label1 = Str$(Val(Text1.Text) + Val(Text2.Text))
Case 1
Label1 = Str$(Val(Text1.Text) - Val(Text2.Text))
Case 2
Label1 = Str$(Val(Text1.Text) * Val(Text2.Text))
Case 3
Label1 = Str$(Val(Text1.Text) / Val(Text2.Text))
End Select
End Sub
Private Sub Command2_Click()
End
End Sub
Private Sub Form_Load()
Combo1.AddItem "+"
Combo1.AddItem "-"
Combo1.AddItem "x"
Combo1.AddItem "รท"
Combo1.ListIndex = 1
এইচটিএমএল(HTML) এর অর্থ হচ্ছেHyperTextMarkupLanguage.এটা কোন প্রোগ্রামিং ল্যাংগুয়েজ নয়,মার্কআপ ল্যাংগুয়েজ।
ওয়েব ডেভেলপার হতে হলে এই ল্যাংগুয়েজ টি সবার আগে ভালভাবে শিখতে হবে।তবে এটা শেখা খুব সহজ।
এটা শিখলেই আপনি একটা ওয়েব পেজ তৈরী করতে পারবেন।এরপর যদি সিএসএস শেখেন তাহলে ঐ পেজটিতে আরেকটু প্রান দিতে পারবেন
তারপর জাভাস্ক্রিপ্টের পালা, জাভাস্ক্রিপ্ট শিখে এর এপ্লিকেশন করলে আপনার ঐ ওয়েব পেজটি ডাইনামিক হওয়া শূরু হল।সবশেষে পিএইচপি+ ডেটাবেস শিখলে আপনি পূর্নাঙ্গ ডেটাবেস Driven ওয়েবসাইট তৈরী করতে পারবেন।
যে জিনিস লাগবেএইচটিএমএলশিখতে (অর্থ্যাৎ এইচটিএমএল কোড কোথায় লিখবেন)
নোটপ্যাড। Notepad open করে তৈরী হোন।যেহেতু নতুন তাই নোটপ্যাড দিয়েই শুরু করুন পরে অন্য কোন এডভান্সড এডিটরে সুইচ করবেন যেমন Netbeans বা Dreamweaver.আর যদি ড্রিমওয়েভার এ কাজের অভিজ্ঞতা থাকে তাহলে তাহলে এখনই শুরু করতে পারেন।
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-
এইচটিএমএল এলিমেন্ট (Elements)
এইচটিএমএল ট্যাগ (Tag)
এইচটিএমএল অ্যাট্রিবিউট (Attribute)
এইচটিএমএল এলিমেন্ট টিউটোরিয়াল (HTML Elements) এলিমেন্টস(Elements):এলিমেন্টস হল HTML এর মুল কেন্দ্রবিন্দু।তারা HTML page এর প্রতেকটি টেক্সটের অংশকে বর্ননা করে। এলিমেন্টস গুলো ট্যাগ(tag) এর মাধ্যমে তৈরী। HTML এলিমেন্টগুলি অনেক স্তরে বিদ্যমান।সবকিছু যা আপনার চোখের সামনে Web page এ বিদ্যমান তা হতে পারে Paragraph text, কোন ব্যনার,নেভিগেশন লিংক ইত্যাদি সব কিছুই elements এই পেজটির।
একটি এলিমেন্ট(Element) মুল তিনটি অংশ নিয়ে গঠিত। শুরু করার ট্যাগ(opening tag) ,এলিমেন্ট এর ধারনকৃত অংশ এবং শেষে বন্ধ করার ট্যাগ(closing tag) ।
– opening paragraph tag
Element Content– paragraph words
– closing tagপ্রত্যেক Web page এর অতিব প্রয়োজনীয় চারটি এলিমেন্ট(Element) থাকে এগুলো হলো্: HTML,head, title এবং body elements । এগুলো বিষয়ে নিচে আলোচনা করা হয়েছে। Element…
সবার প্রথমে HTML লেখার শুরুতে HTML শব্দের প্রথমে এবং শেষে less than ও greater than ( < >) চিহ্ন দিতে হয়। যেমন: । কোন কিছু লেখার পর শেষে ট্যাগটি দিতে হবে। অর্থাৎ Welcome to Bangladesh । Welcome to Bangladesh এই লেখাটি Web page এ প্রদশিত হবে।আমরা খুব সহজে Notepad এ লিখে Web page তৈরী করতে পারি। এজন্য আমদের Notepad Open করতে হবে। প্রথমে
start মেনু All Programs > Accessories >Notepad
তারপর Notepad হবার পর নিম্নের কোডটি লিখবো
1.<html>
2.Welcome to Bangladesh
3.</html>
এভাবে লেখার পর Notepad এর ফাইল মেনু হতে save এ ক্লিক করব তারপরindex.htmlনামে save করব।
সেভ করা ফাইলটিকে Double click করে open করবো । দেখবো যে লেখাটি Browser এ open হয়েছে। খুব সহজে একটা web Page তৈরী হয়ে গেলো। element
একটি ডকুমেন্ট head, ডকুমেন্ট সস্বন্ধে মৌলিক ধারনা দেয়। elements যা পেজের header নির্দেশ করে। head elements এর মধ্যে রাখা ট্যাগ সরাসরি ব্রাউজারে প্রদর্শিত হয় না। আমরা টাইটেল এলিমেন্ট এর মাধ্যমে প্রকাশ করতে পারি। element</strong></p>
<p>
<head> এলিমেন্ট এর মাঝে <title> এলিমেন্ট রাখতে হয়। যেই শব্দগুলো title elements এর opening (<title>)এবং closing() tag এর মধ্যে লেখা হয় তা browser এর টাইটেল বা শিরোনাম হিসাবে প্রদর্শিত হয়।
1.<html>
2.<head>
3.<title> My WebPage!</title>
4.</head>
5.</html>
element
body element যা web page এর প্রদর্শিত সকল বিষয় গুলো ধারন করে। যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই তা body element ট্যাগ এর মধ্যে রাখতে হয়।
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>
এই কোডগুলি নোটপ্যাডে কপি পেস্ট করে .html extension দিয়ে সেভ করে যেকোন ব্রাউজারে খুলুন এবং নিজের তৈরী প্রথম ওয়েব পেজ দেখুন। এইচটিএমএল ট্যাগ টিউটোরিয়াল (HTML Tag Tutorial in Bangla)
যখন আপনি এইচটিএমএল ডকুমেন্ট উপর হতে নিচ , ডান হতে বামে সব সময় আপনি ট্যাগ দেখতে পাবেন। এটি এমন ভাবে প্রদর্শিত হবে যেন paragraph দেখতে paragraph এর মতো, টেবিল দেখতে টেবিল এর মতো।
ট্যাগ এর প্রধান তিনটি অংশ আছে
ক. শুরু করার ট্যাগ(opening tag)
খ.ধারনকৃত অংশ(contents)
গ.শেষ করার ট্যাগ (closing tag)।
এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন।
1.<p>A Paragraph Tag</p>
ট্যাগ এর বর্ণ ছোট হাতের অক্ষর হওয়া উচিত। নিচে আরো কতক গুলো ট্যাগ দেখানো হলো।
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>
Closingট্যাগছাড়াট্যাগ:
কিছু কিছু ট্যাগ আছে যাদের closing tag দেয়ার প্রয়োজন নেই। তারা কোন এলিমেন্ট ধারন করে না।সে ট্যাগ টি হচ্ছে line break tag এবং তা
রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার করা হয়। অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি ব্যবহার করা হয়।
আরো কিছু ট্যাগ আছে যাদেরকে বিশেষভাবে ব্যবহার করা হয় যেমন ইমেজ ট্যাগ, ইনপুট ট্যাগ।
1.<imgsrc="/../mypic.jpg"/> -- Image Tag
2.<br/> -- Line Break Tag
3.<inputtype="text"size="12"/> -- Input Field
প্রদর্শন:
–Line Break–
এইচটিএমএল এট্রিবিউট টিউটোরিয়াল (HTML Attribute tutorial in Bangla)
ট্যাগ কে সম্প্রসারন করার জন্য এট্রিবিউট ব্যবহার করা হয়। ধরুন যদি আমরা একটি টেবিল তৈরী করি তবে attributes ব্যাবহার করে টেবিল এর প্রস্থ, উচ্চতা ঠিক করতে পারি। আর attributes value দিয়ে টেবিল এর প্রস্থ ও উচ্চতার মান দিতে পারি।
1.<tagattributes="value"attributes="value">
1.<tablewidth="150"height="100">
Class বা id attribute এর ব্যবহার প্রায় একই তবে কিছুটা ভিন্নতা আছে। Class বা id attribute সরাসরি ইলিমেন্ট ফরমেটে কোন ভুমিকা নেই তবে পর্দার অন্তরালে এদের ভুমিকা আছে বিশেষ করে জাভাস্ক্রিপ্ট ,সিএসএস (এগুলো সম্পর্কে পরবতি টিউটোরিয়াল এ আলোচনা করা হয়েছে।
1.<p>Paragraph type 1 Italics</p>
2.<p>Paragraph type 2 Bold</p>
প্রদর্শন
Paragraph type 1 Italics Paragraph type 2 Bold
এইচটিএমএল নেম এট্রিবিউট (HTML Name Attribute)
Name attribute টি Class বা id attribute হতে ভিন্ন। Name attribute টি প্রায়ই র্ফম বা অন্যান্য ইনপুট ইলিমেন্টের সাথে দেখা যায়।
1.<inputtype="text"name="TextField"/>
প্রদর্শন:
এই attribute টি TextField প্রদর্শনের বিষয়ে ভুমিকা নেই তবে পর্দার অন্তরালে এর অনেক বেশি অবদান(javascript , css)
এই attribute টি কোন এইচটিএমএল এলিমেন্ট এর শিরোনাম এবং ছোট popup টেক্স যুক্ত করে এমন ভাবে যুক্ত করে যখন ওয়েব পেজে ঐ শিরোনামের উপর মাউস রাখা হয় তখন ছোট popup টেক্সটি প্রদর্শন করে।
Titled Heading Tag
প্রদর্শন
Titled Heading Tag
এইচটিএমএল এলাইন এট্রিবিউট (HTML–align attributes)
যদি আপনি এলিমেন্টের সমান্তরাল অবস্থান পরিবর্তন করতে চান তবে তা align attribute দিয়ে করতে পারেন। align বিভিন্ন ভবে করা যায় যেমন left, right & center । ডিফল্ট হিসাবে left align টি নির্বাচিত থাকে।
1.<h2align="center">Centered Heading</h2>
Centered Heading
1.<h2align="left">Left aligned heading</h2>
2.<h2align="center">Centered Heading</h2>
3.<h2align="right">Right aligned heading</h2>
Left aligned heading
Centered heading
Right aligned heading
এইচটিএমএল প্যারাগ্রাফ টিউটোরিয়াল (HTML Paragraph Tutorial in Bangla)
কোন লেখা কাজকে প্রকাশ করার ক্ষেত্রে প্যারাগ্রাফ ট্যাগ ব্যবহার করা হয়। এটি খুবই সাধারন এবং মৌলিক।
ট্যাগ দারা অনুচ্ছেদ (প্যারাগ্রাফ) নিদের্শ করা হয়। এই ট্যাগ ব্যবহার করার ফলে প্যারাগ্রাফ টেক্সের উপরে নিচে অটোমেটিক ফাকা লাইন সৃষ্টি হয়।
1.<p>Avoid losing floppy disks with important school...</p>
2.<p>For instance, let's say you had a HUGE school...</p>
প্রদর্শন:
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)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.
ওয়ার্ড ডকুমেন্টে এ আমরা যেভাবে কোন লেখাকে justify করে সবদিকে সমান করতাম তেমনি ভাবে এইচটিএমএল এ justify ব্যবহার করে একই কাজ করতে পারি।
1.<palign="justify">For instance, let's say you had a HUGE 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.
ওয়ার্ড ডকুমেন্টে এর মত প্যারাগ্রাফ এর প্রতেকটি লাইন display window এর মধ্যে অবস্থান করবে।
1.<palign="center">For instance, let's say you had a HUGE 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.
ওয়ার্ড ডকুমেন্টে এর মত প্যারাগ্রাফ এর প্রতেকটি লাইন display window এর ডানপাশে অবস্থান করবে।
1.<palign="right">For instance, let's say you had a HUGE 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. এইচটিএমএল হেডিং টিউটোরিয়াল (HTML Heading Tutorial in Bangla)
এইচটিএমএল এ হেডিং বা শিরোনাম সাধারনত টাইটেল বা সাবটাইটেল হিসাবে দেখা যায়। হেডিং ট্যাগ এর মধ্যে রাখা টেক্স bold হিসাবে প্রদর্শিত হয় এবং আকার যা হেডিং এর নম্বরের উপর নির্ভর করে। হেডিং নম্বর গুলো ১ হতে ৬ এর মধ্যে সীমাবদ্ধ। এখানে ১ সবচেয়ে বড় এবং ৬ সবচেয়ে ছোট হেডিং
1.<body>
2.<h1>Headings</h1>
3.<h2>are</h2>
4.<h3>great</h3>
5.<h4>for</h4>
6.<h5>titles</h5>
7.<h6>and subtitles</h6>
8.</body>
Headings
are
great
for
titles
and subtitles
লক্ষ করার বিষয় এইযে প্রতিটি হেডিং এর নিজস্ব লাইন ব্রেক option আছে । এটা হেডিং এর built in attribute । হেডিং লেখার সময় অটোমেটিক লাইন ব্রেক হয়ে যায়।
হেডিংএবংপ্যারাগ্রাফএর একত্রে ব্যবহার:
আমরা হেডিং এবং paragraph একসাথে ব্যবহার করতে পারি। নিচে উদাহরন দেয়া হল।
1.<h1align="center">Essay Example</h1>
2.<p>Avoid losing floppy disks with important school/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. এইচটিএমএল লাইন ব্রেক টিউটোরিয়াল
আমরা আগে দেখেছি লাইন ব্রেক ট্যাগটি অন্যান্য হতে একটু ভিন্ন। লাইন ব্রেক ট্যাগটি একটা লাইন শেষ করে আপনাকে অন্য লাইন হতে লেখা শুরু করতে সাহায্য করবে। এইচটিএমএল এ ট্যাগ দ্বারা লাইন ব্রেক চিহ্নিত করা হয়।মাইক্রোসফট ওয়ার্ডে যেমন Enter দিলে নিচের লাইনে চলে যায়,এটার কাজ ঠিক তেমনই।
1.<p>
2.Will Mateson<br/>
3.Box 61<br/>
4.Cleveland, Ohio<br/>
5.</p>
প্রদর্শন:লাইন ব্রেক এর সাহায্যে চিঠির address তৈরী করতে পারি।
Will Mateson
Box 61
Cleveland, Ohio
আবার চিঠির সমাপ্ত ঘোষনা করতে পারি।
1.<p>Sincerely,<br/>
2.<br/>
3.<br/>
4.Kevin Sanders<br/>
5.Vice President</p>
প্রদর্শন:
Sincerely,
Kevin Sanders
Vice President
আরও একটা বিষয় মনে রাখা প্রয়োজন যে লাইন ব্রেক ট্যাগ এর কোন closing tag এর প্রয়োজন নেই।
HTML horizontal rule:
Horizontal rule কে
ট্যাগ দারা প্রকাশ করা হয়।
ট্যাগটি ব্যবহার করে screen এর উপর সমান্তরাল লাইন প্রদর্শন করে। line break tag এর মত Horizontal rule tag এর কোন closing tag নেই।
1.
2.Use
3.
4.Them
5.
6.Sparingly
7.
প্রদর্শন:
Use
Them
Sparingly
Horizontal rule কোন গ্রন্থপঞ্জি বা কোন টেবিলের বিষয় সমুহ প্রকাশ করার ক্ষেত্রে ব্যবহার করা হয়।
1.<hr>
2.1. "The Hobbit", JRR Tolkein.
3.
4.2. "The Fellowship of the Ring" JRR Tolkein.
প্রদর্শন:
1. “The Hobbit”, JRR Tolkein.
2. “The Fellowship of the Ring” JRR Tolkein. এইচটিএমএল লিস্ট টিউটোরিয়াল (HTML List Tutorial in Bangla)
তিন প্রকারের এইচটিএমএল লিস্ট বিদ্যমান। tag দিয়ে শুরু করে ধারাবাহিক লিস্ট(ordered list),
ট্যাগ দিয়ে শুরু করে ধারাবাহিকতা হীন লিস্ট(unordered list),
ট্যাগ দিয়ে শুরু করে সংজ্ঞামূলক লিস্ট(definition list)।
– unordered list; বুলেট
– ordered list; নম্বর
– definition list; অভিধান
এইচটিএমএল ক্রমিক লিস্ট (HTML ordered lists)
ট্যাগ দিয়ে ক্রমিক লিস্ট(ordered list) শুরু করা হয়।
ট্যাগ দ্বারা দ্রব্যের তালিকা (list item) বোঝায়।তালিকা তৈরীর জন্য
ট্যাগ কে আপনার opening () এবং closing (
) tag এর মধ্যে রাখতে হয়। ক্রমিক (ordered) অর্থ হচ্ছে নম্বর যেমন ১, ২, ৩ ইত্যাদি।
1.<h4align="center">Goals</h4>
2.<ol>
3.<li>Find a Job</li>
4.<li>Get Money</li>
5.<li>Move Out</li>
6.</ol>
প্রদর্শন:
Goals
Find a Job
Get Money
Move Out
Start attributes দিয়ে নিজের ইচ্ছানুযায়ী নম্বর হতে লিস্ট শুরু করা যায়।
আরও চার প্রকারের ধারাবাহিক লিস্ট(ordered list) রয়েছে। এগুলো সাধারন ১,২,৩ নম্বরের পরিবর্তে রোমান নম্বর বা বর্ণ হতে পারে তা বড় হাতের বা ছোট হাতের। type attribute ব্যবহার করে নম্বর পরিবর্তন করা হয়।
1.<oltype="a">
2.<oltype="A">
3.<oltype="i">
4.<oltype="I">
Ordered List Types:
Lower-Case Letters
Upper-Case Letters
Lower-Case Numerals
Upper-Case Numerals
Find a Job
Get Money
Move Out
Find a Job
Get Money
Move Out
Find a Job
Get Money
Move Out
Find a Job
Get Money
Move Out
এইচটিএমএল বিনাক্রম লিস্ট (HTML unordered lists)
ট্যাগ সাহায্যে বুলেট লিস্ট তৈরী করা হয়। বুলেট লিস্ট আবার তিন প্রকার যেমন ১. squares ২.discs ৩.circles । default হিসাবে সাধারনত full discs ব্যাবহার করা হয়।
1.<h4align="center">Shopping List</h4>
2.<ul>
3.<li>Milk</li>
4.<li>Toilet Paper</li>
5.<li>Cereal</li>
6.<li>Bread</li>
7.</ul>
প্রদর্শন:
Shopping List
Milk
Toilet Paper
Cereal
Bread
আমরা type attributes ব্যবহার করে unordered list এর অন্যান্য বুলেট ব্যবহার করতে পারি।
type=”dics”>
type=”circle”>
type=”square”
type=”disc”
type=”circle”
Milk
Toilet Paper
Cereal
Bread
Milk
Toilet Paper
Cereal
Bread
Milk
Toilet Paper
Cereal
Bread
এইচটিএমএল ডেফিনেশন লিস্ট (HTML definition lists)
Definition list এর ব্যবহার সাধারনত অভিধানে দেখতে পাই।
tag ব্যাবহার করে Definition list তৈরী করা হয়। যাকে Define অর্থ্যাৎ সংজ্ঞায়িত করতে চাই তাকে bold আকারে দেখানো উচিত। Definition list tag এর মধ্যে আরও দুটি tag অর্ন্তভুক্ত সেগুলো হলো ১.
২.
।
tag: লিস্ট এর শুরু জন্য এই ট্যাগ ব্যবহার করা হয় ।
tag: যাকে সংজ্ঞায়িত(Define) করবো এই ট্যাগ ব্যবহার করে তার নাম লেখা হয়।
tag:
tag এ যে নাম লেখা হয়েছে তার সম্পর্কে এখানে আলোচনা হয় ।
1.<dl>
2.<dt><b>Fromage</b></dt>
3.<dd>French word for cheese.</dd>
4.<dt><b>Voiture</b></dt>
5.<dd>French word for car.</dd>
6.</dl>
প্রদর্শন: Fromage
French word for cheese. Voiture
French word for car. এইচটিএমএল কালার কোড টিউটোরিয়াল (HTML Color code)
Color set করার তিনটি পদ্ধতি আছে। সাধারন কিছু কালার যেমন কালো, সাদা, লাল, সবুজ, নীল। এইচটিএমএল এ কালার value লেখার সময় সরাসরি এদের নাম লেখা হয়।নিচে ১৬টি মৌলিক কালারের নাম লেখা হল।
১৬টি মৌলিক কালার:
Black
Gray
Silver
White
Yellow
Lime
Aqua
Fuchsia
Red
Green
Blue
Purple
Maroon
Olive
Navy
Teal
এইচটিএমএল-রং পদ্ধতি আরজিবি মান (HTML- Coloring system:rgb value)
আমি আপনাদেরকে নিরাপদ web design এর জন্য HTML rgb ব্যবহারের পরামর্শ দেব না কারন Non-IE browser, HTML rgb সাপোর্ট করে না। আপনারা যদি CSS শিখতে চান তাহলে আপনাদের উচিত এই বিষয় সম্বন্ধে জানা।
Red, Green এবং Blue এই তিনটি কালারের সমষ্টি হচ্ছে rgb । প্রত্যেকের মান ০(যখন কোন কালার থাকে না) হতে ২৫৫(যখন ঐ কালারটি সম্পুর্ন থাকে)। rgb ফরমেটটি হল rgb(RED,GREEN,BLUE)।
প্রথম প্রথম Hexadecimal system বুঝতে একটু কারন এই system একটু জটিল ও কঠিন। practice করার মাধ্যমে বিষয়টি অনেক সহজ হয় যাবে। এই Hexadecimal system সকল ক্ষেত্রে গ্রহনযোগ্য এবং বহুল ব্যবহৃত। Hexadecimal system টি ইন্টারনেটের standard color।
Hexadecimal হল ৬ digit কালারের উপস্থাপন। প্রথম দুটি digit(RR), Red value নির্দেশ করে পরবর্তি দুটি digit(GG), Green value নির্দেশ করে এবং সর্বশেষ দুটি digit(BB), Blue value নির্দেশ করে।
এইচটিএমএল হেক্সাডেসিমাল রং
bgcolor=”#RRGGBB”
এইচটিএমএল -রং কোড (HTML- Colorcode: breaking the code)
নিচে টেবিলে দেখানো হয়েছে কিভাবে বর্ণ Hexadecimal system এর Numbering system কে বর্ধিত করে ১৬ digit এ উন্নীত করে।
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
তাই বর্ণকে নম্বর হিসাবে ব্যবহার করা হয়। এই বর্ণকে পরে নম্বরে রুপান্তর করা হয়।নিচে একটি উদাহরন দেয়া হলো।
একটি বাস্তবহেক্সাডেসিমাল:
bgcolor=”#FFFFFF”
এখানে “F” হচ্ছে সবোর্চ্চ পরিমান এবং এই কালারটি (“#FFFFFF”) সাদা কালার নিদের্শ করে। নিচে বিষয়টি বিস্তারিত আলোচনা করা হয়েছে।
হেক্সাডেসিমালসূত্র:
(15 * 16) + (15) = 255
উপরের সূত্রটি বাস্তব। প্রথমে F এর মান(১৫) কে ১৬ দ্বারা গুন করে পরবর্তি মানের সাথে যোগ করতে হবে। ২৫৫ মানটি যেকোন প্রাথমিক কালারের মানের ক্ষেত্রে সর্বোচ্চ।নিচে আরও উদাহরন দেয়া হলো। উদাহরন:
bgcolor=”#CC7005″
CC(RR – Red)
(12 * 16) + (12) = 204
70(GG – Green)
(7 * 16) + (0) = 112
05(BB – Blue)
(0 * 16) + (5) = 5 এইচটিএমএল ফন্ট টিউটোরিয়াল (HTML Font Tutorial in Bangla)
ট্যাগ ব্যাবহার করে ওয়েব সাইটের টেক্সটের স্টাইল, সাইজ এবং কালার যোগ করা হয়। size, color এবং face attributes ব্যাবহার করে আপনি ফন্ট কে কাস্টমাইজ করতে পারি। ট্যাগ ব্যাবহার করে পেজের সকল টেক্সটকে একই স্টাইল, সাইজ এবং কালার এ সেট করা যায়।
এবং ট্যাগ ব্যাবহার না করে সিএসএস(সিএসএস টিউটোরিয়ালে আলোচনা করা হয়েছে) ব্যাবহার করা উচিত।
ফন্ট আকার (Font size)
Size attribute এর সাহায্যে ফন্ট এর সাইজ ঠিক করা হয়। ফন্ট এর আকার এর গ্রহনযোগ্য মান হচ্ছে ১(সবচেয়ে ছোট) হতে ৭(সবচেয়ে বড়)। ফন্ট এর ডিফল্ট আকার হচ্ছে ৩।
1.<p>
2.<fontsize="5">Here is a size 5 font</font>
3.</p>{}
প্রদর্শন:
Here is a size 5 font.
ফন্ট রং (Font color)
কালার attribute এর সাহয্যে font এর color সেট করা হয়।
1.<fontcolor="#990000">This text is hexcolor #990000</font>
2.<br/>
3.<fontcolor="red">This text is red</font>
প্রদর্শন:
This text is hexcolor #990000
This text is red
ফন্ট ফেস (Fontface)
ফন্ট face এর ক্ষেত্রে সতর্ক হওয়া উচিত কারন আপনার সিস্টেম এ নির্ধারিত ফন্ট টি ইনস্টল দেয়া না থাকে তাহলে আপনি ঐ ফন্ট টি দেখতে পাবেন না এবং তার পরিবর্তে ডিফল্ট হিসাবে Times New Roman ফন্ট টি দেখতে পাবেন।
1.<p>
2.<fontface="Bookman Old Style, Book Antiqua, Garamond">This paragraph
3.has had its font...</font>
4.</p>
প্রদর্শন:
This paragraph has had its font formatted by the font tag!
বেসফন্ট (Basefont)
Basefont ট্যাগ এর সাহায্যে আপনি ওয়েব পেজের ডিফল্ট ফন্ট সেট করতে পারেন।নিচে basefont ব্যাবহার করার সঠিক পথ দেখানো হল।
01.<html>
02.<body>
03.<basefontsize="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 ব্যাবহার না করে সিএসএস (সিএসএস টিউটোরিয়ালে আলোচনা করা হয়েছে) ব্যবহার করা ভালো।
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
প্রথম অক্ষরের সুন্দর স্টাইল:
ফন্ট কে কাস্টমাইজ করে যেকোন ধরনের স্টাইল করা যায়।
1.Customize
2.your font to achieve a desired look.
প্রদর্শন:
Customize your font to achieve a desired look.
এইচটিএমএল লিংক টিউটোরিয়াল
আপনি চাইলে আপনার সাইটের কোন টেক্সটের উপর লিংক তৈরী করে দিতে পারেন যেখানে ক্লিক করলে অন্য পেজ/সাইট আসবে। anchor tag এর সাহায্যে লিংক তৈরী করা হয়। শুধু টেক্সট নয় আপনি চাইলে একটা মেইল এড্রেসের উপর লিংক দিতে পারেন,একটা ছবির উপর লিংক দিতে পারেন,বড় কোন ওয়েব পেজের সুচিপত্র তৈরী করে এর আইটেমগুলিতে লিংক দিতে পারেন (এসব লিংকে ক্লিক করলে পেজেরই ঐ অংশে যাবে যেখান থেকে আইটেমটি শুরু হয়েছে)।
হাইপারটেক্সক্ট রেফারেন্স(href)
href এট্রিবিউট নিদের্শ করে যে ইউজার ক্লিক করে কোথায় যাবে।
Hypertext reference হতে পারে Internal, Local, Global ।
ইন্টারনাল: একই পেজের মধ্যে লিংক তৈরী হবে।
লোকাল: আপনার web site এর ভিতরে কোন পেজেরে সাথে লিংক তৈরী হবে।
গ্লোবাল: আপনার web site এর বাহিরে অন্য web site এর লিংক তৈরী হবে।
এবং tag দ্বারা যথাত্রুমে লিংক শুরু এবং শেষ বোঝায়। href এট্রিবিউট এর সাহায্যে কোন ধরনের লিংক স্থাপিত হবে তা নির্ধারিত হয়। href এট্রিবিউটকে opening tag এর মধ্যে রাখতে হয়। opening এবং closing tag এর মধ্যে কোন লেখা থাকলে, তা পরে web পেজে লিংক হিসাবে দেখা যাবে।যেমন
Target এট্রিবিউট দ্বারা বোঝায়, হয় পেজ খুলতে হবে পৃথক window তে অথবা লিংক খুলতে হবে একই browser window তে ।
target=”
_blank”
নতুন browser window তে page খোলা ।
_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 নেয়া।
এইচটিএমএল ইমেইল লিংক
টেক্সট লিংক উপরে যেভাবে তৈরী করলেন ইমেইল লিংকও সেভাবে করতে হবে শুধু href এট্রিবিউটের ভিতর ইনভার্টেড কমার মধ্যে আগে ওয়েব সাইটের ঠিকানা ছিল আর এবার ইমেইল ঠিকানা দিবেন।যেমন Email Example প্রদর্শন: Email Example
এই লিংকের উপর মাউস নিয়ে যান, নিচে স্টাটাসবারে mailto:abc@mail.comলেখা দেখাবে।এখানে ক্লিক করলে
আপনার ব্রাউজার abc@mail.com নামের একটি মেইল ঠিকানায় মেইল পাঠানোর ক্ষেত্র প্রস্তুত করবে।আরও সহজভাবে বলি,ধরুন আপনি মজিলা ফায়ারফক্স ব্রাউজার ব্যবহার করছেন,আপনি যদি Tools>Options>Applications এ গিয়ে mailto এর জায়গায় ড্রপডাউন মেনু থেকে Use Yahoo mail সিলেক্ট করে দেন তাহলে Email Example লিংকে ক্লিক করলে আপনার ইয়াহু মেইল খুলবে এবং To ফিল্ডের জায়গায় abc@mail.comলেখা উঠবে।
আপনি চাইলে ইমেইল লিংকে subject এবং body ঠিক করে দিতে পারেন যেমন 2nd Email Example
প্রদর্শন: 2nd Email Example
এখানে ক্লিক করলে আপনার ইয়াহু মেইল খুলবে এবং To এর জায়গায় a@b.com আর Subject এর জায়গায় Web Page Email ও Body তে This email from your site এগুলি গিয়ে অটোমেটিক বসবে।
ইন্টারনাল লিংক
নিচে লিংকগুলিতে ক্লিককরে দেখুন এই পেজেরই বিভিন্ন অংশে এই লিংকগুলি নিয়ে যাবে।এটা হচ্ছে ইন্টারনাল লিংক।পেজ বড় হলে সুচিপত্র তৈরী করে এভাবে লিংক দিতে পারেন। পেজের উপরে যান টেক্সট লিংক
“পেজের উপরে যান” এখানে ক্লিক করলে পেজের কোথায় যাবে তা আগেই ঠিক করে রাখতে হবে এভাবে
হাইপারটেক্সক্ট রেফারেন্স(href)
পরের লিংকটিও এভাবে করে নিতে হবে (এখানে name=”text”)
শেষে “পেজের উপরে যান” এর উপর লিংক দিয়েছি এভাবে পেজের উপরে যান
এবং টেক্সট লিংক এইচটিএমএল এনটাইটিজ টিউটোরিয়াল (HTML Entities Tutorial in Bangla)
এনটাইটি হল symbol এর কাল্পনিক বিষয়। অনেক symbol যেমন ট্রেডমার্ক, কপিরাইট, বৈদেশিক মুদ্রা প্রতিক ইত্যাদি ওয়েব পেজ প্রদর্শন করতে হলে এনটাইটি বিষয়ে জানতে হবে।
প্রত্যেক এনটাইটি এর তিনটি অংশ থাকে যেমন:
১.প্রত্যেক Entity এমপারসেন্ড (ampersand) দিয়ে শুরু হয়- &
২.তারপর Entity এর নাম – copy
৩.শেষে semicolon যোগ করতে হয়-;
আমরা প্যারাগ্রাফ ট্যাগ এরং হেডিং ট্যাগ এর মধ্যে দেখেছি ব্রাউজার শুধু দুটি শব্দের মধ্যে একটি স্পেস চিনতে পারে এর বেশি পারে না। আমরা এনটাইটি ব্যবহার করে অতিরিক্ত স্পেস দিতে পারি। নিচে উদাহরন দেয়া হলো।
1.<p>Everything that goes up, must come down!</p>
প্রদর্শন:
Everything that goes up, must come down!
আমরা এইচটিএমএল এ লেস দেন এবং গ্রেটার দেন চিহ্ন ব্যবহার করে ট্যাগ তৈরী করি। এসব চিহ্ন ওয়েব পেজ এ দেখাতে চাইলে এনটাইটি ব্যবহার করতে হবে।
1.<p>
2.Less than - < <br/>
3.Greater than - > <br/>
4.Body tag - <body>
5.</p>
প্রদর্শন:
Less than – <
Greater than – >
Body tag – এইচটিএমএল কমেন্ট বা মম্তব্য (HTML Comments Tutorial in Bangla)
কমেন্ট আপনাকে ওয়েব ডেভেলপার হিসাবে এমন একটি পথ দেখাবে যেটা দ্বারা আপনি এটা নিয়ন্ত্রন করতে পারবেন যে কোন্ কোন্ লাইন ব্রাউজার দ্বারা নিস্ক্রিয় করা হবে।
তিনটি কারনে আমরা কোডকে ignore করি।
১. এইচটিএমএল ডকুমেন্ট এর ভিতরে note লিখে বা নিজের জন্য reminder লিখে
২.স্ক্রিপ্টিং ল্যাংগুয়েজ যেমন জাভাস্ক্রিপ্ট এর কিছু কমেন্ট বা মন্তব্য প্রয়োজন। .
৩.Temporarily comment প্রয়োজন যতক্ষন পর্যন্ত এইচটিএমএল এলিমেন্ট অসম্পুর্ন থাকে।
অন্যান্য ট্যাগ মত কমেন্ট এরও opening tag এবং closing tag আছে।
<!– Opening Comment
— > Closing Comment
এইচটিএমএল – <!– এই লেখাটি কমেন্ট হয়ে থাকবে –>:
ওয়েব ডেভেলপার হিসাবে আপনি অনেক কাজ অসম্পুর্ন রাখতে পারেন সেক্ষেত্রে অসম্পুর্ন কাজটিকে <!— — > কমেন্ট ট্যাগ এর ভিতর রাখতে পারেন।
1.
যখন এইচটিএমএল ইলিমেন্টকে প্রদর্শন করতে চান তখন কমেন্ট ট্যাগটি উঠিয়ে দিবেন।
1.<inputtype="text"size="12"/>
প্রদর্শন:Input Field: এইচটিএমএল ছবি টিউটোরিয়াল (HTML Images Tutorial in Bangla)
ছবি একটা গুরুত্বপুর্ন বিষয় এর সঠিক ব্যবহার আমাদের জানতে হবে। ট্যাগ ব্যবহার করে আমরা ওয়েব পেজ এ ইমেজ নিয়ে আসতে পারি।
1.<imgsrc="/sunset.gif"/>
প্রদর্শন:
এইচটিএমএল–ছবিsrc:
Src attribute গুরুত্বপুর্ন বিষয়। Src এর অর্থ সোর্স(source) অর্থাৎ ইমেজের উৎস বা যেখানে picture file টি অবস্থিত।
দুটি উপায়ে আমরা ইমেজের সোর্স নির্দিস্ট করতে পারি।
১. Standard URL ব্যবহার করে
(src=http://www.webcoachbd.com/pics/htmlT/sunset.gif)
২. web server এ file কপি বা আপলোড করে
(src=”/../sunset.gif”)
এই picture file এর location এর সাথে .এইচটিএমএল file এর location এর সম্পর্ক আছে।
URL Types:
Local Src
Location Description
src=”/sunset.gif”
picture file এবং .html file একই directory তে অবস্থান বরে।
src=”/../sunset.gif”
picture file পুর্ববতি directory তে অবস্থান করে .html file মত।
src=”/../pics/sunset.gif”
picdirectory এর picture file পুর্ববতি directory তে অবস্থান করে .html file এর মত।
এইচটিএমএল–alternative attribute:
Alt attribute নির্দিস্ট করে অলটারনেটিভ টেক্সট অর্থ্যাৎ যখন ইমেজ প্রদশির্ত হয় না তখন অলটারনেটিভ টেক্সটি প্রদশির্ত হয় । ইমেজ প্রদশির্ত না হওয়ার কারন হতে পারে ফাইলটি নষ্ট হয়ে গেছে বা browser ইমেজ ফাইলটি খুজে পাচ্ছে না।
ইমেজের height এবং width ঠিক করার জন্য height এবং width attribute ব্যাবহার করা হয়।
1.
প্রদর্শন:
এইচটিএমএল–VerticallyএবংHorizontally alignছবি:
Align এবং valign attribute ব্যবহার ইমেজের অবস্থান নির্ধারন করতে পারি।
align (Horizontal)
right
left
center
valign (Vertical)
top
bottom
center
নিচে উদাহরন দেয়া হলো
1.<p>This is paragraph 1, yes it is...</p>
2.<p>
3.<imgsrc="/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!
এইচটিএমএল-ইমেজকে লিংক হিসাবে ব্যবহার:
ইমেজকে লিংক হিসাবে ব্যবহার করা যায়।
1.<ahref="http://www.webcoachbd.com/">
2.<imgsrc="/sunset.gif">
3.</a>
প্রদর্শন:
এইচটিএমএল– Thumbnails:
Thumbnails হল ছোট সাইজের ইমেজ যা বড়, ভাল মানের ইমেজের সাথে লিংক করে। এই লিংক মাধ্যমে picture quality রক্ষা করা যায়।Thumbnails একটা নিম্ন মানের ইমেজ যা ইমেজ লিংক হিসাবে কাজ করে।
1.<ahref="/sunset.gif">
2.<imgsrc="/thmb_sunset.gif">
3.</a>
এইচটিএমএল টেবিল টিউটোরিয়াল (HTML Tables Tutorial in Bangla)
টেবিল হল Horizontal সারি এবং vertical কলামের বিন্যাস। এটা tabular data প্রদর্শনের ক্ষেত্রে অনেক গুরুত্বপুর্ন। ডকুমেন্টের এলিমেন্ট নিয়ন্ত্রনের জন্য ওয়েব ডিজাইনারদের কাছে এটা আরো বেশি গুরুত্বপুর্ন । সারি এবং কলামের ইন্টারসেকশনকে cell বলে। সকল এইচটিএমএল টেবিল
ট্যাগ দিয়ে শুরু হয় এবং
ট্যাগ দিয়ে শেষ হয়।
১.
ট্যাগ Horizontal সারি নিদের্শ করে।
২
ট্যাগ ঐ Horizontal সারির data cell নিদের্শ করে।
৩
ট্যাগ data cell এর টেবিল heading হিসাবে কাজ করে।
Rowspan ব্যাবহার করে অনেকগুলো সারির বিস্তার এবং colspan ব্যাবহার করে অনেকগুলো কলামের বিস্তার করা হয়। আপনি যদি কলামের header দিতে চান তাহলে
ট্যাগ ব্যাবহার করতে হবে।
ট্যাগ ব্যাবহার করলে default হিসাবে header টি বোল্ড আকারে দেখাবে।
এখানে cellpadding বলতে বোঝায় টেবিলের বর্ডার এবং টেবিলের মধ্যে ধারনকৃত অংশ (লেখা, সংখ্যা) এর মধ্যে স্পেস (space) বা ফাকা অংশ এবং cellspacing বলতে বোঝায় টেবিলের দুটি cell এর মধ্যে স্পেস(space) বা ফাকা অংশ ।
এইচটিএমএল ব্যাকগ্রাউন্ড রং টিউটোরিয়াল (HTML Background Colors Tutorial in Bangla)
bgcolor এট্রিবিউট টি বিশেষভাবে ওয়েব পেজ এবং টেবিলের ব্যাকগ্রাউন্ড নিয়ন্ত্রন করে। Bgcolor এট্রিবিউট টিকে অনেক এইচটিএমএল ট্যাগ এর মধ্যে ব্যাবহার করা যায় তবে সবচেয়ে ভাল হয় এবং
ট্যাগ এর মধ্যে ব্যাবহার করলে। অতিরিক্ত হিসাবে ব্যাকগ্রাউন্ড স্টাইল করতে চাইলে সিএসএস ব্যাকগ্রাউন্ড(CSS টিউটোরিয়ালে আরোচনা করা হয়েছে) দেখতে পারেন।
গঠন:
1.<bodybgcolor="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 continue 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!
টেবিলের ব্যাকগ্রাউন্ডএ কালার যোগ করা :
01.<tablebgcolor="lime"border="1"><tr>
02.<td>A lime colored table background using color names.</td>
03.</tr></table>
04.
05.
06.<tablebgcolor="#ff0000"border="1"><tr>
07.<td>A red colored table background using hexadecimal values "#FF0000".</td>
08.</tr></table>
09.
10.
11.<tablebgcolor="rgb(0, 0, 255)"border="1"><tr>
12.<td>A blue colored table background using RGB values "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)”.
টেবিলের সারি এবং কলামে কালার যোগ করা:
1.<table>
2.<trbgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
3.<trbgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
4.<trbgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
5.<trbgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
6.<trbgcolor="#FFFF00"><td>This Row is Yellow!</td></tr>
7.<trbgcolor="#AAAAAA"><td>This Row is Gray!</td></tr>
প্রদর্শন:
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. এইচটিএমএল ব্যাকগ্রাউন্ড টিউটোরিয়াল (HTML Background Tutorial in Bangla)
ব্যাকগ্রাউন্ড এট্রিবিউট এর সাহায্যে এইচটিএমএল টেবিলে ইমেজকে ব্যাকগ্রাউন্ড ইমেজ হিসাবে দেখানো যায়।
3.<tr><td>This table has a background image</td></tr>
4.</table>
প্রদর্শন:
This table has a background image
এইচটিএমএল ব্যাকগ্রাউন্ড রিপিট:
উপরের উদাহরনে দেখা গিয়েছে যে টেবিল এর আকার ছবির আকারের সমান বলে কোন সমস্যা হয় নি । যদি টেবিল এর আকার ছবির আকারের চেয়ে বড় হয় তবে ব্যাকগ্রাউন্ড ছবি রিপিট হবে।
3.<tr><td>This table has a background image</td></tr>
4.</table>
প্রদর্শন:
This table has a background image
এইচটিএমএল প্যাটার্নড ব্যাকগ্রাউন্ড
বিভিন্ন ফটো এডিটিং সফ্টওয়ার দিয়ে বিভিন্ন প্যাটার্নের ব্যাকগ্রাউন্ড ছবি এরং ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড ছবি তৈরী করা যায়। ট্রান্সপারেন্ট ইমেজের ফাইলটিকে gif ফরমেটে রাখতে হবে jpeg ফরমেটে নয়।
2.<tr><td>This table has a red transparent background image</td></tr>
3.</table>
প্রদর্শন:
This table has a red transparent background image এইচটিএমএল ফ্রেম টিউটোরিয়াল (HTML Frame)
ফ্রেম এর মাধ্যমে একই সময় একই ব্রাউজার উইন্ডো তে অনেক গুলো এইচটিএমএল ডকুমেন্ট প্রদর্শন করা যায়।
এইচটিএমএল-a generic frame page:
ফ্রেমের বেশি ব্যবহার হল একটি ফ্রেম এ মেনু আর একটি ফ্রেম এ তার কনটেন্ট ।যখন কেউ মেনু লিংকে ক্লিক করে তখন সেই ওয়েব পেজটি কনটেন্ট পেজে খোলে।
1.<html>
2.<head>
3.</head>
4.<framesetcols="30%,*">
5.<framesrc="/menu.html">
6.<framesrc="/content.html">
7.</frameset>
8.</html>
প্রদর্শন:
নিজে চেষ্টা করুন। frameset– এটা একটা parent tag যা ফ্রেম page এর characteristics নির্দেশ করে।পৃথক পৃথক ফ্রেমframesetএর মধ্যে নির্দেশিত থাকে। frameset cols=”#%, *”– Cols(column) যা ফ্রেম এর width নির্দেশ করে। উপরের উদাহরনে আমরা মেনু (1stcolumn) নির্বাচন করেছি যা total page এর ৩০% এবং “*”, এর অর্থ total page এর ৭০% content(2ndcolumn) নির্দেশিত হয়। frame src=”/”ওয়েব পেজ এর লোকেশন ফ্রেমে লোড হয়।
অনুগ্রহ করে কোডগুলি নিজে লিখে প্রাকটিস করে দেখুন। এইচটিএমএল লেআউট টিউটোরিয়াল (HTML Layout Tutorial in Bangla)
এইচটিএমএল লেআউট হল খুব মৌলিক বিষয়। টেবিলের ভিতর টেবিল স্থাপন করে এইচটিএমএল
লেআউট তৈরী করা হয়।
প্রদর্শন:
নিজে চেষ্টা করুন। এইচটিএমএল মিউজিক টিউটোরিয়াল (HTML Embed Music Tutorial in Bangla)
ওয়েব পেজ এ music ঢুকানো অনেক সহজ। Embed ট্যাগ এর সাহায্যে music ঢুকানো হয় এবং src attribute এর সাহায্যে media file এর লোকেশন ঠিক করা হয়।
1.<embedsrc="/Madine Ko Jain.mp3"/>
Embed Attributes– প্রদর্শনের সাথে সর্ম্পকিত:
Embeded media player এর বাহ্যিক রুপ কে কাস্টমাইজ করতে নিচের attribute কে সেট করতে হবে।
১. width – media player এর প্রসস্থতা
২. height – media player এর উচ্চতা
৩. hidden – যদি এর মান সত্য হয় তবে media player টি প্রদর্শিত হবে না। আমি সুপারিশ করব এই attributeটি ব্যবহার করতে যদি আপনি জেনে থাকেন ওয়েব পেজ এ চলা music টি ভিজিটর বন্ধ করা option না চান।
Embeded media player এর কার্যপ্রণালী কে কাস্টমাইজ করতে নিচের attribute কে সেট করতে হবে।
autostart – এই attribute এর দুটি মান false বা true । যদি মান true দেয়া হয় তবে ওয়েব পেজ খোলার সাথে সাথে গান শুরু হবে।
loop – এই attribute এর দুটি মান false বা true। true সেট করা থাকলে গানটি রিপিট হবে আর false থাকলে হবে না।
volume – এই attribute দ্বারা media file এর volume সেট করা হয়। এর সীমা হল ০-১০০।
এইচটিএমএল ভিডিও টিউটোরিয়াল (HTML Video Tutorial in Bangla)
Music ফাইল এর মত ভিডিও ফাইল কে ট্যাগ দিয়ে ওয়েব পেজ এ প্রদর্শন করা যায়। image ট্যাগ এর মত embed ট্যাগ এর কোন closing ট্যাগ এর প্রয়োজন নেই। src attribute এর মাধ্যমে সঠিক URL(local বা global) ঠিক করে ভিডিও ওয়েব পেজে প্রদর্শন করা যায়।
Flash movies (.swf), AVI’s (.avi), and MOV’s (.mov)। embed ট্যাগ এসব ফরমেটকে সাপোর্ট করে।
.swf files – এই ফরমেটটি হচ্ছে ফ্লাশ
.wmv files – এই ফরমেটটি হচ্ছে মাইক্রোসফট উইন্ডোজ মিডিয়া টাইপ।
.mov files – এই ফরমেটটি হচ্ছে এপল কুইক টাইম মিডিয়া
.mpeg files – এটি একটি standard ফরমেট যা Moving Pictures Expert Group দ্বারা compression movie ফাইল তৈরী হয়েছে।
উপরের ফরমেট গুলোর মধ্যে ইন্টানেটে বেশি ব্যবহার হয় swf, mpeg এই ফরমেট গুলো ।
এইচটিএমএল – Embed Attributes:
Src attribute এর মত ট্যাগ এর আরো attribute রয়েছে সেগুলো হলো volume, autostart, hidden, and loop ।
autostart – এই attribute এর দুটি মান false বা true । যদি মান true দেয়া হয় তবে পেজ খোলার সাথে সাথে ভিডিও টি শুরু হয়ে যাবে।
hidden – এই attribute এর মাধ্যমে play/stop/pause নিয়ন্ত্রন করে। 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 সেট করা থাকলে ভিডিও টি রিপিট হবে আর false থাকলে হবে না।.
playcount – Setting a playcount সেট করা অর্থ হচ্ছে mediaটি x number পর্যন্ত repeat হবে অবিরত হওয়ার repeat পরিবর্তে (playcount=”2″ এর অর্থ video টি দুই বার চলবে).
volume – এই attribute দ্বারা media file এর volume set করা হয়। এর সীমা হল ০-১০০।
এইচটিএমএল বডি (HTML Body)
Body tag যা web page এর সকল element ধারন করে। Tables, Lists, Forms, paragraph element গুলোকে Body element এর মধ্যে রাখতে হয়।
HTML – Body Margins:
Attributes
Leftmargin: body element. এর বাম পাশের মারজিন।
topmargin :body element এর উপরের মারজিন।
1.
2.
show
Top margin
Left margin
HTML – Base Text:
Text attributes এর মাধ্যমে Body tag এর ভিতরের সকল টেক্সট এর কালার ঠিক করা যায়।
1.<bodytext="red">
বা 1.<bodytext="rgb(255,0,0)"
এইচটিএমএল ডিভ টিউটোরিয়াল ( HTML Div Tutorial in Bangla)
ট্যাগ অন্যান্য ট্যাগ এর পাত্র হিসাবে কাজ করে অনেকটা body ট্যাগ এর মত।
Div এলিমেন্ট গুলো হলো block এলিমেন্ট যারা অন্তরালে থেকে অন্যান্য ট্যাগ গুলোকে একত্রে করে।
সিএসএস এর ক্ষেত্রে Div এলিমেন্ট অনেক গুরুত্তপুর্ন।
নিচে ডিভে ব্যবহৃত কতকগুলো attributes দেয়া হলো।
id
width
height
title
style
দর্শকদের strong visualization এর জন্য ডিভের style attribute এর মাধ্যমে কালার প্রদর্শন করা যায়।
টেবিল লেআউট অথবা ফ্রেম ছাড়াও ৩য় অল্টারনেটিভ হিসাবে div এলিমেন্ট ব্যবহার করা যায়।
beginning and ending ট্যাগ এর মাধ্যমে div এলিমেন্ট সকল এইচটিএমএল এলিমেন্ট ধারন করতে পারে।
01.<divid="menu"align="left">
02.<ahref="/">HOME</a> |
03.<ahref="/">CONTACT</a> |
04.<ahref="/">ABOUT</a>
05.</div>
06.<divid="content"align="left"bgcolor="white">
07.<h5>Content Articles</h5>
08.<p>This paragraph would be your content paragraph with all of your readable material.</p>
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>
এইচটিএমএল বোল্ড এবং ইটালিক (HTML Bold & Italic)
bold tag ব্যবহার করে আমরা টেক্স বোল্ড করতে পারি।
1.<b>This text is entirely BOLD!</b>
প্রদর্শন:Bold:
This text is entirely BOLD!
টেক্সকে highlight করতে bold tag ব্যবহার করতে পারি।.
1.<p><b>Don't</b> touch that!</p>
প্রদর্শন: Don’ttouch that!
dictionary fashion.লেখার জন্য আমরা bold tag ব্যবহার করতে পারি।
1.<p><b>Cardio:</b> Latin word meaning of the heart.</p>
প্রদর্শন:Dictionary Cardio:Latin word meaning of the heart.
HTML – Italic(s)
The italics tag টি key word or phrase কে highlight করতে ব্যবহার করা উচিত। এই tags আপনার font face কে stylize বা কোন আকৃতি দেবেনা বরং টেক্সটকে জোর দিবে। 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:
Italictag! EmphasizedText!
Create ablockquote!
Format youraddresses!
1.<b>HTML</b>
2.<i>Hyper Text Markup Language</i>
বা
1.HTML
2.Hyper Text Markup Language
প্রদর্শন:HTML Dictionary
HTML Hyper Text Markup LanguageorHTML Hyper Text Markup Language
HTML Bold and Italics
and the tags উভয়কেই একসাথে text format এর জন্য ব্যবহার করা যায়।
শুধু তাদের ক্রম ঠিক থাকলো কিনা তা দেখে নিবেন।
1.Phillip M. Rogerson MD
প্রদর্শন:
Phillip M. RogersonMD
and the tags উভয়কেই টেক্স লিংকে ব্যবহার করলে ব্যাপার ভাল বুঝা যায়।
1.<p>Include several external
2.links throughout your texts as references to your viewers,
3.we will discuss
4.<ahref="/"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.
এইচটিএমএল কোড এবং pre ট্যাগ (HTML Code & Pre)
code tag এর মাধ্যমে আপনার text কে computer code এর মত করে লেখতে পারেন। এটা সাধারন ভাবে 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 computercode!
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 – Code Links
পৃথক link হিসাবে আপনার web page এ দেখাতে পারেন।
1.<p>Feel free to search <ahref="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 searchGooglefor anything you wish to find on the internet.
HTML –
Preformatting
tag এর সুবিধা হল HTML coding এর সময় যেভাবে আমরা লাইন ব্রেক, স্পেস নির্দেশ করে দিবো ঠিক সেভাবে টেক্সট প্রদর্শিত হবে।অর্থ্যাৎ যেভাবে কোড লিখবেন সেভাবেই আউটপুট দেখাবে।
1.<pre>
2.Roses are Red,
3.এখানে কয়েকটা স্পেস আছেViolets are blue,
4.I may sound crazy,
5.এখানে কয়েকটা স্পেস আছেBut I love you!
6.</pre>
প্রদর্শন:
Roses are Red,
Violets are blue,
I may sound crazy,
But I love you!
<p>This text is <sup>superscripted!</sup></p>প্রদর্শন:Superscript:This text issuperscripted!
HTML – Exponents
অংকে exponential ব্যবহার করা জন্য tag ব্যবহার করতে হয়।
1.2<sup>3</sup> = 8
2.14<sup>x</sup>
প্রদর্শন:Exponents:
23= 8
14x
HTML–ফুটনোট:
উপন্যাস বা প্রবন্ধে দেখা যায় কোন লেখার reference দেয়ার জন্য tag ব্যবহার হয় যা ফুটনোটকে নির্দেশ করে।
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 -Subscript
1.<p>This text is <sub>subscripted!</sub></p>
প্রদর্শন:
This text issubscripted!
1.H20 - Water
2.O2 - Oxygen
3.CO2 - Carbon Dioxide
প্রদর্শন:
H2O – Water
O2– Oxygen
CO2– Carbon Dioxide
HTML – Strikethrough
tag এর মাধ্যমে কোন লেখাকে ক্রস দেওয়া যায়।
1.<p>This text is <del>scratched</del> out!</p>
প্রদর্শন:Strikethrough
This text is scratchedout!
HTML – 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>
প্রদর্শন:
Clean my room
Cook Dinner
Wash Dishes
এইচটিএমএল ফর্ম ( HTML Form)
ওয়েব সার্ভার হতে তথ্য(name, email address, credit card, ইত্যাদি) গ্রহনের ক্ষেত্রে ওয়েবমাস্টার এর জন্য ফর্ম গুরুত্বপুর্ন tool হিসাবে কাজ। আপনার চাহিদা অনুযায়ী ফর্ম দর্শক হতে ইনপুট গ্রহন করে। আপনি এখান থেকে ডেটা সঞ্চয় করতে পারেন , order করতে পারেন, ব্যাবহারকারীর পরিসংখ্যান জমা করতে পারেন,আপনার forum এ ঐ ব্যক্তিটিকে রেজিস্ট্রেশন করাতে পারেন ইত্যাদি ।
টেক্সট ফিল্ড
কিভাবে সম্পুর্ন ফর্ম তৈরী করতে হয় সেটা আপনাদের আগে জানতে হবে। Input fields হচ্ছে form নামক sandwich এর গোশত । tag এর কিছু attributes আছে সেসব সম্বন্ধে জানা উচিত । type–এই এট্রিবিউট ইনপুট ফিল্ড এর প্রকারভেদ নির্ধারন করে। যেমন text, submit, এবং password । name–এই এট্রিবিউট টি দিয়ে ফিল্ড এর নামকরন করা যায় যাতে পরবর্তিতে আপনি reference আনতে পারেন। size–এই এট্রিবিউট টি ফিল্ড এর horizontal width সেট করে । maxlength–এই এট্রিবিউট টি character এর সর্বোচ্চ নম্বর নির্ধারন করে
প্রদর্শন:Input Forms
Name:
Password:
এইচটিএমএল- ইনপুট ট্যাগ:
Input fields এর মধ্যে যেসব জিনিস অন্তর্ভুক্ত সেগুলো হলো checkboxes, text fields, radios, এবং form submission buttons। ট্যাগ এর কোন closing tag প্রয়োজন নেই।
এইচটিএমএল-Type Attribute:
Type attributes এর সাহায্যে এক প্রকারের input tag নির্দেশ করতে পারি।নিচে কতকগুলো input tag দেয়া হলো।
১. “text”
২. “password”
৩. “checkbox”
৪. “radio”
৫. “submit”
৬. “reset”
এইচটিএমএল– চেকবক্স:
চেকবক্স অনেকগুলি আইটেম থেকে একটা বাছাই করার সুবিধা দেয়। চেকবক্স এর nameএবং valueএট্রিবিউট যা রেডিও বাটন এরnameএবং valueএট্রিবিউট মত আচরন করে।
প্রদর্শন: চেকবক্স:
Select your favorite cartooncharacters.Goofy
Donald
Bugs Bunny
Scooby Doo
এইচটিএমএল– সাবমিট বাটন:
Input type এর মধ্যে “submit” অপশনটি সাবমিট বাটন তৈরীর ক্ষেত্রে উল্লেখযোগ্য ।specifies a very unique button. যখন আমরা submit button এ চাপ দেবো তখন ফর্ম এর বার্তাটি activate হবে।
যেহেতু আমরা সাবমিট বাটন তৈরী করেছি তাই নতুন এট্রিবিউট প্রয়োজন তা হচ্ছেvalueএট্রিবিউট। আমরা যে শব্দকেvalueএট্রিবিউট এর মান হিসাবে নির্বাচন করবো তা বাটন উপর প্রদর্শিত হবে। “Submit” or “Continue” শব্দগুলোvalueএট্রিবিউট এর মান হিসাবে ব্যবহার হয়। .
1.<inputtype="submit"value="Submit"/>
2.<inputtype="submit"value="Continue Please!"/>
প্রদর্শন: সাবমিট বাটন
এইচটিএমএল – রিসেট বাটন:
সর্বশেষ input type হল রিসেট বাটন। রিসেট বাটন ক্লিক করার মাধ্যমে আপনি ফর্ম এর সবকিছু আবার পুর্বের স্বাভাবিক অবস্থায় নিয়ে যেতে পারবেন।”start over” বাটন কে আপনি রিসেট বাটন এর মত ব্যাবহার করতে পারবেন।
1.<inputtype="reset"value="Reset Fields"/>
2.<inputtype="reset"value="Start Over"/>
প্রদর্শন:রিসেট বাটন: এইচটিএমএল টেক্সক্ট ফিল্ড (HTML Text Field)
Text fields হল ছোট আয়তাক্ষেত্র যা আপনাকে কোন টেক্স ইনপুট করতে এবং সেই তথ্য web server পাঠাতে সাহায্য করবে। এসব তথ্যগুলো scripting language যেমন (PHP, PERL, or ASP) এর মাধ্যমে প্রক্রিয়া হয়।
HTML – Text Field Size:
Size attribute এর মাধ্যমে text area এর size নিয়ন্ত্রন করা যায়। default size হল সাধারনত ২০ characters দির্ঘ্য।
1.<inputtype="text"size="5"/>
2.<inputtype="text"size="15"/>
3.<inputtype="text"size="25"/>
প্রদর্শন:Text Fields:
HTML – Text Field Maxlength:
maxlength attribute নির্দিস্ট করা ছাড়া ব্যবহারকারী তার ইচ্ছামত characters ইনপুট করতে পারবে এমনকি আপনি যদি সাইজ নির্দিস্ট করেও থাকেন। characters ইনপুট কে সীমাবদ্ধ করতে maxlength attribute টি ব্যবহার করা হয়। size এবং maxlength একই হওয়া প্রয়োজন।
1.<inputtype="text"size="5"maxlength="5"/>
2.<inputtype="text"size="15"maxlength="15"/>
3.<inputtype="text"size="25"maxlength="25"/>
প্রদর্শন:Maxlength Attribute
HTML – Text Field Value:
value attribute ব্যবহার করে আপনি আগে থেকেই টেক্সট ফিল্ডে কিছু লিখে রাখতে পারেন যেটা সকলে দেখতে পারবে।
Text Field Values: এইচটিএমএল টেক্সক্ট এরিয়া (HTML Text Area)
টেক্সক্ট এরিয়া ব্লগ এর মত এটা ইউজার থেকে তথ্য তুলে আনতে ব্যবহৃত হয়। Paragraphs, essays, or memos সমূহ কাট পেষ্ট করে টেক্সক্ট এরিয়া তে বসানো যায় এবং সাবমিট করা যায়।টেক্সক্ট এরিয়া এর opening এবং closing ট্যাগ রয়েছে। টেক্সক্ট এরিয়া ট্যাগ এর ভিতর কোন কিছু লিখলে তা ওয়েব পেজ এর টেক্সক্ট এরিয়া তে প্রদর্শিত হয়।
1.<textarea>Text Area!</textarea>
প্রদর্শন
Text Area!
HTML – Text area Cols and Rows:
Adjust the of the text area র size এর appearance কে ঠিক করতে হলে দুটো attributes প্রয়োজন তা হলো colsandrows। প্রতেক attribute এর জন্য সংখ্যাগত মান দিতে হরে। যত বড় মান হবে তত বড় text area হবে।
wrapattribute টি টেক্সের কার্যকলাপ নির্ধারন করে যখন textarea র text field এ লেখা লিখতে লিখতে সারির শেষে চলে আসে। Wrap এর তিন ধরনের সেটিং আছে।যেমন:
১.soft
২.hard
৩.off wrapattribute এর Softমানটি wordকে text areaর ভিতরে মুড়িয়ে ফেলে but form সাবমিট করা হয় তখন মুড়ানো wordটি দেখা যায় না (Line breaks অপশন যোগ হয় না ) wrapattribute এরHardমানটি wordকে text areaর ভিতরে মুড়িয়ে ফেলে এবং লাইন এর শেষে Line breaks অপশন যোগ হয় । তারপর form সাবমিট করলে দেখা যায় যেভাবে text box এ লেখা ছিল ঠিক সেভাবে দেখাচ্ছে। wrapattribute এরOffমানটি wordকে text areaর ভিতরে মুড়িয়ে ফেলে না এবং একটি লাইনে অনবরত চলতে থাকে।
1.<textareacols="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 everything nice and
4.easy to read.
5.</textarea>
প্রদর্শন:Text Area Wrapping:
As you can see many times word wrapping
is often the desired look for your textareas. Since it makes everything
nice and easy to read.
1.<textareacols="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 everything nice and
4.easy to read.
5.</textarea>
প্রদর্শন: No Wrapping
As you can see many times word wrapping
is often the desired look for your textareas. Since it makes everything
nice and easy to read.
HTML – Textarea Readonly:
readonlyattribute এর value দুটি yes বা no।readonlyattribute এর মান yes থাকলে আপনারা শুধু textarea এর টেক্সকে কপি করতে পারবেন কিন্তু পরিবর্তন করতে পারবেন না।
2.As you can see many times word wrapping is often the desired
3.look for your text areas. Since it makes everything nice and
4.easy to read.
5.</textarea>
প্রদর্শন:
As you can see many
times word wrapping is often the desired look for your text areas. Since
it makes everything nice and easy to read.
এইচটিএমএল রেডিও বোতাম (HTML Radio button)
Radios হল এক প্রকার ইনপুট ফর্ম যা ব্যবহারকারীকে যেকোন একটি অপশন সিলেক্ট করতে বলে। রেডিও বোতাম বা বাটন এর নাম ঠিকভাবে দিতে হবে।”multiple choice” এই ধরনের কুইজ এবং প্রশ্নের জন্য Radios ব্যবহার করা সবচেয়ে ভাল।
1.Italian: <inputtype="radio"name="food"/>
2.Greek: <inputtype="radio"name="food"/>
3.Chinese: <inputtype="radio"name="food"/>
প্রদর্শন:Radios:
Italian:
Greek:
Chinese:
একই ফর্ম এ দুইটি ভিন্ন সেট রেডিওর আরও উদাহরন দেয়া হল।
এইচটিএমএল আপলোড ( HTML Upload Form)
upload form ব্যবহার করে ইউজার pictures, movies, বা এমনকি নিজের webpages upload করতে পারে। একটা upload form হল এক ধরনের input form । আপনি সাধারনভাবে type attribute দিয়ে এর মান হিসাবে fileলিখে upload form তৈরী করতে পারেন।
1.<inputtype="file"/>
প্রদর্শন:Upload Form
Max File Size
upload ফাইল এর size এর সীমানা বেধে দিয়ে আপনি আপনার webserver এর মূল্যবান space রক্ষা করতে পারেন। এর জন্য আমরাhiddeninput field এবং আরও কিছু specific attributes যোগ করবো।
এখানে value 100 মানে file সর্বোচ্চ 100kb হতে পারবে।
প্রদর্শন:
এইচটিএমএল ড্রপডাউন লিস্ট ( HTML Drop down list)
ড্রপডাউন লিস্ট এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।ধরুন আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন ড্রপডাউন লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন।
ড্রপডাউন লিস্ট তৈরী করতে প্রথমে
প্রদর্শন:ড্রপডাউন লিস্ট
উপরের উদাহরনে দেখুন selected এট্রিবিউটের কারনে প্রথম অপশন Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন।
প্রতিটি
প্রদর্শন:
*৭ নম্বর লাইনে যদি selected এট্রিবিউট উঠিয়ে দেন তাহলে কোন অপশন আর সিলেক্টেড দেখাবেনা।
আপনার অপশন লিস্ট যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন।
প্রদর্শন:
ড্রপডাউন লিস্ট এর মাধ্যমে আপনি ইউজারের জন্য এমন একটা তালিকা তৈরী করতে পারবেন যেখান থেকে ইউজার যেকোন একটা সিলেক্ট করে দিতে পারবে।ধরুন আপনাকে একটা ফর্ম তৈরী করতে বলা হল এবং এখানে একজনের প্রিয় রং কি সেটা যাতে সিলেক্ট করে দিতে পারে (অনেকগুলি রং এর মধ্যে) এমন একটি অপশন রাখতে হবে,তখন ড্রপডাউন লিস্টের মাধ্যমে সেটা সহজেই করতে পারেন।
ড্রপডাউন লিস্ট তৈরী করতে প্রথমে
প্রদর্শন:ড্রপডাউন লিস্ট
উপরের উদাহরনে দেখুন selected এট্রিবিউটের কারনে প্রথম অপশন Maroon দেখাচ্ছে আপনি যদি চান White প্রথমে দেখাক তাহলে ৩ নম্বর লাইনে selected এট্রিবিউট ব্যবহার করবেন।
প্রতিটি
প্রদর্শন:
*৭ নম্বর লাইনে যদি selected এট্রিবিউট উঠিয়ে দেন তাহলে কোন অপশন আর সিলেক্টেড দেখাবেনা।
আপনার অপশন লিস্ট যদি অনেক বড় হয় তাহলে গ্রুপ করতে পারেন।
“ মা হল পৃথিবীর একমাত্র ব্যাংক, যেখানে আমরা আমাদের সব দুঃখ, কষ্ট জমা রাখি এবং বিনিময়ে নেই বিনাসূদে অকৃত্রিম ভালোবাসা ”
হুমায়ূন আহমেদ
বিখ্যাত মনিষীদের স্বরণীয় কিছু উক্তি
বুদ্ধিমানেরা কোনোকিছু প্রথমে অন্তর দিয়ে অনুভব করে, তারপর সে সম্বন্ধে মন্তব্য করে । আর নির্বোধেরা প্রথমেই মন্তব্য করে বসে এবং পরে চিন্তা করে । -হযরত আলী (রাঃ)"
সত্য একবার বলতে হয়; সত্য বারবার বললে মিথ্যার মতো শোনায়। মিথ্যা বারবার বলতে হয়; মিথ্যা বারবার বললে সত্য ৰলে মনে হয়।
“প্রত্যেককে বিশ্বাস করা বিপদজনক, কিন্তু কাউকে বিশ্বাস না করা আরো বেশী বিপদজনক”
এই পৃথিবী কখনো খারাপ মানুষের খারাপ কর্মের জন্য ধ্বংস হবে না , যারা খারাপ মানুষের খারাপ কর্ম দেখেও কিছু করেনা তাদের জন্যই পৃথিবী ধ্বংস হবে” আইনস্টাইন
একজন আহত ব্যক্তি তার যন্ত্রনা যত সহজে ভুলে যায়, একজন অপমানিত ব্যক্তি তত সহজে অপমান ভোলে না -জর্জ লিললো
