سلام دوستان، صادق جعفری هستم و با قسمت دوم دوره آموزش HTML در خدمت شما هستم. در این بخش می‌خواهیم به مباحث جالب و کاربردی دیگری بپردازیم که به شما کمک می‌کنه تا بهتر بتونید صفحات وب رو طراحی کنید. شاید تا حالا براتون سوال شده باشه که تفاوت بین پسوند .htm و .html چیه یا اینکه چطور می‌شه از تگ‌های headline و پاراگراف به درستی استفاده کرد.
در این قسمت، نه تنها این موارد رو بررسی می‌کنیم، بلکه با تگ‌های br، لینک‌ها و تصاویر هم آشنا می‌شیم. همچنین به مفهوم تگ‌های تو در تو یا همون nesting می‌پردازیم و می‌بینیم که چطور می‌تونیم از این تکنیک برای سازماندهی بهتر کدهای HTML استفاده کنیم. علاوه بر این، درباره عناصر خالی (empty elements) صحبت می‌کنیم و متوجه می‌شیم که آیا زبان HTML به حروف کوچک و بزرگ حساسه یا نه. در نهایت، تگ center رو معرفی می‌کنیم که می‌تونید باهاش متن‌ها و عناصر دیگه رو وسط‌چین کنید. آماده‌اید؟ پس بریم که شروع کنیم!
تفاوت پسوندهای .htm و .html
پسوندهای .htm و .html هر دو برای فایل‌های HTML استفاده می‌شوند و از نظر عملکرد هیچ تفاوتی با یکدیگر ندارند. هر دو پسوند نشان‌دهنده‌ی فایل‌هایی هستند که حاوی کدهای HTML هستند و می‌توانند توسط مرورگرهای وب تفسیر و نمایش داده شوند. تفاوت اصلی بین این دو پسوند به تاریخچه و محدودیت‌های سیستم‌های عامل قدیمی برمی‌گردد. در اوایل دهه 1990، سیستم‌های عامل DOS و برخی نسخه‌های اولیه ویندوز تنها از پسوندهای سه‌حرفی برای فایل‌ها پشتیبانی می‌کردند. به همین دلیل، توسعه‌دهندگان وب مجبور بودند از پسوند .htm به جای .html استفاده کنند تا بتوانند فایل‌های خود را ذخیره و مدیریت کنند.
با گذشت زمان و پیشرفت تکنولوژی، سیستم‌های عامل مدرن این محدودیت را از بین بردند و امکان استفاده از پسوندهای بلندتر را فراهم کردند. به این ترتیب، پسوند .html به تدریج جایگزین .htm شد و امروزه بیشتر استفاده می‌شود. اما هنوز هم می‌توان فایل‌های HTML را با پسوند .htm یافت، به خصوص در پروژه‌های قدیمی‌تر یا در سیستم‌هایی که به دلایلی همچنان از این پسوند استفاده می‌کنند. از دیدگاه فنی، مرورگرها هیچ تفاوتی بین این دو پسوند قائل نمی‌شوند و هر دو را به عنوان فایل‌های HTML تفسیر می‌کنند. بنابراین، انتخاب بین .htm و .html بیشتر به ترجیحات شخصی یا نیازهای خاص پروژه برمی‌گردد و از نظر عملکردی هیچ تأثیری ندارد.
در نتیجه، اگر در حال شروع یک پروژه جدید هستید، توصیه می‌شود از پسوند .html استفاده کنید، زیرا استانداردتر و رایج‌تر است. اما اگر با فایل‌های قدیمی‌تر یا سیستم‌های خاصی کار می‌کنید که از پسوند .htm استفاده می‌کنند، نگران نباشید؛ هر دو پسوند به خوبی کار می‌کنند و محتوای HTML را به درستی نمایش می‌دهند.
آیا زبان html به حروف کوچک و بزرگ حساس است؟
زبان HTML به طور کلی به حروف کوچک و بزرگ حساس نیست، به این معنی که تگ‌های HTML و ویژگی‌های آنها را می‌توان با حروف کوچک یا بزرگ نوشت و مرورگرها بدون مشکل آنها را تفسیر می‌کنند. برای مثال، تگ <TITLE> و <title> هر دو یکسان تفسیر می‌شوند و نتیجه‌ی یکسانی دارند. این ویژگی HTML باعث می‌شود که نوشتن کدهای HTML برای توسعه‌دهندگان آسان‌تر و انعطاف‌پذیرتر باشد، زیرا نیاز نیست نگران رعایت دقیق حروف بزرگ و کوچک باشند.
با این حال، در عمل، بیشتر توسعه‌دهندگان و استانداردهای مدرن توصیه می‌کنند که تگ‌ها و ویژگی‌های HTML به صورت حروف کوچک نوشته شوند تا کدها یکدست‌تر و خواناتر باشند. علاوه بر این، زمانی که از XHTML استفاده می‌کنید، حروف بزرگ و کوچک اهمیت پیدا می‌کنند و باید همه تگ‌ها و ویژگی‌ها به صورت حروف کوچک نوشته شوند. بنابراین، برای حفظ سازگاری و پیروی از بهترین روش‌ها، توصیه می‌شود که همیشه از حروف کوچک برای نوشتن کدهای HTML استفاده کنید. این کار به شما کمک می‌کند که کدهای تمیزتر و منظم‌تری داشته باشید و از مشکلات احتمالی سازگاری در آینده جلوگیری کنید.
تگ های Headline
تگ‌های headline در HTML برای ایجاد عناوین و سرعنوان‌ها در صفحات وب استفاده می‌شوند. این تگ‌ها به مرورگرها می‌گویند که متن داخل آنها باید به صورت یک عنوان نمایش داده شود و اهمیت بیشتری نسبت به متن‌های دیگر دارد. HTML شش سطح از تگ‌های headline دارد که از <h1> تا <h6> متغیر هستند، به طوری که <h1> مهم‌ترین و بزرگ‌ترین عنوان و <h6> کوچک‌ترین و کم‌اهمیت‌ترین عنوان است. استفاده از این تگ‌ها به سازماندهی و ساختاردهی محتوای وب‌سایت کمک می‌کند و خوانایی آن را برای کاربران و موتورهای جستجو بهبود می‌بخشد.
تگ‌های headline به این صورت استفاده می‌شوند:
<!DOCTYPE html>
<html>
<head>
<title>Example of headline tags</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
در مثال بالا، هر تگ <h1> تا <h6> متن داخل خود را به عنوان یک عنوان با اندازه و اهمیت متفاوت نمایش می‌دهد. <h1> برای عنوان اصلی صفحه استفاده می‌شود و معمولاً بزرگ‌ترین و برجسته‌ترین عنوان است. این تگ باید تنها یک بار در هر صفحه استفاده شود تا اهمیت و هویت اصلی صفحه مشخص باشد. از تگ‌های <h2> تا <h6> برای عناوین فرعی و بخش‌های مختلف متن استفاده می‌شود. این تگ‌ها به ترتیب اهمیت و اندازه کوچک‌تر می‌شوند.
تگ های headline دارای چه attribute هایی هستند؟
تگ‌های headline (تگ‌های <h1> تا <h6>) در HTML می‌توانند شامل چندین attribute (ویژگی) باشند که برای سفارشی‌سازی و کنترل بیشتر بر روی نمایش و رفتار آنها استفاده می‌شوند. در زیر به برخی از مهم‌ترین و پرکاربردترین attributeها اشاره می‌کنیم:
1. id
ویژگی id برای اختصاص یک شناسه یکتا به هر تگ استفاده می‌شود. این شناسه می‌تواند برای استایل‌دهی با CSS یا برای اسکریپت‌نویسی با JavaScript مورد استفاده قرار گیرد.
<h1 id="main-title">This is heading 1</h1>
2. class
ویژگی class برای اختصاص یک یا چند کلاس CSS به تگ استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.
<h2 class="section-title">This is heading 2</h2>
3. style
ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به تگ استفاده می‌شود.
<h3 style="color: blue; font-size: 24px;">This is heading 3</h3>
4. lang
ویژگی lang برای تعیین زبان متن داخل تگ استفاده می‌شود. این ویژگی به مرورگرها و موتورهای جستجو کمک می‌کند تا زبان محتوای صفحه را تشخیص دهند.
<h4 lang="en">This is heading 4</h4>
5. title
ویژگی title توضیحات اضافی در مورد تگ فراهم می‌کند. وقتی کاربر موس را روی تگ قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.
<h5 title="heading5">This is heading 5</h5>
6. dir
ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.
<h6 dir="rtl">This is heading 6</h6>
مثال کاربردی با استفاده از attributeها
<!DOCTYPE html>
<html>
<head>
<title>Example of headline tags with attributes</title>
<style>
.highlight {
color: red;
}
</style>
</head>
<body>
<h1 id="main-title" class="highlight" style="font-size: 36px;" lang="fa" title="This is the main title">The main title of the article</h1>
<h2 class="section-title" dir="rtl">Part I: Introduction</h2>
<h3 style="color: blue;">Subsection 1.1: Background</h3>
</body>
</html>
در این مثال، از ویژگی‌های id, class, style, lang, title و dir برای سفارشی‌سازی تگ‌های headline استفاده شده است. این ویژگی‌ها به توسعه‌دهندگان امکان می‌دهند تا کنترل بیشتری بر روی نمایش و رفتار تگ‌های headline داشته باشند و صفحات وب را به صورت دلخواه سفارشی کنند.
تگ پاراگراف
تگ پاراگراف در HTML با استفاده از تگ <p> تعریف می‌شود و برای ایجاد و نمایش پاراگراف‌های متنی در صفحات وب به کار می‌رود. تگ <p> یکی از پراستفاده‌ترین تگ‌ها در HTML است، زیرا متن‌ها را به بخش‌های مجزا و قابل خواندن تقسیم می‌کند. مرورگرها به صورت پیش‌فرض یک خط فاصله بین پاراگراف‌ها ایجاد می‌کنند تا خوانایی متن افزایش یابد. تگ پاراگراف به ما این امکان را می‌دهد تا متن‌های طولانی را به بخش‌های کوچک‌تر و منطقی‌تر تقسیم کنیم، که باعث می‌شود محتوا به راحتی قابل فهم و خواندن باشد.
ساختار تگ پاراگراف بسیار ساده است و به شکل زیر می‌باشد:
<p>This is a simple paragraph.</p>هر متنی که بین تگ‌های باز <p> و بسته </p> قرار گیرد، به عنوان یک پاراگراف مستقل نمایش داده می‌شود.
تگ پاراگراف دارای چه attribute هایی است؟
تگ پاراگراف (<p>) در HTML می‌تواند شامل چندین attribute (ویژگی) باشد که برای سفارشی‌سازی و کنترل بیشتر بر روی نمایش و رفتار آن استفاده می‌شوند. در زیر به برخی از مهم‌ترین و پرکاربردترین attributeها اشاره می‌کنیم:
1. id
ویژگی id برای اختصاص یک شناسه یکتا به هر تگ استفاده می‌شود. این شناسه می‌تواند برای استایل‌دهی با CSS یا برای اسکریپت‌نویسی با JavaScript مورد استفاده قرار گیرد.
<p id="unique-paragraph">This is a paragraph with a unique identifier.</p>2. class
ویژگی class برای اختصاص یک یا چند کلاس CSS به تگ استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.
<p class="highlight">This is a paragraph with "highlight" class.</p>3. style
ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به تگ استفاده می‌شود.
<p style="color: blue; font-size: 20px;">این یک پاراگراف با استایل داخلی است.</p>4. lang
ویژگی lang برای تعیین زبان متن داخل تگ استفاده می‌شود. این ویژگی به مرورگرها و موتورهای جستجو کمک می‌کند تا زبان محتوای صفحه را تشخیص دهند.
<p lang="en">This paragraph is written in English.</p>5. title
ویژگی title توضیحات اضافی در مورد تگ فراهم می‌کند. وقتی کاربر موس را روی تگ قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.
<p title="Paragraph Title">This is a paragraph with title attribute.</p>6. dir
ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.
<p dir="rtl">This paragraph is written from right to left.</p>مثال کاربردی با استفاده از attributeها
<!DOCTYPE html>
<html>
<head>
<title>Example of paragraph tag with attributes</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p id="intro" class="highlight" style="font-size: 18px;" lang="fa" title="Introduction paragraph" dir="rtl">This is an introduction paragraph and has several features.</p>
</body>
</html>
تگ </br>
تگ </br> در HTML به منظور ایجاد یک خط جدید (خط شکسته) در متن استفاده می‌شود. این تگ یکی از تگ‌های خالی (empty elements) در HTML است، به این معنی که نیازی به تگ بسته ندارد و به صورت خودبسته (self-closing) عمل می‌کند. تگ </br> زمانی مفید است که بخواهیم متن را در چندین خط مجزا نمایش دهیم، بدون اینکه از تگ‌های پاراگراف <p> استفاده کنیم.
ساختار تگ </br> بسیار ساده است و به این صورت نوشته می‌شود:
<br/>استفاده از تگ </br>
تگ </br> برای ایجاد یک خط جدید در متن به کار می‌رود. به عنوان مثال، فرض کنید می‌خواهیم متنی را در دو خط مجزا نمایش دهیم:
<!DOCTYPE html>
<html>
<head>
<title>Example tag br</title>
</head>
<body>
<p>This is a line of text.<br/>This is the next line.</p>
<p>This is another line of text.<br/>This is the next line.</p>
</body>
</html>
در این مثال، تگ </br> باعث می‌شود تا متن "این خط بعدی است." در خط جدید نمایش داده شود.
موارد استفاده از تگ </br>
- شکستن خطوط در آدرس‌ها یا اشعار: تگ
</br>می‌تواند برای نمایش آدرس‌ها یا اشعار که به خطوط جداگانه نیاز دارند، استفاده شود.
<!DOCTYPE html>
<html>
<head>
<title>Example address with br tag</title>
</head>
<body>
<p>our address:<br/>Example Street, Test Alley,<br/>Plate 123, Unit 45</p>
</body>
</html>
- ایجاد فضاهای خالی در فرم‌ها: تگ
</br>می‌تواند برای جدا کردن فیلدهای فرم‌ها به کار رود.
<!DOCTYPE html>
<html>
<head>
<title>Example form with br tag</title>
</head>
<body>
<form>
Name: <input type="text" name="name"><br/>
Email: <input type="email" name="email"><br/>
Message: <textarea name="message"></textarea><br/>
<input type="submit" value="submit">
</form>
</body>
</html>
در این مثال، تگ‌های </br> فیلدهای فرم را به خطوط جداگانه می‌برند، که خوانایی فرم را بهبود می‌بخشند.
تگ </br> یک تگ خالی است و هیچ ویژگی اضافی ندارد. تنها عملکرد آن ایجاد یک خط جدید در متن است. با این حال، استفاده از تگ </br> باید با دقت و تنها در مواقع ضروری صورت گیرد، زیرا استفاده بیش از حد از آن می‌تواند منجر به مشکلات خوانایی و استایل‌دهی شود.
تگ </br> یک ابزار ساده و موثر برای ایجاد خطوط جدید در متن HTML است. با استفاده از این تگ، می‌توان به راحتی متن را به بخش‌های مجزا و خواناتر تقسیم کرد. استفاده مناسب از تگ </br> می‌تواند به بهبود ظاهر و خوانایی محتوای وب‌سایت کمک کند. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ </br> کمک کرده باشد.
تگ لینک
تگ لینک در HTML با استفاده از تگ <a> (که مخفف "anchor" به معنی لنگر است) تعریف می‌شود و برای ایجاد لینک‌های ارتباطی در صفحات وب استفاده می‌شود. این تگ یکی از پرکاربردترین و مهم‌ترین تگ‌ها در HTML است، زیرا به ما امکان می‌دهد تا صفحات وب را به یکدیگر مرتبط کنیم، کاربران را به منابع خارجی هدایت کنیم، و حتی نقاط مشخصی در همان صفحه را نشان دهیم. تگ لینک می‌تواند به صورت متنی یا تصویری باشد و به کاربران اجازه می‌دهد با کلیک کردن بر روی لینک به مقصد مورد نظر هدایت شوند.
ساختار تگ لینک به صورت زیر است:
<a href="URL">Link text</a>
ویژگی href (که مخفف "Hypertext REFerence" است) آدرس URL مقصد را مشخص می‌کند. متن بین تگ‌های باز و بسته <a> به عنوان لینک قابل کلیک نمایش داده می‌شود.
مثال ساده از تگ لینک
<!DOCTYPE html>
<html>
<head>
<title>Link tag example</title>
</head>
<body>
<p>To visit the Google site, <a href="https://www.google.com">click here</a>.</p>
</body>
</html>در این مثال، لینک متنی به سایت گوگل ایجاد شده است. وقتی کاربر بر روی متن "click here" کلیک می‌کند، به سایت گوگل هدایت می‌شود.
تگ لینک دارای چه attribute هایی است؟
تگ لینک (<a>) در HTML دارای چندین attribute (ویژگی) است که برای سفارشی‌سازی و کنترل بیشتر بر روی نمایش و رفتار لینک استفاده می‌شوند. در زیر به مهم‌ترین و پرکاربردترین attributeهای تگ لینک اشاره می‌کنیم:
1. href
ویژگی href (Hypertext Reference) آدرس مقصد لینک را مشخص می‌کند. این ویژگی ضروری‌ترین attribute برای تگ لینک است.
<a href="https://www.example.com">Link to the example site</a>2. target
ویژگی target مشخص می‌کند که لینک در کجا باز شود. مقدار _blank باعث می‌شود لینک در یک تب جدید باز شود. سایر مقادیر عبارتند از _self (پیش‌فرض، لینک را در همان فریم یا تب باز می‌کند)، _parent (لینک را در فریم والد باز می‌کند)، و _top (لینک را در کل پنجره مرورگر باز می‌کند).
<a href="https://www.example.com" target="_blank">Open in new tab</a>3. title
ویژگی title توضیحات اضافی در مورد لینک فراهم می‌کند. وقتی کاربر موس را روی لینک قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.
<a href="https://www.example.com" title="This link redirects to the example site">Link to the example site</a>4. id
ویژگی id یک شناسه یکتا به لینک اختصاص می‌دهد. این شناسه می‌تواند برای استایل‌دهی با CSS یا برای اسکریپت‌نویسی با JavaScript استفاده شود.
<a href="https://www.example.com" id="unique-link">Link with unique ID</a>5. class
ویژگی class برای اختصاص یک یا چند کلاس CSS به لینک استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به لینک‌ها استفاده شوند.
<a href="https://www.example.com" class="highlight">Link with specific style class</a>6. rel
ویژگی rel رابطه بین سند فعلی و سند مقصد را مشخص می‌کند. مقادیر متداول این ویژگی شامل noopener، noreferrer، nofollow و غیره می‌باشد.
<a href="https://www.example.com" rel="noopener noreferrer">Link with rel feature</a>7. download
ویژگی download به کاربر اجازه می‌دهد تا به جای باز کردن لینک، فایل مقصد را دانلود کند. این ویژگی می‌تواند نامی برای فایل دانلود شده پیشنهاد کند.
<a href="path/to/file.pdf" download="example.pdf">Download the PDF file</a>8. hreflang
ویژگی hreflang زبان هدف لینک را مشخص می‌کند. این ویژگی به موتورهای جستجو کمک می‌کند تا زبان محتوای لینک شده را تشخیص دهند.
<a href="https://www.example.com" hreflang="en">Link to the example site (English)</a>مثال کاربردی با استفاده از attributeهای مختلف
<!DOCTYPE html>
<html>
<head>
<title>An example of a link tag with different attributes</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<a href="https://www.example.com" id="unique-link" class="highlight" target="_blank" title="This link redirects to the example site" rel="noopener noreferrer" hreflang="en" download="example.pdf">Link to the example site</a>
</body>
</html>در این مثال، از ویژگی‌های href, id, class, target, title, rel, hreflang و download برای سفارشی‌سازی لینک استفاده شده است. این ویژگی‌ها به توسعه‌دهندگان امکان می‌دهند تا کنترل بیشتری بر روی نمایش و رفتار لینک‌ها داشته باشند و صفحات وب را به صورت دلخواه سفارشی کنند.
لینک به یک قسمت مشخص در همان صفحه
با استفاده از ویژگی id، می‌توان به یک قسمت مشخص در همان صفحه لینک داد.
<!DOCTYPE html>
<html>
<head>
<title>Link to a specific section</title>
</head>
<body>
<p>To go to the contact us section, <a href="#contact">click here</a>.</p>
<h2>Other sections</h2>
<p>Example text...</p>
<h2 id="contact">Contact us</h2>
<p>Here is our contact information.</p>
</body>
</html>در این مثال، وقتی کاربر روی لینک "click here" کلیک می‌کند، به بخش "تماس با ما" در همان صفحه هدایت می‌شود.
لینک تصویری
علاوه بر لینک‌های متنی، می‌توان از تصاویر نیز به عنوان لینک استفاده کرد. برای این کار، تگ <img> را در داخل تگ <a> قرار می‌دهیم.
<!DOCTYPE html>
<html>
<head>
<title>Example of a video link</title>
</head>
<body>
<p>To visit the Google site, click on the image below:</p>
<a href="https://www.google.com">
<img src="https://via.placeholder.com/150" alt="google">
</a>
</body>
</html>در این مثال، تصویر با آدرس "https://via.placeholder.com/150" به عنوان لینک به سایت گوگل استفاده شده است.
تگ لینک (<a>) یکی از پرکاربردترین تگ‌ها در HTML است که به ما امکان می‌دهد تا صفحات وب را به یکدیگر مرتبط کنیم و کاربران را به منابع خارجی هدایت کنیم. با استفاده از ویژگی‌های مختلفی مانند href, target, title و id, می‌توان لینک‌های متنی و تصویری را به شکلی کاربردی و جذاب ایجاد کرد. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ لینک کمک کرده باشد.
تگ area و تگ map
تگ‌های map و area در HTML ابزاری قدرتمند برای ایجاد نقشه‌های تصویری تعاملی هستند. این تگ‌ها به شما این امکان را می‌دهند که روی یک تصویر، نواحی قابل کلیک تعریف کنید که هر یک از این نواحی می‌تواند به آدرس اینترنتی (URL) مشخصی لینک شود. این روش به‌ویژه برای تصاویر پیچیده‌ای که دارای چندین بخش هستند و هر بخش نیاز به لینک جداگانه دارد، بسیار مفید است.
تگ map
تگ map برای تعریف یک نقشه تصویری استفاده می‌شود. این تگ مجموعه‌ای از نواحی (area) را که هر کدام مشخصات و عملکرد خاص خود را دارند، در بر می‌گیرد.
ساختار تگ map
<map name="myMap">
<!-- Different areas of the map are defined here -->
</map>ویژگی name برای تعیین نام نقشه تصویری استفاده می‌شود که با ویژگی usemap در تگ img مرتبط می‌شود.
تگ area
تگ area برای تعریف یک ناحیه قابل کلیک روی نقشه تصویری استفاده می‌شود. این نواحی می‌توانند اشکال مختلفی داشته باشند و هر ناحیه می‌تواند به URL خاصی لینک شود.
ساختار تگ area
<area shape="rect" coords="x1,y1,x2,y2" href="url" alt="description">انواع اشکال در تگ area
تگ area می‌تواند نواحی با اشکال مختلفی ایجاد کند:
- مستطیل (
rect) - دایره (
circle) - چندضلعی (
poly)
تعریف ناحیه مستطیلی
برای ایجاد یک ناحیه مستطیلی از shape="rect" و مختصات (بالا چپ و پایین راست) استفاده می‌کنیم.
<area shape="rect" coords="34,44,270,350" href="rectangle.html" alt="Rectangular area">
تعریف ناحیه دایره‌ای
برای ایجاد یک ناحیه دایره‌ای از shape="circle" و مختصات (مرکز و شعاع) استفاده می‌کنیم.
<area shape="circle" coords="377,300,75" href="circle.html" alt="Circular area">
تعریف ناحیه چندضلعی
برای ایجاد یک ناحیه چندضلعی از shape="poly" و مجموعه‌ای از مختصات رأس‌ها استفاده می‌کنیم.
<area shape="poly" coords="130,150,220,210,170,250" href="polygon.html" alt="Polygonal area">
توضیحات تکمیلی و نکات مهم
- ویژگی
alt: استفاده از ویژگیaltدر تگareaبرای دسترسی بهتر و تجربه کاربری بهینه اهمیت دارد. این ویژگی توضیحات مختصری در مورد ناحیه می‌دهد که در صورت ناتوانی کاربر در دیدن تصویر یا استفاده از صفحه‌خوان، مفید است. - هماهنگی تگ
mapوimg: نام مشخص شده در ویژگیnameتگmapباید با نام ذکر شده در ویژگیusemapتگimgتطابق داشته باشد. نام نقشه با پیشوند#درusemapاستفاده می‌شود. - شکل چندضلعی: در تگ
areaبرای شکل چندضلعی، مختصات باید به صورت زوج مرتب و جدا شده با کاما نوشته شوند، به طوری که هر دو عدد نشان‌دهنده یک رأس از چندضلعی باشند.
تصاویر حساس به موس
تصاویر حساس به موس یکی از قابلیت‌های جذاب و مفید HTML است که به کاربر امکان تعامل با تصاویر را می‌دهد. با استفاده از این ویژگی، می‌توانید نقشه‌های تصویری ایجاد کنید که کاربر با کلیک روی بخش‌های مختلف تصویر به بخش‌های متفاوتی از سایت هدایت شود. این قابلیت‌ها با استفاده از دو ویژگی اصلی ismap و usemap در تگ img امکان‌پذیر می‌شود. در ادامه به توضیح هر یک از این ویژگی‌ها و نحوه استفاده از آنها با مثال می‌پردازیم.
ویژگی ismap
ویژگی ismap برای ساختن نقشه تصویری سمت سرور استفاده می‌شود. در این حالت، وقتی کاربر روی یک نقطه از تصویر کلیک می‌کند، مختصات نقطه کلیک شده به سرور ارسال می‌شود و سرور می‌تواند بر اساس این اطلاعات اقدام کند.
ساختار ismap
- تگ
imgرا با ویژگیismapتعریف می‌کنید. - تگ
aرا به عنوان والدimgقرار می‌دهید و آدرس سرور را درhrefمی‌نویسید.
<a href="process-map.php">
<img src="image-map.jpg" alt="Image map" ismap>
</a>
در این مثال، وقتی کاربر روی تصویر کلیک می‌کند، مختصات کلیک به صفحه process-map.php ارسال می‌شود. مختصات به صورت ?x=coordX&y=coordY به URL اضافه می‌شوند، که coordX و coordY موقعیت افقی و عمودی نقطه کلیک شده است.
مثال عملی
فرض کنید تصویری از نقشه جهان دارید و می‌خواهید کاربر با کلیک روی هر نقطه، اطلاعات مربوط به آن منطقه را دریافت کند. با استفاده از ismap، سرور می‌تواند مختصات کلیک شده را پردازش و اطلاعات مورد نظر را به کاربر نمایش دهد.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Image map</title>
</head>
<body>
<a href="world-map.php">
<img src="world-map.jpg" alt="world map" ismap>
</a>
</body>
</html>
در این مثال، وقتی روی تصویر کلیک می‌شود، اطلاعات مختصات به world-map.php ارسال می‌شود که در آنجا می‌توان بر اساس مختصات ارسالی پاسخ مناسب را آماده کرد.
ویژگی usemap
ویژگی usemap برای ساختن نقشه تصویری سمت کاربر استفاده می‌شود. در این حالت، نواحی مختلفی روی تصویر تعریف می‌شوند که هر ناحیه می‌تواند کاربر را به لینک خاصی هدایت کند یا عملی را انجام دهد.
ساختار usemap
- تگ
imgرا با ویژگیusemapو ارجاع به یک نقشه تعریف می‌کنید. - تگ
mapرا به عنوان نقشه تصویری تعریف می‌کنید و نواحی مختلف را با استفاده از تگareaمشخص می‌کنید.
<img src="image-map.jpg" alt="Image map" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="34,44,270,350" href="page1.html" alt="Section 1">
<area shape="circle" coords="377,300,75" href="page2.html" alt="Section 2">
<area shape="poly" coords="500,200,520,250,540,230" href="page3.html" alt="Section 3">
</map>
در این مثال، یک نقشه تصویری تعریف شده است که شامل سه ناحیه مختلف است: یک ناحیه مستطیلی که کاربر را به page1.html هدایت می‌کند، یک ناحیه دایره‌ای که کاربر را به page2.html می‌برد، و یک ناحیه چند ضلعی که کاربر را به page3.html هدایت می‌کند.
مثال عملی
فرض کنید یک نقشه شهری دارید و می‌خواهید کاربر با کلیک روی مناطق مختلف شهر به صفحات مربوط به هر منطقه هدایت شود.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>city map</title>
</head>
<body>
<img src="city-map.jpg" alt="city map" usemap="#citymap">
<map name="citymap">
<area shape="rect" coords="34,44,270,350" href="district1.html" alt="Region 1">
<area shape="circle" coords="377,300,75" href="district2.html" alt="Region 2">
<area shape="poly" coords="500,200,520,250,540,230" href="district3.html" alt="Region 3">
</map>
</body>
</html>
در این مثال، تصویر یک نقشه شهری است که با استفاده از usemap به سه ناحیه مختلف تقسیم شده است. هر ناحیه یک لینک مجزا دارد که کاربر را به صفحه مربوط به آن منطقه هدایت می‌کند.
تفاوت ismap و usemap
ismap: برای نقشه‌های تصویری سمت سرور استفاده می‌شود. مختصات کلیک به سرور ارسال می‌شود و سرور بر اساس مختصات دریافتی تصمیم‌گیری می‌کند.usemap: برای نقشه‌های تصویری سمت کاربر استفاده می‌شود. نواحی از پیش تعریف شده به کاربر لینک می‌دهند و کاربر را به صفحات مختلف هدایت می‌کنند.
تگ </img>
تگ </img> در HTML برای نمایش تصاویر در صفحات وب استفاده می‌شود. این تگ یکی از تگ‌های خالی (self-closing) است، به این معنی که نیازی به تگ بسته ندارد و به تنهایی می‌تواند یک تصویر را نمایش دهد. تگ </img> به شما امکان می‌دهد تا تصاویر مختلفی را به صفحه وب خود اضافه کنید، از جمله تصاویر ثابت، پویا، و حتی تصاویر پس‌زمینه. تصاویر نقش مهمی در جذابیت و تعامل کاربران با وب‌سایت‌ها دارند و می‌توانند به بهبود تجربه کاربری و افزایش بازدید کمک کنند.
ساختار تگ </img> بسیار ساده است و به صورت زیر نوشته می‌شود:
<img src="URL" alt="Alternative text"/>
ویژگی src (مخفف source) آدرس تصویر را مشخص می‌کند و ویژگی alt (مخفف alternative text) متن جایگزینی است که در صورت عدم نمایش تصویر به کاربر نمایش داده می‌شود.
مثال ساده از تگ </img>
<!DOCTYPE html>
<html>
<head>
<title>Example of the img tag</title>
</head>
<body>
<img src="https://via.placeholder.com/150" alt="Sample image"/>
</body>
</html>
در این مثال، یک تصویر با آدرس "https://via.placeholder.com/150" به صفحه وب اضافه شده است. اگر به هر دلیلی تصویر نمایش داده نشود، متن "نمونه تصویر" به عنوان جایگزین نمایش داده می‌شود.
ترکیب تگ </img> با تگ‌های دیگر
می‌توان تگ </img> را با سایر تگ‌های HTML ترکیب کرد تا محتوای غنی‌تری ایجاد شود. برای مثال، ترکیب تگ </img> با تگ <a> برای ایجاد لینک تصویری:
<!DOCTYPE html>
<html>
<head>
<title>Example of a video link</title>
</head>
<body>
<a href="https://www.example.com">
<img src="https://via.placeholder.com/150" alt="Sample image"/>
</a>
</body>
</html>
در این مثال، تصویر به عنوان یک لینک به سایت "www.example.com" استفاده شده است.
تگ </img> دارای چه attribute هایی است؟
تگ </img> دارای attributeهای مختلفی است که برای سفارشی‌سازی و کنترل بیشتر بر روی نمایش و رفتار تصویر استفاده می‌شوند. در زیر به برخی از مهم‌ترین و پرکاربردترین attributeهای تگ </img> اشاره می‌کنیم:
src
ویژگی src آدرس تصویر را مشخص می‌کند. این ویژگی ضروری‌ترین attribute برای تگ </img> است.
<img src="https://via.placeholder.com/150" alt="Sample image"/>
alt
ویژگی alt متن جایگزین تصویر را مشخص می‌کند. این ویژگی برای دسترسی بهتر و بهینه‌سازی SEO مهم است.
<img src="https://via.placeholder.com/150" alt="Sample image"/>
width و height
ویژگی‌های width و height عرض و ارتفاع تصویر را مشخص می‌کنند.
<img src="https://via.placeholder.com/150" alt="Sample image" width="300" height="200"/>
title
ویژگی title توضیحات اضافی در مورد تصویر فراهم می‌کند که به صورت ابزارک نمایش داده می‌شود.
<img src="https://via.placeholder.com/150" alt="Sample image" title="This is a sample image"/>
style
ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به تصویر استفاده می‌شود.
<img src="https://via.placeholder.com/150" alt="Sample image" style="border: 2px solid red;"/>
longdesc
ویژگی longdesc لینک به یک صفحه خارجی را فراهم می‌کند که توضیحات طولانی‌تر در مورد تصویر دارد.
<img src="https://via.placeholder.com/150" alt="Sample image" longdesc="description.html"/>
مثال جامع
<!DOCTYPE html>
<html>
<head>
<title>Example of img tag with different features</title>
<style>
.highlight {
border: 3px solid blue;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/150" alt="Sample image" title="This is a sample image" width="300" height="200" class="highlight" style="border-radius: 10px;"/>
</body>
</html>
در این مثال، از ویژگی‌های src, alt, title, width, height, class و style برای سفارشی‌سازی تصویر استفاده شده است. این ویژگی‌ها به توسعه‌دهندگان امکان می‌دهند تا کنترل بیشتری بر روی نمایش و رفتار تصاویر داشته باشند و صفحات وب را به صورت دلخواه سفارشی کنند.
تگ‌های تو در تو (قانون Nesting) در HTML
در HTML، تگ‌های تو در تو (Nesting) به معنای قرار دادن یک تگ HTML در داخل تگ دیگر است. این رویکرد به ما امکان می‌دهد تا ساختارهای پیچیده‌تری ایجاد کنیم و محتوای وب را به صورت سازماندهی‌شده‌تر و خواناتری نمایش دهیم. استفاده صحیح از قانون Nesting باعث می‌شود که کدهای HTML به درستی تفسیر شوند و صفحه وب به شکلی که انتظار می‌رود نمایش داده شود. با این حال، رعایت ترتیب صحیح تگ‌ها در Nesting بسیار مهم است تا از بروز مشکلات و خطاهای احتمالی جلوگیری شود.
قوانین Nesting
برای استفاده صحیح از تگ‌های تو در تو، باید قوانین Nesting را رعایت کرد:
- تگ‌ها باید به درستی باز و بسته شوند.
- تگ‌های والد باید شامل تگ‌های فرزند به صورت کامل باشند.
- هر تگ HTML باید در مکان مناسب خود قرار گیرد تا صفحه به درستی نمایش داده شود.
مثال ساده از Nesting
در این مثال، از تگ‌های تو در تو برای ایجاد یک لیست با پاراگراف‌های داخل هر آیتم استفاده می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>Example of nested tags</title>
</head>
<body>
<ul>
<li>
<p>This is a paragraph inside a list item.</p>
</li>
<li>
<p>This is another paragraph inside the list item.</p>
</li>
</ul>
</body>
</html>
در این مثال، تگ‌های <p> به درستی داخل تگ‌های <li> قرار گرفته‌اند و تگ‌های <li> نیز به درستی داخل تگ <ul> قرار دارند. این ساختار Nested به مرورگرها کمک می‌کند تا محتوا را به صورت صحیح نمایش دهند.
Nesting در عناصر بلوکی و درون‌خطی
تگ‌های HTML به دو دسته اصلی تقسیم می‌شوند: عناصر بلوکی (Block-level elements) و عناصر درون‌خطی (Inline elements). عناصر بلوکی مانند <div>, <p>, <h1> و <ul> فضای یک بلوک کامل را اشغال می‌کنند و از خط جدید شروع می‌شوند. عناصر درون‌خطی مانند <a>, <span>, <strong> و <em> تنها به اندازه محتوای خود فضا اشغال می‌کنند و در خط جاری قرار می‌گیرند.
مثال از Nesting عناصر بلوکی و درون‌خطی
در این مثال، از عناصر بلوکی و درون‌خطی در داخل یکدیگر استفاده می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>Nesting example of block and inline elements</title>
</head>
<body>
<div>
<h1>Main title</h1>
<p>This is a paragraph that contains <a href="https://example.com">a link</a> and <strong>bold text</strong> .</p>
</div>
</body>
</html>
در این مثال، تگ‌های درون‌خطی <a> و <strong> داخل تگ بلوکی <p> قرار گرفته‌اند و تگ‌های بلوکی <h1> و <p> نیز داخل تگ بلوکی <div> قرار دارند. این ساختار Nested به مرورگرها کمک می‌کند تا محتوا را به صورت صحیح و منظم نمایش دهند.
Nesting نادرست
در این مثال، نحوه نادرست Nesting را نشان می‌دهیم که باعث بروز خطا در نمایش صفحه می‌شود:
<!DOCTYPE html>
<html>
<head>
<title>Incorrect nesting example</title>
</head>
<body>
<p>This is a paragraph that contains <div>An incorrect block element</div> .</p>
</body>
</html>
در این مثال، تگ بلوکی <div> داخل تگ درون‌خطی <p> قرار گرفته است که باعث بروز خطا و نمایش نادرست صفحه می‌شود. برای جلوگیری از این مشکلات، باید همیشه از Nesting صحیح استفاده کرد و تگ‌های بلوکی و درون‌خطی را به درستی در داخل یکدیگر قرار داد.
تگ‌های تو در تو (Nesting) در HTML به ما امکان می‌دهند تا ساختارهای پیچیده و سازماندهی‌شده‌تری برای صفحات وب ایجاد کنیم. استفاده صحیح از قوانین Nesting باعث می‌شود که کدهای HTML به درستی تفسیر شوند و صفحات وب به شکلی که انتظار می‌رود نمایش داده شوند. با رعایت اصول Nesting و استفاده از CSS برای استایل‌دهی، می‌توان صفحات وب زیبا و کارآمدی ایجاد کرد. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ‌های تو در تو در HTML کمک کرده باشد.
عناصر خالی (Empty Elements) در HTML
عناصر خالی (Empty Elements) در HTML تگ‌هایی هستند که هیچ محتوایی بین تگ باز و بسته آنها قرار نمی‌گیرد. به عبارت دیگر، این تگ‌ها تنها از تگ باز تشکیل شده‌اند و نیازی به تگ بسته ندارند. این عناصر معمولاً برای درج محتوای مستقل مانند خطوط افقی، خط شکسته، یا تصاویر به کار می‌روند. استفاده از عناصر خالی می‌تواند کدنویسی HTML را ساده‌تر و خواناتر کند، زیرا این تگ‌ها نیازی به بسته شدن ندارند و به صورت خودبسته (self-closing) عمل می‌کنند.
مثال‌هایی از عناصر خالی
در زیر به برخی از پرکاربردترین عناصر خالی در HTML اشاره می‌کنیم و نحوه استفاده از آنها را توضیح می‌دهیم.
تگ </br>
تگ </br> برای ایجاد یک خط جدید در متن به کار می‌رود. این تگ بسیار ساده است و نیازی به بسته شدن ندارد.
<!DOCTYPE html>
<html>
<head>
<title>Example tag br</title>
</head>
<body>
<p>This is a line of text.<br/>This is the next line.</p>
</body>
</html>
در این مثال، تگ </br> باعث می‌شود تا متن "این خط بعدی است." در خط جدید نمایش داده شود.
تگ </hr>
تگ </hr> برای ایجاد یک خط افقی در صفحه استفاده می‌شود که معمولاً برای جدا کردن بخش‌های مختلف محتوا به کار می‌رود.
<!DOCTYPE html>
<html>
<head>
<title>Example tag hr</title>
</head>
<body>
<p>This text is before the horizontal line.</p>
<hr/>
<p>This text is after the horizontal line.</p>
</body>
</html>
در این مثال، تگ </hr> یک خط افقی بین دو پاراگراف ایجاد می‌کند.
تگ </img>
تگ </img> برای نمایش تصاویر در صفحه وب استفاده می‌شود. این تگ شامل ویژگی‌های src و alt است که به ترتیب آدرس تصویر و متن جایگزین را مشخص می‌کنند.
<!DOCTYPE html>
<html>
<head>
<title>Example tag img</title>
</head>
<body>
<img src="https://via.placeholder.com/150" alt="Sample image"/>
</body>
</html>
در این مثال، تصویر با آدرس "https://via.placeholder.com/150" به صفحه وب اضافه شده است.
تگ </input>
تگ </input> برای ایجاد فیلدهای ورودی در فرم‌ها استفاده می‌شود. این تگ می‌تواند انواع مختلفی داشته باشد مانند متن، گذرواژه، دکمه‌ها و غیره.
<!DOCTYPE html>
<html>
<head>
<title>Example tag input</title>
</head>
<body>
<form>
Name: <input type="text" name="name"/><br/>
Email: <input type="email" name="email"/><br/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
در این مثال، فیلدهای ورودی برای نام، ایمیل و دکمه ارسال فرم ایجاد شده‌اند.
تگ </meta>
تگ </meta> برای ارائه اطلاعات متا در مورد سند HTML استفاده می‌شود، مانند اطلاعات کدگذاری کاراکترها، توضیحات صفحه و کلمات کلیدی.
<!DOCTYPE html>
<html>
<head>
<title>Example tag meta</title>
<meta charset="UTF-8"/>
<meta name="description" content="This is an example of a meta tag."/>
</head>
<body>
<p>This is a web page with a meta tag.</p>
</body>
</html>
در این مثال، تگ‌های </meta> اطلاعات متا را در قسمت <head> صفحه HTML ارائه می‌دهند.
عناصر خالی (Empty Elements) در HTML نقش مهمی در ساختاردهی و نمایش محتوای وب دارند. این تگ‌ها به دلیل ساده بودن و نیاز نداشتن به تگ بسته، کدنویسی را آسان‌تر و خواناتر می‌کنند. از پرکاربردترین عناصر خالی می‌توان به تگ‌های </br/>, <hr/>, <img/>, <input> و </meta> اشاره کرد که هر کدام کاربرد خاصی در صفحات وب دارند. استفاده صحیح از این عناصر می‌تواند به بهبود تجربه کاربری و طراحی وب‌سایت‌های حرفه‌ای کمک کند. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از عناصر خالی در HTML کمک کرده باشد.
خب دوستان، به پایان قسمت دوم از دوره آموزش HTML رسیدیم. تو این بخش با تفاوت پسوندهای .htm و .html آشنا شدیم و یاد گرفتیم که چطور از تگ‌های headline برای عناوین، تگ پاراگراف <p> برای متن‌ها و تگ </br> برای ایجاد خطوط جدید استفاده کنیم. همچنین نحوه استفاده از تگ لینک <a> برای ایجاد لینک‌های داخلی و خارجی و تگ تصویر </img> برای اضافه کردن تصاویر به صفحه وب رو بررسی کردیم.
در ادامه، مفهوم تگ‌های تو در تو (Nesting) رو یاد گرفتیم و دیدیم چطور می‌تونیم تگ‌ها رو به درستی داخل هم قرار بدیم. به عناصر خالی (empty elements) مثل </br/>, <hr/>, <img> و </input> پرداختیم و فهمیدیم که HTML به حروف کوچک و بزرگ حساس نیست، ولی بهتره برای استاندارد بودن کدها از حروف کوچک استفاده کنیم. امیدوارم این بخش براتون مفید بوده باشه و بتونید به راحتی از این تگ‌ها در پروژه‌هاتون استفاده کنید. تا قسمت بعدی، موفق و پیروز باشید!
صادق جعفری
از کودکی به کامپیوتر و دنیای دیجیتال علاقه داشتم، به همین دلیل ترک تحصیل کردم و تمام تلاش خودم را صرفا برای یادگیری کامپیوتر، طراحی، برنامه نویسی و ... به کار گرفتم. در کنار مشاغل مختلفی که مجبور به انجامشان بودم برنامه نویسی را یاد گرفتم و از سال 1390 وارد بازار کار شدم و همیشه در تلاش هستم تا چالش های روبرو را با موفقیت پشت سر بگذارم.
شبکه های اجتماعی من