HTML এর Tag, Attributes এবং এদের কাজ গুলো সহজেই শেখার দরকারি একটি চার্ট

0
37

ওয়েব ডেভেলপমেন্টে যারা আগ্রহী, তাদের জন্য ওয়েব পেজ তৈরি করার ক্ষেত্রে  HTML Tag ব্যবহার করতে হয়।  HTML শেখার জন্য আপনাকে অবশ্যই এর লম্বা লিস্টের যে Tag গুলো রয়েছে এই গুলো সম্পর্কে জানতে হবে। প্রথম অবস্থায়, এই কাজটি অনেকের জন্য কঠিন মনে হতে পারে। কিন্তু আপনি যদি নিচের এই চার্টটির মাধ্যমে শেখার চেষ্টা করেন, তাহলে খুব সহজেই আয়ত্ত করতে পারবেন। কেননা এই চার্টে এইচটিএমএল এর সকল ট্যাগ এর নাম এবং কাজ পাশাপাশি দেয়া আছে । তাছাড়া এক সাথে সবগুলো Tag হওয়ায়, যেকোনো সময় প্রয়োজনীয় ট্যাগটি দেখে নেওয়া সম্ভব হবে। এই চার্টের মাধ্যমে শেখাকে HTML শেখার সহজ উপায় হিসেবে বলা যায়। 

এই চার্টে রয়েছে ওয়েব পেজের গঠন, টেক্সটের ধরণ, ফরম, ইমেজ, লিস্ট, লিংক, টেবিল, স্পেশাল ক্যারেক্টার ইত্যাদি ট্যাগ সমূহ । তাই HTML শেখার জন্য এই চার্টটি আপনার সাথে রাখতে পারেন, যাতে কোনো Tag ভুলে গেলেও চার্টটি দেখে আবার মনে করে নিতে পারেন। 

HTML শেখার প্রয়োজনীয় চার্টঃ

