HTML Cheat Sheet (এইচ টি এম এল চিটশিট)

Basic Tags.  (ব্যাসিক ট্যাগস )

<html>... </html>
Creates an HTML document.  (একটি এইচ টি এম এল ডকুমেন্ট তৈরি করে।)
<head>... </head>
Sets off the title & other info that isn't displayed.  (টাইটেলসহ অন্যান্য তথ্য যা প্রদর্শিত হয় না তা সেট করে।)
<body>... </body>
Sets off the visible portion of the document.  (ডকুমেন্টের দৃশ্যমান অংশ বন্ধ করে দেয়।)
<title>... </title>
Puts name of the document in the title bar. when bookmarking pages, this is what is bookmarked.  (টাইটেল ট্যাগ এর সাহাযে ডকুমেন্টের নাম রাখা হয়, যা ব্রাউজারের টাইটেল বারে / পেজের ট্যাবে দেখানো হয়)
Structure (গঠন)
This is the basic template or boilerplate structure of HTML.   (এটি এইচ টি এম এল এর বেসিক টেমপ্লেট বা বয়লার স্ট্রাকচার।)
<html> <head>
<title>Document</title>
</head>
<body> content </body>
</html>

Body attributes (বডি অ্যাট্রিবিউট)

<body bgcolor="color_name | hex_number | rgb_number">... </body>
Sets background color, using name or hex value.  ( কালারের নাম/হেক্স মান ব্যবহার করে ব্যাকগ্রাউন্ডের রঙ/কালার সেট করে।)
<body bgcolor="red">... </body>
<body text="color_name | hex_number | rgb_number">... </body>
Sets text color, using name or hex value.  ( কালারের নাম/হেক্স মান ব্যবহার করে লিখার/টেক্সটের রঙ/কালার সেট করে।)
<body text="red"> Text color is red </body>
<body link="color_name | hex_number | rgb_number">... </body>
Sets color of links, using name or hex value.  ( কালারের নাম/হেক্স মান ব্যবহার করে লিংকের রঙ/কালার সেট করে।)
<body link="white"> This link is white </body>
<body alink="color_name | hex_number | rgb_number">... </body>
Sets color of active links (while mouse-clicking).  ( একটিভ লিঙ্কগুলার কালার সেট করে। )
<body alink="white"> This link is white </body>
<body vlink="color_name | hex_number | rgb_number">... </body>
Sets color of visited links, using name or hex value.  ( ভিজিট করা লিঙ্কগুলার কালার সেট করে। লিংক একবার ভিজিট করা হলে কালার পরিবর্তিত থাকে )
<body alink="white"> This link is white </body>

Text tags  (লেখার ট্যাগস)

