خانه / مقالات آموزشی / آموزش طراحی وب / آموزش طراحی وب مقدماتی – درس دوم بررسی تگ های HTML

آموزش طراحی وب مقدماتی – درس دوم بررسی تگ های HTML

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

صفات (Attribute) تگ های HTML

صفات (Attribute) تگ های HTML هر تگ دارای مجموعه از صفات (Attribute) است که ویژگی های مختلف آنها را تعیین می کند . هر یک از این صفات را می توان در درون تگ ابتدایی معرفی و مقدار دهی کرد.

در ادامه هر یک از تگ های HTML معرفی شده و صفات مربوط به آن تگ بررسی خواهد شد. برای مثال تگ < table > که برای ایجاد جدول به کار می رود، دارای صفتی(خاصیتی) به نام Border است، که به دور جدول کادر یا حاشیه ایجاد می کند. نحوه تعریف و مقدار دهی آن به صورت زیر است:

توجه: در هنگام تعریف یک صفت(خاصیت)، باید بین صفت (خاصیت) و مقدار آن علامت = قرار داده و همچنین مقدار باید درون علامت ” ” قرار بگیرد. از هر دو حالت کتیشن(‘ ‘) و دوبل کتیشن(” “) می توان استفاده کرد ولی استفاده از دوبل کتیشن ها متداول تر است. در بعضی موقعیت های نادر مثل هنگامی که محتوای عناصر خود دارای کتیشن هستند لازم است که از تک کتیشن استفاده کنیم: ‘Name=’john “shotgun” Nelson

  • به صفت، مشخصه یا خاصیت هم گفته می شود.
  • مشخصه ها(صفات) اطلاعات اضافه ای در مورد یک عنصر ارائه می دهند.
  • صفات همیشه در تگ آغاز مشخص می شوند.
  • صفات در جفتهای name/value می آیند مانند : “name=”value

تعدادی از صفات که می توانند در هر عنصر HTML استفاده شوند به شرح زیر هستند:

صفتتوضیحات
classیک و یا چند کلاس را برای عناصر مشخص می کند.این کلاس در کدنویسی CSS و زبان های اسکریپتی کاربرد دارد .
idمشخص کننده یک شناسه منحصر به فرد برای تگ در درون سند HTML است . id هر تگ در کدنویسی CSS و زبان های اسکرپیتی کاربرد دارد . توسط id می توان به تگ مورد نظر دست یافت.
styleیک خاصیت چند مفدارِی است که خصوصیات قالب دهی و اعمال سبک ها ( CSS ) را برای تگ مورد نظر مشخص می کند.
titleمتنی است که به صورت tooltip، در هنگام قرار گرفتن موس بر روی عنصر نمایش داده می شود.
dirتعیین کننده جهت قرار گرفتن نوشته را تعیین می کند، که یکی از ۲ حالت زیر را می تواند داشته باشد:

۱- ltr: چپ به راست

۲- rtl: راست به چپ

خاصیت Style تگ ها

یکی از مهمترین خصوصیات (صفات) تگ ها ، خصوصیت Style (خاصیت استایل) می باشد. با استفاده از خصوصیت Style میتوان شکل ظاهری یک تگ را تعیین کرد. قاعده نوشتن خصوصیت Style از Css پیروی می کند. طریقه استفاده از تگ استایل در Html بصورت زیر می باشد:

با استفاده از این کد ما تگ p ای تعریف کردیم که این تگ و محتوای آن با استفاده از خصوصیت Style ای که نوشته ایم بصورت سفارشی در آورده شده است. شکل خروجی این کد بدین صورت می باشد:

متن پاراگراف

تگ Meta

تگ <meta> محلی برای یادداشت اطلاعاتی درباره صفحه وب فراهم می کند. این اطلاعات شامل شرح صفحه و کلمات کلیدی است که کمک فراوانی به موتورهای جستجو می کند و همچنین اطلاعاتی درباره زمان به روز رسانی صفحه ارائه می دهد و …

