Tag Archives: HTML5

HTML5 Quiz Test : 01

Huge Sell on Popular Electronics

Your Score:  

Your Ranking:  

HTML5 এ রূপান্তর (HTML5 Migration)

Huge Sell on Popular Electronics

HTML5 এর ধারবাহিক টিউটোরিয়ালে আপনাকে স্বাগতম। আজ আমরা আলোচনা করব Migration from HTML4 to HTML5 নিয়ে। আজ আমরা শিখবো কিভাবে একটি typical HTML4 page কে typical HTML5 page এ পরিনত করা যায় আগের সকল কিছু অপরিবর্তিত রেখে।

 

Typical HTML4

Typical HTML5

<div id="header">

<header>

<div id="menu">

<nav>

<div id="content">

<section>

<div id="post">

<article>

<div id="footer">

<footer>

 

Typical HTML4

বলে রাখা ভাল আপনি একই নিয়ম ব্যাবহার করে HTML5 থেকে HTML4 এবং XHTML এ পরিবর্তন করতে পারবেন। এখন একটা Typical HTML4 Page উদাহরণ দেখাই-


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>HTML4</title>
 <style>
   body {font-family:Verdana,sans-serif;font-size:0.8em;}
   div#header,div#footer,div#content,div#post 
   {border:1px solid grey;margin:5px;margin-bottom:15px;padding:8px;background-color:white;}
   div#header,div#footer {color:white;background-color:#444;margin-bottom:5px;}
   div#content {background-color:#ddd;}
   div#menu ul {margin:0;padding:0;}
   div#menu ul li {display:inline; margin:5px;}
 </style>
 </head>
 <body>
 
 <div id="header">
   <h1>Monday Times</h1>
 </div>
 
 <div id="menu">
   <ul>
     <li>News</li>
     <li>Sports</li>
     <li>Weather</li>
   </ul>
 </div>
 
 <div id="content">
 <h2>News Section</h2>
 
 <div id="post">
   <h2>News Article</h2>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
 </div>
 
 <div id="post">
   <h2>News Article</h2>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
   <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum 
   lurum hurum turum.</p>
 </div>
 
 </div>
 
 <div id="footer">
   <p>&amp;copy; 2014 Monday Times. All rights reserved.</p>
 </div>
 
 </body>
 </html>

 

যেভাবে HTML5 Doctype পরিবর্তন করবেন

HTML4 doctype:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

HTML5 doctype:


<!DOCTYPE html>


 

যেভাবে HTML5 Encoding পরিবর্তন করবেন

HTML4:


<meta http-equiv="Content-Type" content="text/html;charset=utf-8">


 

HTML5:


<meta charset="utf-8">


 

HTML5 এর শব্দার্থিক উপাদানসমূহ (HTML5 Semantic Elements)

Huge Sell on Popular Electronics

HTML5 এর ধারবাহিক টিউটোরিয়ালে আপনাকে স্বাগতম। আজ আমরা আলোচনা করব HTML5 Semantic Elements নিয়ে। Semantics কে আমরা বলতে পারি ভাষার অর্থ  বিষয়ক গবেষণা।

এখন প্রশ্ন হল Semantic Elements কি?

একটি Semantic Elements এর প্রধান কাজ হল পরিষ্কারভাবে ব্রাউজার এবং ডেভেলপার উভয় এর অর্থ বর্ণনা করা।

non-semantic elements এর উদাহরণ:

<div> and <span> - Tells nothing about its  content.

semantic elements এর উদাহরণ:

<form>, <table>, and <img> - Clearly defines its content.

Semantic Elements কোন কোন Browser Support করে?

এক কথাই বলা যাই HTML5 semantic elements আধুনিক সকল Browser এই  Support করে।

নতুন উপাদানসমূহ:

