i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)

html-meta-tags

با مفهوم تگ در زبان HTML و تگ های اصلی و کلیدی صفحات وب در آموزش پیشین آشنا شدیم، در ادامه مباحثی که بررسی کردیم خواهیم دید که شکل دیگری از تگ ها در صفحات وب به کار می روند که به خودی خود هیچ تاثیر و جلوه ظاهری در خروجی کدها ندارند اما حاوی اطلاعاتی در خصوص نوع صفحات وب و نحوه پردازش آنها هستند که این اطلاعات برای ماشین (اعم از مرورگر، ربات و...) قابل فهم و استفاده است، این نوع تگ ها را در اصطلاح متاتگ (Meta Tag) می گویند که بر خلاف تگ های معمولی (که در قسمت body درج می شوند) در قسمت head صفحه قرار می گیرند، به هر صورت در این مطلب می خواهیم در ادامه مباحث و آموزش های مقدماتی، نحوه استفاده از متاتگ ها و کاربرد آنها در صفحات وب (HTML) را با هم مرور کنیم.

استفاده از متاتگ، ضروری یا اختیاری؟


به طور کلی درج متاتگ ها در صفحات وب ممکن است ضروری، اختیاری و حتی اشتباه باشد که این موضوع بستگی به نوع کاربرد و نحوه استفاده از آنها دارد، به طور مثال متاتگ مربوط به تعیین یونیکد صفحه (charset) برای اغلب صفحات وب ضروری است چرا که برای پردازش صحیح عبارات متنی در مرورگر مورد نیاز خواهد بود یا متاتگ درج نویسنده مطلب (author) که می تواند اختیاری باشد چون مشخص نیست ربات های موتورهای جستجو تا چه میزان برای این نوع متاتگ ها اهمیت قائل هستند و دسته آخر متاتگ هایی مانند robots که باید با دقت بالا استفاده شوند چون اگر مقدار آنها به درستی تنظیم نشود ممکن است باعث ایجاد مشکل در پیمایش و پردازش صفحه وب بخصوص برای ربات های جستجوگر شوند.

ساختار کلی متاتگ ها در HTML


طبق قوانین قراردادی HTML، متاتگ ها به صورت تکی در قسمت head صفحه وب درج می شوند یعنی نیازی به بستن آنها با تگ دیگری نیست، هر تگ با عبارت meta شروع شده و می تواند یک یا چند صفت (Attribute) با نام name، charset، content، http-equiv و... داشته باشد که این مسئله رویه یکسانی ندارد و بسته به نوع و هدف از بکارگیری متاتگ متفاوت است، هر صفت نیز با یک مقدار تکمیل می شود که منظور از متاتگ را مشخص می کند.
<meta name="..." content="...">

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ساختار کلی متاتگ ها در صفحات وب</title>
<!-- Webgoo.ir -->
</head>
<body>
محتوای صفحه وب
</body>
</html>
در بیشتر متاتگ ها دو صفت name و content باید به همراه هم استفاده شوند، در ادامه به طور جزئی تر به انواع مختلف متاتگ ها و نحوه استفاده از آنها در صفحات وب اشاره خواهیم کرد.

متاتگ charset


در HTML نسخه 5 از این متاتگ جهت تعیین یونیکد صفحه وب استفاده می شود، برای اغلب موارد و از جمله زبان فارسی مقدار این متاتگ باید عبارت utf-8 باشد:
<meta charset="utf-8">
نکته: در نسخه های قدیمی تر HTML در کنار متاتگ charset از متاتگ http-equiv برای تعیین یونیکد صفحه استفاده می شود (اگرچه شیوه قدیمی در HTML5 نیز معتبر است اما روش توصیه شده استفاده صرف از متاتگ charset است).
نکته: یونیکد استانداردی تعریف شده است که با آن کاراکترهای مربوط به زبان (به فرض فارسی) جهت استفاده در سیستم های مبتنی بر متن (مانند مرورگر) ترجمه و نهایتا تبدیل به نمادهای قابل فهم برای انسان می شوند.

متاتگ viewport


