Popular Posts

Sunday, August 26, 2012

10:19 AM    No comments


HTML, CSS, JavaScript ও php নিয়ে চেইন টিউন [পর্ব-০১] :: সুচনা পর্ব।






আশা করি সবাই ভাল আছেন। আজ থেকে শুরু করছি HTML, CSS, JavaScript ও php নিয়ে চেইন টিউন। ওয়েব ডিজাইন বর্তমান সময়ে খুব জনপ্রিয় হয়ে উঠেছে আর তাই সবাই এগুল শিখতে খুব আগ্রহ প্রকাশ করছে।
যাই হোক HTML, CSS, JavaScript ও php নিয়ে টিটি তে অনেক টিউন হয়েছে ইতো পূর্বে, কিন্তু যারা এখন নতুন তারা হইত বুজতে পারছে না কথাই থেকে শুরু করবে। তাই নতুন্দের নিয়ে HTML, CSS, JavaScript ও php নিয়ে ধারাবাহিক ভাবে চেইন টিউন করার সিধান্ত নিলাম। আপনার যদি প্রচেষ্টা আর ১০০% আগ্রহ  থাকে তবে আশা করছি ৩-৪ মাসের মধেই HTML, CSS, JavaScript ও php এর বেসিক ধারনা শেষ করা যাবে।

এবার আসি কাজের কথাইঃ
ওয়েব ডিজাইন শিখতে তেমন কোন সফটওয়্যার এর প্রয়োজন হয় না, শুধু মাত্র notpad দিয়েই সমস্ত কাজ করা যাই।।
তবে আমরা যদি notepad++ ব্যাবহার করি তবে ভাল কিছু সুবিধা পেতে পারি।
আর আমাদের বেসিক ধারনা আসলে আমরা Adobe Dreamweave ব্যাবহার করতে পারি।
প্রথম অবস্তাই আমরা notepad++ ব্যাবহার করবো।
যাদের কাছে  notpad++ নেই তারা এখান থেকে ডাউনলোড করে নিন।
এবার আসি আসল কথাইঃ-
এইচটিএমএল শিখতে যে শব্দগুলি ভালভাবে জানা দরকার-
  • সবার প্রথমে HTML লেখার শুরুতে HTML শব্দের প্রথমে এবং শেষে less than  ও  greater than ( < >) চিহ্ন দিতে হয়। যেমন: <html> । কোন কিছু লেখার পর শেষে </html> ট্যাগটি দিতে হবে। অর্থাৎ <html> Welcome to Bangladesh </html>। Welcome to Bangladesh এই লেখাটি Web page এ প্রদশিত হবে।আমরা খুব সহজে Notepad এ লিখে Web page তৈরী করতে পারি। এজন্য আমদের Notepad Open করতে হবে। প্রথমেstart মেনু    All Programs > Accessories >Notepadঅথবা ডাউনলোড করা notpad++ ওপেন করতে হবেতারপর Notepad ওপেন হবার পর নিম্নের কোডটি লিখবো
    <html>
