آموزش مقدماتی HTML و آشنایی با مهم‌ترین تگ‌ها (بخش ۲)

در بخش قبلی این مقاله به معرفی تگ‌های مهم و پرکاربرد HTML پرداختیم. آشنایی با تگ‌های مهم برای کسانی که می‌خواهند طراحی وب را از پایه آغاز کنند، ضروری و بسیار مفید است.

در این مقاله به معرفی چند تگ مهم و کاربردی دیگر می‌پردازیم. با ما باشید.

برای آشنایی با مقدمات HTML‌ و تعدادی از مهم‌ترین تگ‌ها، بخش اول این مقاله را مطالعه فرمایید:

<strong> برای نوشتن متن ضخیم یا بولد

برای نوشتن متن به صورتی که درشت‌تر و متمایز باشد، می‌توانید اندازه‌ی فونت را افزایش بدهید یا از هدینگ‌های درشت مثل h1 استفاده کنید. روش دیگر این است که کلمات را Bold کنید. برای این مهم از تگ strong استفاده می‌شود. فراموش نکنید که تگ را با استفاده از </strong> ببندید. به نمونه‌ی زیر توجه کنید:

<strong>متن درشت و مهم با فونتی با سایز عادی</strong>

نتیجه‌ی استفاده از کد فوق در صفحه، به صورت زیر خواهد بود:

متن درشت و مهم با فونتی با سایز عادی

همان‌طور که مشاهده می‌کنید اندازه‌ی فونت معمولی است اما ضخامت بیشتر از حالت عادی است. البته می‌توانید ضخامت را با مشخص کردن استایل تگ strong در CSS، بیشتر یا کمتر و حتی مثل متن معمولی تنظیم کنید!

دقت کنید که استفاده از تگ <b> در گذشته متداول بوده است و هنوز هم در اغلب مرورگرها این تگ مشابه تگ strong عمل می‌کند اما ممکن است در همه‌ی مرورگرها پشتیبانی نشود چرا که استانداردی قدیمی است.

<em> برای متن ایتالیک یا کج

برای تأکید می‌توانید به جای بولد کردن متن، از تگ em استفاده کنید. این تگ موجب مورب یا ایتالیک شدن متن می‌شود. البته می‌توانید با استفاده از CSS، استایل متنی که با این تگ در صفحه ذکر شده را به راحتی تغییر بدهید.

<em>متن مورب یا ایتالیک</em>

نتیجه‌ی استفاده از کد فوق در HTML و بدون دستکاری استایل از طریق CSS، به شکل زیر است:

متن مورب یا ایتالیک

چند سال پیش برای ایتالیک کردن از تگ <i> استفاده می‌شد که تدریجاً کنار گذاشته می‌شود و لذا بهتر است از این تگ استفاده نکنید.

<a> برای ایجاد لینک در صفحه سایت

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

یک لینک ساده به صورت زیر ساخته می‌شود:

<a href="//www.it-planet.ir">رفتن به صفحه‌ی اصلی سیاره‌ی آی‌تی</a>

مشخصه‌ی href آدرس صفحه یا URL است و متن لینک نیز بین <a> و </a> قرار می‌گیرد. نتیجه‌ی استفاده از کد فوق به صورت زیر است:

رفتن به صفحه‌ی اصلی سیاره‌ی آی‌تی

به جای لینک صفحات سایت، می‌توانید لینک دانلود فایل‌ها یا لینک به عکس‌ها، صفحات سایت‌های دیگر و غیره را به همین صورت قرار بدهید. کافی است URL موردنظر را در href ذخیره کنید.

تگ a سه مشخصه‌ی مهم دیگر نیز دارد:

• title برای ذکر کردن عنوان لینک که با مکث کردن روی لینک به صورت Tooltip نمایان می‌شود.
• target یا مقصد که مشخص‌کننده‌ی این است که لینک می‌بایست در تب فعلی باز شود یا در تب جدید
• rel که برای مشخص کردن ماهیت و ارتباط لینک استفاده می‌شود.