منظور از عبارت viewport بخشی از پنجره مرورگر است که صفحه وب در آن قابل مشاهده باشد، این مفهوم زمانی بهتر درک می شود که به طور مثال صفحه وبی با عرض ثابت 960 پیکسل داشته باشیم اما پنجره مرورگر را به اندازه 800 پیکسل کوچک کنیم، در این حالت به احتمال زیاد در انتها اسکرول افقی خواهیم داشت و بخشی از محتوا با وجود پردازش کامل صفحه در دیدمان نخواهد بود، پیش از فراگیر شدن استفاده از انواع مختلف دستگاه های تلفن همراه، فبلت، تبلت و... اغلب صفحات وب صرفا برای مشاهده در کامپیوترهای رومیزی با مقداردهی ثابت پیکسلی طراحی می شدند، این سبک طراحی باعث می شود تا صفحات عریض وب در دستگاه های دارای صفحه نمایش کوچک مانند تلفن همراه با کوچک نمائی (Scale Down) پردازش شوند، به این صورت که مرورگر تلفن همراه صفحه وب را تا آنجا که به طور کامل در محدوده نمایش (Viewport) قرار گیرد کوچک می کند که قاعدتا نتیجه، مطلوبمان نخواهد بود و نیاز است که با انجام بزرگنمایی به صورت دستی به اندازه ایده آل دست پیدا کنیم، برای حل این مشکل شرکت اپل متاتگی تحت عنوان viewport معرفی کرد که اگرچه هنوز رسما جزئی از استاندارد HTML نیست اما به صورت مناسبی در مرورگرهای مختلف پشتیبانی می شود، نحوه استفاده از این متاتگ در اغلب موارد به صورت نمونه زیر است:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
درج این متاتگ در صفحه سبب می شود تا بتوانیم میزان بزرگنمایی اولیه را که بلافاصله پس از بارگذاری صفحه وب توسط مرورگر اعمال می شود تعیین کنیم، صفت content در این متاتگ می تواند پارامترهایی مانند width، height، initial-scale، minimum-scale، maximum-scale و user-scalable با مقادیری به شرح زیر داشته باشد:
width: مقدار پیکسلی مانند 960 یا عبارت device-width به معنی عرض دستگاه.
height: مقدار پیکسلی مانند 960 یا عبارت device-height به معنی ارتفاع دستگاه.
initial-scale: مقدار بزرگنمائی اولیه، معمولا با عدد 1.0 (به معنی عدم بزرگنمایی) تعریف می شود اما می تواند مقادیر عددی دیگری بپذیرد.
minimum-scale: حداقل بزرگنمائی مجاز، عدد 1.0 نقطه شروع و به معنی عدم بزرگنمایی.
minimum-scale: حداکثر بزرگنمائی مجاز، عدد 1.0 نقطه شروع و به معنی عدم بزرگنمایی.
user-scalable: وجود یا عدم وجود قابلیت بزرگنمائی دستی توسط کاربر، با مقدار yes یا no تعریف می شود.
در شیوه های نوین طراحی قالب های وب که صفحات را به صورت واکنش گرا (Responsive) طراحی می کنند، در کنار مقداردهی درصدی (به جای مقداردهی ثابت پیکسلی) و استفاده از امکاناتی چون Media Query در CSS، درج متاتگ viewport نیز نباید فراموش شود، البته برای نوآموزان HTML صرف آشنایی اولیه با این متاتگ کفایت خواهد کرد.

متاتگ های صفت http-equiv


عبارت equiv در این نوع متاتگ مخفف equivalent به معنی معادل است، لذا این متاتگ معادل سربرگ های HTTP را تنظیم می کند، متاتگ با صفت http-equiv می تواند مقادیری چون content-type، refresh، cache-control، cookie و... داشته باشد، در واقع تمام این موارد معادل سربرگ های HTTP هستند که می توان با روش های دیگر مانند استفاده از برنامه نویسی PHP نیز آنها را تنظیم کرد.

متاتگ http-equiv، مقدار content-type


تنظیم مقدار صفت متاتگ http-equiv با عبارت content-type به مرورگر خواهد گفت که صفحه وب ما از چه ساختاری استفاده و کاراکترهای آن از چه یونیکدی پیروی می کند، یک مثال برای استفاده از این متاتگ:
<meta http-equiv="content-type" content="text/html; charset=utf-8">
نکته: در HTML نسخه 5 برای تنظیم یونیکد صفحه نیازی به http-equiv نیست و کافی است که از صفت charset استفاده کنیم.

متاتگ http-equiv، مقدار refresh


