۱۷ ترفند HTML بهمراه مثالهای کاربردی

هر طراح وبسایتی اگر بخواهد وبسایت طراحی کند باید از زبان HTML برای طراحی صفحات استفاده نماید. زبان طراحی HTML در عمل ترفند هایی دارد که دانستن آنها باعث بهبود ساختار صفحات وب می شود. این ترفندهای ساده HTML به شما کمک می کند یک سایت زیبا و یک تجربه کاربری عالی ایجاد کنید.

با استفاده از HTML ، CSS3 و JavaScript ، ابزارهای ساده زیادی در اختیار شماست تا وب سایت یا وبلاگ خود را جذاب ، کاربرپسند و مدرن نشان دهد. HTML5 سهم بسزایی در طراحی وب سایتهای پر زرق و برق هر روز دارد.

نکته ای که باید اینجا در نظر داشته باشید این است که صفحات HTML شما باید در تمامی مرورگرها مرتب دیده شود حتی مرورگرهایی مانند Internet Explorer و Edge و… .

برای این کار می توانید از ابزارهایی مانند EndTest استفاده نمایید.

در زیر به ۱۷ ترفند HTML می پردازیم.

۱. تگ <figure>

از این می توان برای علامت گذاری عکس استفاده کرد.

این تگ ممکن است شامل تگ <figcaption> نیز باشد.

<figure>
  <img src="https://honarsystems.ir/logo.png" alt="Honar Systems" style="width:100%">
  <figcaption>Fig.1 - Honar Systems Logo</figcaption>
</figure>

۲. تگ <video>

این تگ به شما این امکان را می دهد که با استفاده از یک Media Player بتوانید ویدئو خود را پخش کنید.

به عنوان مثال، می توانید فیلم خود را در AWS S3 بارگذاری کنید و از تگ <video> برای قرار دادن آن در وب سایت خود استفاده کنید.

استفاده از YouTube برای آن ممکن است غیرحرفه ای باشد و Vimeo به شما اجازه نمی دهد فیلم های خود را بدون پرداخت هزینه در سایت خود قرار دهید.

می توانید ویژگی های خاصی مانند عرض، ارتفاع، پخش خودکار، حلقه، کنترل ها و غیره را تعیین کنید.

<video autoplay="" loop="" controls="" width="640" height="480">
    <source type="video/mp4" src="https://honarsystems.ir/video.mp4">
</video>

۳. تگ <picture>

این تگ با نمایش یک نسخه تصویری جایگزین برای دستگاه ها با اندازه های مختلف مثل موبایل و تبلت، به شما کمک می کند تصاویر را به صورت واکنشگرا یا همان رسپانسیو (responsive) نمایش دهید.

باید حاوی یک یا چند تگ <source> و یک تگ <img> باشد.

از تگ <img> فقط درصورتی استفاده می شود که دستگاه بازدید کننده با هیچ یک از تگ های <source> مطابقت نداشته باشد یا اینکه مرورگر از آن پشتیبانی نکند.

<picture>
   <source media="(min-width: 968px)" srcset="large_img.jpg">
   <source media="(min-width: 360px)" srcset="small_img.jpg">
   <img src="default_img.jpg" alt="avatar">
</picture>

۴. تگ <progress>

تگ <progress> پیشرفت انجام کار را نشان می دهد.

تگ <progress> نباید با تگ <meter> (که نشان دهنده یک سنجش است) اشتباه گرفته شود.

<progress value="63" max="100"></progress>

۵. تگ <meter>

می توانید از عنصر متر برای اندازه گیری داده ها در یک محدوده مشخص (یک سنجش) استفاده کنید.

این تگ را می توان با حداقل و حداکثر مقادیر یا با درصد نمایش داد.

<meter value="2" min="0" max="10">2 out of 10</meter>
یا
<meter value="0.6">60%</meter>

۶. تگ <map>

از برچسب <map> برای تعریف نقشه تصویری استفاده می شود.