اگر بخواهید لینک در تب جدید باز شود، می‌بایست از target="_blank" استفاده کنید. برای لینک دادن به آدرس‌هایی که تأیید نمی‌کنید و نباید با بی‌احتیاطی باز شود، می‌توانید از rel="noopener" استفاده کنید. برای لینک دادن به سایت‌ها به صورتی که ارزش سئو و در واقع بک‌لینک کمی داشته باشد، می‌توانید از rel="nofollow" استفاده کنید.

<a href="//www.it-planet.ir" target="_blank" rel="noopener noreferrer">رفتن به صفحه‌ی اصلی سیاره‌ی آی‌تی در تب جدید</a>

نتیجه‌ی کد فوق به صورت زیر است که با کلیک روی آن، آدرس در تب جدید باز می‌شود.

رفتن به صفحه‌ی اصلی سیاره‌ی آی‌تی در تب جدید

برای تول‌تیپ که عنوان و توضیح کوتاه لینک است، می‌توانید از تگ Title استفاده کنید، مثل نمونه‌ی زیر:

<a href="//www.it-planet.ir" target="_blank" title="ToolTip" rel="noopener noreferrer">رفتن به صفحه‌ی اصلی سیاره‌ی آی‌تی با تول‌تیپ</a>

و نتیجه لینک زیر است که با مکث روی آن، عبارت Tooltip نمایش داده می‌شود.

رفتن به صفحه‌ی اصلی سیاره‌ی آی‌تی با تول‌تیپ

برای اطلاعات بیشتر در مورد بک‌لینک فالو و نوفالو به مقاله‌ی زیر مراجعه فرمایید:

<img> و تصویر در صفحه‌ی وب

برای قرار دادن تصویر در صفحات وب، دو راهکار کلی وجود دارد:

• راهکار اول استفاده از تگ <img> است.
• راهکار دوم قرار دادن عکس به عنوان تصویر پس‌زمینه یک بلوک است که می‌تواند با تگ‌هایی مثل div و a و غیره ساخته شده باشد.

توجه کنید که تگ <img> مثل اغلب تگ‌های HTML به صورت باز و بسته به کار نمی‌رود بلکه صرفاً باز می‌شود. آدرس عکس در مشخصه‌ی سورس یا src ذکر می‌شود. به مثال زیر توجه کنید:

<img src="https://it-planet.ir/wp-content/uploads/images/2019/07/it-planet-ir-28463-1562494582-compressed.jpg.webp">

نتیجه نمایش تصویری به شکل زیر است:

برای کوچک‌تر یا بزرگ‌تر کردن عکس می‌توانید مشخصه‌های height یا width را در تگ img ذکر کنید و همین‌طور می‌توانید از کلاس و استایل مشخص شده در CSS استفاده کنید.

اگر تصویر به دلیلی بارگذاری نشود، کاربر متن جایگزین را مشاهده می‌کند. متن جایگزین عکس‌ها با مشخصه‌ی alt در HTML ذکر می‌شود. به عنوان مثال اگر نام عکسی Name‌ باشد، می‌توانید این نام را در مشخصه‌ی alt قرار بدهید:

<img src="Address" alt="Name">

مشخصه‌ی alt در تگ img‌ از نگاه موتورهای جستجو مفید است چرا که موضوع عکس و عنوان آن را مشخص می‌کند. لذا در مقال SEO توصیه می‌شود که همه‌ی عکس‌ها دارای alt‌ باشند.

<ol> و لیست شماره‌ای

لیست موارد به دو صورت در صفحات وب استفاده می‌شود:

• لیست شماره‌دار که کنار هر مورد یک عدد ذکر می‌شود.
• لیست بولت‌دار که کنار هر مورد لیست یک علامت مثل دایره و مربع ذکر می‌شود.

لیست شماره‌دار با تگ ol ساخته می‌شود. هر مورد از لیست با تگ li شکل می‌گیرد. لذا بین <ol> و </ol> از چند <li> و </li> استفاده می‌شود.

به مثال زیر که لیست سه موردی است توجه کنید:

<ol>
<li>مورد اول</li>
<li>مورد دوم</li>
<li>مورد سوم</li>
</ol>

نتیجه چیزی شبیه لیست زیر است:

1. مورد اول

2. مورد دوم

3. مورد سوم