متاتگ ها (Meta Tag) در واقع اطلاعاتی هستند که برای موتور های جستجوگر وب مانند گوگل و یاهو نوشته می شوند تا در هرچه بهتر ایندکس کردن صفحات استفاده شوند. استفاده درست از این متاتگ ها تاثیر بسیار زیادی بر ایندکسینگ و شناخت بهتر موتور های جستجو از سایتدارد تا با این روش، سایت شما و صفحات شما در رتبه بالایی در گوگل و یاهو و … قرار بگیرند. مکانی که این تگ در انجا قرار می گیرد بین دو تگ <head > و <head/> می باشد.

شکل کلی آن و خصوصیات مشترک آنها بصورت زیر است :

به طور کلی متاتگ ها، جزء عناصر اصلی صفحات وب به شمار می روند که در بین تگ head گنجانده می شوند و بسته به میزان اهمیتشان ممکن است وجودشان ضروری (Necessary) یا انتخابی و اختیاری (Optional) باشد.

در ادامه لیست کاملی از اصلی ترین متاتگ ها (Meta Tag) به همراه نحوه ی نگارش و دلیل استفاده ی آن ها را می آوریم:

متاتگ فارسی سازی صفحه (Utf-8)

برای تعیین نوع رمزنگاری صفحه یا encoding صفحه از این متاتگ استفاده می شود. در صورت استفاده نکردن از این متاتگ، در بعضی از مرورگرها و یا سیستم های کاربرانی که encoding فارسی ندارند ، متن های فارسی به صورت علامت سوال (؟) نشان داده می شوند. پس اگر می خواهید در صفحه وب خود از متون فارسی استفاده کنید برای نمایش صحیح صفحه وب، باید این تگ را در تگ head به کار ببرید.

این متاتگ از جمله ی مهمترین متاتگ ها می باشد. جهت استفاده از آن برای فارسی سازی صفحه Html از کد زیر استفاده نمایید:

متاتگ کلمات کلیدی (Keyword)

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

نکات مهم در استفاده از کلمات کلیدی:

  1. محتوای Content این متاتگ نباید در حالت حروف فارسی از ۲۰۰ کاراکتر و در حالت حروف انگلیسی از ۴۰۰ کاراکتر تجاوز کند .
  2. توصیه می شود که حداکثر از ۱۰ کلمه ی کلیدی مرتبط با متن که فکر می کنید کاربران بیشتر آنها را در موتورهای جستجوگر سرچ می کنند ، استفاده نمایید .
  3. برای بدست آوردن این کلمات کلیدی از سایت زیر می توانید استفاده کنید :       http://www.webconfs.com/keyword-density-checker.php
  4. کلمات کلیدی را با ویرگول انگلیسی (,) بدون هیچ فاصله ای (Space) از هم جدا نمایید.
  5. در الگوریتم های جدید گوگل ، تاثیر این تگ meta ، بسیار کم و حتی نادیده گرفته شده است. ولی موتورهای جستجوگر دیگر این Meta Tag را هنوز در نظر می گیرند.

طریقه ی استفاده از آن بصورت زیر است:

متاتگ توضیحات (Description)

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

با این توضیح باید متنی که در این بخش انتخاب می کنید توضیحی باشد در مورد صفحه.

نکته ی مهم این است که در جملاتی که استفاده می کنید از کلمات موجود در کلمه های کلیدی (Keyword) صفحه ی خود استفاده نمایید.

بهتر است تعداد کاراکتر در این بخش حداقل ۱۵۰ و حداکثر ۲۰۰ کاراکتر در حالت فارسی انتخاب شود.

تاثیر این متاتگ در الگوریتم های جدید گوگل بسیار افزایش پیدا کرده و یکی از اصلی ترین موارد در سئو است.

طریقه ی استفاده از آن بصورت زیر می باشد:

متاتگ سازنده ها و نویسنده های صفحه

این متاتگ ها صرفا برای آشنایی با سازنده ی صفحه ، نرم افزار سازنده و نویسنده ی صفحه می باشد.

طریقه ی تعریف آنها بصورت زیر است:

متاتگ زبان مورد استفاده (Content-Language)

این متاتگ صرفا برای دسته بندی زبانی برای موتورهای جستجوگر می باشد و توصیه می شود استفاده گردد.

طریقه ی تعریف آن برای زبان فارسی بصورت زیر است:

نکته ی بسیار مهم:

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

ادامه دارد …

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هاست