ওয়েব ডেভেলপমেন্টে যারা আগ্রহী, তাদের জন্য ওয়েব পেজ তৈরি করার ক্ষেত্রে HTML Tag ব্যবহার করতে হয়। HTML শেখার জন্য আপনাকে অবশ্যই এর লম্বা লিস্টের যে Tag গুলো রয়েছে এই গুলো সম্পর্কে জানতে হবে। প্রথম অবস্থায়, এই কাজটি অনেকের জন্য কঠিন মনে হতে পারে। কিন্তু আপনি যদি নিচের এই চার্টটির মাধ্যমে শেখার চেষ্টা করেন, তাহলে খুব সহজেই আয়ত্ত করতে পারবেন। কেননা এই চার্টে এইচটিএমএল এর সকল ট্যাগ এর নাম এবং কাজ পাশাপাশি দেয়া আছে । তাছাড়া এক সাথে সবগুলো Tag হওয়ায়, যেকোনো সময় প্রয়োজনীয় ট্যাগটি দেখে নেওয়া সম্ভব হবে। এই চার্টের মাধ্যমে শেখাকে HTML শেখার সহজ উপায় হিসেবে বলা যায়।
এই চার্টে রয়েছে ওয়েব পেজের গঠন, টেক্সটের ধরণ, ফরম, ইমেজ, লিস্ট, লিংক, টেবিল, স্পেশাল ক্যারেক্টার ইত্যাদি ট্যাগ সমূহ । তাই HTML শেখার জন্য এই চার্টটি আপনার সাথে রাখতে পারেন, যাতে কোনো Tag ভুলে গেলেও চার্টটি দেখে আবার মনে করে নিতে পারেন।
HTML শেখার প্রয়োজনীয় চার্টঃ
| Shortcut | Action |
|---|---|
| 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. |
| autocomplete | Specifies if form autocomplete is on or off. |
| novalidate | Specifies whether the form should be validated before submission. |
| accept-charsets | Specifies character encoding for form submissions. |
| target | Shows 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. |
| required | Makes 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. |
| disabled | Disables 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. |
| multiple | Sets whether the user can choose multiple options from the list. |
| required | Specifies whether choosing an option/s is necessary for form submission. |
| autofocus | Specifies 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. |
| selected | Sets 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 | |
| " ; OR " ; | Quotation marks |
| < ; OR < ; | Lesser than sign (<) |
| > ; OR > ; | Greater than sign (>) |
|   ; OR   ; | Non-breaking space |
| © ; OR © ; | Copyright symbol |
| ™ ; OR û ; | Trademark symbol |
| @ ; OR Ü ; | “at” symbol (@) |
| & ; OR & ; | Ampersand symbol (&) |
| • ; OR ö ; | Small bullet |
Ignore space before semicolon while typing HTML character.
The post HTML এর Tag, Attributes এবং এদের কাজ গুলো সহজেই শেখার দরকারি একটি চার্ট appeared first on ITDOCTOR24.COM.
from ITDOCTOR24.COM https://ift.tt/382bcoF
ethical hacking,hacking,bangla ethical hacking,bangla hacking tutorial,bangla tutorial,bangla hacking book,ethical hacking bangla,bangla,hacking apps,ethical hacking bangla tutorial,bangla hacking,bangla hacking pdf,bangla hacking video,bangla android hacking,bangla hacking tutorials,bangla fb hacking tutorial,bangla hacking book download,learn ethical hacking,hacking ebook,hacking tools,bangla ethical hacking course, tricks,hacking,ludo king tricks,whatsapp hacking trick 2019 tricks,wifi hacking tricks,hacking tricks: secret google tricks,simple hacking tricks,whatsapp hacking tricks,tips and tricks,wifi tricks,tech tricks,redmi tricks,hacking trick paytm cash,hacking trick helo app,hacking trick of helo app,paytm cash hacking trick,wifi password hacking,paytm cash hacking trick malayalam,hacker tricks, tips and tricks,pubg mobile tips and tricks,tricks,tips,tips and tricks for pubg mobile,100 tips and tricks,pubg tips and tricks,excel tips and tricks,google tips and tricks,kitchen tips and tricks,season 2 tips and tricks,android tips and tricks,fortnite tips and tricks,godnixon tips and tricks,free fire tips and tricks,advanced tips and tricks,whatsapp tips and tricks, facebook tricks,facebook,facebook hidden tricks,facebook tips and tricks,facebook latest tricks,facebook tips,facebook new tricks,facebook messenger tricks,facebook android app tricks,fb tricks,facebook app tricks,facebook tricks and tips,facebook tricks in hindi,tricks,facebook tutorial,new facebook tricks,cool facebook tricks,facebook tricks 2016,facebook tricks 2017,facebook secret tricks,facebook new tricks 2020,blogger blogspot seo tips and tricks,blogger tricks,blogger,blogger seo tips,blogger seo tips and tricks,seo for blogger,blogger seo in hindi,blogger seo best tips for increasing visitors,blogging tips and tricks,blogger blog seo,blogger seo in urdu,adsense approval trick,blogging tips and tricks for beginners,blogging tricks,blogger tutorial,blogger tricks 2016,blogger tricks 2017 Credit ITDOCTOR24.COM
0 Comments