<article> নিবন্ধ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<aside> সাধারণত সাইডবারের জন্য ব্যবহৃত হয়
<bdi> একটি ভিন্ন দিক ফরম্যাটে লেখা প্রকাশের জন্য ব্যবহৃত হয়
<command> কমান্ড বাটন সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<details> অতিরিক্ত বিশদ ব্যাখ্যা ব্যবহারকারীর প্রদর্শন অথবা আড়াল করতে ব্যবহৃত হয়
<dialog> ডায়লগ বক্স অথবা উইন্ডোতে সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<summary> <details> উপাদানের সারমর্ম প্রদর্শনের জন্য ব্যবহৃত হয়
<figure> চিত্রাঙ্কনের, ডায়াগ্রামে, ছবি, কোড তালিকা ইত্যাদির স্বয়ংসম্পূর্ণ বিষয়বস্তু নির্ধারণ করা হয়
<figcaption> <figure> উপাদান জন্য ক্যাপশন ব্যবহৃত হয়
<footer> একটি বিভাগের জন্য পাদচরণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<header> একটি বিভাগের জন্য হেডার সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<hgroup> যখন একাধিক মাত্রার শিরোনাম থাকে, তখন <h1> থেকে <h6> উপাদানের সমষ্টিকে বুঝায়
<mark> চিহ্নিত / হাইলাইট টেক্সট সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<meter> একটি পরিচিত পরিসীমার মধ্যে স্কেলের পরিমাপ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<nav> নেভিগেশন লিঙ্কগুলি সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<progress> একটি টাস্ক অগ্রগতি প্রতিনিধিত্ব করে
<ruby> রুবি টীকা সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<rt> অক্ষরের একটি ব্যাখ্যা / উচ্চারণ সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<rp> Ruby টীকা সমর্থন করে না তা ব্রাউজারে দেখানোর জন্য ব্যবহৃত হয়
<section> নথিতে একটি অধ্যায় সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<time> তারিখ / সময় প্রদর্শনের জন্য ব্যবহৃত হয়
<wbr> লাইন বিরতির জন্য ব্যবহৃত হয়
<audio> শব্দ যুক্ত করার জন্য ব্যবহৃত হয়
<video> ভিডিও যুক্ত করার জন্য ব্যবহৃত হয়
<source> <video> এবং <audio> জন্য একাধিক মিডিয়া রিসোর্স যুক্ত করার জন্য ব্যবহৃত হয়
<embed> একটি বহিরাগত অ্যাপ্লিকেশন অথবা ইন্টারেক্টিভ বিষয়বস্তুর জন্য একটি ধারক
<track> <video> এবং <audio> এর জন্য টেক্সট গানগুলি সংজ্ঞায়িত করার জন্য ব্যবহৃত হয়
<canvas> গ্রাফিক্স আঁকতে ব্যবহৃত হয়
<datalist> ইনপুট নিয়ন্ত্রণ জন্য পূর্ব নির্ধারিত অপশনের একটি তালিকা নির্দিষ্ট করে
<keygen> key-জুটি জেনারেটরের জন্য ব্যবহৃত হয়
<output> হিসাবের ফলাফল ব্যাখ্যা করার জন্য ব্যবহৃত হয়

 

HTML5 এর নতুন উপাদান (HTML5 New Elements)

Huge Sell on Popular Electronics

মাসুদ

 

HTML5 New Elements গুলো এবং এদের কাজগুলো নিম্নে দেয়া হল

