۵ ترفند فراموش شده HTML
یه سری کارا هست که ما می ریم به خاطرش چندین کیلو/مگا بایت کتابخونه جاوااسکریپت استفاده می‌کنیم و علاوه بر حجیم کردن ابعاد کد و سنگین کردن سایت مون، لقمه رو دور سرمون چرخوندیم. با این ترفند های HTML ساده و فراموش شده ، به راحتی می توانید کارها رو در طراحی سایت و وب ساده کنید.
- همچنین بخوانید : ۸ متا تگ ضروری HTML برای سئو
۱. بارگیری کند تصویر
بارگیری کند (Lazy Load) تصاویر می تواند به افزایش عملکرد سایت و پاسخگویی آن کمک کند. این ویژگی مانع از بارگیری تصاویری می شود که در لحظه روی صفحه موردنیاز نیستند. با این وجود ، هنگامی که به پایین یا نزدیک به تصویر اسکرول می کنید ، تصویر Load می شود.
<img Src="image.Png" Loading="Lazy" alt="..." width="300' height="250">
۲. پیشنهادات ورودی
دریافت پیشنهادات مفید و مرتبط هنگامی که می خواهید چیزی را جستجو/تایپ کنید ، واقعا مفید است. با تنظیم یک event Listener در قسمت ورودی و سپس تطبیق اصطلاح جستجو شده با پیشنهادهای از پیش تعریف شده ، می توانید از JavaSciript برای افزودن پیشنهادات ورودی استفاده کنید. با این حال با تگ Datalist نیز می توانید این کار را به شیوه زیر انجام دهید.
<label for="country">choose Your Country from the List: </label> <input list="countries" name=country" id="country"> <datalist id="countries"> <option value="uk"></option> <option value="India"></option> <option value="Germany"></option> <option value="Iran"></option> <option value="China"></option> </datalist>
۳. تگ تصویر HTML
معمولا وقتی که می خواهید گالری بسازید یا از یک تصویر بزرگ استفاده کنید و آن را به عنوان یک تصویر کوچک نشان دهید ، با تصاویری که ابعاد مقیاس شده درستی ندارند مواجه می شوید.
خوشبختانه ، HTML به توسعه دهندگان این فرصت را می دهد تا با استفاده از تگ <Picture> این مسئله را به راحتی حل کنند و به شما اجازه می دهد چندین عکس متناسب با عرض های مختلف اضافه کنید.
<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="flag" style="width:auto;"> <picture>
۴. آدرس مبنا
با همان Base URL به شما کمک می کند یک آدرس مبنا تعریف کنید تا برای آدرس دهی باقی فایل ها و منابع ، نیازی به نوشتن کل آدرس نباشد.
<head> <base href="https://www.twitter.com/ target="_blank"> </head> <body> <img Src="elanmusk" alt="Elon Musk"> <a href="BillGates"> bill Gate </a> </body>
۵. ریفرش کردن صفحه
اگر می خواهید کاربر را پس از مدتی عدم فعالیت یا حتی بلافاصله به صفحه دیگری هدایت کنید ، می توانید این کار را با استفاده از یزی غیر از HTML ساده انجام دهید.
این ویژگی را ممکن است هنگام باز کردن برخی از سایت ها دیده باشید . چیزی که در امتداد خط “شما تا ۱۵ ثانیه دیگر هدایت می شوید” ظاهر می شود.
تگ متا با “http-equiv=”refresh و Content که مشخص کننده میزان ثانیه و آدرس مقصد است.
<meta http-equiv="refresh" content="4; url="https://learnparsi.com" />
تو این مطلب ۵ تا از قابلیت‌های پیش‌فرض و آماده HTML رو شناختیم . شما چه ترفند های دیگه ای از HTML می دونید ؟
دیدگاه ها