عناصر اضافی HTML

در فعالیت های قبلی، یاد گرفتید:

  • اصول اولیه تگ ها و عناصر HTML.
  • نحوه ساخت یک صفحه وب
  • HTML معنایی و بهترین شیوه ها.

با این مقاله، شما به ساختن دانش HTML خود ادامه می دهید و عناصر HTML اضافی را پوشش می دهید.

عناصر محتوای متن

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

این عناصر از ایجاد محتوای متن پشتیبانی می کنند و ساختار، سبک و معنا را اضافه می کنند. چندین قطعه از محتوای متنی وجود دارد که می تواند عناصر زیر را در خود جای دهد.

عنصر blockquote

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

این مثال نحوه استفاده از عنصر <blockquote> را نشان می دهد و نقل قول معروف مهاتما گاندی را به نمایش می گذارد. نقل قول های بسیار خوبی وجود دارد که محتوا و معنای به یاد ماندنی را ارائه می دهد. در مورد برخی از چهره های الهام بخش مورد علاقه خود و نقل قول های آنها فکر کنید.

هنگام استفاده از نقل قول و ارجاع اطلاعات از یک منبع، از عنصر <blockquote> استفاده کنید. عنصر <blockquote> یک تورفتگی و تراز منحصر به فرد در ارائه ایجاد می کند و از هر دو تگ باز و بسته استفاده می کند. <blockquote> مخصوصاً هنگام استفاده از نقل قول های طولانی تر که چندین خط متن را پوشش می دهد مفید است.

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

عنصر <details>

<details>
   <summary>Details</summary>
   Additional Information
</details>

اغلب، یک صفحه وب دارای بخش سؤالات متداول و اطلاعات اضافی است که در دسترس کاربر است. بخش سؤالات متداول وجود دارد که برای اطلاعات محصول، برنامه سفر یا هر نوع سناریو سؤال و پاسخ رایج است.

عنصر <details> با استفاده از یک ویجت فاش شده که اطلاعات اضافی را در خود دارد مفید است. این عنصر شامل یک قابلیت جابجایی داخلی است و کاربر می تواند ضامن را باز و بسته کند. هنگامی که کلید باز است، محتوای اطلاعات اضافی گسترش می یابد و توسط کاربر قابل خواندن است. هنگامی که کلید بسته می شود، محتوای اطلاعات اضافی از کاربر پنهان می شود. برای نامگذاری خود ویجت <details> ، از عنصر <summary> استفاده کنید.

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

این عنصر <figure> در عمل است. در اینجا مشاهده می کنید که <figure> ، که در کنار عنصر <figcaption> استفاده می شود، می تواند برای بهبود تجربه بصری استفاده شود.

شما همیشه تصاویر را در سراسر وب و سایر داده های بصری مفید می بینید. عناصر بصری به جلب توجه بازدید کننده و ایجاد یک تجربه کاربری عالی کمک می کنند. عنصر <figure> راهی برای برچسب گذاری یک تصویر، جدول، نمودار و غیره است. این عنصر با ایجاد محتوای خود در ارتباط با محتوای اصلی کار می کند.

عنصر <time>

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

عنصر <time> هم معنی و هم معنای معنایی را ارائه می‌کند، و امکان عملکرد بهتر با فعالیت‌هایی مانند برنامه‌ریزی یک قرار آنلاین، انتشار تاریخ و زمان برای مقاله وبلاگ، آرشیو و غیره را فراهم می‌کند. چند نمونه وب‌سایت که از <time> استفاده می‌کنند. این عنصر شامل استفاده از تقویم گوگل، انتشار یک مقاله به صورت زنده در یک پلت فرم، یا خواندن آرشیوهای تاریخی آنلاین از وب سایت کتابخانه است.

عنصر <time> به زمان اشاره می کند و می تواند نشان دهنده زمان برای یک ساعت 24 ساعته یا یک تاریخ خاص باشد که می تواند منطقه زمانی و مکان را تنظیم کند. این عنصر به هر دو تگ باز و بسته، <time> و </time> نیاز دارد. می‌توانید ویژگی datetime اضافه کنید تا تاریخ‌ها در قالبی قابل خواندن توسط ماشین خوانده شوند.

فراداده سند

<title>Sarah's Favorite Food Recipes</title>

