آموزش HTML (جلسه سوم)

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

پیش از این و در مطالب قبلی از بخش آموزش مقدماتی html با کلیاتی از این زبان پایه برنامه نویسی وب، آشنا شدیم و تا حدودی مسیرمان را به سوی کدنویسی پیشرفته تر هموار کردیم، تگ های اصلی و سازنده فرم و اسکلت بندی صفحات را شناختیم و با مثال هایی از آنها تمرین کردیم و به قدرت این زبان ساده ولی کاربردی بیشتر پی بردیم؛ اکنون و در این مطلب می خواهیم در ادامه مباحث و آموزش های مقدماتی، نحوه استفاده از متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML) را با هم مرور کنیم.
به طور کلی متاتگ ها، جزء عناصر اصلی صفحات وب به شمار می روند که در بین تگ head گنجانده می شوند و بسته به میزان اهمیتشان ممکن است وجودشان ضروری (Necessary) یا انتخابی و اختیاری (Optional) باشد که در ادامه به طور جزئی تر به آنها اشاره خواهیم کرد.

 

متاتگ http-equiv:

این متاتگ به مرورگر خواهد گفت که صفحه شما از چه ساختاری استفاده می کند و کاراکترهای آن از چه یونیکدی (یونیکد به زبان ساده یعنی روشی استاندارد که با آن کاراکترهای به فرض زبان فارسی، برای سیستم یا مرورگر تبدیل به کد و قابل فهم می شوند) پیروی می کنند، یک مثال برای استفاده از این متاتگ:

 

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

متاتگ description:

بعد از تگ title و http-equiv در html، متاتگ description از بالاترین اهمیت برای موتورهای جستجو برخوردار است، برای اینکه ربات های جستجوگر را نسبت به محتوای صفحه خود راهنمایی کنید، حتما این متاتگ را به صورت زیر در کد خود (بین تگ head و بعد از title و http-equiv) به کار ببرید:

 

<meta name="description" content="توضیحی برای مطلب شما" />

متاتگ keywords:

keywords نیز یکی دیگر از متاتگ های کلیدی صفحات html است که مربوط به موتورهای جستجو است؛ نحوه کابرد آن به شکل زیر است:

 

<meta name="keywords" content="کلمات, کلیدی, شما" />

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

 

متاتگ robots:

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

 

<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، رفتار ربات هایی که از این متاتگ پیروی می کنند نسبت به صفحه و لینک های آن متفاوت خواهد بود.

 

متاتگ generator:

از generator برای مشخص کردن اینکه صفحه مورد نظر از چه برنامه یا خدماتی جهت انتشار محتوا استفاده می کند، استفاده می شود؛ به کار بردن این متاتگ اختیاری است و تاثیر زیادی در رتبه و عملکرد شما در موتورهای جستجو ندارد:

 

<meta name="generator" content="Dreamweaver CS" />

متاتگ author:

برای مشخص کردن نویسنده مطلب، از این متاتگ می توانید استفاده کنید، البته بودن یا نبودن آن چندان فرقی ندارد، ولی برای سایت ها و وبلاگهایی که چند مدیر و کاربر مجزا دارند می تواند مفید باشد:

 

<meta name="author" content="name family" />

متاتگ expires:

تاریخ انقضای یک صفحه را مشخص می کند، کاربرد آن اختیاری است و تاثیر زیادی بر روی عملکرد سایت یا وبلاگ شما در موتورهای جستجو ندارد:

 

<meta name="expires" content="tue, 21 Jun 1999" />
<meta name="expires" content="never" />

متاتگ copyright:

برای مشخص کردن اینکه محتوای صفحات شما دارای کپی رایت یا حقوق مولف است، از این متاتگ در کدهای خود استفاده کنید، البته استفاده از آن هیچ تضمینی برای سوء استفاده نکردن دیگران از محتوای شما ایجاد نمی کند و متاسفانه همواره هستند کسانی که می خواهند نابرده رنج گنج میسر کنند!:

 

<meta name="copyright" content="your copyright text here" />

متاتگ refresh:

از refresh برای انتقال یک کاربر از صفحه ای به صفحه ای دیگر یا همان صفحه، به طور خودکار می توانید استفاده کنید، به این عمل در اصطلاح ریدایرکت (redirect) می گویند:

 

<meta http-equiv="refresh" content="10; URL=http://geeklearnnig.ir/" />

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

 

متاتگ 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" />