مقدار دیگری که می توان برای متاتگ http-equiv در نظر گرفت عبارت refresh است که برای تازه سازی صفحه یا انتقال خودکار کاربر به آدرس URL جدید استفاده می شود، در این حالت باید از صفت content نیز استفاده کنیم، صفت content می تواند شامل مقدار زمان به ثانیه جهت تازه سازی صفحه و همچنین آدرس URL مقصد باشد:
<meta http-equiv="refresh" content="5">

<meta http-equiv="refresh" content="10; url=http://yoursite.com">
عددی که در این متاتگ درج شده، مقدار زمان به ثانیه ای است که بعد از آن کاربر به آدرس جدید منتقل خواهد شد، همان طور که در مثال مشخص است، درج آدرس URL اختیاری است و می توانیم این قسمت را تنظیم نکنیم (در این صورت همان صفحه فعلی تازه سازی خواهد شد).

متاتگ http-equiv، مقدار cache-control


این متاتگ برای مدیریت نحوه ذخیره موقت یا به اصطلاح Cache شدن صفحات وب در مرورگر کاربران به کار می رود، در حالت معمول اغلب مرورگرها محتویات صفحات وب از جمله تصاویر و فایل ها را در حافظه موقت سیستم ذخیره و نگهداری می کنند تا در مراجعات بعدی با سرعت بیشتری به منابع مورد نیاز جهت نمایش صفحه وب دست پیدا کنند، اما گاهی نیاز می شود که محتوای برخی صفحات از این عمل مصون بمانند، بدین منظور از متاتگ cache-control به یکی از شیوه های زیر استفاده می کنیم:
<meta http-equiv="cache-control" content="public">
<meta http-equiv="cache-control" content="private">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="cache-control" content="no-store">
معنی مقادیر صفت content این متاتگ به قرار زیر است:
- public: محتوا در حافظه مشترک تمام کاربران یک سیستم ذخیره می شود.
- private: محتوا تنها در حافظه نام کاربری فعلی ذخیره می شود.
- no-cache: هیچ ذخیره ای از محتوا در حافظه صورت نمی گیرد.
- no-store: در محدوده زمانی کوتاهتری محتوا ذخیره و نگهداری می شود و به صورت آرشیو در نمی آید.

متاتگ http-equiv، مقدار set-cookie


عبارت دیگری که می توانیم به عنوان مقدار برای متاتگ http-equiv تنظیم کنیم set-cookie است، با این عبارت می توانیم یک کوکی را با نام، مقدار، مسیر و تاریخ انقضای مشخص تعریف کنیم:
<meta http-equiv="set-cookie" content="user_id=123; path=/; expires= Saturday, 13-Jan-18 23:59:59 GMT">
در نمونه بالا قسمت user_id=123 نام کوکی و مقدار آن، قسمت path مسیر کوکی (آدرسی که کوکی در آن اعمال می شود) و قسمت expires تاریخ انقضای کوکی (با فرمت Day, DD-MMM-YY HH:MM:SS Timezone) را شامل می شود.
نکته: همان طور که اشاره کردیم متاتگ های گروه http-equiv در واقع روش های جایگزینی برای تنظیم سربرگ های HTTP هستند که معمولا توسط برنامه نویسی سمت سرور مانند PHP تنظیم می شوند.

متاتگ description


یکی از متاتگ هایی که به لحاظ علم بهینه سازی صفحات وب برای موتورهای جستجو (SEO) اهمیت زیادی دارد، متاتگ description است که مانند سایر متاتگ ها در قسمت head صفحه درج می شود، این متاتگ معمولا شامل توضیحی در حد یک یا چند سطر از خلاصه محتوای صفحه است، مثال:
<meta name="description" content="توضیحی در حد چند سطر از محتوای صفحه وب خود را در این قسمت درج می کنیم.">
با توجه به اهمیت رعایت سئو در صفحات وب می توان استفاده از این متاتگ را ضروری در نظر گرفت، محتوای متاتگ description می تواند بخشی از مطلب اصلی نیز باشد، به طور مثال پاراگراف اول یا نتیجه پایانی مطلب، معمولا موتورهای جستجو این اطلاعات را در هنگام نمایش لیست نتایج جستجو به کاربران نمایش می دهند.

متاتگ keywords