<article> একটা ডকুমেন্ট এর মধ্যে আর্টিকেল বোঝাতে এই Element ব্যবহৃত হয়।
<aside> কোন কন্টেন্ট যদি পেজ কন্টেন্ট এর থেকে আলাদা হয় তাহলে তা এই Element দ্বারা বোঝানো হয়।
<bdi> কতগুলো বর্নের মধ্যে যদি নির্দিষ্ট কতগুলো বর্ন আলাদা ফরমেটে হয় তাহলে এই Element দ্বারা বোঝানো হয়।
<details> এর দ্বারা অতিরিক্ত বিবরন ব্যবহারকারী আড়াল করে রাখতে পারে।
<dialog> কোন ডায়লগ বক্স নির্দেশ করে।
<figcaption> <figure> element এর caption নির্দেশ করে।
<footer> কোন ডকুমেন্ট এর footer নির্দেশ করে।
<header> কোন ডকুমেন্ট এর header নির্দেশ করে।
<main> এর দ্বারা কোন ডকুমেন্ট এর প্রধান কন্টেন্ট নির্দেশ করা হয়।
<mark> এর দ্বারা কোন ডকুমেন্ট এর সিলেক্ট করা বর্ন বোঝানো হয়।
<menuitem> এর দ্বারা কোন পপ-আপ মেনু থেকে যে কোন কমান্ড সিলেক্ট করতে পারে।
<meter> এর দ্বারা কোন ডকুমেন্ট এর কোন নির্দিষ্ট রেঞ্জ এর পরিমাপ বোঝানো হয়।
<nav> এর দ্বারা কোন ডকুমেন্ট এর নেভিগেশন লিঙ্কস গুলো বোঝানো হয়।
<progress> এর দ্বারা কোন ডকুমেন্ট কার্যপ্রক্রিয়া প্রকাশ করা হয়।
<section> কোন একটি ডকুমেন্ট এর নির্ধারিত সেকশন প্রকাশ করে।
<summary> এর দ্বারা <details> element এর বিস্তারিত অংশ দেখা যায়।
<time> সময় ও তারিখ নির্দেশ করে।
<wbr> সম্ভাব্য লাইন বিরতি প্রকাশ করে।

এইচটিএমএল ৫ ব্রাউজার সাপোর্ট (HTML5 Browser Support)

Huge Sell on Popular Electronics

শরিফুল ইসলাম
Job category-Php Coder

এইচটিএমএল ৫ ব্রাউজার সাপোর্ট

এইচটিএমএল ৫ সকল আধুনিক ব্রাউজার সাপোর্ট করে। সকল নতুন এবং পুরাতন ব্রাউজার অটোমেটিক ভাবে অচেনা elements গুলোকে ইনলাইন element হিসেবে চিহ্নিত করে। এই কারনে আপনি অচেনা element গুলোকে চিহ্নিত নিয়ন্ত্রণ করার জন্য পুরাতন ব্রাউজার গুলো শিখতে পারেন। আপনি অনেক আগের ভার্সন IE6(windows XP 2001) শিখতে পারেন যা এইচটিএমএল এর অজানা element গুলোকে নিয়ন্ত্রণ করতে পারে।

 

এইচটিএমএল ৫ element গুলোকে ব্লক element হিসেবে ডিফাইন করা

এইচটিএমএল৫ ৮টি নতুন element কে ডিফাইন করে থাকে। সবগুলোই ব্লক লেভেল elements। পুরাতন ব্রাউজার গুলোকে সঠিক ফরম্যাট এ ব্যবহার করার জন্য সিএসএস এর ডিসপ্লে প্রপার্টি কে ব্লক আকারে সেট করতে হয়।

উদাহরণ

Example


header, section, footer, aside, nav, main, article, figure {
display: block;
}


 

নতুন element এইচটিএমএল এ যোগ করা

ব্রাউজার এর কৌশল অনুযায়ী এইচটিএমএল এর যেকোনো নতুন element কে যোগ করতে পারেন । নিচের উদাহরণ এ একটি নতুন element <myHero> যোগ করা হয়েছে


<!DOCTYPE html>
 <html lang="en">
 <head>
 <title>HTML5 Skeleton</title>
 <meta charset="utf-8">
 
 <!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
 </script>
 <![endif]-->
 
 <style>
 body {font-family: Verdana, sans-serif; font-size:0.8em;}
 header,nav, section,article,footer
 {border:1px solid grey; margin:5px; padding:8px;}
 nav ul {margin:0; padding:0;}
 nav ul li {display:inline; margin:5px;}
 </style>
 </head>
 <body>
 
 <header>
   <h1>HTML5 SKeleton</h1>
 </header>
 
 <nav>
 <ul>
   <li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
   <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
   <li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
 </ul>
 </nav>
 
 <section>
 
 <h1>Famous Cities</h1>
 
 <article>
 <h2>London</h2>
 <p>London is the capital city of England. It is the most populous city in the United Kingdom,
 with a metropolitan area of over 13 million inhabitants.</p>
 </article>
 
 <article>
 <h2>Paris</h2>
 <p>Paris is the capital and most populous city of France.</p>
 </article>
 
 <article>
 <h2>Tokyo</h2>
 <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
 and the most populous metropolitan area in the world.</p>
 </article>
 
 </section>
 
 <footer>
 <p>&copy; 2014 W3Schools. All rights reserved.</p>
 </footer>
 
 </body>
 </html>

 

 