<pre>... </pre>
Creates preformatted text.   প্রিফরম্যাটেড টেক্সট তৈরি করে, এই ট্যাগের মধ্যেকার লিখার কোন পরিবর্তন হয় না যেভাবে লিখা হয় সেভাবেই থাকে )
(
<pre> 
pre tag 
                  NO   Change
</pre>
<h1></h1>...<h6></h6>
Creates headlines  >>>  H1=largest, H6=smalles.  (হেডলাইন তৈরি করা যায় h1, h2, h3, h4, h5,h6 এই ট্যাগ গুলা ব্যবহার করে )

Heading H1

Heading H2

Heading H3

Heading H4

Heading H5
Heading H6
<b>...</b>
Creates bold text.   (টেক্সটকে বোল্ড করতে সাহায্য করে )
<b> This is a bold text </b>
<i>...</i>
Creates italicized text.   (টেক্সটকে ইটালিক (তির্যক) করতে সাহায্য করে )
<i> This is a bold text </i>
<code>...</code>
Used to define source code, usually monospace.   (সোর্স কোড সংজ্ঞায়িত করতে ব্যবহৃত হয়. )
<code> <script> alert( 'this code is a alert' ); </script> </code>
<address>...</address>   (অ্যাড্রেস লেখার সেকশন)
Creates address section, usually processed in italics.   (ঠিকানা ছক তৈরি করা যায়, সাধারণত ইটালিক (address) এর মতো টেক্সট স্টাইল করা হয়)
<address>
Bangladesh, Rajshahi. Home 369 No
</address>
<em>...</em>
Emphasizes a word (usually processed in italics).  ( এর কাজ সাধারণত ইটালিক (address) এর মতো টেক্সট স্টাইল এর মতো।)
<em> Emphasizes word</em>
<i> Itacil word </i>
<strong>...</strong>
usually processed in bold.   ( এর কাজ সাধারণত বোল্ড (Blod text style) এর মতো টেক্সট স্টাইল এর মতো।)
<strong> Strong word</strong>
<b> Bold word </b>
<font size=..>...</font>
Sets size of font - 1 to 7 (should use CSS instead).   ( ফন্ট সাইজ সেট(1-7), এর বিকল্প হিসাবে সি এস এস ব্যবহার করা হয়)
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
Font size 7
<font color=..>...</font>
Sets font color (should use CSS instead).  ( ফন্ট এর কালার চেঞ্জ করা যায় বিকল্প হিসাবে সি এস এস ব্যবহার করা হয়)
<font color="red" > Font color is red</font>
<font face =..>...</font>
Defines the font used (should use CSS instead)  ( ব্যবহৃত ফন্ট সংজ্ঞায়িত করে,  বিকল্প হিসাবে সি এস এস ব্যবহার করা হয়)
<font face="red" > This font is now arial</font>

Link (লিংক)

<a href="URL">...</a>
Creates a hyperlink to a Uniform Resource Locator .  ( যেকোনো ইউআরএল এ হাইপারলিঙ্ক সেট করতে সাহায্য করে)
<a href="your url " > Your url</a>
<a href="mailto:EMAIL_ADDRESS">...</a>
Creates a hyperlink to an email address, it's a clickable text and it will open your email app directly . ( এর সাহাযে যেকোনো মেইল এড্রেস কে হাইপারলিংক করতে সাহায্য করে)
<a href="mailto:EMAIL_ADDRESS" > Click here to find out how it works</a>
< a name="NAME">...</a>
Creates a target location within a document. ( এর সাহাযে ডকুমেন্ট এর মধ্যেই লিঙ্ক সেট করা যায়)
< a href="#NAME">...</a>
Creates a link to that target location. ( এর সাহাযে নির্দিষ্ট লোকেশনে লিঙ্ক সেট করা যায়, এছাড়া একি পেজের মধ্যে লিঙ্ক সেট করা যায়)

Formatting (ফরম্যাট)

<p>...</p>
Creates a new paragraph . ( নতুন প্যারাগ্রাফ তৈরী করা যায়।)
<p>

This is a paragraph

</p>
<br>
AInserts a line break . ( লাইন ব্রেক।)
<br>

Fast line

<br>

second line
<blockquote>...</blockquote>
Puts content in a quote. ( উক্তি তৈরী করা যায়।)
<blockquote>

Using peragraph blockquote

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<div>...</div>
Used to format block content with CSS. ( এর দ্বারা ব্লক সেকশন তৈরী করা যায়।)
<div>
this is a div
</div>
<span>...</span>
Used to format inline content with CSS. ( এর দ্বারা একই/ সিঙ্গেল লাইনে সেকশন তৈরী করা যায়। এই ট্যাগ তার কন্টেন্ট এর জায়গা ছাড়া বেশি জায়গা নেই না)

Lists Tags (লিস্ট ট্যাগস)

<ul>...</ul>
Creates an unordered list. ( অর্ডারবিহীন লিস্ট তৈরী।)
<li>...</li>
Encompasses each list item. ( লিস্ট আইটেম।)
<ul>
  • <li> Pragraph 01
    • </li>
  • <li> Pragraph 02
    • </li>
  • <li> Pragraph 03
    • </li>
</ul>
<ol start ="number">...</ol>
Creates an ordered list (start=xx, where xx is a counting number) . ( অর্ডার লিস্ট তৈরী।)
    <ol start ="1">
    <li>english book </li>
    <li>bangla book </li>
    <li>math book </li>
</ol>
  1. english book
  2. bangla book
  3. math book
<dl>...</dl>
Creates a definition list. ( ডেফিনেশন লিস্ট তৈরী করা যায় ।)
<dt>...</dt>
Precedes each defintion term. ( ডেফিনেশন টার্ম তৈরী করা যায় ।)
<dd>...</dd>
Precedes each defintion. ( ডেফিনেশন বর্ণনা করা যায় ।)

Graphical elements (গ্রাফিক্যাল ইলিমেন্ট)

<hr>
Inserts a horizontal rule . ( হরিজন্টাল লাইন তৈরী করা যায়।)
<hr>

This is a horizontal line

<hr size="..">
Sets size (height) of horizontal rule. ( হরিজন্টাল লাইনের উচ্চতা তৈরী করা যায়।)
<hr size="5px">

This horizontal line width is 5px

<hr width="..">
Sets width of rule (as a % or absolute pixel length). ( হরিজন্টাল লাইনের দৈর্ঘ্য।)
<hr width="70px">

This horizontal line width is 70px

<hr noshade>
Creates a horizontal rule without a shadow. ( হরিজন্টাল লাইন ছায়া ছাড়া।)
<img src="imgpath/url">
Adds image; it is a separate file located at the URL. ( ছবি যুক্ত করা যায়।)
<img src="https://img.icons8.com/stickers/100/null/image.png">
<img align="left/right/center/bottom/top/middle ">
Aligns image left/right/center/bottom/top/middle (use CSS). ( ইমেজ অ্যালাইন করা যায়।)
<img src="https://img.icons8.com/stickers/100/null/image.png" align="right">

<img border="..">
Sets size of border surrounding image (use CSS). ( ইমেজে বর্ডার করা যায়।)
<img src="https://img.icons8.com/stickers/100/null/image.png" border="2em">

<img height="..">
Sets height of image, in pixels. ( ইমেজের উচ্চতা ঠিক করা যায়।)
<img src="https://img.icons8.com/stickers/100/null/image.png" height="2em">

<img width="..">
Sets width of image, in pixels. ( ইমেজের দৈর্ঘ্য ঠিক করা যায়।)
<img src="https://img.icons8.com/stickers/100/null/image.png" width="5em">

<img alt="..">
Sets the alternate text for browsers that can't process images (required by the ADA). ( ইমেজের বিকল্প/ ইমেজের নাম লেখা যায়।)

Forms Tags (ফর্ম ট্যাগস)

<form>...</form>
Defines a form. ( ফর্ম তৈরী করা যায়।)
<datalist>...</datalist>
Create datalist. ( ডাটালিস্ট তৈরী করা যায়।)
<select multiple name=".." size="...">...</select>
Create a multiple select menu. ( একাধিক সিলেক্ট করার মেনু তৈরী।)

select what you love
<select name="..">...</select>
Creates a pulldown menu. ( সিলেক্ট করার মেনু / পুলডাউন মেনু তৈরি করে)
<option>...</option>
Sets off each menu item. ( সিলেক্ট মেনুর অপশন তৈরি করে)
<textarea name=".." cols=... rows=...>...</textarea>
Creates a text box area. Columns set the width; rows set the height. ( লেখার বক্স কলাম রো সহ তৈরি করে/ কলামcolumn উইধ সেট করে; সারি row রো সেট)

<input type="checkbox" name=".." value="..">...</input>
Creates a checkbox. ( চেকবক্স তৈরী করে।)
Choose your interests
<input type="checkbox" name=".." value=".." checked>...</input>
Creates a checkbox which is pre-checked. ( একটি চেকবক্স তৈরি করে যা প্রি-চেক করা হয়।)
<input type="radio" name=".." value="..">...</input>
Creates a radio button. ( রেডিও বাটন তৈরী করা হয়।)
<input type="radio" name=? value=? checked>...</input>
Creates a radio button which is pre-checked. ( একটি রেডিও বোতাম তৈরি করে যা প্রি-চেক থাকে।)
<input type="text" name=".." size="..">...</input>
Creates a one-line text area. ( লেখার বক্স তৈরী করা যায়।)
<input type="submit">...</input>
Creates a submit button.. ( সাবমিট বাটন তৈরী করা যায়।)
<input type="reset">...</input>
Creates a reset button. ( সাবমিট বাটন ও রিসেট বাটন তৈরী করা যায়।)

Tables (টেবিল)

<table>...</table>
Creates a table. ( টেবিল তৈরী করা যায়।)
The table header
The table body with two columns
<tr>...</tr>
Sets off each row in a table. ( টেবিল রো সেট করা যায়।)
My Dream Stars
Player Gloobles Arward
CR-7 7 4,569
Niya-Malkovi 7 7,223
Mia Lilifa 9 6,219
<td>...</td>
Sets off each cell in a row. ( টেবিল রো তে সেল সেট করা যায়।)
My Dream Stars
Player Gloobles Arward
CR-7 7 this is td 4,569 this is td
Niya-Malkovi 7 this is td 7,223 this is td
Mia Lilifa 9 this is td 6,219 this is td
<th>...</th>
Sets off the table header (a normal cell with bold, centered text). ( টেবিল হেডার সেল সেট করা যায়।)
My Dream Stars
Player (this is T head) Gloobles (this is T head) Arward (this is T head)
CR-7 7 4,569
Niya-Malkovi 7 7,223
Mia Lilifa 9 6,219
<th>...</th>
Sets off the table header (a normal cell with bold, centered text). ( টেবিল হেডার সেল সেট করা যায়।)
My Dream Stars
Player (this is T head) Gloobles (this is T head) Arward (this is T head)
CR-7 7 4,569
Niya-Malkovi 7 7,223
Mia Lilifa 9 6,219

Table attributes Tags ( টেবিল এট্রিবিউট ট্যাগস)

<table border="..">...</table>
Sets the width of the border around table cells. ( টেবিল ঘরের চারপাশে বর্ডারের প্রস্থwidth সেট করে।)
<table ellspacing="..">...</table>
Sets amount of space between table cells. ( টেবিল ঘরের মধ্যে স্থানের পরিমাণ নির্ধারণ করে।)
<table width="..">...</table>
Sets width of the table in pixels or as a percentage. ( টেবিলের প্রস্থ পিক্সেল বা শতাংশ হিসাবে সেট করে।)

Check More

Design by Ali hasan