زمانی نچندان دور متاتگ keywords مانند متاتگ description دارای اهمیت زیادی در علم بهینه سازی صفحات وب برای موتورهای جستجو (SEO) بود، اما اکنون به دلیل تغییر الگوریتم های به کار رفته در موتورهای جستجو و حساسیت بالای این الگوریتم ها در شناسایی صفحات اسپم و جعلی، از میزان اهمیت این متاتگ کاسته شده و به نوعی آن را به حالت اختیاری و حتی غیرضروری درآورده که احتمالا صرفا توسط موتورهای جستجوی متفرقه مورد استفاده قرار می گیرد، به هر صورت نحوه تنظیم این متاتگ به شکل زیر است:
<meta name="keywords" content="کلمات, کلیدی, صفحه, وب">
برای جدا سازی کلمات کلیدی در متاتگ keywords، از علامت ویرگول (به صورت زبان انگلیسی) استفاده می کنیم، دقت کنیم که تعداد کلمات کلیدی نباید خیلی کم یا خیلی زیاد باشند، هرچند استاندارد خاصی برای این موضوع وجود ندارد، اما عدد حداقل 3 و حداکثر 10 می تواند منطقی باشد.

متاتگ robots


این متاتگ برای اعمال دستوراتی که ربات های خزنده وب (Web Crawler Bots) از آنها پیروی می کنند مورد استفاده قرار می گیرد، منظور از ربات های خزنده وب برنامه هایی هستند که با هدف پیمایش خودکار صفحات وب نوشته شده اند، این ربات ها می توانند مربوط به موتورهای جستجو، برنامه های تحلیل وب، برنامه های کاوش و استفاده از محتویات صفحات وب و... باشند، در هر حال لازم به ذکر است که دستورات متاتگ robots تنها توسط برخی ربات ها (مانند ربات گوگل) مورد احترام واقع می شود و خیلی از ربات ها توجهی به این متاتگ نمی کنند، از آنجایی که موتورهای جستجو برای این متاتگ به طور جدی احترام قائل هستند لذا استفاده صحیح از آن در صفحات وب اهمیت زیادی دارد، به طور مثال درج مقدار زیر در صفحه اول سایت باعث می شود ربات ها علاوه بر ایندکس (ثبت، index) صفحه فعلی پیوندهای موجود در آن را نیز دنبال و پیمایش (follow) کنند.
<meta name="robots" content="index, follow">
با تکه کد بالا، به ربات ها خواهیم گفت که صفحه وب ما را ثبت (index) کرده و لینک های موجود در آن را دنبال (follow) کنند، چند نمونه دیگر از این متاتگ که تنها در موارد خاصی مورد استفاده قرار می گیرد:
<meta name="robots" content="noindex, follow">
<meta name="robots" content="noindex, nofollow">
<meta name="robots" content="index, nofollow">
با توجه به عبارت موجود در قسمت content، رفتار ربات هایی که از این متاتگ پیروی می کنند نسبت به صفحه و لینک های آن متفاوت خواهد بود، noindex به معنی عدم ثبت و nofollow به معنی عدم پیمایش است.
نکته: از مقادیر noindex و nofollow زمانی استفاده می شود که نخواهیم به هر دلیل صفحه وب توسط ربات ها کاوش شود، به طور مثال صفحات مربوط به ورود کاربران، صفحات شخصی و...

متاتگ generator


متاتگ generator برای مشخص کردن اینکه صفحه مورد نظر از چه برنامه یا خدماتی جهت انتشار محتوا استفاده می کند به کار می رود، درج این متاتگ اختیاری است و تاثیر خاصی در رتبه و عملکرد صفحه وب در موتورهای جستجو ندارد:
<meta name="generator" content="phpStorm">

متاتگ author


برای مشخص کردن نویسنده مطلب از این متاتگ می توانیم استفاده کنیم، هرچند مشخص نیست بودن یا نبودن آن چه تاثیری در عملکرد موتورهای جستجو دارد اما در هر صورت برای سایت ها و وبلاگ هایی که چند مدیر و کاربر مجزا دارند می تواند مفید باشد:
<meta name="author" content="admin">

متاتگ expires


متاتگ expire تاریخ انقضای صفحه وب را مشخص می کند، کاربرد آن اختیاری است و بسته به شرایط معمولا برای صفحاتی که به صورت مدت زمان محدود طراحی می شوند کاربرد دارد، این متاتگ به لحاظ SEO تاثیر زیادی بر روی عملکرد سایت یا وبلاگ در موتورهای جستجو ندارد:
<meta name="expires" content="Tue, 21 Jun 1999">
<meta name="expires" content="never">

