سلام دوستان! من صادق جعفری هستم و در این قسمت از دوره آموزش HTML، قصد داریم به مواردی از قبیل استایل‌دهی، لینک‌های داخلی و خارجی، ایجاد جداول، و چندین تگ مهم دیگر بپردازیم. با یادگیری این مباحث، می‌توانید صفحات وب خود را جذاب‌تر و کاربردی‌تر کنید. پس با من همراه باشید تا به صورت ساده و عامیانه، این مفاهیم را با هم بررسی کنیم.
ویژگی style
ویژگی style در HTML به شما امکان می‌دهد تا استایل‌های CSS را مستقیماً به عناصر HTML اعمال کنید. این ویژگی به شما اجازه می‌دهد تا ظاهر و چیدمان عناصر وب‌سایت خود را به‌طور دقیق کنترل کنید. استفاده از ویژگی style می‌تواند برای اعمال استایل‌های خاص به یک عنصر خاص بسیار مفید باشد، اما برای استایل‌دهی کلی و مدیریت بهتر، معمولاً از فایل‌های CSS خارجی استفاده می‌شود.
ویژگی style در داخل تگ HTML قرار می‌گیرد و استایل‌های CSS به صورت یک رشته متنی داخل آن نوشته می‌شوند. ساختار کلی به شکل زیر است:
<tagname style="property: value; property2: value2;">
content
</tagname>
مثال ساده از ویژگی style
در این مثال، از ویژگی style برای تغییر رنگ متن و اندازه فونت یک تگ <p> استفاده می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>Example of the style attribute</title>
</head>
<body>
<p style="color: blue; font-size: 20px;">This text is displayed in blue color and font size is 20 pixels.</p>
</body>
</html>
ویژگی‌های مختلف CSS که می‌توان در ویژگی style استفاده کرد
1. رنگ متن (color)
<p style="color: red;">This text is red.</p>
2. اندازه فونت (font-size)
<p style="font-size: 24px;">This text has a font size of 24 pixels.</p>
3. رنگ پس‌زمینه (background-color)
<p style="background-color: yellow;">This text has a yellow background.</p>
4. حاشیه (margin)
<p style="margin: 20px;">This text has a margin of 20 pixels.</p>
5. فاصله داخلی (padding)
<p style="padding: 15px;">This text has an internal spacing of 15 pixels.</p>
6. تراز متن (text-align)
<p style="text-align: center;">This text is in the middle of the page.</p>
7. نوع فونت (font-family)
<p style="font-family: Arial, sans-serif;">This text is displayed in Arial font.</p>
مثال جامع با استفاده از ویژگی‌های مختلف CSS در style
در این مثال، از چندین ویژگی CSS برای استایل‌دهی به یک تگ <div> استفاده می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>A comprehensive example of the style attribute</title>
</head>
<body>
<div style="background-color: lightgray; color: blue; font-size: 18px; padding: 20px; margin: 10px; border: 2px solid black; text-align: center;">
This is a fully styled section using the style attribute.
</div>
</body>
</html>
در این مثال:
background-color: lightgray;رنگ پس‌زمینه را خاکستری روشن می‌کند.color: blue;رنگ متن را آبی می‌کند.font-size: 18px;اندازه فونت را 18 پیکسل می‌کند.padding: 20px;فاصله داخلی را 20 پیکسل تنظیم می‌کند.margin: 10px;حاشیه خارجی را 10 پیکسل تنظیم می‌کند.border: 2px solid black;حاشیه‌ای با ضخامت 2 پیکسل و رنگ مشکی اضافه می‌کند.text-align: center;متن را در وسط قرار می‌دهد.
ویژگی style در HTML ابزار قدرتمندی برای اعمال استایل‌های CSS به عناصر خاص است. این ویژگی به شما امکان می‌دهد تا به سرعت و به سادگی ظاهر و چیدمان عناصر وب‌سایت خود را تغییر دهید. هرچند که برای مدیریت بهتر و استایل‌دهی کلی، استفاده از فایل‌های CSS خارجی توصیه می‌شود، اما ویژگی style می‌تواند در مواردی که نیاز به استایل‌دهی سریع و خاص دارید، بسیار مفید باشد. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از ویژگی style کمک کرده باشد.
تگ <style>
تگ <style> در HTML برای تعریف استایل‌های CSS درون یک سند HTML استفاده می‌شود. این تگ معمولاً در داخل بخش <head> سند قرار می‌گیرد و به شما امکان می‌دهد تا استایل‌های CSS را به صورت داخلی (internal) در سند HTML خود تعریف کنید. استفاده از تگ <style> به شما اجازه می‌دهد تا به سرعت و به صورت متمرکز استایل‌های مورد نظر خود را برای یک صفحه وب اعمال کنید.
ساختار تگ <style> به شکل زیر است:
<style>
/* CSS code */
</style>
مثال ساده از تگ <style>
در این مثال، از تگ <style> برای تعریف استایل‌های داخلی استفاده می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>Example of the style tag</title>
<style>
body {
background-color: lightgray;
}
h1 {
color: blue;
text-align: center;
}
p {
font-size: 18px;
color: green;
}
</style>
</head>
<body>
<h1>This is a title</h1>
<p>This is a paragraph.</p>
</body>
</html>
تگ <style> دارای چه attribute هایی است؟
تگ <style> دارای چند ویژگی عمومی است که در زیر به برخی از آن‌ها اشاره می‌کنیم:
1. type
ویژگی type نوع محتوای تگ <style> را مشخص می‌کند. مقدار پیش‌فرض text/css است، که نشان‌دهنده کدهای CSS است.
<style type="text/css">
p {
color: red;
}
</style>
2. media
ویژگی media برای تعیین نوع دستگاه یا رسانه‌ای که استایل‌ها باید در آن اعمال شوند، استفاده می‌شود. به عنوان مثال، می‌توانید استایل‌های خاصی را برای نمایشگرها، چاپگرها یا دستگاه‌های دیگر تعیین کنید.
<style media="screen">
p {
color: blue;
}
</style>
<style media="print">
p {
color: black;
}
</style>
3. scoped
ویژگی scoped برای محدود کردن دامنه استایل‌ها به بخش خاصی از سند HTML استفاده می‌شود. این ویژگی در حال حاضر در اکثر مرورگرها پشتیبانی نمی‌شود.
<!DOCTYPE html>
<html>
<head>
<title>An example of the scoped feature</title>
</head>
<body>
<section>
<style scoped>
p {
color: purple;
}
</style>
<p>This paragraph is purple in section section.</p>
</section>
<p>This paragraph is the default color.</p>
</body>
</html>
مثال جامع با استفاده از ویژگی‌های مختلف تگ <style>
در این مثال، از ویژگی‌های type, media, و scoped برای تعریف استایل‌های مختلف استفاده شده است:
<!DOCTYPE html>
<html>
<head>
<title>Comprehensive example of style tag with attributes</title>
<style type="text/css" media="screen">
body {
background-color: lightblue;
}
h1 {
color: darkblue;
text-align: center;
}
p {
font-size: 18px;
color: darkgreen;
}
</style>
<style media="print">
p {
color: black;
}
</style>
</head>
<body>
<h1>This is a title</h1>
<section>
<style scoped>
p {
color: purple;
}
</style>
<p>This paragraph is purple in section section.</p>
</section>
<p>This paragraph is in dark green.</p>
</body>
</html>
در این مثال:
- ویژگی
typeمشخص می‌کند که محتوا CSS است. - ویژگی
mediaتعیین می‌کند که استایل‌ها برای نمایشگرها و چاپگرها چگونه اعمال شوند. - ویژگی
scopedدامنه استایل‌ها را به یک بخش خاص محدود می‌کند (توجه داشته باشید که این ویژگی در اکثر مرورگرها پشتیبانی نمی‌شود).
تگ <style> در HTML یک ابزار قدرتمند برای تعریف استایل‌های داخلی CSS است. این تگ به شما امکان می‌دهد تا به سرعت و به صورت متمرکز استایل‌های مورد نظر خود را برای یک صفحه وب اعمال کنید. با استفاده از ویژگی‌های عمومی HTML مانند type, media, و scoped می‌توانید کنترل بیشتری بر روی نحوه اعمال استایل‌ها داشته باشید. با این حال، برای مدیریت بهتر و استایل‌دهی کلی به صفحات وب، استفاده از فایل‌های CSS خارجی توصیه می‌شود. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <style> کمک کرده باشد.
تگ <span>
تگ <span> یکی از پرکاربردترین تگ‌های HTML است که برای گروه‌بندی و استایل‌دهی به بخش‌های کوچک از متن یا محتوای دیگر به کار می‌رود. تگ <span> برخلاف تگ‌های ساختاری مانند <div>, <header>, و غیره، هیچ تاثیر ظاهری پیش‌فرضی بر روی محتوای خود ندارد و به عنوان یک تگ درون خطی (inline) عمل می‌کند. این تگ معمولاً برای استایل‌دهی، اعمال اسکریپت‌ها، یا شناسایی بخش‌های خاصی از متن استفاده می‌شود.
ساختار تگ <span> بسیار ساده است و به صورت زیر نوشته می‌شود:
<span>content</span>
مثال ساده از تگ <span>
در این مثال، از تگ <span> برای استایل‌دهی به بخشی از یک جمله استفاده می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>An example of the span tag</title>
<style>
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>This sentence contains <span class="highlight">highlight text</span>.</p>
</body>
</html>
استفاده از ویژگی style در تگ <span>
با استفاده از ویژگی style می‌توانید استایل‌های CSS را مستقیماً به تگ <span> اعمال کنید. به عنوان مثال، می‌توانید رنگ متن یا اندازه فونت را تغییر دهید.
<!DOCTYPE html>
<html>
<head>
<title>Example of the style attribute in the span tag</title>
</head>
<body>
<p>This sentence contains <span style="color: blue; font-size: 20px;">text with custom style</span>.</p>
</body>
</html>
تگ <span>دارای چه attribute هایی است؟
1. id
ویژگی id یک شناسه یکتا به عنصر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این عنصر در CSS یا JavaScript استفاده کرد.
2. class
ویژگی class برای اختصاص یک یا چند کلاس CSS به عنصر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.
3. style
ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به عنصر استفاده می‌شود.
4. title
ویژگی title توضیحات اضافی در مورد عنصر فراهم می‌کند که وقتی کاربر موس را روی عنصر قرار می‌دهد، این توضیحات به صورت یک ابزارک (tooltip) نمایش داده می‌شود.
5. lang
ویژگی lang برای تعیین زبان محتوای عنصر استفاده می‌شود که به مرورگرها و موتورهای جستجو کمک می‌کند زبان متن را تشخیص دهند.
6. dir
ویژگی dir جهت نوشتار متن را تعیین می‌کند و می‌تواند مقدارهای ltr (چپ به راست)، rtl (راست به چپ) یا auto داشته باشد.
7. data-*
ویژگی‌های سفارشی data-* برای ذخیره اطلاعات سفارشی در عناصر HTML استفاده می‌شوند. این ویژگی‌ها می‌توانند توسط JavaScript برای افزودن قابلیت‌های تعاملی به صفحه استفاده شوند.
مثال جامع با استفاده از ویژگی‌های مختلف تگ <span>
در این مثال، از ویژگی‌های id, class, style, title, lang, dir, و data-* برای سفارشی‌سازی تگ <span> استفاده شده است:
<!DOCTYPE html>
<html>
<head>
<title>Comprehensive example of span tag with attributes</title>
<style>
.highlight {
color: purple;
font-size: 1.2em;
}
</style>
</head>
<body>
<p>
This sentence includes
<span id="unique-span-text" class="highlight" style="font-weight: bold;" title="This is a highlighted text" lang="fa" dir="rtl" data-info="customData">
Highlighted text
</span>
.
</p>
</body>
</html>
تگ <span> در HTML یک ابزار قدرتمند و انعطاف‌پذیر برای استایل‌دهی و گروه‌بندی بخش‌های کوچک از متن یا محتوای دیگر است. این تگ به شما امکان می‌دهد تا به سرعت و به صورت متمرکز استایل‌های مورد نظر خود را برای بخش‌های مختلف صفحه وب اعمال کنید. با استفاده از ویژگی‌های عمومی HTML مانند id, class, style, title, lang, dir, و data-* می‌توانید کنترل کاملی بر روی نمایش و رفتار این تگ داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <span> کمک کرده باشد.
تگ <meta>
تگ <meta> در HTML برای تعریف فراداده‌های (metadata) مرتبط با سند HTML استفاده می‌شود. این تگ در داخل بخش <head> سند قرار می‌گیرد و اطلاعاتی را درباره صفحه وب به مرورگرها و موتورهای جستجو ارائه می‌دهد. تگ <meta> می‌تواند برای اهداف مختلفی مانند تغییر مسیر صفحه، تنظیم کوکی، تعیین نام نگارنده، و بسیاری از موارد دیگر استفاده شود.
تگ <meta> یک تگ خودبسته (self-closing) است که به صورت زیر نوشته می‌شود:
<meta name="description" content="A short description of the content of the page">
مثال‌های مختلف از استفاده تگ <meta>
1. تنظیم نام نگارنده (author)
<!DOCTYPE html>
<html>
<head>
<title>Meta tag example</title>
<meta name="author" content="Sadegh Jafari">
</head>
<body>
<p>This is a sample page.</p>
</body>
</html>
در این مثال، تگ <meta> نام نگارنده را به مرورگر و موتورهای جستجو اعلام می‌کند.
2. تنظیم توضیحات (description)
<!DOCTYPE html>
<html>
<head>
<title>Meta tag example</title>
<meta name="description" content="This page is about HTML tags.">
</head>
<body>
<p>This is a sample page.</p>
</body>
</html>
در این مثال، تگ <meta> توضیحی کوتاه درباره محتوای صفحه ارائه می‌دهد که موتورهای جستجو از آن برای نمایش در نتایج جستجو استفاده می‌کنند.
3. تغییر مسیر صفحه (redirect)
با استفاده از تگ <meta> می‌توانید مرورگر را به یک URL جدید هدایت کنید.
<!DOCTYPE html>
<html>
<head>
<title>Meta tag example</title>
<meta http-equiv="refresh" content="5; url=https://www.example.com">
</head>
<body>
<p>You will be automatically redirected to a new page after 5 seconds.</p>
</body>
</html>
در این مثال، تگ <meta> مرورگر را پس از 5 ثانیه به URL مشخص شده هدایت می‌کند.
4. تنظیم کوکی (cookie)
با استفاده از تگ <meta> می‌توانید کوکی‌ها را تنظیم کنید. این ویژگی کمتر استفاده می‌شود اما هنوز هم امکان‌پذیر است.
<!DOCTYPE html>
<html>
<head>
<title>Example of cookie setting with meta tag</title>
<meta http-equiv="Set-Cookie" content="user=John Doe; expires=Wed, 21 Oct 2024 07:28:00 GMT; path=/">
</head>
<body>
<p>This page sets a cookie.</p>
</body>
</html>
در این مثال، تگ <meta> یک کوکی با نام user و مقدار John Doe تنظیم می‌کند که در تاریخ مشخصی منقضی می‌شود.
ویژگی‌های تگ <meta>
تگ <meta> دارای چندین ویژگی مهم است که در زیر به برخی از آن‌ها اشاره می‌کنیم:
1. name
ویژگی name نوع فراداده را مشخص می‌کند. مقادیر متداول شامل description, keywords, author, و viewport هستند.
<meta name="keywords" content="HTML, CSS, JavaScript">
2. content
ویژگی content اطلاعات مرتبط با ویژگی name را فراهم می‌کند.
<meta name="description" content="This page is about HTML tags.">
3. http-equiv
ویژگی http-equiv اطلاعات مربوط به هدرهای HTTP را مشخص می‌کند. مقادیر متداول شامل content-type, default-style, و refresh هستند.
<meta http-equiv="refresh" content="30">
4. charset
ویژگی charset نوع کدگذاری کاراکترها را مشخص می‌کند.
<meta charset="UTF-8">
5. viewport
ویژگی viewport تنظیمات مرتبط با نمای صفحه را برای دستگاه‌های مختلف مشخص می‌کند. این ویژگی برای طراحی‌های واکنش‌گرا بسیار مهم است.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
مثال جامع با استفاده از ویژگی‌های مختلف تگ <meta>
در این مثال، از چندین ویژگی تگ <meta> برای تعریف فراداده‌های مختلف استفاده شده است:
<!DOCTYPE html>
<html>
<head>
<title>A comprehensive example of the meta tag</title>
<meta charset="UTF-8">
<meta name="description" content="This page is about HTML tags.">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Sadegh Jafari">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="10; url=https://www.example.com">
</head>
<body>
<p>This is a sample page.</p>
</body>
</html>
در این مثال:
charset="UTF-8"نوع کدگذاری کاراکترها را مشخص می‌کند.name="description"توضیحی کوتاه درباره محتوای صفحه ارائه می‌دهد.name="keywords"کلمات کلیدی مرتبط با محتوای صفحه را ارائه می‌دهد.name="author"نام نگارنده صفحه را مشخص می‌کند.name="viewport"تنظیمات نمای صفحه را برای دستگاه‌های مختلف مشخص می‌کند.http-equiv="refresh"مرورگر را پس از 10 ثانیه به URL مشخص شده هدایت می‌کند.
تگ <meta> در HTML ابزار قدرتمندی برای تعریف فراداده‌های مرتبط با سند HTML است. این تگ به شما امکان می‌دهد تا اطلاعات مفیدی را به مرورگرها و موتورهای جستجو ارائه دهید و همچنین می‌توانید برای تغییر مسیر صفحه و تنظیم کوکی‌ها از آن استفاده کنید. با استفاده از ویژگی‌های مختلف تگ <meta>, می‌توانید کنترل کاملی بر روی فراداده‌های صفحه وب خود داشته باشید و صفحات وب خود را به شکلی منظم و حرفه‌ای طراحی کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <meta> کمک کرده باشد.
لینک‌های داخلی و خارجی در HTML
لینک‌ها (پیوندها) یکی از مهم‌ترین عناصر در HTML هستند که به کاربران اجازه می‌دهند تا بین صفحات وب جابه‌جا شوند. لینک‌ها می‌توانند به منابع داخلی در همان سایت یا به منابع خارجی در اینترنت اشاره کنند. در اینجا به توضیح جامع و جذابی درباره لینک‌های داخلی و خارجی در HTML می‌پردازیم و با مثال‌های کاربردی نحوه استفاده از آن‌ها را شرح می‌دهیم.
لینک‌های داخلی (Internal Links)
لینک‌های داخلی به صفحاتی در همان وب‌سایت اشاره می‌کنند. این لینک‌ها معمولاً برای جابه‌جایی بین صفحات مختلف یک سایت یا برای پیمایش در یک صفحه طولانی استفاده می‌شوند.
ایجاد لینک داخلی به یک صفحه دیگر
برای ایجاد لینک داخلی به یک صفحه دیگر در همان سایت، می‌توانید از تگ <a> استفاده کنید و مسیر نسبی صفحه مقصد را در ویژگی href قرار دهید.
<!DOCTYPE html>
<html>
<head>
<title>Internal link example</title>
</head>
<body>
<h1>Main Page</h1>
<p>To go to the About Us page, <a href="about.html">click here</a>.</p>
</body>
</html>
در این مثال، لینک به صفحه about.html اشاره می‌کند که در همان دایرکتوری قرار دارد.
ایجاد لینک داخلی به یک بخش خاص از همان صفحه
برای ایجاد لینک به یک بخش خاص از همان صفحه، می‌توانید از ویژگی id برای تگ مقصد و از # همراه با نام id در ویژگی href استفاده کنید.
<!DOCTYPE html>
<html>
<head>
<title>Example of an internal link to a specific section</title>
</head>
<body>
<h1>Main Page</h1>
<p><a href="#contact">click here</a> to go to the contact us section.</p>
<h2 id="contact">contact us</h2>
<p>Contact us for more information.</p>
</body>
</html>
در این مثال، لینک به بخش "تماس با ما" در همان صفحه اشاره می‌کند.
لینک‌های خارجی (External Links)
لینک‌های خارجی به صفحاتی در وب‌سایت‌های دیگر اشاره می‌کنند. این لینک‌ها برای ارجاع به منابع خارجی، مقالات، ویدئوها، یا هر نوع محتوای دیگری که خارج از دامنه وب‌سایت شما قرار دارد، استفاده می‌شوند.
ایجاد لینک خارجی
برای ایجاد لینک خارجی، مسیر کامل URL مقصد را در ویژگی href قرار دهید.
<!DOCTYPE html>
<html>
<head>
<title>External link example</title>
</head>
<body>
<h1>Main Page</h1>
<p>To visit the Google website, <a href="https://www.google.com" target="_blank">click here</a>.</p>
</body>
</html>
در این مثال، لینک به وب‌سایت گوگل اشاره می‌کند و ویژگی target="_blank" باعث می‌شود که لینک در یک زبانه یا پنجره جدید باز شود.
لینک‌های داخلی و خارجی در HTML ابزارهای قدرتمندی برای هدایت کاربران و ارائه منابع مختلف هستند. لینک‌های داخلی به شما کمک می‌کنند تا کاربران را در وب‌سایت خود جابه‌جا کنید و لینک‌های خارجی به شما امکان می‌دهند تا به منابع مفید در اینترنت ارجاع دهید. با استفاده از ویژگی‌های مختلف تگ <a>, می‌توانید کنترل بیشتری بر روی رفتار و ظاهر لینک‌ها داشته باشید و تجربه کاربری بهتری را ارائه دهید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از لینک‌های داخلی و خارجی در HTML کمک کرده باشد.
جدول در HTML
جداول در HTML یکی از ابزارهای مهم برای نمایش داده‌ها به صورت ساختاریافته و منظم هستند. با استفاده از تگ‌های مختلف برای ایجاد جداول، می‌توانید داده‌های خود را به راحتی سازماندهی و ارائه کنید. در این آموزش، به شما نحوه ساخت جداول در HTML را به صورت جامع و با مثال‌های کاربردی نشان خواهیم داد.
ساختار اصلی جدول در HTML
ساختار اصلی یک جدول در HTML شامل چندین تگ مختلف است:
<table>: این تگ کل جدول را تعریف می‌کند.<tr>: این تگ هر سطر جدول را تعریف می‌کند.<th>: این تگ هر سلول در سطر هدر جدول را تعریف می‌کند.<td>: این تگ هر سلول در سطرهای داده‌های جدول را تعریف می‌کند.
مثال ساده از یک جدول
در این مثال، یک جدول ساده با سه ستون و سه سطر ایجاد می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>Simple table example</title>
</head>
<body>
<h1>Simple table</h1>
<table border="1">
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
<tr>
<td>Row 1، column 1</td>
<td>Row 1، column 2</td>
<td>Row 1، column 3</td>
</tr>
<tr>
<td>Row 2، column 1</td>
<td>Row 2، column 2</td>
<td>Row 2، column 3</td>
</tr>
</table>
</body>
</html>
تگ‌های مختلف جدول
1. <table>
تگ <table> کل جدول را تعریف می‌کند.
<table border="1">
<!-- Contents of the table -->
</table>
2. <tr>
تگ <tr> هر سطر در جدول را تعریف می‌کند.
<tr>
<!-- Row cells -->
</tr>
3. <th>
تگ <th> هر سلول در سطر هدر جدول را تعریف می‌کند و به صورت پیش‌فرض متن داخل آن به صورت بولد و وسط‌چین است.
<tr>
<th>Head 1</th>
<th>Head 2</th>
</tr>
4. <td>
تگ <td> هر سلول در سطرهای داده‌های جدول را تعریف می‌کند.
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
تگ table دارای چه attribute هایی است؟
1. border
ویژگی border برای تعیین ضخامت و نوع مرزهای جدول استفاده می‌شود. مقدار این ویژگی معمولاً یک عدد است که نشان‌دهنده ضخامت مرزها به پیکسل است.
<table border="1">
<!-- Contents of the table -->
</table>
2. cellpadding
ویژگی cellpadding فاصله داخلی سلول‌ها را تعیین می‌کند. این ویژگی فاصله بین محتوای سلول و مرزهای آن را مشخص می‌کند.
<table border="1" cellpadding="10">
<!-- Contents of the table -->
</table>
3. cellspacing
ویژگی cellspacing فاصله بین سلول‌های جدول را تعیین می‌کند. این ویژگی فضای خالی بین سلول‌های جدول را مشخص می‌کند.
<table border="1" cellspacing="5">
<!-- Contents of the table -->
</table>
4. width
ویژگی width عرض جدول را تعیین می‌کند. می‌توانید عرض جدول را به صورت درصد یا پیکسل مشخص کنید.
<table border="1" width="100%">
<!-- Contents of the table -->
</table>
5. height
ویژگی height ارتفاع جدول را تعیین می‌کند. می‌توانید ارتفاع جدول را به صورت درصد یا پیکسل مشخص کنید.
<table border="1" height="300">
<!-- Contents of the table -->
</table>
6. align
ویژگی align نحوه تراز کردن جدول را نسبت به محتوا و عناصر اطراف تعیین می‌کند. مقادیر ممکن شامل left, right, و center هستند.
<table border="1" align="center">
<!-- Contents of the table -->
</table>
7. bgcolor
ویژگی bgcolor رنگ پس‌زمینه جدول را تعیین می‌کند. این ویژگی می‌تواند با نام رنگ یا کد هگزادسیمال رنگ مشخص شود.
<table border="1" bgcolor="lightblue">
<!-- Contents of the table -->
</table>
مثال جامع با استفاده از ویژگی‌های مختلف تگ <table>
در این مثال، از چندین ویژگی تگ <table> برای تنظیم ظاهر و رفتار جدول استفاده شده است:
<!DOCTYPE html>
<html>
<head>
<title>A comprehensive example of table tag features</title>
</head>
<body>
<h1>Table with different features</h1>
<table border="1" cellpadding="10" cellspacing="5" width="80%" height="200" align="center" bgcolor="#f2f2f2">
<tr>
<th>Name</th>
<th>Age</th>
<th>Job</th>
</tr>
<tr>
<td>Ali</td>
<td>30</td>
<td>Programmer</td>
</tr>
<tr>
<td>Sara</td>
<td>25</td>
<td>Graphic Designer</td>
</tr>
<tr>
<td>Mohammad</td>
<td>28</td>
<td>Project Manager</td>
</tr>
</table>
</body>
</html>
تگ <tr>دارای چه attribute هایی است؟
تگ <tr> در HTML برای تعریف هر سطر (row) در یک جدول استفاده می‌شود. این تگ به تنهایی محتوایی را نمایش نمی‌دهد، بلکه حاوی سلول‌های جدول است که توسط تگ‌های <td> (برای داده‌های سلول) و <th> (برای سرستون‌ها) تعریف می‌شوند. تگ <tr> نیز دارای ویژگی‌های متعددی است که به شما امکان می‌دهد ظاهر و رفتار سطرهای جدول را سفارشی‌سازی کنید.
1. align
ویژگی align برای تنظیم نحوه تراز کردن محتوای سطر استفاده می‌شود. مقادیر ممکن شامل left, center, و right هستند.
<tr align="center">
<td>Middle Chinese text</td>
<td>Middle Chinese text</td>
</tr>
2. bgcolor
ویژگی bgcolor برای تعیین رنگ پس‌زمینه سطر استفاده می‌شود. این ویژگی می‌تواند با نام رنگ یا کد هگزادسیمال رنگ مشخص شود.
<tr bgcolor="lightblue">
<td>Text with light blue background</td>
<td>Text with light blue background</td>
</tr>
3. valign
ویژگی valign برای تنظیم نحوه تراز عمودی محتوای سلول‌های سطر استفاده می‌شود. مقادیر ممکن شامل top, middle, bottom, و baseline هستند.
<tr valign="top">
<td>Top aligned text</td>
<td>Top aligned text</td>
</tr>
4. style
ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به سطر استفاده می‌شود.
<tr style="background-color: yellow;">
<td>Text with internal style</td>
<td>Text with internal style</td>
</tr>
5. class
ویژگی class برای اختصاص یک یا چند کلاس CSS به سطر استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.
<tr class="highlight">
<td>Text with class</td>
<td>Text with class</td>
</tr>
6. id
ویژگی id یک شناسه یکتا به سطر اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این سطر در CSS یا JavaScript استفاده کرد.
<tr id="unique-row">
<td>Text with a unique identifier</td>
<td>Text with a unique identifier</td>
</tr>
تگ <th>دارای چه attribute هایی است؟
تگ <th> در HTML برای تعریف سلول‌های سرستون (header cell) در یک جدول استفاده می‌شود. این تگ به طور پیش‌فرض متن داخل خود را به صورت بولد و وسط‌چین نمایش می‌دهد. تگ <th> دارای ویژگی‌های متعددی است که به شما امکان می‌دهد ظاهر و رفتار سلول‌های سرستون را سفارشی‌سازی کنید.
1. colspan
ویژگی colspan تعداد ستون‌هایی را که سلول سرستون باید بر آن‌ها گسترده شود، تعیین می‌کند.
<th colspan="2">Expanded head</th>
2. rowspan
ویژگی rowspan تعداد سطرهایی را که سلول سرستون باید بر آن‌ها گسترده شود، تعیین می‌کند.
<th rowspan="2">Expanded header in lines</th>
3. headers
ویژگی headers یک لیست از شناسه‌های سلول‌های داده که سلول سرستون به آن‌ها مرتبط است، تعیین می‌کند. این ویژگی برای بهبود دسترسی‌پذیری جدول‌ها مفید است.
<th headers="id1 id2">Headers with headers</th>
4. scope
ویژگی scope مشخص می‌کند که سلول سرستون برای کدام بخش از جدول (سطر، ستون، گروه سطرها یا گروه ستون‌ها) کاربرد دارد. مقادیر ممکن شامل col, row, colgroup, و rowgroup هستند.
<th scope="col">Head for column</th>
5. abbr
ویژگی abbr یک فرم اختصاری برای عنوان سلول سرستون ارائه می‌دهد که می‌تواند برای بهبود دسترسی‌پذیری استفاده شود.
<th abbr="name">full name</th>
6. align
ویژگی align نحوه تراز کردن محتوای سلول سرستون را تعیین می‌کند. مقادیر ممکن شامل left, center, و right هستند.
<th align="left">Head aligned left</th>
7. valign
ویژگی valign نحوه تراز عمودی محتوای سلول سرستون را تعیین می‌کند. مقادیر ممکن شامل top, middle, bottom, و baseline هستند.
<th valign="top">Head aligned from above</th>
8. bgcolor
ویژگی bgcolor رنگ پس‌زمینه سلول سرستون را تعیین می‌کند. این ویژگی می‌تواند با نام رنگ یا کد هگزادسیمال رنگ مشخص شود.
<th bgcolor="lightblue">Headstone with light blue background</th>
9. style
ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به سلول سرستون استفاده می‌شود.
<th style="color: red;">Headboard with interior style</th>
10. class
ویژگی class برای اختصاص یک یا چند کلاس CSS به سلول سرستون استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.
<th class="highlight">Head with class</th>
11. id
ویژگی id یک شناسه یکتا به سلول سرستون اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این سلول در CSS یا JavaScript استفاده کرد.
<th id="unique-header">Header with unique ID</th>
تگ <td>دارای چه attribute هایی است؟
تگ <td> در HTML برای تعریف سلول‌های داده (data cells) در یک جدول استفاده می‌شود. این تگ به عنوان یک سلول در سطرهای داده‌های جدول عمل می‌کند. تگ <td> دارای ویژگی‌های متعددی است که به شما امکان می‌دهد ظاهر و رفتار سلول‌های داده را سفارشی‌سازی کنید.
1. colspan
ویژگی colspan تعداد ستون‌هایی را که سلول داده باید بر آن‌ها گسترده شود، تعیین می‌کند.
<td colspan="2">Expanded cell</td>
2. rowspan
ویژگی rowspan تعداد سطرهایی را که سلول داده باید بر آن‌ها گسترده شود، تعیین می‌کند.
<td rowspan="2">Expanded cell in rows</td>
3. headers
ویژگی headers یک لیست از شناسه‌های سلول‌های سرستون که سلول داده به آن‌ها مرتبط است، تعیین می‌کند. این ویژگی برای بهبود دسترسی‌پذیری جدول‌ها مفید است.
<td headers="id1 id2">Data related to headers</td>
4. align
ویژگی align نحوه تراز کردن محتوای سلول داده را تعیین می‌کند. مقادیر ممکن شامل left, center, و right هستند.
<td align="center">Central data</td>
5. valign
ویژگی valign نحوه تراز عمودی محتوای سلول داده را تعیین می‌کند. مقادیر ممکن شامل top, middle, bottom, و baseline هستند.
<td valign="top">Data aligned from above</td>
6. bgcolor
ویژگی bgcolor رنگ پس‌زمینه سلول داده را تعیین می‌کند. این ویژگی می‌تواند با نام رنگ یا کد هگزادسیمال رنگ مشخص شود.
<td bgcolor="lightblue">Data with light blue background</td>
7. width
ویژگی width عرض سلول داده را تعیین می‌کند. می‌توانید عرض سلول را به صورت درصد یا پیکسل مشخص کنید.
<td width="50%">50% width data</td>
8. height
ویژگی height ارتفاع سلول داده را تعیین می‌کند. می‌توانید ارتفاع سلول را به صورت درصد یا پیکسل مشخص کنید.
<td height="100">Data with a height of 100 pixels</td>
9. style
ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به سلول داده استفاده می‌شود.
<td style="color: red;">Data with internal style</td>
10. class
ویژگی class برای اختصاص یک یا چند کلاس CSS به سلول داده استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.
<td class="highlight">Data with class</td>
11. id
ویژگی id یک شناسه یکتا به سلول داده اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این سلول در CSS یا JavaScript استفاده کرد.
<td id="unique-data">Data with a unique identifier</td>
تگ‌های <thead>, <tbody>, و <tfoot>
تگ‌های <thead>, <tbody>, و <tfoot> در HTML برای ساختاردهی و سازماندهی جداول به بخش‌های مختلف استفاده می‌شوند. این تگ‌ها به شما کمک می‌کنند تا جداول خود را به صورت منطقی و قابل فهم‌تر طراحی کنید. هر یک از این تگ‌ها برای بخش خاصی از جدول به کار می‌روند و می‌توانند به بهبود خوانایی و دسترسی‌پذیری جداول کمک کنند.
تگ <thead>
تگ <thead> برای تعریف بخش هدر (سرستون) جدول استفاده می‌شود. این تگ معمولاً شامل یک یا چند سطر سرستون است که با تگ‌های <th> تعریف می‌شوند.
تگ <tbody>
تگ <tbody> برای تعریف بدنه اصلی جدول استفاده می‌شود. این تگ شامل سطرهای داده‌های جدول است که با تگ‌های <tr> و سلول‌های داده‌ای که با تگ‌های <td> تعریف می‌شوند.
تگ <tfoot>
تگ <tfoot> برای تعریف بخش پاورقی (پایین‌جدول) استفاده می‌شود. این تگ معمولاً شامل سطرهای جمع‌بندی، توضیحات اضافی یا اطلاعات تکمیلی درباره جدول است.
مثال جامع با استفاده از تگ‌های <thead>, <tbody>, و <tfoot>
<!DOCTYPE html>
<html>
<head>
<title>Comprehensive example of thead, tbody, tfoot tags</title>
</head>
<body>
<h1>Comprehensive example of thead, tbody, tfoot tags</h1>
<table border="1">
<thead>
<tr>
<th>name</th>
<th>age</th>
<th>job</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ali</td>
<td>30</td>
<td>programmer</td>
</tr>
<tr>
<td>Sara</td>
<td>25</td>
<td>Graphic Designer</td>
</tr>
<tr>
<td>Mohammad</td>
<td>28</td>
<td>project manager</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total number of people: 3</td>
</tr>
</tfoot>
</table>
</body>
</html>
تگ‌های <thead>, <tbody>, و <tfoot> دارای چه attribute هایی هستند؟
1. align
ویژگی align برای تنظیم نحوه تراز کردن محتوای سلول‌های موجود در این بخش‌ها استفاده می‌شود. مقادیر ممکن شامل left, center, و right هستند.
<thead align="center">
<!--The contents of thead -->
</thead>
2. valign
ویژگی valign برای تنظیم نحوه تراز عمودی محتوای سلول‌های موجود در این بخش‌ها استفاده می‌شود. مقادیر ممکن شامل top, middle, bottom, و baseline هستند.
<tbody valign="top">
<!-- The contents of tbody -->
</tbody>
3. char
ویژگی char برای تنظیم یک کاراکتر ترازکننده استفاده می‌شود. این ویژگی برای تراز کردن محتوای سلول‌ها بر اساس یک کاراکتر خاص مانند نقطه اعشاری مفید است.
<tfoot char=".">
<!-- The contents of tfoot -->
</tfoot>
4. charoff
ویژگی charoff برای تنظیم جابجایی از موقعیت کاراکتر ترازکننده استفاده می‌شود. مقدار این ویژگی به صورت عددی (پیکسل یا درصد) تعیین می‌شود.
<thead char="." charoff="10">
<!-- The contents of thead -->
</thead>
5. bgcolor
ویژگی bgcolor برای تنظیم رنگ پس‌زمینه بخش‌های جدول استفاده می‌شود. این ویژگی می‌تواند با نام رنگ یا کد هگزادسیمال رنگ مشخص شود.
<tbody bgcolor="#f2f2f2">
<!-- The contents of tbody -->
</tbody>
6. style
ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به بخش‌های جدول استفاده می‌شود.
<thead style="background-color: lightblue;">
<!-- The contents of thead -->
</thead>
7. class
ویژگی class برای اختصاص یک یا چند کلاس CSS به بخش‌های جدول استفاده می‌شود. این کلاس‌ها می‌توانند برای اعمال استایل‌های خاص به تگ‌ها استفاده شوند.
<tfoot class="footer-class">
<!-- The contents of tfoot -->
</tfoot>
8. id
ویژگی id یک شناسه یکتا به بخش‌های جدول اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این بخش‌ها در CSS یا JavaScript استفاده کرد.
<tbody id="unique-body">
<!-- The contents of tbody -->
</tbody>
تگ‌های <thead>, <tbody>, و <tfoot> در HTML ابزارهای قدرتمندی برای ساختاردهی و سازماندهی جداول هستند. با استفاده از این تگ‌ها، می‌توانید جداول خود را به صورت منطقی‌تر و قابل فهم‌تر طراحی کنید. این تگ‌ها به بهبود خوانایی، دسترسی‌پذیری و مدیریت داده‌ها کمک می‌کنند. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ‌های <thead>, <tbody>, و <tfoot> کمک کرده باشد.
جداول تو در تو در HTML
جداول تو در تو در HTML یکی از روش‌های قدرتمند برای نمایش داده‌های پیچیده و ساختارمند هستند. در این روش، یک جدول در داخل سلولی از یک جدول دیگر قرار می‌گیرد. این ویژگی به شما امکان می‌دهد تا داده‌های خود را به صورت سلسله‌مراتبی نمایش دهید و بخش‌های مختلف اطلاعات را به صورت منطقی و منظم سازماندهی کنید.
ساختار جداول تو در تو
ساختار جداول تو در تو به این صورت است که یک جدول (جدول فرزند) در داخل یک سلول از جدول دیگر (جدول والد) قرار می‌گیرد. برای این کار، از تگ‌های معمولی HTML برای جداول استفاده می‌کنیم.
مثال ساده از جداول تو در تو
در این مثال، یک جدول ساده شامل یک سلول است که در داخل آن یک جدول دیگر قرار دارد:
<!DOCTYPE html>
<html>
<head>
<title>An example of a nested table</title>
<style>
table {
width: 50%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
.inner-table {
width: 100%;
}
</style>
</head>
<body>
<h1>An example of a nested table</h1>
<table>
<tr>
<th>name</th>
<th>the details</th>
</tr>
<tr>
<td>Ali</td>
<td>
<table class="inner-table">
<tr>
<th>age</th>
<th>job</th>
</tr>
<tr>
<td>30</td>
<td>programmer</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Sara</td>
<td>
<table class="inner-table">
<tr>
<th>age</th>
<th>job</th>
</tr>
<tr>
<td>25</td>
<td>Graphic Designer</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
در این مثال:
- جدول والد شامل دو ستون برای نام و جزئیات است.
- در سلول ستون "جزئیات"، یک جدول دیگر (جدول فرزند) قرار گرفته که شامل دو ستون برای سن و شغل است.
- کلاس
inner-tableبرای استایل‌دهی به جداول تو در تو استفاده شده است تا عرض آن‌ها به طور کامل درون سلول والد قرار گیرد.
جداول تو در تو در HTML یک ابزار قدرتمند برای نمایش داده‌های پیچیده و سلسله‌مراتبی هستند. با استفاده از این تکنیک، می‌توانید جداولی با ساختارهای پیچیده‌تر و قابل فهم‌تر ایجاد کنید. همچنین، با استفاده از CSS می‌توانید ظاهر جداول تو در تو را بهبود دهید و تجربه کاربری بهتری را فراهم کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از جداول تو در تو در HTML کمک کرده باشد.
تگ <caption>
تگ <caption> در HTML برای افزودن عنوان به یک جدول استفاده می‌شود. این تگ معمولاً در ابتدای جدول و درست بعد از تگ <table> قرار می‌گیرد. عنوان جدول که در تگ <caption> قرار می‌گیرد، به کاربران کمک می‌کند تا مفهوم و محتوای جدول را بهتر درک کنند. استفاده از این تگ نه تنها به بهبود دسترسی‌پذیری جداول کمک می‌کند بلکه جداول را نیز بهتر سازماندهی و معرفی می‌کند.
تگ <caption> به سادگی قابل استفاده است و ساختار آن به شکل زیر می‌باشد:
<table>
<caption>Table title</caption>
<!-- Other table tags -->
</table>
ویژگی‌های تگ <caption>
تگ <caption> می‌تواند از ویژگی‌های عمومی HTML که برای سایر تگ‌ها نیز استفاده می‌شود، بهره‌برداری کند. در زیر به برخی از مهم‌ترین ویژگی‌های تگ <caption> اشاره می‌کنیم:
1. align
ویژگی align برای تنظیم نحوه تراز کردن عنوان جدول استفاده می‌شود. این ویژگی در HTML5 منسوخ شده است و به جای آن از CSS استفاده می‌شود.
<caption align="left">Left aligned title</caption>
2. class
ویژگی class برای اختصاص یک یا چند کلاس CSS به تگ <caption> استفاده می‌شود.
<caption class="table-caption">Table title</caption>
3. style
ویژگی style برای اعمال استایل‌های CSS به صورت مستقیم و داخلی به تگ <caption> استفاده می‌شود.
<caption style="color: red;">Table title</caption>
4. id
ویژگی id یک شناسه یکتا به تگ <caption> اختصاص می‌دهد که می‌توان از آن برای ارجاع دادن به این تگ در CSS یا JavaScript استفاده کرد.
<caption id="unique-caption">Table title</caption>
مثال جامع با استفاده از ویژگی‌های مختلف تگ <caption>
در این مثال، از چندین ویژگی تگ <caption> برای تنظیم ظاهر و رفتار عنوان جدول استفاده شده است:
<!DOCTYPE html>
<html>
<head>
<title>A comprehensive example of the features of the caption tag</title>
<style>
table {
width: 70%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
.table-caption {
caption-side: top;
font-weight: bold;
font-size: 1.5em;
color: darkgreen;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>A comprehensive example of the features of the caption tag</h1>
<table>
<caption class="table-caption" id="unique-caption">List of users</caption>
<tr>
<th>name</th>
<th>age</th>
<th>job</th>
</tr>
<tr>
<td>Ali</td>
<td>30</td>
<td>programmer</td>
</tr>
<tr>
<td>Sara</td>
<td>25</td>
<td>Graphic Designer</td>
</tr>
<tr>
<td>Mohammad</td>
<td>28</td>
<td>project manager</td>
</tr>
</table>
</body>
</html>
تگ <script>
تگ <script> در HTML برای گنجاندن یا ارجاع به کدهای جاوااسکریپت استفاده می‌شود. جاوااسکریپت یک زبان برنامه‌نویسی است که به شما امکان می‌دهد تا صفحات وب تعاملی و پویا بسازید. تگ <script> می‌تواند کدهای جاوااسکریپت را به دو صورت درون‌خطی (inline) و خارجی (external) در صفحات HTML قرار دهد.
تگ <script> به صورت زیر استفاده می‌شود:
- کد جاوااسکریپت درون‌خطی:
<script>
// JavaScript codes are placed here
alert("Hello, world!");
</script>
2. ارجاع به فایل جاوااسکریپت خارجی:
<script src="path/to/your/script.js"></script>
مثال ساده از استفاده تگ <script>
کد جاوااسکریپت درون‌خطی
در این مثال، از تگ <script> برای نمایش یک پیغام ساده استفاده می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>Example of inline JavaScript code</title>
</head>
<body>
<h1>Example of inline JavaScript code</h1>
<script>
alert("Hello, world!");
</script>
</body>
</html>
ارجاع به فایل جاوااسکریپت خارجی
در این مثال، از تگ <script> برای ارجاع به یک فایل جاوااسکریپت خارجی استفاده می‌کنیم:
<!DOCTYPE html>
<html>
<head>
<title>Example of external JavaScript code</title>
<script src="script.js"></script>
</head>
<body>
<h1>Example of external JavaScript code</h1>
</body>
</html>
فایل script.js:
alert("Hello, world!");
ویژگی‌های تگ <script>
تگ <script> دارای چندین ویژگی است که به شما امکان می‌دهد تا رفتار و نحوه بارگذاری اسکریپت‌ها را کنترل کنید:
1. src
ویژگی src مسیر فایل جاوااسکریپت خارجی را مشخص می‌کند.
<script src="path/to/your/script.js"></script>
2. type
ویژگی type نوع MIME اسکریپت را مشخص می‌کند. مقدار پیش‌فرض آن text/javascript است. در HTML5 این ویژگی معمولاً نیازی به تعیین ندارد زیرا جاوااسکریپت به طور پیش‌فرض استفاده می‌شود.
<script type="text/javascript">
// JavaScript code
</script>
3. async
ویژگی async برای بارگذاری غیرهمزمان اسکریپت‌ها استفاده می‌شود. این ویژگی به مرورگر اجازه می‌دهد تا اسکریپت را در پس‌زمینه بارگذاری کرده و بلافاصله پس از دانلود اجرا کند.
<script src="path/to/your/script.js" async></script>
4. defer
ویژگی defer برای تأخیر در اجرای اسکریپت‌ها تا زمانی که کل صفحه بارگذاری شود، استفاده می‌شود. این ویژگی به مرورگر اجازه می‌دهد تا اسکریپت را در پس‌زمینه بارگذاری کرده و پس از تکمیل بارگذاری صفحه، آن را اجرا کند.
<script src="path/to/your/script.js" defer></script>
5. charset
ویژگی charset نوع کدگذاری کاراکترهای اسکریپت خارجی را مشخص می‌کند.
<script src="path/to/your/script.js" charset="UTF-8"></script>
استفاده از ویژگی‌های مختلف تگ <script>
در این مثال، از چندین ویژگی تگ <script> برای تنظیم نحوه بارگذاری و اجرای اسکریپت‌ها استفاده شده است:
<!DOCTYPE html>
<html>
<head>
<title>A comprehensive example of script tag features</title>
<script src="script1.js" async></script>
<script src="script2.js" defer></script>
</head>
<body>
<h1>A comprehensive example of script tag features</h1>
<script charset="UTF-8">
console.log("Inline JavaScript code with UTF-8 encoding");
</script>
</body>
</html>
تفاوت async و defer
async: اسکریپت به صورت غیرهمزمان بارگذاری و بلافاصله پس از دانلود اجرا می‌شود. این ویژگی بیشتر برای اسکریپت‌هایی مناسب است که به محتوای صفحه وابسته نیستند.defer: اسکریپت به صورت غیرهمزمان بارگذاری و پس از تکمیل بارگذاری صفحه اجرا می‌شود. این ویژگی برای اسکریپت‌هایی مناسب است که به محتوای صفحه وابسته هستند.
تگ <script> در HTML ابزار قدرتمندی برای گنجاندن یا ارجاع به کدهای جاوااسکریپت در صفحات وب است. با استفاده از این تگ می‌توانید صفحات وب تعاملی و پویا ایجاد کنید. ویژگی‌های مختلف این تگ مانند src, type, async, defer, و charset به شما امکان می‌دهند تا کنترل بیشتری بر روی نحوه بارگذاری و اجرای اسکریپت‌ها داشته باشید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <script> کمک کرده باشد.
تگ <base>
تگ <base> در HTML برای تعریف URL پایه‌ای (base URL) استفاده می‌شود که تمام لینک‌های نسبی در سند HTML بر اساس آن تفسیر می‌شوند. این تگ باید در داخل بخش <head> سند قرار گیرد و تنها یک بار استفاده شود. استفاده از تگ <base> می‌تواند مدیریت لینک‌ها را ساده‌تر کند و اطمینان حاصل کند که تمام لینک‌های نسبی به درستی تفسیر می‌شوند.
ویژگی‌های تگ <base>
تگ <base> دارای دو ویژگی مهم است:
href: این ویژگی URL پایه را تعیین می‌کند.target: این ویژگی مقصد پیش‌فرض برای لینک‌ها و فرم‌های سند را تعیین می‌کند.
ساختار تگ <base>
تگ <base> به صورت زیر استفاده می‌شود:
<base href="https://www.example.com/" target="_blank">
ویژگی href آدرس پایه را تعیین می‌کند که لینک‌های نسبی بر اساس آن تفسیر می‌شوند. اگر این ویژگی تعیین نشود، لینک‌های نسبی بر اساس URL فعلی سند تفسیر می‌شوند.
<base href="https://www.example.com/">
ویژگی target مقصد پیش‌فرض برای لینک‌ها و فرم‌ها را تعیین می‌کند. مقادیر ممکن شامل _self, _blank, _parent, و _top هستند.
_self: لینک در همان فریم یا زبانه باز می‌شود (پیش‌فرض)._blank: لینک در یک زبانه یا پنجره جدید باز می‌شود._parent: لینک در فریم والد باز می‌شود._top: لینک در کل صفحه باز می‌شود، جایگزین تمام فریم‌ها.
<base href="https://www.example.com/" target="_blank">
ترکیب ویژگی‌های href و target
می‌توانید هر دو ویژگی href و target را در تگ <base> ترکیب کنید تا هم URL پایه و هم مقصد پیش‌فرض لینک‌ها را تعیین کنید.
<!DOCTYPE html>
<html>
<head>
<title>A comprehensive example of the base tag</title>
<base href="https://www.example.com/" target="_blank">
</head>
<body>
<h1>A comprehensive example of the base tag</h1>
<a href="page1.html">Page 1</a>
<a href="page2.html">Page 2</a>
<form action="submit-form">
<button type="submit">submit</button>
</form>
</body>
</html>
در این مثال:
- لینک‌های نسبی
page1.htmlوpage2.htmlبه URLهایhttps://www.example.com/page1.htmlوhttps://www.example.com/page2.htmlتفسیر می‌شوند. - لینک‌ها و فرم‌ها به صورت پیش‌فرض در یک زبانه یا پنجره جدید باز می‌شوند.
نکات مهم درباره تگ <base>
- تگ
<base>باید در بخش<head>سند و قبل از هر تگ<link>یا<script>قرار گیرد. - تنها یک تگ
<base>در هر سند HTML مجاز است. اگر بیش از یک تگ<base>وجود داشته باشد، فقط اولین تگ تفسیر می‌شود. - تگ
<base>فقط بر روی لینک‌های نسبی تأثیر می‌گذارد و لینک‌های مطلق را تغییر نمی‌دهد.
تگ <base> در HTML ابزار مفیدی برای تعیین URL پایه و مقصد پیش‌فرض لینک‌ها و فرم‌ها است. با استفاده از این تگ، می‌توانید مدیریت لینک‌های نسبی را ساده‌تر کنید و اطمینان حاصل کنید که لینک‌ها به درستی تفسیر می‌شوند. همچنین، با استفاده از ویژگی target می‌توانید رفتار لینک‌ها و فرم‌ها را کنترل کنید. امیدوارم این توضیحات به شما در درک بهتر و استفاده مؤثرتر از تگ <base> کمک کرده باشد.
تگ <link>
تگ <link> در HTML برای پیوند دادن سند HTML با منابع خارجی استفاده می‌شود. این تگ معمولاً برای لینک‌دهی به فایل‌های CSS، آیکون‌های وب‌سایت (favicon)، و دیگر منابع مورد نیاز برای نمایش و کارکرد صحیح صفحه وب به کار می‌رود. تگ <link> باید در بخش <head> سند HTML قرار گیرد و تنها در این بخش معتبر است.
ویژگی‌های تگ <link>
تگ <link> دارای چندین ویژگی مهم است که برای پیوند دادن سند HTML با منابع خارجی استفاده می‌شود. در زیر به برخی از مهم‌ترین ویژگی‌های تگ <link> اشاره می‌کنیم:
1. rel
ویژگی rel نوع رابطه بین سند HTML و منبع خارجی را تعیین می‌کند. مقادیر معمول شامل stylesheet, icon, alternate, author, و preload هستند.
<link rel="stylesheet" href="styles.css">
2. href
ویژگی href مسیر منبع خارجی را مشخص می‌کند.
<link rel="stylesheet" href="styles.css">
3. type
ویژگی type نوع MIME منبع را مشخص می‌کند. برای فایل‌های CSS، مقدار معمول text/css است.
<link rel="stylesheet" href="styles.css" type="text/css">
4. media
ویژگی media نوع دستگاه یا رسانه‌ای که منبع برای آن مناسب است را تعیین می‌کند. این ویژگی معمولاً برای تعیین استایل‌های مختلف برای دستگاه‌های مختلف مانند چاپگرها و صفحه‌نمایش‌ها استفاده می‌شود.
<link rel="stylesheet" href="print.css" media="print">
5. sizes
ویژگی sizes اندازه‌های آیکون را مشخص می‌کند. این ویژگی برای لینک‌دهی به آیکون‌های وب‌سایت (favicon) مفید است.
<link rel="icon" href="favicon.png" sizes="32x32">
6. title
ویژگی title یک عنوان توصیفی برای منبع خارجی ارائه می‌دهد.
<link rel="stylesheet" href="styles.css" title="Main Stylesheet">
استفاده از تگ <link> برای پیوند دادن به فایل‌های CSS
یکی از معمول‌ترین کاربردهای تگ <link> پیوند دادن به فایل‌های CSS است. در اینجا مثالی از پیوند دادن به یک فایل CSS آورده شده است:
<!DOCTYPE html>
<html>
<head>
<title>Link tag example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is an example of using the link tag</h1>
<p>This page uses an external CSS file.</p>
</body>
</html>
استفاده از تگ <link> برای آیکون وب‌سایت (favicon)
تگ <link> همچنین برای پیوند دادن به آیکون‌های وب‌سایت (favicon) استفاده می‌شود. در اینجا مثالی از پیوند دادن به یک فایل آیکون آورده شده است:
<!DOCTYPE html>
<html>
<head>
<title>Example link tag for favicon</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>This is an example of using the link tag for a favicon</h1>
<p>This page has a website icon.</p>
</body>
</html>
استفاده از ویژگی media برای استایل‌دهی به دستگاه‌های مختلف
با استفاده از ویژگی media، می‌توانید استایل‌های مختلفی را برای دستگاه‌های مختلف مانند چاپگرها و صفحه‌نمایش‌ها اعمال کنید:
<!DOCTYPE html>
<html>
<head>
<title>Example of link tag with media</title>
<link rel="stylesheet" href="styles.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
</head>
<body>
<h1>This is an example of using the link tag with media</h1>
<p>This page has different styles for screen and printer.</p>
</body>
</html>
ویژگی‌های پیشرفته تگ <link>
1. preload
ویژگی rel="preload" برای بارگذاری منابع ضروری قبل از نیاز به آن‌ها استفاده می‌شود، که می‌تواند عملکرد صفحه را بهبود دهد.
<link rel="preload" href="important-script.js" as="script">
2. alternate
ویژگی rel="alternate" برای ارائه نسخه‌های جایگزین از سند، مانند نسخه‌های مختلف زبان، استفاده می‌شود.
<link rel="alternate" href="https://example.com/es/" hreflang="es" title="Versión en español">
مثال جامع با استفاده از ویژگی‌های مختلف تگ <link>
در این مثال، از چندین ویژگی تگ <link> برای پیوند دادن به منابع مختلف استفاده شده است:
<!DOCTYPE html>
<html>
<head>
<title>A comprehensive example of link tag features</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon" sizes="32x32">
<link rel="stylesheet" href="print.css" media="print">
<link rel="alternate" href="https://example.com/es/" hreflang="es" title="Versión en español">
<link rel="preload" href="important-script.js" as="script">
</head>
<body>
<h1>A comprehensive example of link tag features</h1>
<p>This page uses several external sources.</p>
</body>
</html>
خب دوستان، تا اینجا یاد گرفتیم که چطور با استفاده از CSS به عناصر HTML استایل بدهیم، لینک‌های داخلی و خارجی ایجاد کنیم، جداول ساده و تو در تو بسازیم، و از تگ‌های مهمی مثل <meta>، <script>، <base> و <link> استفاده کنیم. امیدوارم این قسمت از آموزش برایتان مفید بوده باشد و بتوانید از این مطالب در پروژه‌های خود استفاده کنید. به زودی با قسمت‌های بعدی آموزش HTML در خدمت شما خواهم بود. موفق باشید!
صادق جعفری
از کودکی به کامپیوتر و دنیای دیجیتال علاقه داشتم، به همین دلیل ترک تحصیل کردم و تمام تلاش خودم را صرفا برای یادگیری کامپیوتر، طراحی، برنامه نویسی و ... به کار گرفتم. در کنار مشاغل مختلفی که مجبور به انجامشان بودم برنامه نویسی را یاد گرفتم و از سال 1390 وارد بازار کار شدم و همیشه در تلاش هستم تا چالش های روبرو را با موفقیت پشت سر بگذارم.
شبکه های اجتماعی من