ShortcutAction
Basic Tags
<html> … </html>The first and last tag of an HTML document. All other tags lie between these opening and closing tags.
<head> … </head>Specifies the collection of metadata for the document.
<title> … </title>Describes the title for the page and shows up in the browser’s title bar.
<body> … </body>Includes all content that will be displayed on the webpage.
Document Information
<base/>Mentions the base URL and all relative links to the document.
<meta/>For extra information about the page like author, publish date, etc.
<link/>Links to external elements like style sheets.
<style> … </style>Contains document style information like CSS (Cascading Style Sheets).
<script> … </script>Contains links to external scripts.
Text Formatting
<strong> … </strong> OR
<b> … </b>
Makes text bold.
<em> … </em>Italicizes text and makes it bold.
<i> … </i>Italicizes text but does not make it bold.
<strike> … </strike>Strikethrough text.
<cite> … </cite>Cites an author of a quote.
<del> … </del>Labels a deleted portion of a text.
<ins> … </ins>Shows a section that has been inserted into the content.
<blockquote> …
</blockquote>
For displaying quotes. Often used with the <cite> tag.
<q> … </q>For shorter quotes.
<abbr> … </abbr>For abbreviations and full-forms.
<address> … </address>Specifies contact details.
<dfn> … </dfn>For definitions.
<code> … </code>For code snippets.
<sub> … </sub>For writing subscripts
<sup> … </sup>For writing superscripts.
<small> … </small>For reducing the text size and marking redundant information in HTML5.
Document Structure
<h1..h6> … </h1..h6>Different levels of headings. H1 is the largest and H6 is the smallest.
<div> … </div>For dividing content into blocks.
<span> … </span>Includes inline elements, like an image, icon, emoticon, without ruining the formatting of the page.
<p> … </p>Contains plain text.
<br/>Creates a new line.
<hr/>Draws a horizontal bar to show end of the section.
Lists
<ol> … </ol>For ordered list of items.
<ul> … </ul>For unordered list of items.
<li> … </li>For individual items in a list.
<dl> … </dl>List of items with definitions.
<dt> … </dt>The definition of a single term inline with body content.
<dd> … </dd>The description for the defined term.
Links
<a href=””> … </a>Anchor tag for hyperlinks.
<a href=”mailto:”> … </a>Tag for linking to email addresses.
<a href=”tel://###-###”> … </a>Anchor tag for listing contact numbers.
<a name=”name”> … </a>Anchor tag for linking to another part of the same page.
<a href=”#name”> … </a>Navigates to a div section of the webpage. (Variation of the above tag)
Images
<img />For displaying image files.
Attributes for the <img> tag
src=”url”Link to the source path of the image.
alt=”text”The text displayed when a mouse is hovered over the image.
height=” ”Image height in pixels or percentages.
width=” ”Image width in pixels or percentages.
align=” ”Relative alignment of the image on the page.
border=” ”Border thickness of the image.
<map> … </map>Link to a clickable map.
<map name=””> …
</map>
Name of the map image.
<area />The image area of an image map.
Attributes for the <area> tag
shape=” “Shape of the image area.
coords=” ”Coordinates of the map image area.
Forms
<form> … </form>The parent tag for an HTML form.
Attributes for the <form> tag
action=”url”The URL where form data is submitted.
method=” ”Specifies the form submission protocol (POST or GET).
enctype=” ”The data encoding scheme for POST submissions.
autocompleteSpecifies if form autocomplete is on or off.
novalidateSpecifies whether the form should be validated before submission.
accept-charsetsSpecifies character encoding for form submissions.
targetShows where the form submission response will be displayed.
<fieldset> … </fieldset>Groups related elements in the form/
<label> … </label>Specifies what the user should enter in each form field.
<legend> … </legend>A caption for the fieldset element.
<input />Specifies what type of input to take from the user.
Attributes for the <input> tag
type=””Determines the type of input (text, dates, password).
name=””Specifies the name of the input field.
value=””Specifies the value in the input field.
size=””Sets the number of characters for the input field.
maxlength=””Sets the limit of input characters allowed.
requiredMakes an input field compulsory.
width=””Sets width of the input field in pixels.
height=””Sets height of the input field in pixels.
placeholder=””Describes expected field value.
pattern=””Specifies a regular expression, which can be used to look for patterns in the user’s text.
min=””The minimum value allowed for an input element.
max=””The maximum value allowed for an input element.
disabledDisables the input element.
<textarea> … </textarea>For capturing longer strings of data from the user.
<select> … </select>Specifies a list of options which the user can choose from.
Attributes for the <select> tag
name=””Specifies name for a dropdown list.
size=””Number of options given to the user.
multipleSets whether the user can choose multiple options from the list.
requiredSpecifies whether choosing an option/s is necessary for form submission.
autofocusSpecifies that a drop-down list automatically comes into focus after a page loads.
<option> … </option>Defines items in a dropdown list.
value=””Displays the text for any given option.
selectedSets default option that is displayed.
<button> … </button>Tag for creating a button for form submission.
Objects and iFrames
<object> … </object>Describes the embedded filetype.
Attributes for the <object> tag
height=””The height of the object.
width=””The width of the object.
type=””The type of media the object contains.
<iframe> … </iframe>An inline frame for embedding external information.
name=””The name of the iFrame.
src=””The source URL for the content inside the frame.
srcdoc=””The HTML content within the frame.
height=””The height of the iFrame.
width=” ”The width of the iFrame.
<param />Adds extra parameters to customize the iFrame.
<embed> … </embed>Embeds external application or plugin.
Attributes for the <object> tag
height=” “Sets the height of the embed.
width=” “Sets the width of the embed.
type=””The type or format of the embed.
src=””The source path of the embedded file.
Tables
<table> … </table>Defines all content for a table.
<caption> …
</caption>
A description of the table.
<thead> … </thead>Headers for each column in the table.
<tbody> … </tbody>Defines the body data for the table.
<tfoot> … </tfoot>Describes the content for the table’s footer.
<tr> … </tr>Content for a single row.
<th> … </th>The data in a single header item.
<td> … </td>Content within a single table cell.
<colgroup> …
</colgroup>
Groups columns for formatting.
<col>A single column of information.
HTML5 New Tags
<header> … </header>Specifies the webpage header.
<footer> … </footer>Specifies the webpage footer.
<main>…</main>Marks main content of the webpage.
<article>…</article>Specifies an article.
<aside> … </aside>Specifies sidebar content of a page.
<section>…</section>Specifies a particular section in the webpage.
<details> … </details>For describing extra information.
<summary> … </summary>Used as a heading for the above tag. Is always visible to the user.
<dialog>…</dialog>Creates a dialog box.
<figure>…</figure>Used for including charts and figures.
<figcaption> … </figcaption>Describes a <figure> element.
<mark>…</mark>Highlights a specific part of the text.
<nav>…</nav>Set of navigation links on a webpage.
<menuitem>…</menuitem>A particular item from a list or a menu.
<meter>…</meter>Measures data within a given range.
<progress>…</progress>Places a progress bar and tracks progress.
<rp>…</rp>Displays text that do not support Ruby annotations.
<rt>…</rt>Displays East Asia typography character details.
<ruby>…</ruby>A Ruby annotation for East Asian typography.
<time>…</time>Identifies time and date.
<wbr>A line break within the content.
¹HTML5 Character Objects
&#34 ; OR
&quot ;
Quotation marks
&#60 ; OR
&lt ;
Lesser than sign (<)
&#62 ; OR
&gt ;
Greater than sign (>)
&#160 ; OR
&nbsp ;
Non-breaking space
&#169 ; OR
&copy ;
Copyright symbol
&#8482 ; OR
&ucirc ;
Trademark symbol
&#64 ; OR
&Uuml ;
“at” symbol (@)
&#38 ; OR
&amp ;
Ampersand symbol (&)
&#8226 ; OR
&ouml ;
Small bullet

Ignore space before semicolon while typing HTML character.

Please comment Here (ভাল লাগলে কমেন্ট করুন)