مقادیر این متاتگ به قرار زیر است:
- public: محتوای شما در حافظه مشترک تمام کاربران یک سیستم ذخیره می شوند.
- private: محتوای شما تنها در حافظه نام کاربری شما ذخیره می شود.
- no-Cache: هیچ ذخیره ای از محتوای شما در حافظه صورت نمی گیرد.
- no-Store: در محدوده زمانی کوتاهتری محتوای شما ذخیره و نگهداری می شوند و به صورت آرشیو در نمی آیند.
تعداد متاتگ ها به مواردی که گفتیم محدود نمی شود، ولی مهم ترین آنها بعد از title و http-equiv متاتگ های keywords و description هستند که استفاده از آنها برای هدایت موتورهای جستجو و کسب نتایج بهتر ضروری است؛ علاوه بر این دقت کنید که استفاده از علامت / در انتهای متاتگ ها برای صفحاتی است که ساختار xhtml دارند، برای صفحات با ساختار html از علامت / در انتهای متاتگ ها استفاده نکنید، چون ممکن است از نظر سرویس اعتبار سنجی validator.w3.org کد شما معتبر نباشد.

 

آموزش HTML (جلسه دوم)

در مطلب گذشته و در بحث آموزش مقدماتی html به طور مختصر کلیاتی از این زبان را با هم مرور کردیم، اکنون می خواهیم یک گام به جلو بگذاریم و این بار تگ های اصلی ایجاد کننده صفحات وب را بررسی کنیم؛ سعی خواهیم کرد که آموزش ها مختصر و مفید، همراه با مثال باشند تا از روند کلیشه ای و خسته کننده کتابها و سایتهای مشابه اجتناب کنیم؛ لطفا توجه نمائید، تصور ما بر این است که شما در حال آموزش برنامه نویسی وب از ابتدا هستید لذا ممکن است نکاتی به نظر ساده را نیز توضیح دهیم و یا مثال ها در حد مقدماتی باشند.

 

تگ چیست؟
تگ از نظر لغوی به معنی برچسب است، اما در زبان های برنامه نویسی و از جمله در html، تگ ها به معنی کدهای تعریف شده این زبان هستند که معمولا به صورت دو قسمتی به کار می روند، قسمت اول نشانگر شروع تگ و قسمت دوم نشانگر پایان آن است، هر قسمت نیز بین علامت های <> محصور شده است، ذکر این نکته نیز ضروری است که بعضی تگ های html تک قسمتی و یکتا هستند، مانند تگ های مربوط به خط یا فاصله.
- تگ head ، title ، html و body
کدهای وب بین تگ های html و body ساخته می شوند و تگ head دارای قابلیتهایی خاص جهت معرفی آن صفحه، قرار دادن تیتر صفحه (تگ title)، ایمپورت فایل های css و جاوا اسکریپت (javascript)، متاتگ ها (metatags) و... است، تقریبا در تمام صفحات وب، این تگ ها را خواهید یافت، چرا که چارچوب اصلی یک صفحه وب را تعریف می کنند و از اهمیت زیادی برخوردارند.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>آموزش اچ تی ام ال گروه گیک لرنینگ </title>
<!-- http://Unit-Sardroud.blog.ir -->
<style type="text/css">
body{
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 direction:rtl;
}
</style>
</head>
<body>
این یک سند اچ تی ام ال ساده است!
</body>
</html>

پیش نمایش

- تگ h1 تا h6،

سرتیترهاتگ های فوق جهت معرفی سرتیترها (header) به کار می روند و نشان دهنده میزان اهمیت محتوای درون خود هستند، تگ h1 بیشترین اهمیت و به ترتیب تا h6 کم ترین اهمیت را دارند، امروزه به دلیل اینکه موفقیت در وب تا حدود زیادی به سازگاری یک سایت با موتورهای جستجو بستگی دارد، توصیه می شود حتما از تگ های مربوط به سرتیترها جهت قابل فهم شدن مطالب مهم برای ربات های خزنده، استفاده شود، ذکر این نکته نیز ضروری است که در استفاده از تگ های h1 تا h6، ترتیب آنها باید از با اهمیت ترین (h1) به کم اهمیت ترین (h6) از بالای صفحه به پائین آن باشد.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>آموزش اچ تی ام ال گروه گیک لرنینگ </title>
<!-- http://Unit-Sardroud.blog.ir -->
<style type="text/css">
body{
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 direction:rtl;
}
</style>
</head>
<body>
<h1>این یک متن اچ تی ام ال تیتر شده است!</h1>
</body>
</html>

پیش نمایش

- تگ های ایجاد کننده خط و فاصله

 