نقشه های تصویری تصاویر جالبی با مناطق قابل کلیک هستند که می توانید آنها را به قسمت های دیگر سند یا سایر صفحات وب پیوند دهید.

در واقع نقشه تصویری همان تصویر است اما با قابلیت کلیک کردن.

تمام کاری که شما باید انجام دهید این است که مختصات X و Y را در عناصر موجود در <map> ذکر کنید.

برای مثال شما یک نقشه از منظومه شمسی ایجاد می کنید و مناطقی را برای هر سیاره مشخص می کنید و بازدیدکنندگان را به صفحه جداگانه ای برای هر سیاره ای که روی آنها کلیک می کنند می برید.

<img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth">
  <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars">
  <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn">
</map>

۷. صفت contenteditable

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

<p contenteditable="true">This is an editable paragraph.</p>

۸. پیشنهادات Input

با استفاده از این ترفند و با نمایش لیستی از پیشنهادات هنگام تایپ مقادیر ورودی، می توانید برای بازدیدکنندگان مواردی را پیشنهاد دهید تا راحت تر به جستجوی آنچه می خواهند، بپردازند.

<input type="text" list="planets">
<datalist id="planets">
    <option value="Mercury"></option>
    <option value="Venus"></option>
    <option value="Earth"></option>
    <option value="Mars"></option>
    <option value="Jupiter"></option>
    <option value="Saturn"></option>
    <option value="Uranus"></option>
    <option value="Neptune"></option>
</datalist>

۹. تگ <noscript>

محتوای داخل تگ <noscript> فقط وقتی JavaScript غیرفعال باشد، توسط مرورگر نمایش داده می شود.

این تگ زمانی استفاده می شود که وب سایت از جاوااسکریپت برای انجام کاری استفاده می کند.

<noscript><h2>JavaScript is disabled in your browser.</h2></noscript>

۱۰. Tableizer

این ترفند HTML نیست بلکه یک نرم افزار خارجی هست که برای نمایش داده ها در HTML استفاده می شود. مانند الگوهای صفحه گسترده Calc یا Excel. فقط باید سلول های خود را در Tableizer جای گذاری کنید، و این یک قطعه کد HTML برای جایگذاری در کد وب سایت شما ایجاد می کند. نتیجه یک جدول شسته و رفته است که می توانید جزئیات آن مانند رنگ پس زمینه را برای شخصی سازی ویرایش کنید.

۱۱. به بازدیدکنندگان اجازه دهید رنگ پس زمینه یا متن را تغییر دهند

برای شما غیرممکن است که با انتخاب رنگ خود همه را راضی کنید ، بنابراین استفاده از این ترفند یک مورد عالی برای خشنود کردن همه است

<select name="clr" onchange="document.bgColor=this.options[this.selectedIndex].value" size="1">
    <br>
    <option value="black">black
    <option value="orange">orange
    <option value="flamingred">fuschia
    <option value="lightyellow">light yellow
    <option value="green">green
    <option value="cyan">cyan
    <option value="yellow">yellow
    <option value="red">red
    <option value="white">white</option>
</select>&nbsp;&nbsp;Background Color

<br>
<select name="clr" onchange="document.fgColor=this.options[this.selectedIndex].value" size="1">
    <br>
    <option value="black">black
    <option value="orange">orange
    <option value="flamingred">fuschia
    <option value="lightyellow">light yellow
    <option value="cyan">cyan
    <option value="yellow">yellow
    <option value="red">red
    <option value="white">white</option>
</select>&nbsp;&nbsp;Text Color

۱۲. افزودن MetaData

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

فراموش نکنید که بقیه محتوای وب سایت خود را برای کاربران در موتورهای جستجو بهینه کنید تا به راحتی شما را پیدا کنند.

این تگ ها در بین تگ <head> قرار داده می شوند.

<meta name="description" content="Honar Systems is a website for web design.">
<meta name="keywords" content="honar systems, web design, wordpress" />

۱۳. فیلد hidden