Welcome to Bangladesh
</html>
    এভাবে লেখার পর Notepad এর ফাইল মেনু হতে save এ ক্লিক করব তারপর index.html নামে save করব।
    সেভ করা ফাইলটিকে Double click করে open করবো । দেখবো যে লেখাটি Browser এ open হয়েছে। খুব সহজে একটা web Page তৈরী হয়ে গেলো।
    <head> element
    একটি ডকুমেন্ট head,  ডকুমেন্ট সস্বন্ধে মৌলিক ধারনা দেয়। <head> elements যা পেজের header নির্দেশ করে। head elements এর মধ্যে রাখা ট্যাগ সরাসরি ব্রাউজারে প্রদর্শিত হয় না। আমরা টাইটেল এলিমেন্ট এর মাধ্যমে প্রকাশ করতে পারি।
    <title> element
    <head> এলিমেন্ট এর মাঝে <title> এলিমেন্ট রাখতে হয়। যেই  শব্দগুলো title elements এর opening (<title>)এবং closing(</title>) tag এর মধ্যে লেখা হয় তা browser এর টাইটেল বা শিরোনাম হিসাবে প্রদর্শিত হয়।
    <html>
    <head>
    <title> My WebPage!</title>
    </head>
    </html>
    <body> element
    body element যা web page এর প্রদর্শিত সকল বিষয় গুলো ধারন করে। যে সব বিষয় গুলো আমরা web page এ দেখাতে চাই তা body element ট্যাগ এর মধ্যে রাখতে হয়।
    <html>
    <head>
    <title>My WebPage!</title>
    </head>
    <body>
    Hello World! All my content goes here!
    </body>
    </html>
    এই কোডগুলি নোটপ্যাডে কপি পেস্ট করে .html extension দিয়ে সেভ করে যেকোন ব্রাউজারে খুলুন এবং নিজের তৈরী প্রথম ওয়েব পেজ দেখুন।
    কি? কেমন লাগছে নিজের বানানো ওয়েব সাইট টি দেখতে?
    এবার নিজে নিজে চেষ্টা করে দেখুন কতটুকু শিখতে পারলেন। আর কিছু বুঝতে প্রবলেম হলে জানাবেন। তাহলে আজ এতুকুই চেষ্টা করতে থাকুন আগামি টিউন এ এগুলর সাথে নতুন কিছু শিখবো।।
    ভাল লাগলে কমেন্ট করতে ভুলবেন না।।






    HTML, CSS, JavaScript ও php নিয়ে চেইন টিউন [পর্ব-০২] ::  

    আশা করি সবাই ভাল আছেন।
    গত পর্ব আমরা html সম্পর্কে সাধারণ ধারনা নিয়েছি আর এই পর্বে তার কিছু ব্যাবহার শিখব।
    এই পর্ব টি বেশ গুরুত্বপূর্ণ কারণ এই পর্বে বেশ কিছু ট্যাগ এর লিস্ট দেয়া হয়েছে আর সামনে আমাদের এগুল নিয়েই আগাতে হবে।।

    আজ আমরা শিখব এইচটিএমএল এর সাধারন ট্যাগ সমূহ এবং এগুলোর কাজের সাধারন বিবরণ সম্পর্কেঃ
    যখন আপনি এইচটিএমএল ডকুমেন্ট উপর হতে নিচ , ডান হতে বামে সব সময় আপনি ট্যাগ দেখতে পাবেন। এটি এমন ভাবে প্রদর্শিত হবে যেন paragraph দেখতে paragraph এর মতো, টেবিল দেখতে টেবিল এর মতো।
    ট্যাগ এর প্রধান তিনটি অংশ আছে
    ক. শুরু করার ট্যাগ(opening tag)
    খ.ধারনকৃত অংশ(contents)
    গ.শেষ করার ট্যাগ (closing tag)।
    এইচটিএমএল ট্যাগ এর মাধ্যমে আপনি web page এ আপনার পছন্দ মত বার্তা পাঠাতে পারেন।

    HTML এ প্রোগ্রাম লেখার জন্য  <>  এবং </> দুইটা চিহ্ন এবং এর মধ্যে কিছু Word যেমন html, head, title, body  ইত্যাদি  Keyword  ব্যবহার করা হয়। <> বা </> চিহ্ন এবং এর মাঝে লেখা একটি Keyword কে একত্রে ট্যাগ বলা হয়। যেমন <html>  এবং </html> । <body> হল body শুরু ট্যাগ এবং </ body> হল body শেষ ট্যাগ।

    HTML এর সাধারন ট্যাগ সমূহ

    ট্যাগ সমূহ
    বর্ণনা
    <html> </html>
    HTML ডকুমেন্ট নির্দেশ করে।
    <head></head>
    প্রোগ্রামের head  অংশ নির্দেশ করে ।
    <title></title>
    ডকুমেন্ট টাইটেল নির্দেশ করে।
    <body></body>
    প্রোগ্রামের মূল content অংশ নির্দেশ করে।
    <a></a>
    Anchor ট্যাগ।
    <abbr></abbr>
    Abbreviation ট্যাগ।
    <b></b>
    Bold টেক্সট নির্দেশ করে।
    <i></i>
    Italic টেক্সট নির্দেশ করে।
    <big></big>
    স্বাভাবিকের চেয়ে বড় টেক্সট নির্দেশ করে।
    <small></small>
    স্বাভাবিকের চেয়ে ছোট টেক্সট নির্দেশ করে।
    <blockquote> </blockquote>
    বিশেষ উদ্ধৃতি প্রকাশ করতে ব্যবহৃত হয়।
    <br / >
    একটা লাইন ব্রেক তৈরি করে ।
    <code></code>
    কম্পিউটার কোড টেক্সট প্রকাশ করে।
    <table></table>
    টেবিল তৈরিতে ব্যবহৃত হয়।
    <col></col>
    টেবিলের কলাম তৈরিতে ব্যবহৃত হয়।
    <td></td>
    টেবিলের সেল তৈরিতে ব্যবহৃত হয়।
    <tr></tr>
    টেবিলের সারি তৈরিতে ব্যবহৃত হয়।
    <form></form>
    ফরম তৈরিতে ব্যবহৃত হয়।
    <h1></h1>
    হেডার ট্যাগ 1-6 পর্যন্ত হয়।
    <hr/>
    সমান্তরাল রেখা তৈরি করে।
    <img/>
    ছবি যুক্ত করতে ব্যবহৃত হয়।
    <input></input>
    ফরমের ইনপুট ফিল্ড তৈরিতে ব্যবহৃত হয়।
    <li></li>
    লিষ্ট তৈরিতে ব্যবহৃত হয়।
    <meta></meta>
    Meta ট্যাগ
    <ol></ol>
    অর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।
    <ul></ul>
    আনঅর্ডার লিষ্ট তৈরিতে ব্যবহৃত হয়।
    <p></p>
    প্যারাগ্রাফ নির্দেশ করে
    <pre></pre>
    pre-formatted টেক্সট তৈরিতে ব্যবহৃত হয়।
    <tt></tt>
    টেলিটাইপ টেক্সট নির্দেশ করে।
    <strong></strong>
    Strong টেক্সট নির্দেশ করে।
    <sub></sub>
    subscripted text নির্দেশ করে।
    <sup></sup>
    superscripted text নির্দেশ করে।
    আসুন দেখি কিছু ট্যাগ এর ব্যাবহার

    উপরের ছবিতে দেখুন <body> ট্যাগ এর মধ্যে <p> ট্যাগ দেওয়া হয়েছে তাই ডিসপ্লে তে প্যারাগ্রাফ আকারের লেখা দেখাচ্ছে।
    ট্যাগ সম্পর্কে কিছু কথা
    মনে রাখবেন যে html দিয়ে যাই করবেন তা সব ট্যাগ এর মধেই থাকবে।
    ট্যাগ এর বর্ণ ছোট হাতের অক্ষর হওয়া উচিত। কিছু কিছু ট্যাগ আছে যাদের closing tag দেয়ার প্রয়োজন নেই। তারা কোন এলিমেন্ট ধারন করে না।সে ট্যাগ টি হচ্ছে line break tag এবং তা <br/> রুপে প্রকাশ করা হয়। যা বিশেষ ভাবে ব্যবহার করা হয়। অর্থাৎ একটি লাইন লেখা বাদ দিয়ে অপর লাইন হতে লেখা শুরু করার জন্য এ ট্যাগ টি ব্যবহার করা হয়।
    এবার নিজে নিজে চেষ্টা করার পালা

    নিচে একটি ওয়েব পেজ এর সুন্দরভাবে ব্যাখ্যা য়য়য়া হল, ঠাণ্ডা মাথাই বোঝার চেষ্টা করেনঃ

    ছবি দেখে বুঝতে পেরেছেন নিশ্চয়ই কোন ট্যাগ এর কি কাজ??
    এবার notpad  টা ওপেন করে ট্যাগ গুল ঠিক রেখে লেখা গুলকে আপনার ইচ্ছা মত পরিবর্তন করে ব্রাউজার এ ওপেন করে দেখেন কোথাও প্রবলেম হচ্ছে কি না।।
    Notpad এ কোড লেখার নিয়ম টা আরেকবার মনে করিয়ে দিঃ

    সমস্ত কোড লেখা হয়ে গেলে file এ ক্লিক করে save as এ ক্লিক করে index.html নামে ফাইল টা desktop এ সেভ করুন এবার সেটা যে কোন ব্রাউজার এ ওপেন করে দেখুন ম্যাজিক ম্যাজিক খেলা !!!
    (( কি মজা কি মজা আমি ওয়েব সাইট বানাতে পেরেছি))
    ভাল লাগলে কমেন্ট করতে ভুলবেন না।।


    HTML, CSS, JavaScript ও php নিয়ে চেইন টিউন [পর্ব-০৩] :: লাইন ব্রেক এবং টেক্সট ফরমেটিং

    আশা করি সবাই ভাল আছেন। আজ তৃতীয় পর্ব।
    গত পর্ব আমরা html এর বেশ কিছু ট্যাগ এর লিস্ট ও এবং এগুলোর কাজের সাধারন ধারনা নিয়েছি।
    আজ আমরা শিখব এইচটিএমএল এর সাহায্যে লাইন ব্রেক করা এবং টেক্সট ফরমেটিং।

    প্রথমে আসছি লাইনব্রেক এঃ
    লাইন  ব্রেক ট্যাগটি অন্যান্য হতে একটু ভিন্ন। লাইন ব্রেক ট্যাগটি একটা লাইন শেষ করে আপনাকে অন্য লাইন হতে লেখা শুরু করতে সাহায্য করবে। এইচটিএমএল এ ট্যাগ দ্বারা লাইন ব্রেক চিহ্নিত করা হয়।মাইক্রোসফট ওয়ার্ডে যেমন Enter দিলে নিচের লাইনে চলে যায়,এটার কাজ ঠিক তেমনই।
    <p>