br و hr دو تگی هستند که از آنها برای ایجاد فاصله و خط استفاده می شود، استفاده از این دو تگ به جهت موارد کاربرد زیاد، در صفحات html به وفور تکرار می شود، از طرفی همانطور که پیش تر گفتیم، این تگ ها یکتا هستند و قسمت دوم ندارند.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>آموزش اچ تی ام ال گروه گیک لرنینگ </title>
<!-- http://Unit-Sardroud.blog.ir -->
<style type="text/css">
body{
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 direction:rtl;
}
</style>
</head>
<body>
<h1>این یک متن اچ تی ام ال تیتر شده است!</h1>
<br />
<h2>این یک متن اچ تی ام ال تیتر شده با h2 است!</h2>
<hr />
</body>
</html>

 

آموزش HTML (جلسه اول)

آشنایی با HTML، زبان پایه برنامه نویسی وب

 

اچ تی ام ال (HTML) یا hypertext markup language، زبانی است که تقریبا تمام کسانی که دستی در دنیای وب دارند با آن آشنا هستند یا لااقل اسم آن را بارها شنیده اند، زبانی که به جرات می توان گفت یکی از آسان ترین و کاربردی ترین ها در جهان است که  از سال 1980 میلادی تا امروز همواره روندی رو به رشد داشته،  در اهمیت آن همین بس که حاصل کدنویسی برنامه نویسان وب،  نهایتا به صورت خروجی HTML  و در مرورگر کاربران نشان داده خواهد شد؛ لذا نقطه آغاز یادگیری برنامه نویسی  وب، آموزش این زبان است، برای آشنایی بیشتر چند تگ ساده را در ادامه بررسی می کنیم.

 

اولین صفحه با کدهای html

برنامه Notepad را باز کنید و کد زیر را در آن کپی نمائید:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>من یک صفحه اچ تی ام ال هستم </title>
<!-- http://geeklearning.ir -->
</head>
<body>
<h1>اولین صفحه من</h1>
<p>اولین پاراگراف من</p>
</body>
</html>

پیش نمایش

 

اکنون فایلتان را با پسوند html و با یونیکد utf-8 ذخیره نمائید (برای این کار به جای پسوند txt، پسوند html را جایگزین کنید و در قسمت Encoding عبارت UTF-8 را انتخاب کنید)، حاصل اولین کدتان را در یک مرورگر وب ببینید!
توضیح:
- عبارت DOCTYPE html PUBLIC و مقادیر آن برای راهنمایی کردن مرورگرهای وب جهت پردازش صحیح صفحه مورد نظر است.
- تگ head و body جز اصلی ترین تگ های اچ تی ام ال است که سازنده یک صفحه به شمار می روند، درون تگ head می توان از مقادیر meta تگ ها استفاده کرد.
- تگ title برای نمایش عنوان صفحه در مرورگر لازم است.
- تگ h1 نشان گر سرتیتر ها است که می تواند مقادیری تا h6 داشته باشد.
- تگ p در کدهای اچ تی ام ال نشانگر پاراگراف است.
- اکثر تگ های اچ تی ام ال با افزودن یک (/) بسته می شوند و البته برخی نیز یکتا هستند (مثلا </ br>).
نکته 1: هدف از ایجاد زبانی به نام html یا hypertext markup language در وب، در واقع به ضرورت ایجاد استانداردی تعریف شده برای یکسان سازی و سهولت کار برمی گردد، این زبان توسط کنسرسیوم جهانی وب یا w3c توسعه یافته و امروزه تبدیل به استانداردی فراگیر گشته است که توسط انواع مختلف مرورگرها و واسطه های کاربری (کامپیوتر، تلفن همراه و...)، قابل پردازش است.
نکته 2: html در حقیقت یک زبان برنامه نویسی نیست، بلکه بیشتر شبیه یک قرار داد با پیروی از اصولی منظم است، چرا که محدود به تگ ها و دستور عمل های خاصی است و خارج از چارچوب تعریف شده خود، قدرت مانور ندارد، اما از این جهت که زبان تفهیم خواسته های برنامه نویس از مرورگر تلقی می شود، اهمیت زیادی دارد، یعنی وقتی در وب برنامه ای به یک زبان که در سرور اجرا می شود (مانند php) می نویسیم، هدف، هر چه که باشد، نهایتا معمولا باید خروجی خود را در بستر html به مرورگر انتقال دهیم.

 

چطور تحقیق کنیم؟

 

در ادامه خواهید دید که شیوه های تحقیق آنلاین چگونه است؟چگونه منابع معتبر را در اینترنت پیدا کنیم؟اعتبار وب سایت ها را از چه طریق بسنجیم؟ مراحل تحقیق و پژوهش با استفاده اینترنت چگونه است و اطلاعات دیگری که ما را در تحقیق و جمع آوری مطلب از فضای مجازی یاری خواهند رساند

در یک ساعت در اینترنت چه می گذرد؟!