البته استایل هر یک از موارد و همین‌طور استایل لیست از طریق CSS کاملاً قابل تغییر است.

عدد اولین مورد لیست، 1 است اما در HTML5 می‌توانید از تگ <ol reversed> استفاده کنید و لیست شماره‌دار معکوس بسازید که اعداد آن از زیاد به کم تغییر می‌کند و در واقع عدد آخرین مورد لیست، 1 است.

به جای اعداد می‌توانید از حروف کوچک یا بزرگ نیز استفاده کنید. برای این مهم کافی است در مشخصه‌ی type یا نوع لیست، یکی از حروف A یا a یا I, یا i, را ذکر کنید.

<ol type="A">

<ul> برای ساخت لیست بولت‌دار

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

<ul>
<li>مورد اول</li>
<li>مورد دوم</li>
<li>مورد سوم</li>
</ul>

نتیجه چیزی شبیه لیست زیر است:

• مورد اول
• مورد دوم
• مورد سوم

دقت کنید که شکل‌ها قابل تغییر است. برای این مهم نیز از مشخصه‌ی نوع یا type استفاده می‌شود. می‌توانید از disc یا circle یا square که معادل دایره‌ی توخالی، دایره‌ی توپر و مربع است استفاده کنید.

<table> برای طراحی جدول در HTML

جدول‌ها در صفحات وب با تگ <table>‌ ساخته می‌شود و در پایان جدول از </table> استفاده می‌شود. بین این دو عبارت، از تگ‌های thead و tbody و tr و th و td استفاده می‌شود:

• بخش عنوان جدول با تگ thead ساخته می‌شود و به </thead> ختم می‌شود.
• بدنه‌ی جدول با <tbody> آغاز و با </tbody> خاتمه پیدا می‌کند.
• هر ردیف جدول با تگ <tr> شروع و با </tr> خاتمه پیدا می‌کند.
• هر سلول از نوع عنوان جدول با تگ <th> شروع و با </th> خاتمه پیدا می‌کند.
• هر سلول معمولی جدول با تگ <td> شروع و با </td> خاتمه پیدا می‌کند.

اینکه جدول راست به چپ باشد یا مثل جداول انگلیسی، چپ به راست باشد و اینکه رنگ هدرها و ردیف‌ها و استایل خطوط مرز سلول‌ها چگونه باشد، همگی با آنچه در CSS تعریف شده، مشخص می‌شود.

به عنوان مثال یک جدول ساده بدون هدر را در نظر بگیرید که تنها ۲ ستون و ۲ ردیف دارد. ستون اول و سطر اول متفاوت است و عنوان ستون و عنوان ردیف را ذکر می‌کند. این جدول به شکل زیر تعریف می‌شود:

<table>
	<tbody>
		<tr>
			<th> </th>
			<th>ستون اول</th>
			<th>ستون دوم</th>
		</tr>
		<tr>
			<th>ردیف اول</th>
			<td>ردیف ۱ و ستون ۱</td>
			<td>ردیف ۱ و ستون ۲</td>
		</tr>
		<tr>
			<th>ردیف دوم</th>
			<td>ردیف ۲ و ستون ۱</td>
			<td>ردیف ۲ و ستون ۲</td>
		</tr>
	</tbody>
</table>

نتیجه‌ی استفاده از کد فوق در وب‌سایت سیاره‌ی آی‌تی که سلول‌های هد و دیتا استایل متفاوتی دارند، به صورت زیر است:

<blockquote> یا بلوک نقل قول

برای نقل قول از تگ blockquote استفاده می‌شود که استایل پیش‌فرض آن ساده است اما با استفاده از CSS می‌توانید آن را متحول کنید.

به نمونه‌ی زیر توجه کنید:

<blockquote>توضیحات متنی به صورت نقل قول از افراد، مقالات و غیره در صفحه‌ی وب</blockquote>

با توجه به استایلی که در CSS تعریف شده، نتیجه‌ی استفاده از کد فوق در ادیتور متنی سیاره‌ی آی‌تی به صورت زیر خواهد بود:

توضیحات متنی به صورت نقل قول از افراد، مقالات و غیره در صفحه‌ی وب

سیاره‌ی ‌آی‌تی