5 ترفند HTML که هیچ‌کس در مورد آن‌ها صحبت نمی‌کند

Tips and Trick

1 دقیقه

1399/11/29

رضا پارسیان

همه طراحان سایت باید از html استفاده کنن فارغ از این که از چه زبان و یا فریم‌ورکی استفاده می‌کنن. زبان‌ها و فریم‌ورک‌های زیادی تولید و از دور خارج میشن ولی در آخر این Html هست که می‌مونه و همه باید از اون پیروی کنن تا بتونن سایت‌های خودشون رو راه بندازن.

تعدادی از امکانات سایت‌ها توسط زبان‌های دیگه مثل جاوااسکریپ پیاده‌سازی میشن که از نظر من پیاده‌سازی این امکانات با Html کار ساده‌تر و سریع‌تری است اما کمتر کسی پیدا میشه که از این امکانات صحبت کنه و ترجیح میدن از زبان‌های دیگه برای پیاده‌سازی این قابلیت‌ها استفاده کنن، در این مقاله قراره ۵ تا از جذاب‌ترین قابلیت‌های Html رو بهتون نشون بدم که برق از کلتون می‌پرونه!

Lazy Load

بعضی اصطلاحات قابل ترجمه نیستند از نظر من و این یکی از همون اصطلاحات هست، Lazy Load به این معنی هست که عکس‌های سایت شما به تدریج بارگذاری بشوند تا بازده سایت شما بالاتر بره و کاربران از لود نشدن سایت شما شاکی نشن.

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

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

پشنهاد کلمات

قطعاً موتورهای جستجو رو دیده‌اید که با فشار اولین حرف از کلمه مد نظر خود، ترندهای مربوطه رو به شما نشون میده و جستجو کردن رو برای شما ساده‌تر می‌کنه‫.‬

پیاده سازی این قابلیت به درک مناسبی از جاوااسکریپ نیاز داره که هرکسی از عهده اون برنمیاد اماHtml یک قابلیت باحال داره به اسم datalist که به شما کمک می‌کنه این ویژگی جالب رو به صفحات خودتون اضافه کنید و جستجو رو برای کاربران ساده‌تر کنید‫.‬

    ‬<label for="country">Choose your country from the list:</label>
    <input list="countries" name="country" id="country">

    <datalist id="cuntries">
        <option value="UK">
        <option value="Germany">
        <option value="USA">
        <option value="Japan">
        <option value="India">
    </datalist>

Picture Tag

در عصر اینترنت و گوشی‌های هوشمند داشتن صفحات ریسپانسیو یکی از ملزومات سایت‌ها شده است که در سئوی سایت شما هم تأثیر به‌سزایی دارد، اما عکس‌های سایت کار رو برای طراحان و برنامه‌نویسان این حوزه دشوار کرده‫.‬

یک قابلیت باحال Html هست که به شما در حل کردن این مشکل کمک می‌کنه به اسم Picture که نمونه کد رو می‌تونید پایین ببینید؛ که خیلی شبیه audio, video هست

    <picture>
        <source media="(min-width:768px)" srcset="med\_flag.jpg">
        <source media="(min-width:495px)" srcset="small\_flower.jpg">
        <img src="high\_flag.jpg" alt="Flags" style="width:auto;">
    </picture>

Base Url

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

    <head>
        <base href="https://www.twitter.com/" target="\_blank">
    </head>

    <body>
    <img src="elonmusk" alt="Elon Musk">
    <a href="BillGates">Bill Gate</a>
    </body>

Document refresher

یکی از قدیمی‌ترین کدهای Html هست که بیشتر به‌درد انجمن‌ها می‌خوره که نخواید هر ثانیه صفحه رو رفرش کنید که پست‌های جدید رو دریافت کنید‫.‬

از اسم تگ پیدا هست که چیکار قراره بکنه؛ پس زیاد توضیح نمیدم و فقط میگم صفحه رو بعد از گذشت چند ثانیه به‌روزرسانی می‌کنه‫.‬

    <meta http-equiv="refresh" content="4; URL='https://google.com' />

سخن نهایی

Html و Css بسیار قدرتمند هستند و شما می‌تونید با استفاده از این دو، سایت‌های خارق‌العاده‌ای رو طراحی کنید‫.‬

یادگیری هر چیزی و مهارت در آن به زمان، وقت و تمرین نیاز داره و Html از قاعده مستثنی نیست.

🤯 1

😍

😁

😬

😊

🤨

🙁

🥲

😭

😡

🤬