جزئیات تمام تگ های html به زبان ساده+ کاربردها (قسمت2) | فارسیان

تمام تگ های html به زبان ساده+ کاربردها (قسمت2) | فارسیان
۱۴۰۳/۰۵/۲۷

تمام تگ های html به زبان ساده+ کاربردها (قسمت2) | فارسیان

این مطلب را برای دیگران هم ارسال کنید :

    • تگ های HTML مربوط به ساخت فرم

    تگ <form>

    یک فرم در سند HTML ایجاد می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <form action="/action_page.php">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Submit">
    </form>
    <p>Click the "Submit" button and the form-data will be sent to a page on the
    server called "action_page.php".</p>
    </body>
    </html>

    تگ اچ تی ام ال <input>

    امکان ساخت فیلدهای ورودی یا همان input ها را در سند html فراهم می کند و بسته به ویژگی type می‌تواند به روش‌های مختلفی نمایش داده شود. تگ <input> مهمترین تگ <form> است.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <form action="/action_page.php">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Submit">
    </form>
    <p>Click the "Submit" button and the form-data will be sent to a page on the
    server called "action_page.php".</p>
    </body>
    </html>

     

    تگ <textarea>

    یک باکس متن چند خطی ایجاد می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <form action="files/get_data3.php" method="POST">
    <textarea name="message" placeholder="نظرتان را در مورد این سایت آموزشی بگویید."></textarea>
    <br>
    <input type="submit" value="ارسال">
    </form>
    </body>
    </html>

    تگ <button>

    یک دکمه قابل کلیک را ایجاد می کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <button type="button" onclick="alert('Hello world!')">Click Me!</button>
    </body>
    </html>

    تگ <select>

    یک لیست کشویی را ایجاد می‌کند. با استفاده از تگ‌های <option> داخل تگ <select> می‌توان گزینه‌های موجود در لیست کشویی را تعریف کرد.

    مثال:

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <form action="files/get_data2.php" method="POST">
    <label for="TF">کدوم غذا رو دوس داری؟:</label>
    <select id="TF" name="ghaza">
    <option value="Esteghlal">ماکارونی</option>
    <option value="Persepolis">قورمه سبزی</option>
    <option value="other">سایر</option>
    </select>
    <input type="submit" value="ارسال">
    </form>
    </body>
    </html>

    تگ <optgroup>

    گزینه‌های یک لیست کشویی را داخل تگ <select> دسته‌بندی می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <select>
    <optgroup label="اسامی پسرانه">
    <option value="sadegh">شهریار</option>
    <option value="reza">همایون</option>
    <option value="alireza">نیما</option>
    <option value="mohsen">محمد</option>
    </optgroup>
    <optgroup label="اسامی دخترانه">
    <option value="fateme">دیانا</option>
    <option value="maryam">پریسا</option>
    <option value="nazanin">نازنین</option>
    <option value="anna">ملیکا</option>
    </optgroup>
    </select>
    </body>
    </html>

    تگ <option>

    گزینه‌های لیست کشویی را مشخص می‌کند. تگ <option> درون تگ <select>، <optgroup> یا <datalist> قرار می‌گیرد.

    مثال:

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <form action="files/get_data2.php" method="POST">
    طرفدار کدوم تیمی :
    <select name="tarafdari">
    <option value="Esteghlal">استقلال</option>
    <option value="Persepolis">پرسپولیس</option>
    <option value="Sepahan">سپاهان</option>
    <option value="Tractor">تراکتور</option>
    <option value="other">دیگر تیم ها</option>
    </select>
    <input type="submit" value="ارسال">
    </form>
    </body>
    </html>

    تگ <lable>

    یک برچسب برای تگ <input> تعریف می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <form action="files/get_data.php" method="POST">
    <label for="UserName">نام شما : </label>
    <input type="text" name="myname" id="UserName">
    <input type="submit" value="ارسال">
    </form>
    </body>
    </html>

    تگ <fieldset>

    عناصر مرتبط را در یک فرم گروه بندی می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <form action="/action_page.php">
    <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
    </fieldset>
    </form>
    </body>
    </html>

    تگ <legend>

    یک عنوان برای تگ <fieldset> تعریف می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <form action="/action_page.php">
    <fieldset>
    <legend>Personalia:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname"><br><br>
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <label for="birthday">Birthday:</label>
    <input type="date" id="birthday" name="birthday"><br><br>
    <input type="submit" value="Submit">
    </fieldset>
    </form>
    </body>
    </html>

    تگ <datalist>

    فهرستی از گزینه‌های از پیش تعریف شده را برای تگ <input> تعریف می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <form action="/action_page.php" method="get">
    <label for="browser">مرورگر مورد علاقه تان را انتخاب کنید:</label>
    <input list="browsers" name="browser" id="browser">
    <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
    </datalist>
    <input type="ارسال">
    </form>
    <p><strong>Note:</strong> The datalist tag is not supported in Safari 12.0 (or earlier).</p>
    </body>
    </html>

    تگ <output>

    نتیجه یک محاسبه را به صورت خروجی نمایش می‌دهد.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <form oninput="OutPut.value = parseInt(number1.value) + parseInt(number2.value)">
    <input type="number" name="number1" value="1"> <br>
    + <br>
    <input type="number" name="number2" value="1"> <br>
    = <br>
    <output name="OutPut" for="number1 number2"></output>
    </form>
    </body>
    </html>

    تگ <iframe>

    یک فریم برای جاسازی یک سند دیگر در سند HTML فعلی ایجاد می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <iframe src="https://www.example.com"></iframe>
    </body>
    </html>

    تگ‌های html مربوط به ساخت عکس

    تگ <img>

    یک عکس را در صفحه وب تعریف و بارگذاری می‌کند. تگ <img> دارای دو ویژگی اصلی است:

    src - مسیر تصویر را مشخص می‌کند.
    alt - یک متن جایگزین برای تصویر مشخص می‌کند که اگر تصویر به دلایلی قابل نمایش نباشد کاربر متوجه مفهوم تصویر شود.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
    </body>
    </html>

    تگ <map>

    برای تعریف نقشه تصویر از این تگ استفاده می‌شود.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
    <map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
    <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
    </map>
    </body>
    </html>

    تگ <area>

    ناحیه‌های قابل کلیک را در نقشه تصویر تعریف می‌کند. عناصر <area> همیشه در داخل یک تگ <map> تودرتو هستند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <p>برای رفتن به صفحه جدید و مطالعه بیشتر در مورد موضوع، روی رایانه، تلفن یا فنجان قهوه کلیک کنید:</p>
    <img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
    <map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
    <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
    </map>
    </body>
    </html>

    تگ <canvas>

    برای تولید و پردازش تصاویر گرافیکی بخشی را ایجاد می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <canvas id="myCanvas" width="300" height="150" style="border:1px solid grey"></canvas>
    </body>
    </html>

    تگ <figcaption>

    یک عنوان برای تگ <figure> تعریف می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <figure>
    <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
    <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
    </figure>
    </body>
    </html>

    تگ <figure>

    برای درج تصویر، نمودار، شکل‌ها، فهرست کدها و غیره در صفحه وب استفاده می‌شود.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <figure>
    <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
    <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
    </figure>
    </body>
    </html>

    تگ اچ تی ام ال <picture>

    یک محفظه برای نگهداری یک یا چند عکس ایجاد می‌کند. تگ <picture> شامل دو تگ است: یک یا چند تگ <source> و یک تگ <img>.

    مثال:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <p>Resize the browser window to load different images.</p>
    <picture>
    <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
    <source media="(min-width:465px)" srcset="img_white_flower.jpg">
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
    </picture>
    </body>
    </html>

    تگ <svg>

    برای نگهداری اشکال گرافیکی ایجاد شده توسط SVG یک ظرف ایجاد می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    Sorry, your browser does not support inline SVG.
    </svg>
    </body>
    </html>

    تگ های HTML مربوط به صدا و ویدئو

    تگ <audio>

    محتوای صوتی (آهنگ) را در یک صفحه وب تعریف می‌کند و حاوی یک یا چند تگ <source> با منابع صوتی مختلف است.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <p>برای شنیدن آهنگ روی دکمه پخش کلیک کنید:</p>
    <audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    </audio>
    </body>
    </html>

    تگ <source>

    مسیر فایل را برای تگ‌های چند رسانه‌ای مشخص می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <p>برای شنیدن آهنگ روی دکمه پخش کلیک کنید:</p>
    <audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    </audio>
    </body>
    </html>

    تگ <track>

    امکان اضافه کردن محتوای متنی به محتوای چند رسانه‌ای را فراهم می‌کند.(زیرنویس ویدئو)

    <!DOCTYPE html>
    <html>
    <body>
    <video width="320" height="240" controls>
    <source src="forrest_gump.mp4" type="video/mp4">
    <source src="forrest_gump.ogg" type="video/ogg">
    <track src="files/subtitle.vtt" kind="subtitles" srclang="fa" label="فارسی">
    </video>
    </body>
    </html>
    {توجه: لینک های مربوط به سایت خودتان را اضافه کنید}

    تگ <video>

    امکان قرار دادن ویدئو در صفحه را فراهم می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    </video>
    </body>
    </html>

    تگ‌های HTML مربوط به لینک‌سازی

    تگ <a>

    لینکی را در سند html تعریف می‌کند که برای لینک یک صفحه به صفحه دیگر استفاده می‌شود. مهمترین ویژگی تگ <a> ویژگی href است که مقصد لینک را نشان می‌دهد.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <a href="https://www.example.com">سایت آموزشی</a>
    </body>
    </html>

    تگ <link>

    بین صفحه‌های HTML و منابع خارجی مانند فایل های CSS، فونت‌ها، آیکون‌ها و فایل‌های RSS ارتباط ایجاد می‌کند.
    مثال:

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <h1>Hello World!</h1>
    <h2>I am formatted with a linked style sheet.</h2>
    <p>Me too!</p>
    </body>
    </html>

    تگ <nav>

    یک منوی ناوبری یا Navigation Menu که متشکل از تعدادی لینک است را ایجاد ‌می‌کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <p>The nav element defines a set of navigation links:</p>
    <nav>
    <a href="/html/">HTML</a> |
    <a href="/css/">CSS</a> |
    <a href="/js/">JavaScript</a> |
    <a href="/python/">Python</a>
    </nav>
    </body>
    </html>

    تگ‌های اچ تی ام ال مربوط به لیست

    تگ <menu>

    یک منوی زمینه‌ای ایجاد می‌کند. تگ <menu> همراه با تگ <li> برای ایجاد آیتم‌های منو استفاده می‌شود. این تگ جایگزینی برای تگ <ul> است.

    مثال:

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <menu>
    <li>قهوه</li>
    <li>چای</li>
    <li>شیر</li>
    </menu>
    </body>
    </html>
    https://www.w3schools.com/tags/tag_menu.asp

    تگ  <ul>

    یک لیست نامرتب ایجاد می‌کند. از تگ <ul> همراه با تگ <li> برای ایجاد لیست‌های نامرتب استفاده می‌شود.

    مثال:
    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <ul>
    <li>قهوه</li>
    <li>چای</li>
    <li>شیر</li>
    </ul>
    </body>
    </html>

    تگ <ol>

    یک لیست مرتب شده ایجاد می‌کند. لیست مرتب شده می تواند عددی یا الفبایی باشد.

    از تگ <li> برای تعریف هر آیتم لیست استفاده می‌شود.

    مثال:

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <ol>
    <li>قهوه</li>
    <li>چای</li>
    <li>شیر</li>
    </ol>
    <ol start="50">
    <li>قهوه</li>
    <li>چای</li>
    <li>شیر</li>
    </ol>
    </body>
    </html>

    تگ <li>

    آیتم‌های یک لیست مرتب یا نامرتب را تعریف می کند.

    مثال:

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <ul>
    <li>قهوه</li>
    <li>چای</li>
    <li>شیر</li>
    </ul>
    </body>
    </html>

    تگ <dl>

    یک لیست توضیحی یا دارای توضیحات را ایجاد می‌کند.

    تگ <dl> همراه با تگ <dt> و تگ <dd> استفاده می‌شود.

    مثال:

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <dl>
    <dt>قهوه</dt>
    <dd>یک نوشیدنی داغ تلخ</dd>
    <dt>شیر</dt>
    <dd>یک نوشیدنی سرد سفید</dd>
    </dl>
    </body>
    </html>

    تگ <dt>

    یک اصطلاح/نام را برای لیست توضیحی تعریف می‌کند.

    این تگ همراه با تگ <dl> و تگ <dd> استفاده می‌شود.

    مثال:

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <dl>
    <dt>قهوه</dt>
    <dd>یک نوشیدنی داغ تلخ</dd>
    <dt>شیر</dt>
    <dd>یک نوشیدنی سرد سفید</dd>
    </dl>
    </body>
    </html>

    تگ <dd>

    توضیحات یک لیست توضیحی را ایجاد می‌کند.تگ <dd> همراه با تگ <dl> و تگ <dt> استفاده می‌شود.

    در داخل تگ <dd> می‌توان پاراگراف‌ها، خطوط شکسته، تصاویر، لینک‌ها، لیست‌ها و غیره را قرار داد.

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <dl>
    <dt>قهوه</dt>
    <dd>یک نوشیدنی داغ تلخ</dd>
    <dt>شیر</dt>
    <dd>یک نوشیدنی سرد سفید</dd>
    </dl>
    </body>
    </html>

    تگ‌های HTML مربوط به ساخت جدول

    تگ <table>

    می‌توان یک جدول را در یک صفحه وب ایجاد کرد. این تگ همراه تگ‌های <tr>، <th> و <td> بکار می‌رود.

    یک جدول در سند HTML دارای دو نوع سلول است:

    سلول‌های هدر یا عنوان - حاوی اطلاعات عنوان (ایجاد شده با تگ <th>) است.

    سلول‌های داده - حاوی داده (ایجاد شده با تگ <td>) است.

    تگ <caption>

    یک کپشن برای تگ <table> تعریف می‌کند و درون این تگ قرار می‌گیرد. تگ <caption> باید بلافاصله بعد از تگ <table> درج شود.

    تگ <th>

    با استفاده از این تگ می‌توان برای ستون‌های یک جدول عنوان تعریف کرد. این تگ درون تگ <table> قرار می‌گیرد.
    متن در تگ <th> به طور پیش فرض وسط چین و پررنگ (bold) است.

    تگ <tr>

    سطرهای یک جدول را تعریف می‌کند. این تگ درون تگ <table> قرار می‌گیرد. یک تگ <tr> حاوی یک یا چند تگ <th> یا <td> است.

    تگ <td>

    ستون‌های یک جدول را ایجاد می‌کند.این تگ درون تگ <table> قرار می‌گیرد. متن در تگ <td> به طور پیش‌فرض منظم واز چپ به راست تراز شده است.

    تگ <thead>

    هدر یا سرستون‌های جدول را مشخص می کند. این تگ درون تگ <table> قرار می‌گیرد.

    تگ <thead> باید دارای یک یا چند تگ <tr> باشد.

    تگ <thead> همراه با تگ‎های <tbody> و <tfoot> برای تعیین هر قسمت از جدول (هدر، بدنه، پاورقی) استفاده می شود.

    تگ <tbody>

    با استفاده از این تگ می‌توان بدنه یک تگ را ایجاد کرد. این تگ درون تگ <table> قرار می‌گیرد.
    تگ <tbody> باید دارای یک یا چند تگ <tr> باشد.

    تگ <tfoot>

    فوتر یا پایینی ترین قسمت جدول را مشخص می‌کند. این تگ درون تگ <table> قرار می‌گیرد.

    تگ <tfoot> باید دارای یک یا چند تگ <tr> باشد.

    تگ <col>

    از این تگ برای استایل دهی اختصاصی به یک ستون خاص در جدول استفاده می‌شود. این تگ درون تگ <colgroup> قرار می‌گیرد.

    تگ <colgroup>

    از این تگ برای استایل‌دهی به ستون‌های یک جدول به صورت دسته جمعی استفاده می‌شود. یعنی به جای اینکه استایل‌ها برای هر سلول به صورت جداگانه اعمال شود، روی کل ستون‌ها اعمال می‌شود.

    تگ‌های مربوط به ساخت استایل‌ها و سیمانتک‌ها

    تگ <style>

    دستورات CSS را درون صفحه وب تعریف می کند. تگ <style> باید در بخش <head> سند گنجانده شود.

    مثال:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {color:red;}
    p {color:blue;}
    </style>
    </head>
    <body dir="rtl">
    <h1>این یک هدینگ است.</h1>
    <p>این یک پاراگراف است.</p>
    </body>
    </html>

    تگ <div>

    برای تقسیم بندی محتوا در یک سند HTML استفاده می‌شود.

    تگ <div> به راحتی با استفاده از ویژگی class یا id استایل‌دهی می‌شود.

    هر نوع محتوایی را می‌توان در تگ <div> قرار داد.

    مثال:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .mydiv{
    padding:10px;
    font-family:tahoma;
    font-size:14px;
    margin:10px 0;
    }
    .bg-green{
    background-color:lightgreen;
    }
    .bg-blue{
    background-color:lightblue;
    }
    </style>
    </head>
    <body dir="rtl">
    <div class="myDiv">
    <h2>بخش اول</h2>
    <p>این یک متن است که داخل تگ div قرار گرفته است.</p>
    </div>
    <div class="myDiv">
    <h2>بخش دوم</h2>
    <p>این یک متن است که داخل تگ div قرار گرفته است.</p>
    </div>
    </body>
    </html>

    تگ <span>

    با استفاده از این تگ می‌‎توان یک قسمت از محتوا را به صورت درون خطی مشخص کرد و ویژگی یا استایل خاصی روی آن اعمال کرد.

    تگ <span> بسیار شبیه تگ <div> است، اما <div> یک عنصر در سطح بلوک و <span> یک عنصر درون خطی (inline) است.

    مثال:

    <!DOCTYPE html>
    <html>
    <body dir="rtl">
    <p>چشمان مادر من<span style="color:blue;font-weight:bold">blue</span>است و پدرم چشمانی<span style="color:darkolivegreen;font-weight:bold">dark green</span> دارد.</p>
    </body>
    </html>
    https://www.w3schools.com/tags/tag_span.asp

    تگ <header>

    با استفاده از این تگ می‌توان یک هدر برای یک بخش یا سند اچ تی ام ال تعریف کرد.

    • تگ <header> معمولاً شامل:
    • یک یا چند تگ عنوان (<h1> - <h6>)
    • لوگو یا نماد
    • اطلاعات نویسنده

    می‌توانید در یک سند html چندین تگ <header> داشته باشید.

    تگ <header> را نمی‌توان در تگ <footer> و<address> قرار داد.

    مثال:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body{
    direction:rtl;
    font-family:tahoma;
    }
    .my-box{
    max-width:500px;
    margin:0 auto;
    }
    .my-content{
    background-color:#202020;
    color:#fff;
    padding:10px;
    text-align:center;
    }
    .my-footer,.my-header{
    background-color:#123456;
    color:#fff;
    padding:5px;
    text-align:center;
    }
    </style>
    </head>
    <body>
    <div class="my-box">
    <section>
    <article class="my-content">
    <header class="my-header">
    <h1/>آموزش اچ تی ام ال<h1>
    </header>
    <p>آموزش قدم به قدم زبان HTML را میتوانید در سایت آموزشی دنبال نمایید.</p>
    <p>زبان HTML زبان مادر برای طراحی صفحات وب می باشد.</p>
    <footer class="my-footer">
    <p>توسط : سایت آموزشی در سال 1402</p>
    </footer>
    </article>
    </section>
    </div>
    </body>
    </html>

    تگ <hgroup>

    با استفاده از این تگ می توان تگ های هد (H1 تا H6) را گروه بندی کرد یا دسته بندی کرده.(البته منسوخ شده)

    تگ <footer>

    یک فوتر برای یک بخش یا سند تعریف می‌کند.

    یک تگ <footer> معمولاً حاوی:

    • اطلاعات نویسنده
    • اطلاعات کپی رایت
    • اطلاعات تماس
    • نقشه سایت
    • بازگشت به لینک‌های بالا

    می‌توانید چندین تگ <footer> را در یک سند داشته باشید.

    اطلاعات تماس داخل تگ <footer> باید داخل تگ <address> قرار گیرد.

    مثال:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body{
    direction:rtl;
    font-family:tahoma;
    }
    .my-box{
    max-width:500px;
    margin:0 auto;
    }
    .my-content{
    background-color:#202020;
    color:#fff;
    padding:10px;
    text-align:center;
    }
    .my-footer,.my-header{
    background-color:#123456;
    color:#fff;
    padding:5px;
    text-align:center;
    }
    </style>
    </head>
    <body>
    <div class="my-box">
    <section>
    <article class="my-content">
    <header class="my-header">
    </h1>آموزش اچ تی ام ال<h1>
    </header>
    <p>آموزش قدم به قدم زبان HTML را میتوانید در سایت آموزشی دنبال نمایید.</p>
    <p>زبان HTML زبان مادر برای طراحی صفحات وب می باشد.</p>
    <footer class="my-footer">
    <p>توسط : سایت آموزشی در سال 1402</p>
    </footer>
    </article>
    </section>
    </div>
    </body>
    </html>

    تگ <main>

    محتوا یا بخش اصلی یک سند اچ تی ام ال را مشخص می‌کند. محتوای داخل تگ <main> باید منحصر به فرد باشد.
    در یک سند نباید بیش از یک تگ <main> وجود داشته باشد. عنصر <main> نباید زیر مجموعه <article>،<aside>، <footer>، <header> یا <nav> باشد.

    تگ <section>

    یک بخش را در یک سند تعریف می‌کند.

    تگ <search>

    بخش سرچ یا جستجو را ایجاد می‌کند و با استفاده از css می‌توان به آن استایل داد.

    تگ <article>

    یک مقاله یا مطلب را در صفحه وب تعریف می‌کند.

    تگ <aside>

    برای تعریف توضیحات جانبی و محتوایی که کم تر با محتوای اصلی سایت مرتبط است، استفاده می‌شود و با استفاده از css می‌توان به آن استایل داد.

    تگ <details>

    یک باکس محتوا به صورت باز شونده ایجاد می‌کند.

    از تگ <summary> همراه با <details> برای تعیین عنوان قابل مشاهده برای جزئیات استفاده می‌شود.

    تگ <dialog>

    یک پنجره پاپ آپ یا مودال (یک پنجره باز شونده) را ایجاد می‌کند.

    تگ <summary>

    داخل تگ <details> قرار می‌گیرد و یک عنوان برای این تگ تعریف می‌کند. برای مشاهده/پنهان کردن جزئیات می توان روی عنوان کلیک کرد.

    تگ <summary> باید اولین فرزند تگ<details> باشد.

    تگ <data>

    یک داده قابل درک یا قابل خواندن را برای موتورهای جستجو یا نرم افزارهای خواننده ایجاد می‌کند.

    اگر محتوا مربوط به زمان یا تاریخ است، به جای آن از تگ <time> استفاده کنید.

    تگ های مربوط به ارائه اطلاعات متا یا صفحه وب

    تگ <head>

    {ابتدای مقاله اول هم توضیح داده شده است.}

    یکی از مهمترین تگ‌های اچ تی ام ال است که قبل از نوشتن بدنه باید نوشته شود و اطلاعات مربوط به یک سند را تعریف می‌کند.

    تگ <meta>

    برای تعریف اطلاعات متا در صفحه وب استفاده می‌شود.

    تگ‌های <meta> همیشه درون تگ <head> قرار می‌گیرند و معمولاً برای تعیین مجموعه کاراکترها، توضیحات صفحه، کلمات کلیدی، نویسنده سند و تنظیمات viewport استفاده می‌شوند.

    متادیتا در صفحه وب نمایش داده نمی‌شود اما توسط موتورهای جستجو بررسی می‌شود.

    مثال:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <p>تمام اطلاعات متا در قسمت head .قرار می گیرد</p>
    </body>
    </html>
    https://www.w3schools.com/tags/tag_meta.asp

    تگ <base>

    برای تمام لینک‌های استفاده شده در صفحه وب، یک لینک پایه ایجاد می کند.

    تگ <base> باید دارای ویژگی href یا target یا هر دو باشد.

    تنها یک تگ <base> در سند اچ تی ام ال می‌تواند وجود داشته باشد و باید در تگ <head> قرار بگیرد.

    مثال:

    <!DOCTYPE html>
    <html>
    <head>
    <base href="https://example.com/">
    </head>
    <body>
    <a href="category/web_design/html_tutorial/">آموزش HTML</a> <br>
    <a href="category/web_design/css_tutorial/">آموزش CSS</a> <br>
    <a href="category/web_design/javascript_tutorial/">آموزش JavaScript</a>
    </body>
    </html>

    تگ‌های مربوط به برنامه نویسی

    تگ <script>

    دستورات جاوا اسکریپت را در صفحه تعریف/ ایجاد می‌کند.

    تگ <script> یا حاوی عبارات اسکریپت است یا از طریق ویژگی src به یک فایل اسکریپت خارجی اشاره می‌کند.
    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <p id="demo"></p>
    <script>
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>
    </body>
    </html>
    https://www.w3schools.com/tags/tag_script.asp

    تگ <noscript>

    در صورت عدم پشتیبانی مرورگر کاربر از تگ <script> ، متنی دلخواه را به کاربر نمایش می‌دهد.

    تگ <noscript> را می‌توان هم در <head> و هم در <body> استفاده کرد. هنگامی که در داخل <head> استفاده می شود، تگ <noscript> فقط می‌تواند حاوی عناصر <link>، <style> و <meta> باشد.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <noscript><p>برای مشاهدهٔ کامل این صفحه، باید اجرای اسکریپت‌ها را فعال کنید.</p></noscript>
    </body>
    </html>

    تگ <embed>

    برای قرار دادن یک محتوای خارجی، مانند فایل‌های صوتی، ویدئویی، PDF، یا اپلت‌های جاوا در صفحه‌های وب استفاده می‌شود.

    مثال1:

    <!DOCTYPE html>
    <html>
    <body>
    <embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200">
    </body>
    </html>

    مثال2:

    <!DOCTYPE html>
    <html>
    <body>
    <embed type="text/html" src="snippet.html" width="500" height="200">
    </body>
    </html>

    تگ <object>

    برای قرار دادن یک محتوای خارجی مانند عکس، فایل‌های صوتی، ویدئویی، PDF و غیره در صفحه‌های وب استفاده می‌شود.

    برای جاسازی یا قرار دادن عکس بهتر است از تگ <img>، برای جاسازی سند HTML بهتر است از تگ <iframe> و برای جاسازی ویدیو یا صدا بهتر است از تگ های <video> و <audio> استفاده کنید.

    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <object data="files/girls-1.jpg"></object>
    </body>
    </html>

    تگ <param>

    برای تگ <object> پارامتر تعریف می‌کند.
    مثال:

    <!DOCTYPE html>
    <html>
    <body>
    <object data="horse.wav">
    <param name="autoplay" value="true">
    </object>
    </body>
    </html>

    جمع بندی

    ما در این مقاله به بررسی این موضوع که تگ html چیست پرداختیم. همچنین لیستی از تگ های اچ تی ام ال 5 و کاربرد هر کدام را برای شما معرفی کردیم. در ادامه شاید برایتان سوال باشد که فرق بین html و html5 چیست؟ در پاسخ به این سوال باید بگوییم که html و html5 دو نسخه از زبان نشانه‌گذاری ابر متن است که برای ساخت و طراحی صفحات وب استفاده می‌شود. با این تفاوت که html5 نسخه جدیدتر و پیشرفته‌تری است که در سال 2014 توسط W3C معرفی شد.

    HTML5 نسبت به HTML تفاوت‌های زیادی دارد. به عنوان مثال اچ تی ام ال 5 از تگ‌های مختلفی مانند <header> ، <footer> ، <nav> ، <article> ، <section> برای نشان دادن محتوا در بخش‌های مختلف یک صفحه وب استفاده می‌کند در صورتی که تگ‌های html بسیار محدود است. یا اینکه HTML5 از قابلیت‌های جدیدی مانند Web Storage ، IndexedDB ، Application Cache و Web Workers برای ذخیره‌سازی محلی و آفلاین پشتیبانی می‌کند، در حالی که HTML فقط از کوکی‌ها برای ذخیره‌سازی محدود اطلاعات استفاده می‌کند.

     

     

     

    این مطلب را برای دیگران هم ارسال کنید :

    • پیام بگذارید.






    دسته بندی
    جدیدترین اخبار

    اخبار فوری
    ارتباط با آموزشگاه فارسیان