HTMLفیلدی برای پنهان کردن مقادیر فرم هادارد. بازدید کننده نمی تواند چیزی را در یک قسمت پنهان تایپ کند و وقتی بازدید کننده فرم را ارسال می کند، مقدار فیلد به همراه داده های فرم به سرور ارسال می شود.

<form name="contact" action="http://www.mydomain.com/myformhandler.php" method="POST">
    <div align="center">
        <input type="text" size="25" value="Enter your name here!">
        <input type="hidden" name="Language" value="English">
    </div>
</form>

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

۱۴. Lazy Load

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

این کار در HTML با صفت loading انجام می شود. برای استفاده از این خاصیت، در تگ های img صفت loading را به صورت زیر قرار دهید.

<img src="image.png" loading="lazy" alt="متنی کوتاه درباره عکس" />

۱۵. قابلیت datalist

این قابلیت یا بهتر بگوییم، تگ HTML برای زمانی استفاده می شود مانند موتور جستجوها کاربر با وارد متن جستجو مواردی را پیشنهاد می دهد. برای استفاده از این قابلیت از کد زیر استفاده نمایید.

<input list="countries" name="country" id="country">

<datalist id="cuntries">
    <option value="ایران">
    <option value="انگلیس">
    <option value="آلمان">
    <option value="آمریکا">
    <option value="ژاپن">
    <option value="هند">
</datalist>

۱۶. تگ Base

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

<img src="https://honarsystems.ir/image.png" alt="متنی کوتاه درباره عکس" />

فقط نام عکس و یا کوتاه شده آدرس را وارد نمایید.

<img src="image.png" alt="متنی کوتاه درباره عکس" />

در این صورت از تگ base به صورت زیر استفاده می شود. این تگ مابین تگهای head در بالای صفحه قرار می گیرد.

<head>
    <base href="https://www.honarsystems.ir/" target="_blank">
</head>

به جای آدرس وب سایت ما، آدرس وب سایت خود را قرار دهید. البته از این روش زیاد استفاده نمی شود و بین طراحان وب سایت ها محبوبیت چندانی ندارد.

۱۷. رفرش صفحه به صورت اتوماتیک

گاهی نیاز هست که صفحه هر از چندگاهی دوباره بارگذاری شود. این ترفند از HTML بیشتر در وبسایت هایی استفاده می شود که داده های آنها هر لحظه بروزرسانی می شوند. برای مثال وب سایت صرافی ها که داده ها در لحظه بروز می شوند.

این کار امروزه با وجود تکنولوژی هایی مانند AJAX و React دیگر توصیه نمی شود. اما اگر خواهان استفاده از آن هستید از کد زیر کمک بگیرید.

<head>
    <meta http-equiv="refresh" content="4; URL='https://honarsystems.ir' />
</head>

به جای آدرس وب سایت ما، آدرس وب سایت خود را قرار دهید. این کد باعث می شود که صفحه هر ۴ ثانیه یکبار بروزرسانی شود.

۱۸. افزودن Tooltip برای عنوان

Tooltip مفهومی است که در HTML برای نشان دادن برخی اطلاعات اضافی در مورد عنصر انتخاب شده خاص استفاده می شود.

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

<span title="خوش آمدید!">Drag Your Mouse Over Me!</span>

نکات پایانی در مورد ترفندهای HTML

• همیشه و در همه جا تگ های HTML را ببندید. با اینکه امروزه مرورگرها از تگ های بسته نشده پشتیبانی می کنند اما بهتر است آنها را ببندید مانند <br/> و یا <img />
• از قرار دادن استایل inline خودداری نمایید و استایل دهی را به عهده فایل css بگذارید.
• از آدرس نسبی برای فایلها و عکسها استفاده نمایید. مانند

<img src="uploads/image.png" alt="متنی کوتاه درباره عکس" />

• قبل از انتشار کدهای HTML خود از ابزارهای اعتبارسنجی مانند W3C استفاده نمایید.
• تا جای ممکن از کامنت گذاری برای کدهای HTML اجتناب کنید.