در قسمت دوم دوره ی متنی HTML به تگ های متنی و آشنایی با تگ های blockquote ، p ، h ، b ، strong ، em ، i و span پرداختیم. در ادامه به دوره متنی HTML قسمت سوم و تگ table ، a و مدیا تگ های img ، video و audio می پردازیم.
دوره متنی HTML قسمت سوم تگ a
تگ‌های لینک‌دهی در HTML برای ایجاد لینک‌ها به صفحات مختلف یا بخش‌های مختلف صفحه استفاده می‌شوند. این تگ‌ها به شما این امکان را می‌دهند که بتوانید به راحتی از یک صفحه به صفحه‌ای دیگر یا از یک بخش به بخش دیگر هدایت شوید. لینک‌ها جزو مهم‌ترین عناصر در طراحی وب هستند زیرا به کاربران اجازه می‌دهند که به صورت مستقیم به محتوای مختلف دسترسی پیدا کنند.
تگ a یکی از مهم‌ترین تگ‌ها در HTML است که برای ایجاد لینک‌ها مورد استفاده قرار می‌گیرد. این تگ می‌تواند به صفحات وب مختلف، فایل‌ها یا حتی بخش‌های خاصی از همان صفحه لینک دهد. برای استفاده از این تگ، باید از ویژگی href برای تعیین مقصد لینک استفاده کنید. همچنین می‌توانید با استفاده از ویژگی target="_blank" لینک را در تب جدید باز کنید تا کاربر بتواند بدون ترک صفحه اصلی، به صفحه مورد نظر مراجعه کند.
در مثال زیر، لینک به سایت "example.com" اضافه شده و با کلیک بر روی متن "باز کردن مثال"، کاربر به سایت جدید منتقل می‌شود:
<a href="https://example.com" target="_blank">باز کردن مثال</a>
در این مثال، لینک به صفحه‌ای در "example.com" هدایت می‌کند و این صفحه در یک تب جدید باز خواهد شد.
لینک‌های داخلی
لینک‌های داخلی به شما این امکان را می‌دهند که به بخش خاصی از همان صفحه اشاره کنید. این لینک‌ها برای هدایت کاربر به قسمتی از صفحه که در حال حاضر در آن قرار دارد، بسیار مفید هستند. برای ساخت این نوع لینک‌ها، باید از ویژگی href به همراه شناسه (ID) تگ مقصد استفاده کنید:
<h2 id="section1">بخش 1</h2>
<a href="#section1">برو به بخش 1</a>
در این مثال، با کلیک بر روی لینک "برو به بخش 1"، صفحه به بخش با شناسه section1 هدایت خواهد شد که به طور معمول به بخش خاصی از محتوای صفحه اشاره دارد. این نوع لینک‌ها به خصوص در صفحات طولانی که محتوا در بخش‌های مختلف تقسیم‌بندی شده است، بسیار مفید هستند.
دوره متنی HTML قسمت سوم تگ های چندرسانه‌ای img ، video و audio
تگ‌های چندرسانه‌ای در HTML برای نمایش انواع مختلف محتواهای چندرسانه‌ای مانند تصاویر، ویدئوها و صداها استفاده می‌شوند. این تگ‌ها به توسعه‌دهندگان این امکان را می‌دهند که محتوای چندرسانه‌ای را به راحتی در صفحات وب خود گنجانده و به کاربران تجربه‌ای غنی از محتواهای تصویری، صوتی و ویدیویی ارائه دهند.
تگ img
تگ img برای افزودن تصاویر به صفحه وب استفاده می‌شود. این تگ خودبسته (self-closing) است و به شما این امکان را می‌دهد که تصویر را بدون نیاز به تگ باز و بسته وارد کنید. ویژگی src مشخص می‌کند که تصویر از کجا بارگذاری شود، و ویژگی alt برای اضافه کردن توضیحاتی در مورد تصویر استفاده می‌شود که در صورت بارگذاری نشدن تصویر یا برای دسترسی‌پذیری مفید است.
مثال:
<img src="address.jpg" alt="توضیحات عکس"/>
در این مثال، تصویر از فایل "image.jpg" بارگذاری می‌شود و در صورتی که تصویر به هر دلیلی بارگذاری نشود، متن "توضیحات تصویر" نمایش داده خواهد شد.
تگ video
تگ video برای پخش ویدئو در صفحات وب استفاده می‌شود. این تگ به کاربران این امکان را می‌دهد که ویدئوها را مستقیماً در صفحه مشاهده کنند. ویژگی controls به شما این امکان را می‌دهد که کنترل‌هایی برای پخش ویدئو (مثل دکمه پخش، مکث و صدا) در اختیار کاربران قرار دهید. همچنین ویژگی src برای تعیین منبع ویدئو استفاده می‌شود.
مثال:
<video controls>
<source src="video.mp4" type="video/mp4">
مرورگر شما از ویدئو پشتیبانی نمی‌کند.
</video>در این مثال، ویدئو با نام "video.mp4" بارگذاری می‌شود و در صورتی که مرورگر از پخش ویدئو پشتیبانی نکند، پیامی به کاربر نمایش داده می‌شود.
تگ audio
تگ audio مشابه تگ video است، اما برای پخش فایل‌های صوتی استفاده می‌شود. ویژگی controls این امکان را به کاربر می‌دهد که کنترل‌های پخش (مثل دکمه پخش، مکث و حجم صدا) را مشاهده کند. همچنین می‌توانید از ویژگی src برای مشخص کردن منبع فایل صوتی استفاده کنید.
مثال:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
مرورگر شما از صدا پشتیبانی نمی‌کند.
</audio>
در این مثال، فایل صوتی "audio.mp3" بارگذاری شده و در صورت عدم پشتیبانی مرورگر از فرمت صوتی، پیامی به کاربر نمایش داده می‌شود.
دوره متنی HTML قسمت سوم تگ های لیست
تگ‌های لیست در HTML برای نمایش گروهی از آیتم‌ها به صورت مرتب یا نامرتب استفاده می‌شوند. این لیست‌ها به شما کمک می‌کنند که اطلاعات را به صورت واضح و منظم در صفحه وب نمایش دهید. در ادامه انواع مختلف تگ‌های لیست را معرفی می‌کنیم:
تگ ul
تگ <ul> برای ایجاد لیست‌های نامرتب استفاده می‌شود. این لیست‌ها به طور معمول برای نمایش مواردی که ترتیب خاصی ندارند، به کار می‌روند. برای هر آیتم در لیست، از تگ <li> استفاده می‌کنیم.
<ul>
<li>مورد اول</li>
<li>مورد دوم</li>
</ul>در این مثال، لیستی از موارد به صورت نامرتب با بولت‌ها نمایش داده می‌شود.
خروجی:
دوره متنی HTML قسمت سوم تگ ol
تگ <ol> برای ایجاد لیست‌های مرتب با شماره‌گذاری استفاده می‌شود. این لیست‌ها به شما کمک می‌کنند که موارد را به ترتیب خاصی نمایش دهید، مثلاً برای نمایش مراحل یک فرآیند.
<ol>
<li>مورد اول</li>
<li>مورد دوم</li>
</ol>
در این مثال، لیستی از مراحل به صورت شماره‌گذاری شده نمایش داده می‌شود.
تگ <dl>
تگ‌های <dl>, <dt>, و <dd> برای ایجاد لیست‌های تعریفی استفاده می‌شوند. این نوع لیست‌ها برای نمایش جفت‌های کلید و مقدار، یا اصطلاحات و توضیحاتشان، بسیار مفید هستند.
مثال:
<dl>
<dt>HTML</dt>
<dd>زبان نشانه‌گذاری فرامتن</dd>
<dt>CSS</dt>
<dd>زبان استایل‌دهی به صفحات وب</dd>
</dl>
در این مثال، از تگ <dl> برای ایجاد لیست تعریفی استفاده شده و از تگ‌های <dt> برای نمایش اصطلاحات و از تگ‌های <dd> برای توضیحات مربوط به هر اصطلاح بهره برده‌ایم.
دوره متنی HTML قسمت سوم تگ table
تگ‌های جدولی در HTML برای نمایش داده‌ها به صورت ساختاریافته استفاده می‌شوند. جدول‌ها ابزار مفیدی برای نمایش اطلاعاتی هستند که به صورت سطری و ستونی سازماندهی شده‌اند. در ادامه توضیحات کاملی درباره تگ‌های مربوط به جدول‌ها ارائه می‌شود.
ساخت جدول با تگ table
تگ table ساختار اصلی جدول را تعریف می‌کند. درون این تگ، می‌توانید سطرها، ستون‌ها، هدرها و بدنه جدول را با استفاده از تگ‌های مرتبط ایجاد کنید.
ساختار پایه جدول:
table>
<tr>
<th>نام</th>
<th>سن</th>
</tr>
<tr>
<td>علی</td>
<td>25</td>
</tr>
</table>
توضیحات:
- tr (Table Row): برای تعریف یک سطر در جدول استفاده می‌شود.
- th (Table Header): برای تعریف هدرهای جدول استفاده می‌شود. متن در این سلول‌ها به‌صورت بولد و وسط‌چین نمایش داده می‌شود.
- td (Table Data): برای تعریف سلول‌های داده‌ای جدول استفاده می‌شود.
سایر تگ های مرتبط با جدول table
تگ thead
این تگ برای گروه‌بندی هدر جدول استفاده می‌شود. هدر معمولاً شامل عنوان ستون‌ها است.
مثال:
<table>
<thead>
<tr>
<th>نام</th>
<th>سن</th>
</tr>
</thead>
</table>تگ tbody
این تگ برای گروه‌بندی بدنه جدول (داده‌ها) استفاده می‌شود. تمام داده‌های اصلی جدول باید در این بخش قرار گیرند.
مثال:
<table>
<thead>
<tr>
<th>نام</th>
<th>سن</th>
</tr>
</thead>
<tbody>
<tr>
<td>علی</td>
<td>25</td>
</tr>
<tr>
<td>مریم</td>
<td>30</td>
</tr>
</tbody>
</table>
دوره متنی HTML قسمت سوم تگ tfoot
این تگ برای گروه‌بندی فوتر جدول استفاده می‌شود. معمولاً اطلاعات جمع‌بندی مانند جمع کل یا نتیجه‌گیری در این بخش قرار می‌گیرد.
<table>
<thead>
<tr>
<th>نام</th>
<th>سن</th>
</tr>
</thead>
<tbody>
<tr>
<td>علی</td>
<td>25</td>
</tr>
<tr>
<td>مریم</td>
<td>30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>جمع کل</td>
<td>55</td>
</tr>
</tfoot>
</table>
دوره متنی HTML قسمت سوم ویژگی‌های تگ table در HTML
- برای افزودن مرز (border) به جدول استفاده می‌شود.
<table border="1">
<tr>
<th>نام</th>
<th>سن</th>
</tr>
<tr>
<td>علی</td>
<td>25</td>
</tr>
</table>
- colspan: تعداد ستون‌هایی که یک سلول باید اشغال کند.
- rowspan: تعداد سطرهایی که یک سلول باید اشغال کند.
مثال:
<table border="1">
<tr>
<th>نام</th>
<th colspan="2">جزئیات</th>
</tr>
<tr>
<td>علی</td>
<td>سن</td>
<td>25</td>
</tr>
<tr>
<td rowspan="2">مریم</td>
<td>سن</td>
<td>30</td>
</tr>
<tr>
<td>شغل</td>
<td>معلم</td>
</tr>
</table>
- برای زیباتر کردن جداول، می‌توان از CSS استفاده کرد.
<style>
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<table>
<thead>
<tr>
<th>نام</th>
<th>سن</th>
</tr>
</thead>
<tbody>
<tr>
<td>علی</td>
<td>25</td>
</tr>
<tr>
<td>مریم</td>
<td>30</td>
</tr>
</tbody>
</table>
نکات مهم درباره تگ table
- ساختار مناسب: همیشه از تگ thead, tbody, و tfoot برای جداسازی بخش‌های جدول استفاده کنید.
- دسترسی‌پذیری: از ویژگی‌هایی مانند scope در thبرای توضیح بیشتر جدول‌ها برای کاربران با نیازهای خاص استفاده کنید.
- استانداردسازی: از ویژگی‌های CSS به جای ویژگی‌های قدیمی HTML مانند border یا cellpadding استفاده کنید.
حال که دوره متنی HTML قسمت سوم را مطالعه کردید و با تگ table ، a و مدیا تگ های img ، video و audio آشنا شدید، می توانید از دیگر مقالات سایت ایوولرن دیدن کنید.