هر زمان که یک URL وب سایت را تایپ می کنید، یک نام <title> وجود دارد که می تواند در نوار مرورگر یا برگه صفحه وب خوانده شود. این نام عنوانی است که می بینید برای یک صفحه وب داده شده است. این عنصر مهم است و توسط یک موتور جستجو برای نمایش لیستی از صفحات وب مرتبط در نتایج جستجو استفاده می شود. طول عنوان می تواند از کوتاه و توصیفی تا طولانی تر و توصیفی تر متفاوت باشد.

سناریو: شما یک صفحه وب دارید که به آن فکر می کنید، اما نمی توانید URL وب سایت خاصی را به خاطر بسپارید. کلمات کلیدی را در موتور جستجو وارد کنید. موتور جستجو به ردیابی صفحه وب مورد نظر شما کمک می کند و می توانید نام <title> را که در جستجو ظاهر می شود مشاهده کنید.

عناصر محتوای جاسازی شده

علاوه بر محتوای متنی، انواع عناصر محتوای اضافی نیز برای استفاده وجود دارد.

عنصر <iframe>

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

هنگامی که خرید آنلاین اقلام را تمام می کنید و روی گزینه پرداخت خود، مانند Paypal یا Apple Pay کلیک می کنید، این ویژگی ها معمولاً به یک صفحه وب با <iframe> اضافه می شوند. دیدن نقشه آنلاین برای جستجوی یک کسب و کار محلی یکی دیگر از تجربه های رایج است. این نوع تجربیات کاربری در یک صفحه وب را می توان با iframe اضافه کرد. در مثال بالا، نشانی اینترنتی ویکی‌پدیا را در یک iframe با عنوان «ویکی‌پدیا» مشاهده می‌کنید.

عنصر <iframe> به شما امکان می دهد محتوا را از منبع دیگری وارد کنید و یک فریم را در یک صفحه وب جاسازی کنید. یک قاب مستطیلی شکل ایجاد می کند و محتوا را در مرورگر نمایش می دهد. یک قاب امکان ارائه یک طرح به شکل پنجره را در یک عنصر <iframe> فراهم می کند. این یک راه قدرتمند برای افزودن محتوا به صفحه وب شما برای افزایش تجربه است.

عناصر فرم

<progress max="100" value="30"> 30% </progress>

هنگام تماشای یک ویدیو طولانی تر، سخنرانی یا پر کردن یک برنامه گسترده، داشتن یک نوار پیشرفت بصری می تواند برای پیگیری پیشرفت شما مفید باشد. عنصر <progress> برای این نوع سناریوها مفید است.

این عنصر به عنوان یک نوار بصری با رنگ پس زمینه به تصویر کشیده شده است. نوار بصری می تواند از نظر اندازه و رنگ پس زمینه متفاوت باشد. با نوار پیشرفت، می توانید به صورت اختیاری از ویژگی های max و value استفاده کنید. ویژگی max عدد ممیز شناور را تعیین می‌کند و ویژگی value میزان پیشرفت در یک کار را یادداشت می‌کند.

اسکریپت

<canvas id="canvas"></canvas>

برای اینکه بتوانید گرافیک و انیمیشن را در زمان واقعی ترسیم کنید، از عنصر <canvas> استفاده کنید. عنصر <canvas> را در صفحه وب HTML خود قرار دهید تا یک بوم ایجاد کنید. این عنصر برای طراحی و ایجاد گرافیک به کد جاوا اسکریپت نیاز دارد.

عناصر محتوای جدول

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

عنصر <table>

عنصر <table> یک جدول ایجاد می کند. این نقطه شروع برای افزودن عناصر اضافی با سطر و ستون است. جداول اغلب در صفحات وب ظاهر می شوند، که راهی مفید برای سازماندهی و نمایش اطلاعات است. یکی از موارد استفاده برای استفاده از عنصر <table> ارائه اطلاعات جدولی به کاربر است، مانند نوع اطلاعاتی که ممکن است در یک صفحه گسترده بیابید.

عنصر <th>

عنصر <th> سربرگ گروهی از سلول ها است.

عنصر <tr>

عنصر <tr> یک ردیف از سلول ها را در یک جدول تعریف می کند. از اینجا می توانید داده های سلولی خاصی را اضافه کنید.

عنصر <td>

عنصر <td> سلول را ایجاد می کند و محتوای مورد نیاز را اضافه می کند.

نتیجه

در این مقاله، عناصر HTML اضافی را کشف کردید و مهارت های کدنویسی خود را ساختید. در مورد محتوا، متن درون خطی، محتوای جاسازی شده و عناصر جدول اطلاعات بیشتری کسب کردید. شما اکنون بر اساس درک خود از عناصر اضافی HTML ساخته اید. به کار خوب ادامه دهید!