HTML 5 এর পরিচিতি (HTML5 Introduction)

Huge Sell on Popular Electronics

আতিক হাসান

ওয়েবপেজ ডিজাইন এন্ড ডেভেলপার

 

HTML 5 এর পরিচিতি

HTML 4 এর উন্নত ভার্সনই হল HTML 5।HTML 5 এ নতুন কিছু ট্যাগ, এলিমেন্ট, এট্রিবিউট যোগ করা হয়েছে এবং পুরনো কিছু বাদ দেয়া হয়েছে।

HTML 5 এর উদাহরনঃ


<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Title of the document</title>
 </head>
 
 <body>
 Content of the document......
 </body>
 
 </html>

 

 

HTML 5 এ নতুন যা পরিবর্তন আনা হয়েছে

HTML 5 এ DOCTYPE ঘোষণা খুবই সহজ। যেমনঃ-


<!DOCTYPE html>


 

 

HTML 5 এ Character Encoding  ঘোষণা করাও খুবই সহজ।যেমনঃ-


<meta charset="UTF-8">


 

 

HTML 5 এর নতুন কিছু  Elements

HTML 5 এ খুব বেশী ব্যাবহৃত নতুন এলিমেন্টগুলো হচ্ছেঃ

Semantic Elements যেমন- <header>, <footer>, <article>, and <section>.

Form control attributes যেমন- number, date, time, calendar, range and required.

Graphic Elements যেমন- <svg> and <canvas>.

Multimedia Elements: যেমন-  <audio> and <video>.

 

HTML5 API's (Application Programming Interfaces)

HTML 5 এর প্রধান নতুন API’s হচ্ছেঃ

  • HTML Geolocation
  • HTML Drag and Drop
  • HTML Local Storage
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE

 

HTML 5 থেকে যেসকল এলিমেন্ট বাদ দেয়া হয়েছে

এলিমেন্ট HTML 4 এলিমেন্টের পরিবর্তে লেখা হয়
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> CSS
<tt> CSS

 

 

এইচটিএমএল লেআউট (HTML Layout)

Huge Sell on Popular Electronics

Md. Mursedul Islam Sumon

Web Designer

 

এইচটিএমএল লেআউট (HTML Layouts)

বিভিন্ন ওয়েবসাইটে অনেক সময়ই লক্ষ্য করা যায় যে লিখাগুলো কয়েকটি কলামে বিভক্ত করা থাকে। যেমন, ম্যাগাজিন, নিউজপেপার ইত্যাদি।

HTML এ <div> tag এর ব্যবহার করে layout design বা কলামে বিভক্ত করা যায়।

div element ব্যবহার করে প্রায় layout করা হয়, কারন div ব্যবহার করলে একে সহজেই CSS দিয়ে এর অবস্থান ও সবকিছু design করে নেয়া যায়।

নিচের উদাহরণটিতে চারটি div ব্যবহার করে কয়েকটি কলাম তৈরি করা হল-


<body>

<div id="header">
<h1>City Gallery</h1>
</div>

<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>

<div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>

<div id="footer">
Copyright © W3Schools.com
</div>

</body>



উপরোক্ত html এর CSS part টুকু নিম্নরুপ


<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
#section {
    width:350px;
    float:left;
    padding:10px; 
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}
 </style>

 

ফলাফলঃ


Table


 

HTML5 ব্যবহার করে ওয়েবসাইট বিন্যাস

HTML5 দিয়ে খুব সুন্দরভাবে ও সহজেই একটা website এর layout তৈরি করা যায়।

HTML5 এর কিছু নতুন Tag ব্যবহার করে সহজেই website এর বিভিন্ন part আলাদা করা যায়।

 

