آموزش HTML - جلسه هشتم
سلام و صد سلام و درود فراوان به همه دوستای خوب و همراه من در سری آموزشی برنامه‌نویسی تحت وب. حالتون چطوره؟ احوالتون چطوره؟ خوبین؟ خداروشکر!!! قبل از هرچیزی پیشاپیش میلاد امام رضا (ع) رو خدمت همتون تبریک عرض می‌کنم. ان‌شالله عنایات خاصه حضرتش شامل حال همگی ما بشود.
اما دوستان عزیزم در جلسه قبلی به بررسی لینک‌ها و صفت‌هاشون در اسناد HTML پرداختیم. امروز قصد داریم به بررسی عنصر <head> در یک سند HTML بپردازیم و اینکه این عنصر چه کاربردی داره و ازش چه استفاده‌هایی می‌توان کرد. بحث امروز یک بحث پایه‌ای است و تمنا دارم همانند جلسات قبل دقت لازم را، بیش از پیش مبذول بفرمائید. با ما همراه باشید.
عنصر <head> و کاربرد آن:
عنصر <head> یک ظرف برای قرارگیری دیگر عناصر سربرگ سند HTML شماست. این عناصر می‌توانند شامل اسکریپت‌ها،استایل‌های ضمیمه‌شده به سند HTML، اطلاعات meta و ... شوند. محتویات درون ظرف <head> برای خوانندگان صفحات وب قابل مشاهده نیستند، اما موتورهای جستجو بهره فراوانی از آن می‌برند. عنصر <head> شامل عنصرهای متفاوتی می‌شود که در زیر آن‌ها را بررسی کرده‌ایم:
عنصر <title>:
تگ <title> یکی از ضروریات هر صفحه وب است. به وسیله این تگ عنوان صفحه وب ما تعریف می‌شود. این تگ هم‌چنین عنوان صفحه وب‌شما را در نتایج جستجوی موتورهای جستجو به نمایش در می‌آورد. تگ <title> درون ظرف <head> به صورت زیر تعریف می‌شود:
<head>
<title>The Title of your web-page</title>
</head>
عنصر <base>:
تگ <base> یک آدرس پایه‌ای و مبنا را در برای تمام آدرس‌های مرتبط با آن در سند HTML شما تعریف می‌کند. هر سند HTML حداکثر یک آدرس پایه و مبنا خواهد داشت و باید به وسیله تگ <base> و درون ظرف <head> تعریف شود. می‌توانید این تگ را به عنوان اولین "درون عنصر"، در داخل عنصر <head> قرار دهید تا تمامی لینک‌های شما از آدرس base شما استفاده کنند. تگ <base> از Global Attributes پشتیبانی می‌کند. برای استفاده از تگ <base> به این صورت عمل کنید:
<head>
<base href="http://www.ayavand.blog.ir/images/" target="_blank">
</head>
پس از تعریف آدرس پایه‌ی خود می‌توانید به روش زیر از آن، در آدرس‌دهی های خود استفاده کنید:
<body>
<img src="logo.gif">
</body>
در آدرس تصویر بالا به جای ذکر آدرس کامل، فقط نام آن به‌همراه پسوندش را ذکر می‌کنیم. در صورتی که اگر آدرس پایه را در ظرف <head> تعریف نکرده بودیم، می‌بایست به صورت زیر تصویر را آدرس دهی می‌کردیم:
http://www.ayavand.blog.ir/images/logo.gif
استفاده از تگ <base> کار آدرس‌دهی را به مراتب آسان‌تر و منظم‌تر می‌کند.
عنصر <link>:
تگ <link> وظیفه برقراری ارتباط بین یک منبع خارجی با صفحه وب ما را بر‌عهده دارد. این منبع خارجی می‌تواند یک stylesheet باشد. به‌عنوان مثال برای لینک‌کردن یک StyleSheet (بعدا راجع به آن توضیح خواهیم داد!) به یک سند HTML به روش زیر عمل می‌کنیم:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
عنصر <style>:
از عنصر <style> برای تعریف یک سبک چینش (Style) درون تگ <head> استفاده می‌کنیم. این سبک چینش نحوه قرارگیری المان‌های مختلف را در درون صفحه ما مشخص می‌کند. استایل‌ها به زبان CSS نوشته می‌شوند که در این‌جا مجال توضیح آن‌نیست و شرح آن را به آینده موکول می‌کنیم. برای تعریف یک استایل درون ظرف <head> به روش زیر عمل کنید:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
قسمتی از کدی که در بالا به رنگ بنفش تایپ شده است به زبان CSS نوشته شده است.
عنصر <meta>:
Metadata ها، ابرداده‌هایی درباره اسناد HTML ما هستند. Metadata ها برای کاربران قابل مشاهده نیستند، اما موتورهای جستجو از آن‌ها برای شناخت وب‌سایت شما استفاده می‌کنند. عناصر متا به‌طور معمول برای تعیین: شرح صفحه، کلمات کلیدی، نویسنده سند،آخرین ویرایش ارائه‌شده و ... استفاده می‌شوند. عناصر متا همواره درون ظرف <head> تعریف می‌شوند. در زیر چند نمونه از تگ‌های متا جهت آشنایی بیشتر شما آورده شده است:
<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4,">
متادیتای بالا کلمات کلیدی وب‌سایت را برای موتورهای جستجو تعریف می‌کند.
<meta name="description" content="Your description HERE">
متادیتای بالا توضیح کوتاهی برای وب‌سایت شما تعریف می‌کند.
<meta name="author" content="Amir Yavand Hasani">
متادیتای بالا نام نویسنده سند HTML را تعریف می‌کند.
<meta http-equiv="refresh" content="30">
متادیتای بالا صفحه وب شما را هر 30 ثانیه تازه‌سازی (refresh) می‌کند.
عنصر <script>:
از این عنصر برای تعریف اسکریپت‌های سمت سرویس‌گیرنده (client-side) مانند جاوا اسکریپت استفاده می‌شود. این المان در بحث‌های بعدی مورد بررسی قرار خواهد‌گرفت.
بلاخره مشکل ما هم حل شد. چند روزی بود وبلاگ های بیان نشون داده نمیشد برام. خداروشکر درس شده الان :)
راستی لینک پسرونه به جای zgig به ugig تغییر کرده دوس داشتی لینکش رو درست کن. البته سایت قبلی ریدایک شده ولی خب اینطوری بهتره
موفق باشی
یاعلی