متاتگ copyright


برای مشخص کردن اینکه محتوای صفحات وب دارای کپی رایت یا حقوق مولف است از این متاتگ در کدهای خود استفاده می کنیم، هرچند استفاده از آن هیچ تضمینی برای عدم سوء استفاده دیگران از محتوای ما ایجاد نمی کند و متاسفانه همواره هستند کسانی که می خواهند نابرده رنج گنج میسر کنند!:
<meta name="copyright" content="(c) 2018 Webgoo.ir">
تعداد متاتگ ها به مواردی که گفتیم محدود نمی شود اما آشنایی با موارد گفته شده تا حدود زیادی کاربردهای عادی در صفحات وب را پوشش می دهد.
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» کاربرد تگ img و نمایش تصاویر در HTML
» نحوه ایجاد لینک در HTML
» کار با تگ فونت (font) و استایل در html
» تگ های اصلی و کلیدی HTML
» فرمت بندی و کار با پاراگراف و متن در HTML
commentنظرات (۵۸ یادداشت برای این مطلب ارسال شده است)
نویسنده: roya
زمان: ۱۷:۱۳:۳۳ - تاریخ: ۱۳۹۱/۱۰/۱۰
خوندمش. بازم ممنونم
نویسنده: kamal ahmadi
زمان: ۲۳:۰۰:۳۱ - تاریخ: ۱۳۹۱/۱۰/۳۰
سلام
ممنون بابت مطلب جالبتون
نویسنده: meysam
زمان: ۲۰:۱۵:۵۰ - تاریخ: ۱۳۹۱/۱۲/۰۶
سلام
خیلی به کارم امد
ممنون
نویسنده: amirchermahini
زمان: ۰۹:۴۴:۳۷ - تاریخ: ۱۳۹۱/۱۲/۲۲
با سلام و عرض ادب حضور شما استاد بزرگوار
و تقدیر و تشکر از مطالب پربار و زیبای شما
و باز هم تشکر بخاطر گرداوری چنین مطالب به روز و زیبایی من یه سوالی داشتم و جاش واقعا توی مطالب شما خالی هستش و اون هم اینه که :
من یه سایتی رو مثلا طراحی کرده ام که تشکیل شده از یه پوشه بنام tem و درون این پوشه سه پوشه بنام css و images و pages رو دارم و index که صفحه اصلی سایت منه درون پوشه اصلی و در کنار اون سه پوشه و فایل css اصلی هم درون پوشه css هستش و صفحه های بعدی مثلا یکی از صفحه های منو بنام home.html درون پوشه pages هست و home.css هم درون پوشه css .
حالا سوال من اینه که من چطور از فایل home.html که درون پوشه pages هستش باید در index اصلی لینک ایجاد کنم که موقعی روی منوی صفحه اصلی کلیک میکنم
بره به اون صفحه من در قسمت لینک به این شکل نوشتم
<li><a href="pages/home.html">صفحه اصلی</a></li>
ولی در قسمت <head> چطور باید به این صفحه لینک بدم که بفهمه درون پوشه page باید این صفحه رو پیدا کنه ؟
یا اصلا در index اصلی من چطور باید به صفحات html دیگه که ایجاد کردم لینک در قسمت head بدم
با تقدیر وتشکر از لطف شما
و ارزوی توفیق روز افزون در تمام مراحل زندگی و پیشا پیش برای شما ارزوی سالی خوب و خوش و توام با موفقیت و سلامتی در کنار خانواده ارزو دارم
پاسخ: 
سلام
خیلی ممنون از نظر لطف شما.
در مورد سوال، منظورتان دقیقا از لینک دادن در تگ <head> مشخص نیست! تگ head جزء بدنه اصلی صفحه است و درون آن تنها از دستورات خاصی استفاده می شود که حالت کلی دارند، مانند متاتگ ها، استایل css، عنوان صفحات و...، به عبارتی استفاده از لینک (تگ a href) در تگ head مجاز نیست، تصور ما این است که منظور شما ایجاد منویی در بالای صفحات است که اگر این طور است باید در قسمت body و با بلاک های div این منو را در بالاترین سطح از سایر عناصر طراحی کنید و لینک ها را مطابق نمونه ای که نوشته اید داخل آن تعریف کنید، مثال:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>آموزش html</title>
<link rel="stylesheet" href="../css/home.css" media="screen">
</head>
<body>
<div class="menu">
<ul>
<li><a href="home.html">صفحه اصلی</a></li> |
<li><a href="page1.html">صفحه یک</a></li> |
<li><a href="page2.html">صفحه دو</a></li> |
<li><a href="../index.html">صفحه index</a></li>
</ul>
</div>
</body>
</html>
نویسنده: amirchermahini
زمان: ۱۵:۲۸:۰۰ - تاریخ: ۱۳۹۱/۱۲/۲۲
با سلام و عرض ادب و احترام و تشکر از بابت جواب
درسته من دقیقا نتونستم منظورم رو بیان کنم منظوره من اینه وقتی شروع می کنیم به طراحی دو صفحه اصلی میسازیم
1- html
2- css
و در بالای صفحه html بین تگ <head> به صفحه css لینک میدهیم تا برای فراخوانی کردن بتونیم روش کار کنیم که شکل کلی اینه :
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
اما حالا فرض کنیم صفحه سوم که با نام home.html ساخته شده و در قسمت منو بهش لینک دادیم به این شکل
<ul>
<li><a href="home.html">صفحه اصلی</a></li>
</ul>
ایا باید در صفحه اصلی هم به اون لینک از قسمت <head>بدهیم یا اینکه نه به اون شکل نیست و شکل کلی لینک دادن به صفحات html در صفحه اصلی به شکل دیگری هستش ؟
امیدوارم این بار تونسته باشم منظور و سوالم رو مطرح کرده باشم چون واقعا حدود یک ماهی میشه روش دارم درجا میزنم و به هر شکلی که لینک میدم باز هم قبول نمیکنه و صفحه دوم رو یا نمیشناسه یا با css اصلی قاطیش درهم میکنه .
با تقدیر و تشکر از الطاف شما در خصوص زحمتی که برای جواب اولی دادن
واقعا ممنونم
و امیدوارم کمکم کنین
پاسخ: 
سلام
ظاهرا مشکل شما این است که به فایل css نمی توانید ارجاع دهید، رفع این مشکل نیاز به درک نحوه ارجاع به دایرکتوری ها در وب است، به مثال زیر توجه کنید تا مسئله روشن شود:
فرض کنید اگر فایل index.html، فایل اصلی سایت باشد و کنار آن دو فولدر (دایرکتوری) با نام های css و home داشته باشیم، داخل فولدر css یک فایل با نام style.css و داخل فولدر home فایلی با نام home.html باشد.
index.html
|
|
|
css----->style.css
|
|
|
home----->home.html
حال برای اینکه هر یک از صفحات html ما (index و home) به اطلاعات فایل css دسترسی داشته باشند، باید در قسمت href همان صفحه (در قسمت link)، به آدرس دقیق آن فایل ارجاع دهیم (یعنی در هر دو صفحه باید این کار را کنیم)، اما بر طبق الگو و محل قرارگیری نمونه فایل های ما، در صفحه index.html نمونه کد زیر استفاده می شود:
<link rel="stylesheet" href="css/style.css">
در حالی که برای صفحه home.html آدرس ارجاع به صورت زیر است:
<link rel="stylesheet" href="../css/style.css">
در واقع در ارجاع دادن محل قرارگیری فایل css از فایل html حساب می شود، علامت .. به معنی یک دایرکتوری بالاتر است، لذا مفهوم آدرس بالا می شود:
یک دایکتوری بالاتر از فایل home.html، فولدر css، فایل style.css و بدین ترتیب صفحه home ما به فایل css دسترسی پیدا می کند و می تواند از کلاس ها و استایل آن استفاده کند، در حالی که برای صفحه index مفهوم آدرس می شود:
دایرکتوری css، فایل style.css که این اختلاف به جهت محل قرارگیری دو فایل html از هم است.
نویسنده: amirchermahini
زمان: ۱۹:۲۱:۵۸ - تاریخ: ۱۳۹۱/۱۲/۲۲
با سلام و عرض ادب و احترام
واقعا ممنونم استاد عزیز
از اینکه وقت و فرصت گذاشتین و جواب رو بصورت تصویری ارسال کردین واقعا از شما ممنونم عزیز من تازه فهمیدم چی شد و کجای کارم اشتباه بوده واقعا لطف کردین بهترین ها را در استانه سال جدید برای شما برادر بزرگوارم و خانواده محترم ارزو دارم
امیدوارم سالی سراسر سلامتی و نشاط و موفقیت در انتظار شما باشه
انشاءالله
نویسنده: amirhossein
زمان: ۲۲:۰۰:۰۳ - تاریخ: ۱۳۹۲/۰۴/۰۳
سلام خسته نباشید سایت مفیدی دارین من خیلی از این سایت مفیدتون بهره بردم واقعا دستتون درد نکنه از اینکه زحمت می کشید واسه ما ایرانی ها نهایت تشکر را دارم بریم سر اصل مطلب من منظور شما را نفهمیدم از اینکه گفتین
(علاوه بر این دقت کنید که استفاده از علامت / در انتهای متاتگ ها برای صفحاتی است که ساختار xhtml دارند، برای صفحات با ساختار html از علامت / در انتهای متاتگ ها استفاده نکنید، چون ممکن است از نظر سرویس اعتبار سنجی validator.w3.org کد شما معتبر نباشد.)
میشه بیشتر توضیح بدید که این / علامت رو در چه مواردی باید متاتگ ها رو ببندیم در اچ تی ام ال ضروری است یا خیر در xhtml چطور مثلا من این متاتگ رو می خوام استفاده کنم
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
به این صورت یا به این صورت
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
پاسخ: 
سلام
این مسئله به نوع سند (DOCTYPE) یا به عبارتی همان نسخه HTML برمی گردد، توضیح اینکه HTML در نسخه های مختلف وجود دارد که هر کدام در استانداردها اندکی با هم متفاوت هستند، برای توضیحات بیشتر، مطلبی مجزا در سایت وجود دارد، عبارت "DOCTYPE" را در قسمت جستجو وارد کنید.
نویسنده: ارشک
زمان: ۱۴:۵۶:۰۵ - تاریخ: ۱۳۹۲/۰۴/۲۴
با سلام
من می خواستم یک سایتی در گوگل verify کنم هر کاری می کنم پیغام خطا می دهد امکانش هست در این ضمینه توضیح دهید
با تشکر
پاسخ: 
سلام
لطفا پیغام خطای دریافتی را هم درج کنید!
تا آنجا که اطلاع داریم، ابزار وبمستر گوگل دو راه برای این کار پیشنهاد می دهد، یک راه درج یک متاتگ در صفحه اول سایت و سپس کلیک بر روی لینک (یا دکمه) verify در ابزار وبمستر است، روش دیگر آپلود یک فایل در ریشه سایت و سپس کلیک بر روی لینک verify است، در هر دو روش اگر مراحل را به ترتیب و درست انجام داده باشید، ربات گوگل صفحه یا فایل را چک کرده و سایت شما را تائید می کند.
نویسنده: طراحی سایت
زمان: ۱۱:۴۷:۳۷ - تاریخ: ۱۳۹۲/۰۵/۱۷
خیلی ممنون
نویسنده: محمدتقی
زمان: ۰۰:۰۳:۳۵ - تاریخ: ۱۳۹۲/۰۵/۳۰
سلام سایت خیلی خوبی دارید از html خیلی استفاده کردم ،من خودم یه وبلاگ در مورد اینترنت و کامپیوتر دارم اگه افتخار دادید یه سر بزنید از نظرات شما استفاده کنیم.
www.ganjshop.mihanblog.com
نویسنده: nasim
زمان: ۰۹:۱۶:۳۶ - تاریخ: ۱۳۹۲/۰۷/۲۷
چطوری می تونیم صفحه ای طراحی کنیم که وقتی کاربر از مرورگر firefox استفاده میکنه پیغام hello word و اگر کاربر از مرورگر IE استفاده میکنه پیغام hello word IE رو نمایش بده؟
پاسخ: 
برای این کار یا باید از جاوا اسکریپت و کدنویسی سمت کاربر استفاده کنید، مثال:
<script type="text/javascript">
var isFirefox = typeof InstallTrigger !== 'undefined';
var isIE = /*@cc_on!@*/false;
if(isFirefox){
alert('Firefox');
}
else if(isIE){
alert('IE');
}
</script>
یا از PHP و کدنویسی سمت سرور که مبحث جداگانه ای دارد.
نویسنده: نازنین
زمان: ۱۶:۴۷:۱۰ - تاریخ: ۱۳۹۲/۱۱/۲۹
سلام،
ممنون از سایت خوبتان و اطلاعات خوبی که در آن گذاشته اید. یک سوال داشتم؛ می خواستم بدانم چه کاری باید انجام داد تا در هنگام جستجو یک سایت در گوگل، اطلاعات آن سایت به صورت طبقه بندی شده نشان داده شود، به طور مثال وقتی "راهکار خلاق" را در گوگل جستجو می کنیم، بعد از لینک توضیحات کوتاه در رابطه با راهکار خلاق لینک هایی با عنوان تماس با ما، شرکای تجاری، محصولات و آموزش نشان داده می شود. آیا برای این کار باید از متاتگ استفاده کنیم، اگر اینطور است لطفا متاتگ مربوطه را اعلام می فرمایید؟ ممنون میشم راهنمایی فرمایید.
پاسخ: 
سلام
خیر، این کار به صورت هوشمندانه و توسط خود گوگل انجام می شود، در واقع گوگل دو معیار را برای این کار در نظر می گیرد:
- خود سایت از نظر اعتبار و بازدید به حد مناسبی (بر اساس الگوریتم های گوگل) رسیده باشد.
- لینک های خاصی از سایت به اصطلاح کلیک خور بالاتری داشته باشند و بیشترین تکرار را در صفحات سایت داشته باشند.
نویسنده: الکترو مگ
زمان: ۱۴:۰۴:۲۲ - تاریخ: ۱۳۹۳/۰۱/۰۱
ممنون این مطالبم خیلی به دردم خورد
ممنون
نویسنده: پویان
زمان: ۱۷:۴۷:۳۱ - تاریخ: ۱۳۹۳/۰۱/۰۶
با سلام
خیلی عالی بود، در زمانیکه خیلی سریع نیاز به راهنمایی
در مورد متاتگ ها داشتم، این مطلب به من کمک کرد، ممنونم.
نویسنده: amirhosein ahmadi
زمان: ۱۸:۴۰:۱۱ - تاریخ: ۱۳۹۳/۰۳/۰۴
سلام خیلی ممنون از مطالبتون استفاده بسیاری کردم
می خواستم بگم من یه وبلاگ دارم که توش فضائل اهل بیت علیهم السلام رو می نویسم. طبق اون چیزی گفتید من این کار رو کردم میشه بگید درسته یا نه:
<html>
<head>
<meta name="google-site-verification" content="v7AUhYIF3LKVO_Slnr7lK6rzTDqhbDQJArt9n08yKCE" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta name="Description" CONTENT="Author: A.N. Author, Illustrator: P. Picture, Category: Books, Price: £9.24, Length: 784 pages">
<meta name="google-site-verification" content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34="/>
<title>فضائل اهل بیت</title>
<h5>
<h3>
<h6>
<noscript> </noscript>
<meta name="robots" content="index, follow" />
<title><-BlogTitle-></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="فضائل اهل بیت" />
<meta name="author" content="<-BlogAuthor->">
<meta name="language" content="Farsi">
<meta name="geo.region" CONTENT="IR" />
<meta name="googlebot" content="INDEX, follow" />
<meta name="robots" content="index, follow">
<meta name="description" content="<-BlogAndPostTitle-> - <-BlogDescription-> - <-BlogTitle->">
<meta name="keywords" content="<-BlogAndPostTitle->,<-BlogId->, Blog, Weblog, Persian,Iran, Iranian, Farsi, Weblogs">
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->">
<link href="http://www.weblogskin.com/themes/019/style.css" type="text/css" rel="stylesheet">
پاسخ: 
سلام
مشکل جدی وجود ندارد، به جزء اینکه:
- چند متاتگ مانند description چنیدن بار تکرار شده اند! سعی کنید تنها یک مورد وجود داشته باشد.
- متاتگ زیر با توجه به اینکه قبلا تنظیم شده، زائد است:
<meta charset="utf-8">
- بهتر است تگ title جزء بالاترین تگ ها باشد، ضمن اینکه این تگ هم دو بار تکرار شده!
- یک سری تگ ها بی مورد هستند، مانند:
<h5>
<h3>
<h6>
paged صفحه 1 از 4




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

9 × 6
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...
پرشین آی تی
Persianit.net

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)
سامانه استخدام ایران
Iran-karyab.com

اطلاع رسانی استخدام های معتبر دانلود رایگان نمونه سئوالات