با مفهوم تگ در زبان 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 نقطه شروع و به معنی عدم بزرگنمایی.
maximum-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">

تعداد متاتگ ها به مواردی که گفتیم محدود نمی شود اما آشنایی با موارد گفته شده تا حدود زیادی کاربردهای عادی در صفحات وب را پوشش می دهد.

دسته بندی: آموزش مقدماتی » HTML

برچسب ها: HTML - SEO

قبلی »

« بعدی

مطالب بیشتر:
فرمت بندی و کار با متن و پاراگراف در HTML
آشنایی با HTML، زبان پایه کدنویسی وب
آشنایی با مفهوم Semantic در HTML
کاربرد تگ font و ویژگی های فونت در HTML
نحوه ایجاد لینک در HTML

دیدگاه

۶۹ دیدگاه برای این مطلب ارسال شده است.

دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.

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>

مجتبی

۱۸:۳۶ ۱۳۹۳/۰۳/۰۸

ممنون

نخست

قبلی

بعدی

آخر

صفحه 1 از 5

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.

آخرین دیدگاه ها

برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.

پرتو

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

سلام خوبید؟ بلاکفا باز دچار مشکل شده یا فقط برای من دچار مشکل شده؟ منظورم اینکه خیلی دیر باز میشه و فقط برای فایرفاکس هم...

۱۴۰۳/۰۳/۰۱

سعیدی

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

سلام می تونید اینو اصلاح کنید؟ چون من با توضیحات شما یاد نگرفتم خیلی ممنون اگه یکبار اصلاح کنید واسه بعد یاد...

۱۴۰۳/۰۲/۲۲

سعیدی

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده

۱۴۰۳/۰۲/۲۱

سعیدی

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون

۱۴۰۳/۰۲/۱۹

سعیدی

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...

۱۴۰۳/۰۲/۱۹

پرتو

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

مگه شما دارین اموزشش رو؟ آدرسش رو میزارید؟ یا اگر سایتی رو میشناسید که آموزش داده باشه معرفی کنید ممنون میشم من خیلی گشتم توی...

۱۴۰۳/۰۲/۱۸

پــرتو

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...

۱۴۰۳/۰۲/۱۶

vip

کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)

خیلی ممنونم از شما خیلی عالی شد میشه مثل تبلیغ بلاگفا باشه یعنی زیر صفحه نمایش داده بشه و صفحه رو سیاه نکنه که تا...

۱۴۰۳/۰۲/۰۵

vip

کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)

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

۱۴۰۳/۰۲/۰۴

پـــرتو

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

سلام خسته نباشید شرمنده مزاحم میشم یه سوال داشتم می خواستم بپرسم که چرا بلاگفا باز نمیشه برام؟ کلا هر وبلاگی که مربوط به بلاگفا...

۱۴۰۳/۰۲/۰۲

هادی عبداله زاده

ارسال ایمیل با PHP و کلاس PHPMailer

با تشکر از شما دوست عزیز با order_id درستش کردم موقع برگشت order_id رو بر می گردونه اینطوری کردم که از طریق اون شناسه...

۱۴۰۳/۰۱/۲۲

هادی عبداله زاده

ارسال ایمیل با PHP و کلاس PHPMailer

با تشکر از شما برای ارسال درخواست درست بود و به بانک هم وصل شد فقط برای وریفای چیکارش کنم؟

۱۴۰۳/۰۱/۲۲

هادی عبداله زاده

ارسال ایمیل با PHP و کلاس PHPMailer

با سلام و خسته نباشید سال نو شما مبارک من یه کد واسه انتقال به درگاه دارم واسه زرین پال هست ...

۱۴۰۳/۰۱/۲۰

پـــرتو

کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)

ببخشید ممنون از جوابتون ولی یه سوال اگر بخوام همون شماره رو با حساب کاربری جدید با همون شماره رو داشته باشم داده های قبلی...

۱۴۰۳/۰۱/۱۹

حسین بلاگ

متدهای کار با آرایه در جاوا اسکریپت (JavaScript)

من یه صفحه ارسال متن دارم میخوام کاربرها وقتی واسه م پیام میدن وقتی روی اون دکمه کلیک می کنن بهشون بگه لطفا صبر...

۱۴۰۳/۰۱/۱۹

شریفی

آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم

سلام و عرض احترام سال نو رو بهتون تبریک میگم انشالله سال خوبی داشته باشین یه سرویس وبلاگدهی داریم که قصد داریم به...

۱۴۰۳/۰۱/۱۵

فرهادی

نمایش قسمتی از متن و پاراگراف با PHP

سلام ببخشید یه مشکل دارم این صفحه رو نگاه کنید چند بار توی سورس تکرار شده نمی تونم الگوی توضیحاتش رو استخراج...

۱۴۰۳/۰۱/۱۰

فرهادی

نمایش قسمتی از متن و پاراگراف با PHP

با تشکر از شما یه مشکل دیگه برام پیش اومده واسه این کد وقتی echo می گیرم تومان باهاش میاد وقتی میخوام فقط...

۱۴۰۳/۰۱/۰۹

سید صالح

ارسال پارامتر به URL و دریافت مقادیر با PHP

با سلام و خسته نباشید من یک فرم ساده دارم که کاربر باید پر کنه چون سوال امنیتی و اینا نداره ربات ها همه...

۱۴۰۳/۰۱/۰۷

در انتظار بررسی: ۰
پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.