header = এই tag ব্যবহার করে website এর header section কে বুঝানো হয়।
nav = এই tag ব্যবহার করে মেনুর আইটেমগুলোর link করা হয়।
section = এই tag ব্যবহার করে কোন document এর section বুঝানো হয়।
article = এই tag দিয়ে একটি article বুঝানো হয়।
aside = এই tag দিয়ে পেজ এর sidebar বুঝানো হয়।
footer = এই tag দিয়ে পেজ এর সর্বনিম্ন অংশ বা footer part বুঝানো হয়।

নিচের উদাহরনে <header>, <nav>, <section>, এবং <footer> ব্যবহার করে layout তৈরি করা দেখানো হল-


<body>

<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright © W3Schools.com
</footer>

</body>


 

 

উপরোক্ত html এর CSS নিম্নে দেয়া হল-


<style>
 header {
     background-color:black;
     color:white;
     text-align:center;
     padding:5px; 
 }
 nav {
     line-height:30px;
     background-color:#eeeeee;
     height:300px;
     width:100px;
     float:left;
     padding:5px; 
 }
 section {
     width:350px;
     float:left;
     padding:10px; 
 }
 footer {
     background-color:black;
     color:white;
     clear:both;
     text-align:center;
     padding:5px; 
 }


টেবিল ব্যবহার করে HTML বিন্যাস

Table tag ব্যবহার করে html layout তৈরি করা যায়।


<body>
 
 <table class="lamp">
 <tr>
   <th>
     <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
   </th>
   <td>
     The table element was not designed to be a layout tool.
   </td>
 </tr>
 </table>
 
 </body>


 

উপরোক্ত html এর CSS নিম্নে দেয়া হল-


<style>
 table.lamp {
     width:100%;
     border:1px solid #d4d4d4;
 }
 table.lamp th, td {
     padding:10px;
 }
 table.lamp th {
     width:40px;
 }
 </style>

 

Hyper Text Markup Language 5 : HTML5 হলো এইচটিএমএলের নতুন সংস্করণ

Huge Sell on Popular Electronics

Hyper Text Markup Language 5

-----------------------------------------------------

HTML5 কি?

HTML5 হলো এইচটিএমএলের নতুন সংস্করণ এইচটিএমএল৫। HTML 4.01 এর পূর্ববর্তী সংস্করণ 1999 সালে প্রকাশিত হয়েছিল। তারপর থেকে অনেক পরিবর্তন হয়েছে। HTML5 এর কাজ এখনও চলছে। কিন্তু অনেক ট্যাগ বিভিন্ন ব্রাউজারে এখন কাজ করে।

HTML5 কিভাবে কাজ শুরু করেছে?

HTML5 এর ওয়ার্ল্ড ওয়াইড ওয়েব সাথে (W3C) এবং ওয়েব হাইপারটেক্সট অ্যাপ্লিকেশন প্রযুক্তি ওয়ার্কিং গ্রুপ (WHATWG) মধ্যে সহযোগিতা করে তৈরির কাজ চলছে। WHATWG ওয়েব ফর্ম এবং অ্যাপ্লিকেশন তৈরির কাজ করছে এবং W3C এক্সএইচটিএমএল 2.0 নিয়ে কাজ করছিল। 2006 সালে তারা HTML-এর একটি নতুন সংস্করণ তৈরি করার সিদ্ধান্ত নিয়েছে।

HTML5 এর জন্য কিছু নিয়ম প্রতিষ্ঠিত হয়:
নতুন বৈশিষ্ট্য সমূহ এইচটিএমএল, সিএসএস, DOM এবং জাভাস্ক্রিপ্ট উপর ভিত্তি করে তৈরি করা উচিত
আলাদা প্লাগিনের ব্যবহার কমানোর কথা বলা হয়েছে (যেমন: ফ্ল্যাশ)
উন্নত ত্রুটি পরিচালনার ব্যবস্থা
আরও একাধিক স্ক্রিপ্টিং প্রতিস্থাপন করার সুবিধা যুক্ত করা
HTML5 এর স্বাধীন ডিভাইস হতে হবে
উন্নয়ন প্রক্রিয়ায় জনগণের কাছে দৃশ্যমান হবে
************************************************************
আমার Microworker ইমেল:skmdrony@yahoo.com