Will Mateson<br />
Box 61<br />
Cleveland, Ohio<br />
</p>
    এই ট্যাগ গুলা ব্যাবহার করলে নিচের মত টেক্সট প্রদর্শন করবে।
    Will Mateson
    Box 61
    Cleveland, Ohio
    আর ভাল ভাবে দেখলেঃ
    মনে হয় বুঝতে আর কোন সমস্যা হবে না।
    এবার আসি টেক্সট ফরম্যাটিং এঃ
    ওয়েবসাইটে আমরা যে টেক্সটগুলো দেখি তা ছোট, বড়, বোল্ড, ইটালিকসহ বিভিন্ন ফরমেটে হয়ে থাকে।
    Microsoft Word এ Bold, Italic, Underline, strikethrough, Subscript, Superscript ইত্যাদি টেক্সট ফরমেটিং এর জন্য ব্যবহৃত হয়। HTML এর ক্ষেত্রেও Microsoft Word এর মত টেক্সট ফরমেটিং এর বিশেষ গুরুত্ব রয়েছে। একটি ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করতে টেক্সট ফরমেটিং বিষয়ে উপযুক্ত জ্ঞান থাকা দরকার। HTML এ টেক্সট ফরমেটিং এর জন্য
    <b>
    <i>
    <u>
    <strike>
    <sub>
    <sup>
    <big>
    <small>
    <strong>
    <samp>
    <tt>
    <abbr>
    <var>
    <code>
    <address>
    ইত্যাদি ট্যাগ সমূহ ব্যবহার করা হয়।
    এখানে দেখুনঃ
    <html>
    <head>
    <title>mmkowshik</title>
    </head>
    <body>
    <p>
    <b> (Bold)</b> This is an example of bold. <br />
    <i>(Italic)</i> This is an example of Italic. <br />
    <u> (Underline) </u> This is an example of Underline. <br />
    <strike>(Strike) </strike> This is an example of Strike. <br />
    (CO<sub>2</sub>) This is an example of Subscript. <br />
    (E=MC<sup>2</sup>) This is an example of Superscript. <br />
    <big>(Big text)</big>This is an example of Big. <br />
    <small>(Small text)</small>This is an example of Small. <br />
    <strong>(Strong text)</strong>This is an example of Strong. <br />
    <samp>(Sample text) </samp>This is an example of Sample. <br />
    <tt>(Teletype)</tt>This is an example of Teletype. <br />
    (<abbr> U.N.O</abbr> United Nations Organization.) This is an example of Abbreviation. <br />
    (<var>x</var> is a variable.)This is an example of Variable <br />
    (<code>Computer code text.</code>) This is an example of Code.<br /> <address>
    (Written by mm kowshik<br />
    Address: http://eqbalhossain31.blogspot.com/ />
    E-mail:mmkowshik@gmail.com)</address>This is an example of Address <br />
    </p>
    </body>
    </html>
    একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
    এবার দেখি কোন ট্যাগ এর জন্য কেমন টেক্সট প্রদর্নন করছেঃ
    আশা করি বুঝতে আর কোন সমস্যা নেই। সমস্যা হলে কমেন্ট এ জানাবেন।
    এবার আসি টেক্সট ফন্ট এঃ
    HTML এর মাধ্যমে কোন ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করার জন্য <font> বা ফন্ট ট্যাগ খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে।
    <font size="5" face="Tahoma" color="red"> Bangladesh is a beautiful country.</font>
    এখানে size="5"  অংশটি হল font ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ Bangladesh is a beautiful country. লেখাটির সাইজ কেমন হবে।
    এছাড়া face="Tahoma"  প্রকাশ করছে লেখাটির font হবে Tahoma এবং color="red" দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।
    বিস্তারিত ভাবে দেখিঃ
    <html>
    <head>
    <title>     techtunes.com.bd</title>
    </head>
    <font size="2" face="Verdana">
    This is a paragraph.
    </font>
    <br />
    <font size="5" face="Tahoma" color="red" >
    Bangladesh is a beautiful country.
    </font>
    </body>
    </html>
    একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

    ফন্ট আকার (Font size):

    Size attribute এর সাহায্যে ফন্ট এর সাইজ ঠিক করা হয়। ফন্ট এর আকার এর গ্রহনযোগ্য মান হচ্ছে ১(সবচেয়ে ছোট) হতে ৭(সবচেয়ে বড়)।  ফন্ট এর ডিফল্ট আকার হচ্ছে ৩।

    ফন্ট কালার (Font color):

    কালার এর জন্য ইংলিশ এ কালার এর নাম লিখে দিলেই হয় তাছাড়া কালারের অনেক কোড আছে সেগুলো নিয়ে পরে আলোচনা করবো।
    এবার দেখি কোন ট্যাগ এর জন্য কেমন টেক্সট প্রদর্নন করছেঃ
    চিত্রে বোঝানো হয়েছে যে কোন ট্যাগ এর জন্য কোন টেক্সট দায়ী।
    আশা করি বুঝতে আর কোন সমস্যা নেই। সমস্যা হলে কমেন্ট এ জানাবেন।
    আজ এই পর্যন্তই। আগামি পর্বে আরও নতুন কিছু দেয়ার চেষ্টা করবো। আর টিউন কেমন লাগসে তা অবশ্যই কমেন্ট এ জানাবেন এবং নতুন কোন আইডিয়া থাকলে তা বলবেন।
    >>>>>টিউন টি পড়ার জন্য সবাইকে ধন্যবাদ<<<<<<<<<<


    HTML, CSS, JavaScript ও php নিয়ে চেইন টিউন [পর্ব-০৪] :: লিস্ট, লিঙ্ক ও ইমেজের ব্যাবহার।।




    আশা করি ভাল আছেন সবাই। ৪র্থ পর্বে আজ আমরা শিখব লিস্ট,ছবি এবং লিঙ্ক এর ব্যাবহার। এই জিনিস গুল ওয়েব এর প্রান বলা যায় কারন ওয়েব পেজ এর মেনু বানাতে লিস্ট লাগে আর ইমেজ এবং লিঙ্ক ছাড়া ত ওয়েব সাইট ই কল্পনা করা যায় না।
    তবে চলুন আর কথা না বাড়িয়ে কাজে নেমে পড়ি।
    প্রথমে আসি লিস্ট এঃ
    একটা ওয়েব পেজকে সুন্দর করে সাজানো এবং তথ্য উপস্থাপনার অন্যতম পদ্ধতি লিষ্ট । HTML এর মাধ্যমে দুই ধরণের লিষ্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিষ্ট এবং অপরটি হচ্ছে আনঅর্ডার লিষ্ট । অর্ডার লিষ্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে। অন্যদিকে আন অর্ডার লিষ্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। HTML এর মাধ্যমে আন অর্ডার লিষ্ট তৈরি করার জন্য <ul></ul> এবং অর্ডার লিষ্ট তৈরি করার জন্য <ol></ol> ট্যাগ ব্যবহার করা হয়।
    নিচের উধারন টা দেখলে ক্লিয়ার হতে পারবেন,
    <html>
    <head>
    <title>     www.eqbalhossain31.blogspot.bd</title>
    </head>
    <body>
    <h4>Disc Type list</h4>
    <ul type="disc">
    <li>Home</li>
    <li>About Us</li>
    <li>Contact Us</li>
    </ul>
    <h4>Circle Type list</h4>
    <ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    </ul><h4>Square Type list</h4>
    <ul type="square">
    <li>Pragaph</li>
    <li>Table</li>
    <li>List</li>
    </ul>
    </body>
    </html>


    একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।

    সুন্দর ভাবে বোঝার জন্য চিত্র টি গুরুত্ব দিয়ে দেখেন,

    আরেক টি উধাহরন দেখেন,
    <html>
    <head>
    <title>     www.techtunes.com.bd</title>
    </head>
    <body>
    <h3>Alphabet Type list</h3>
    <ol type="A">
    <li>Home</li>
    <li>About Us</li>
    <li>Contact Us</li>
    </ol>
    <h3>Number Type list</h3>
    <ol type="1">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    </ol>
    <h3>Roman Number Type list</h3>
    <ol type="I">
    <li>Pragaph</li>
    <li>Table</li>
    <li>List</li>
    </ol>
    </body>
    </html>
    একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।

    সুন্দর ভাবে বোঝার জন্য চিত্র টি গুরুত্ব দিয়ে দেখেন,

    মনে হয় আর কোন সমস্যা নেই।
    এবার আসব লিঙ্ক এঃ
    একটা ওয়েব সাইটকে ব্যবহার বান্ধব করে তোলার ক্ষেত্রে লিংকের ব্যবহার খুবই গুরুত্বপূর্ণ। Link এর আভিধানিক অর্থ সংযুক্ত করা। অর্থাৎ একটা ওয়েব পেজের সাথে অন্য একটা পেজকে যুক্ত করাই হল লিংকিং। HTML এ লিংকিং করার জন্য <a> ট্যাগ বা anchor   ট্যাগ ব্যবহার করা হয়। যেমন <a href="http://www. techtunes.com.bd/"> www. techtunes.com.bd </a>  । অর্থাৎ যে পেজের সাথে লিংক তৈরি করতে হবে তার এড্রেস href="…………….. " এর মধ্যে লেখতে হবে, এবং লিংকে যে লেখাটি প্রদর্শন করবে তা <a href="  ">…………………..</a> এর মধ্যে লেখতে হবে।
    এখানে দেখলে বাকিটা বুঝতে পারবেন,
    <html>
    <head>
    <title> www. techtunes.com.bd </title>
    </head>
    <body>
    <a href="http://www.techtunes.com.bd"> click here 4 techtunes</a>  <br />
    <a href="mailto:mmkowshik@gmail.com.com"> mmkowshik@gmail.com</a>
    </body>
    </html>
    একটা  নোটপ্যাড  open  করে  উপরের code  টুকু  লিখে  file  মেনু  থেকে  Save as এ ক্লিক করে File name:  index.html  ,   Save as type : All files,  দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।

    সুন্দর ভাবে বোঝার জন্য চিত্র টি গুরুত্ব দিয়ে দেখেন,

    এবার আসি ইমেজ/ছবি প্রকাশ এঃ
    একটা ওয়েব পেজের গুরুত্বপূর্ণ উপাদান সমূহের একটি হচ্ছে ইমেজ । ওয়েবপেজে ইমেজের উপযুক্ত ব্যবহারের মাধ্যমে পেজটি ব্যবহারকারীদের কাছে যেমন আকর্ষণীয় হয়ে ওঠে তেমনি ব্যবহার বান্ধবও হয়। আকর্ষনীয় নেভিগেশন বার, বাটন, ব্যানার, ইত্যাদিতে ইমেজের ব্যবহার অপরিহার্য। ওয়েব পেজে ইমেজ বা ছবি যুক্ত করার জন্য প্রয়োজনীয় ট্যাগটি হচ্ছে <img> । এর কোন শেষ ট্যাগ নেই। শুধুমাত্র <img> দিয়ে কোন কাজ হয় না, এর সাথে সবসময়ই src এট্রিবিউটটি ব্যবহার করতে হয়। যেমন <img src=”pic.png”> , তাহলে pic.png ইমেজটি প্রদর্শিত হবে।
    ইমেজ সেট করতে হলে কিছু পূর্ব প্রস্তুতি নিতে হয়।
    যেমন, ডেক্সটপে একটা webpage নামে folder নিতে হবে এর মধ্যে pic.png নামে save করা একটা ছবি রাখতে হবে।
    মনে রাখতে হবে যে যেই ফোল্ডার থেকে  ইমেজ  নেয়া হয়েছে সেখানেই index ফাইল টা রাখতে হবে।
    এখানে একটু খেয়াল করেন,
    <html>
    <head>
    <title>     www.techtunes.com.bd</title>
    </head>
    <body>
    <h3> This is an example of image.</h3>
    <img src="pic.png">
    </body>
    </html>
    একটা Notepad Open করে উপরের Code টুকু লিখে File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html বা home.html অথবা যেকোন নাম.html  দিয়ে, Save as type হিসেবে All files সিলেক্ট করে এরপর Save বাটনে ক্লিক করতে হবে। এরপর save করা index.html ফাইলটিকে webpage folder এর মধ্যে রাখতে হবে। এখন Mozilla Firefox দিয়ে index.html open করলে  ছবির  মত দেখাবে।

    ভালবাবে খেয়াল করুন,

    আজ আর নয়। আগামী পর্বে আবার আসব। আজকের মত বিদায়।
    >>>>>> html কতটুকু শিখতে পারলেন তা কমেন্ট এ যানাবেন।।<<<<<<<<<<<

     

     

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)