آموزش زبان html

آموزش مقدماتی و پیشرفته زبان html . به کمک html به سادگی قادر به طراحی صفحات استاتیک وب خواهید بود . زبان html اساس کار طراحی وب سایت است
تگ base و کاربرد آن در HTML

تگ base و کاربرد آن در HTML

تگ base و کاربرد آن در HTML

برچسب <base> یک URL مورد نظر پایه برای تمام URL های نسبی در یک سند مشخص می کند. اگر این تگ وجود نداشته باشد ، URL پایه، URL پوشه حاوی سند خواهد بود.

 

نکته ۱: تگ <base> را به عنوان اولین عنصر در داخل عنصر <head> قرار دهید به طوری که عناصر دیگر در بخش head از اطلاعات عنصر <base>استفاده کنند.

نکته ۲: اگر برچسب <base> وجود داشته باشد، باید دارای یک خاصیت href یا یک خاصیت target ، یا هر دو باشد .

تگ base و کاربرد آن در HTML
تگ base و کاربرد آن در HTML

نکته ۳ : در یک سند حداکثر یک عنصر <base> میتواند وجود داشته باشد که باید در داخل عنصر <head> قرار بگیرد. اگر چندین عنصر base وجود داشته باشد،فقط از مقدار اولین خاصیت href و  target استفاده شده و مقادیر دیگر نادیده گرفته می شوند.

برای درک بهتر کاربرد این تگ ، فرض کنید که ما باید تعداد زیادی تصاویر در یک سند قرار دهیم

http://www.mywebsite.com/reference/tags/base.html

این تصاویر در پوشه image هستند

http://www.mywebsite.com/images

پس ما باید هر تصویر قرار داده شده را با URL مانند زیر قرار دهیم:

../../images/image.png

 عنصر base  در HTML می تواند با تنظیم یک پایگاه URL به کوتاه شدن این URL ها ( که ممکن است زیاد باشند ) کمک کند.

 

تفاوت بین HTML 4.01 و HTML5

هیچ تفاوتی بین تگ <base> در HTML 4.01 و HTML5 وجود ندارد .

تفاوت بین HTML و XHTML

در HTML تگ <base> تگ پایان ندارد در حالیکه در XHTML  باید بسته شود.

خاصیت ها

تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .

۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:

  • خاصیت ویژه عنصر
  • خاصیت عمومی
  • خاصیت رویداد

خاصیت ویژه عنصر 

خاصیت ها
مقدار
توضیحات
href URL یک URL پایه برای تمام URL های نسبی در صفحه مشخص می کند
target _blank _parent _self _top framename یک هدف پیش فرض برای تمام لینک ها و فرمهای موجود در صفحه تعیین میکند

مثال :

 خاصیت عمومی

تگ <base> از خاصیت های عمومی HTML پشتیبانی میکند.

accesskey hidden itemtype
class id lang
contenteditable inert spellcheck
contextmenu itemid style
dir itemprop tabindex
draggable itemref title
dropzone itemscope translate

خاصیت رویداد

تگ <base> از هیچ خاصیت رویدادی پشتیبانی نمی کند.

پشتیبانی مرورگر ها

تگ<base> در همه مرورگرهای اصلی نظیر اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.

تگ address و کاربرد آن در html

تگ address و کاربرد آن در html

تگ address و کاربرد آن در html

تگ <address> آدرس تماس با نویسنده یا مالک یک سند و یا یک مقاله را تعریف می کند. به مثل زیر دقت کنید :

 اگر عنصر <address> در داخل عنصر <body> قرار بگیرد ، نشان دهنده اطلاعات تماس سند و اگر در داخل یک عنصر <article> باشد، نشان دهنده اطلاعات تماس آن مقاله خواهد بود.

متن داخل عنصر <address> معمولا به صورت کج ارائه میشود. اکثر مرورگرها یک شکست خط به قبل و بعد از عنصر آدرس اضافه میکنند.

نکته۱: تگ <address> نباید برای توصیف یک آدرس پستی مورد استفاده قرار گیرد ، مگر اینکه بخشی از اطلاعات تماس باشد. برای نشان دادن یک آدرس دلخواه، که به اطلاعات تماس مربوط نیست، به جای عنصر <address> از یک عنصر <p> استفاده کنید.

نکته۲: عنصر <address> به طور معمول همراه با اطلاعات دیگر در یک عنصر <footer> قرار میگیرد.

به مثال زیر توجه کنید :

 

این مثال در مرورگر به شکل زیر نمایش داده خواهد شد:

تگ address و کاربرد آن در HTML
تگ address و کاربرد آن در HTML

توجه : عنصر <address> نمی تواند شامل عناصر زیر باشد:

<article>،<aside>، <nav>، <section>، <header><footer>

<hgroup> و <h1>-<h6> یا یک عنصر <address>دیگر

تفاوت بین HTML 4.01 و HTML5

HTML 4.01 عنصر <article> را پشتیبانی نمی کند، بنابراین برچسب <address> همیشه اطلاعات تماس نویسنده یا صاحب سند را تعریف می کند.

خاصیت ها

تگ HTML می تواند شامل یک یا چند خاصیت باشد که چگونگی ارائه در مرورگر را تعیین میکنند. خاصیت ها دارای یک نام و یک مقدار هستند که با علامت (=) از هم جدا شده اند. مقدار خاصیت با علامت نقل قول احاطه میشود .

۳ نوع خاصیت وجود دارد که شما می توانید به تگ های HTML خود اضافه کنید:

  • خاصیت ویژه عنصر
  • خاصیت عمومی
  • خاصیت رویداد

خاصیت ویژه عنصر

تگ <address> هیچ خاصیت ویژه ای ندارد.

خاصیت عمومی

تگ <address> از خاصیت های عمومی در HTML پشتیبانی میکند.

accesskey hidden itemtype
class id lang
contenteditable inert spellcheck
contextmenu itemid style
dir itemprop tabindex
draggable itemref title
dropzone itemscope translate

خاصیت رویداد

تگ <address> از خاصیت های رویداد در HTML نیز پشتیبانی می کند.

onabort onended onmousewheel
oncancel onerror onpause
onblur onfocus onplay
oncanplay onformchange onplaying
oncanplaythrough onforminput onprogress
onchange oninput onratechange
onclick oninvalid onreadystatechange
oncontextmenu onkeydown onscroll
ondblclick onkeypress onseeked
ondrag onkeyup onseeking
ondragend onload onselect
ondragenter onloadeddata onshow
ondragexit onloadedmetadata onstalled
ondragleave onloadstart onsubmit
ondragover onmousedown onsuspend
ondragstart onmousemove ontimeupdate
ondrop onmouseout onvolumechange
ondurationchange onmouseover onwaiting
onemptied onmouseup

پشتیبانی مرورگر ها

برچسب <address> در همه مرورگرهای اصلی نظیر اینترنت اکسپلورر، فایرفاکس ، اپرا ، گوگل کروم و سافاری پشتیبانی می شود.

تگ area و تاثیر آن بر سئو

تگ area و تاثیر آن بر سئو

تگ area و تاثیر آن بر سئو

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

تگ area و تاثیر آن بر سئو
تگ area و تاثیر آن بر سئو

کاربر تگ area

تگ <area> منطقه ای را در داخل یک نقشه تصویری (یک تصویر با مناطق قابل کلیک) تعریف می کند. عنصر area همیشه در داخل یک تگ map قرار میگیرد . متخصصان سئو معمولا در مورد این عنصر زیاد بحث نمیکنند. به مثال زیر توجه کنید:

برای کسب اطلاعات بیشتر در مورد ویژگی های اختیاری و استاندارد تگ <area> به مقاله مربوط به این تگ مراجعه کنید.

نکاتی در مورد تگ area  برای طراحان وب

  • نیازی به گفتن نیست، شما باید با CSS ، ظاهر این تگ را تغییر دهید و ترجیحا از ترکیبی از جاوا اسکریپت و CSS برای ایجاد نقشه های تصویری زیبا و ابزار راهنمای بصری استفاده کنید.
  • برای پیاده سازی نقشه های تصویری، به این ترتیب عمل کنید: HTML ساده ، CSS ، جاوا اسکریپت و در نهایت فلش.
  • هر تگ area باید دارای یک خاصیت ALT باشد. بنابراین حتی اگر مقدار آن خالی (””=alt) باشد باید در تگ قرار بگیرد. بهتر است همکاران برنامه نویس یا متخصصان سئوی شما به یاد داشته باشند که ، تا جایی که ممکن است چیزی را به متن Alt اضافه کنند. برای مثال کلمات کلیدی توصیفی برای این تصویر..

نکاتی در مورد تگ area  برای متخصصان سئو

  • تگ <img> و تگ <area> در یک نقشه تصویری باید دارای خاصیت ALT باشند که تصویر را در ۱۵۰ کاراکتر یا کمتر توضیح دهد. متن ALT را نمی توان با کلمه “کپی رایت” و یا با نماد آن شروع کرد.
  • قرار دادن متن مربوطه، در نزدیکی خاصیت Alt باعث میشود موتورهای جستجو ، ارتباط بهتری بین کلمات کلیدی و تصویر برقرار کنند. کلمات کلیدی توصیفی و مربوط به تصویر را در نظر گرفته و از آنها استفاده کنید. متن خاصیت ALT اگر کوتاه باشد می تواند رتبه بندی یک صفحه را بهبود بخشد.
  • یکبار دیگر صفحاتی که حاوی این تگ هستند را چک کنید که تمام تگ های <area> و <img> دارای یک خاصیت ALT باشند . این کار برای بهینه سازی تصویر مهم است. اگر به هر دلیلی نقشه ی تصویری  شما به خاصیت ALT نیاز نداشته باشد، فقط مقدار آن را خالی بگذارید (””=alt) .

نکاتی در مورد تگ area  برای برنامه نویسان

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

نکاتی در مورد تگ area  برای کپی رایترها

  • استفاده از کلمات کلیدی توصیفی و مربوط به تصویر را در نظر بگیرید. اگر متن خاصیت alt بیش از حد طولانی باشد ممکن است موتورهای جستجو، صفحه را برای یافتن نشانه ای از تکنیک های فریبنده به منظور افزایش رتبه بیشتر بررسی کنند.
  • متن خاصیت alt باید حداکثر از ۱۵۰ کاراکتر تشکیل شده باشد .

تگ base و تاثیر آن بر سئو

تگ base و تاثیر آن بر سئو

تگ base و تاثیر آن بر سئو

واقعیت این است که کمتر از ۵٪ از توسعه دهندگان وب با تگ base  آشنا هستند ،اما این عدم آشنایی یک ضعف به حساب نمی آید.

سوال برخی از توسعه دهندگان وب این است که آیا کاربرد تگ base مشابه ”rel=”canonical است ؟

پاسخ این است:

خیر . در واقع بین این دو تفاوت زیادی وجود دارد.

تگ base مشخص کننده URL پیش فرضی است که توسط مرورگر استفاده میشود درحالیکه ”rel=”canonical توسط موتورهای جستجو برای شناسایی مهم ترین صفحات ، در میان صفحات مشابه استفاده می شود.

تگ base و تاثیر آن بر سئو
تگ base و تاثیر آن بر سئو

با این حال در نظر داشته باشید که تگ <base> می تواند مشکلاتی ایجاد کند. توصیه میشود که از این تگ اصلا استفاده نکنید. ربات های موتورهای جستجو (مهمترین آنها ) در شناسایی لینک ها و دنبال کردن آنها به اندازه کافی خوب عمل میکنند و برنامه نویس شما باید چگونگی رسیدگی به URL ریشه را به عنوان یک متغیر بداند.

کاربرد تگ base 

تگ base یک URL و یک target پیش فرض برای تمام لینک های موجود در یک صفحه مشخص می کند:

 برای کسب اطلاعات بیشتر در مورد ویژگی های اختیاری و استاندارد تگ base به مقاله مرتبط به این تگ مراجعه کنید.

نکاتی در مورد تگ base برای طراحان وب

  • مطمئن شوید که تگ <base> قبل از لینک شدن به هر CSS و یا فایل JS در قسمت <head> قرار می گیرد.

نکاتی در مورد تگ base برای متخصصان سئو

  • شما باید لینک های داخلی وب سایت خود را چک کنید که به صفحات مرده (خطای ۴۰۴) لینک نشده باشند.
  • سایت خود را به منظور یافتن هر گونه مشکل ارتباطی با استفاده از Xenu LinkSleuth چک کنید .

نکاتی در مورد تگ base برای برنامه نویسان

  • مطمئن شوید که تگ base شامل URL کامل فولدر و یا صفحه فعلی باشد. اساسا، تگ base با اضافه کردن یک مقدار به خاصیت href، آدرس نسبی را به آدرس مطلق تبدیل میکند.
  • انواع فرمت های URL که در لینک های سایت شما، در تعامل با تگ base هستند را امتحان کرده و تفاوت های آن را قبل از استفاده بشناسید.
  • در صورت استفاده از URL مطلق در داخل سایت (مانند “http://www.example.com/folder/page.html”) و یا استفاده از URL نسبی (یعنی URL ای که با یک علامت / شروع میشود ، مانند “/folder/folder/page.html” ) کافیست در تگ base فقط  نام سایت، به صورت “/ http://www.example.com” نوشته شود.
  • تگ base و خاصیت href فقط زمانی کاربرد دارد که شما از مسیر های نسبی و مطلق استفاده کنید . اگر فقط با مسیر های مطلق کار میکنید نیازی نیست از این تگ استفاده کنید . برای مثال :

href=”http://www.pitstopmedia.com/services/search-engine-optimization.php”

  • متخصصان سئو  توصیه می کنند که این تگ را فقط در صورت استفاده از آدرس های نسبی به کار ببرید مانند :

href=”services/search-engine-optimization.php”

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

  • اگر یک عنصر base وجود داشته باشد، انتخاب متن در اینترنت اکسپلورر کاملا به یک چالش تبدیل خواهد شد .
  • تگ base ، میتواند خود را به عنوان یک منبع با ارزش اثبات کند اما گاهی اوقات ممکن است باعث دردسر شود. URL ریشه به عنوان یک متغیر سمت سرور، در اکثر سیستم عامل های توسعه وب تعریف شده و ثابت کرده که استفاده از آن در مقابل تگ base ، بسیار مفید تر است.
  • Bing توصیه میکند که از لینک مطلق استفاده شود.
  • تگ base برای URL های نسبی در CSS نیز کار می کند، اما در کدهای جاوا اسکریپت مثل ()window.open. توصیه می شود که از آدرس مطلق استفاده شود.
  • IE8 از این تگ پشتیبانی نمی کند.

نکاتی در مورد تگ base برای کپی رایترها

  • شما نباید در مورد این تگ کار خاصی انجام دهید .
سئو HTML
تگ address و تاثیر آن بر سئو

تگ address و تاثیر آن بر سئو

تگ address و تاثیر آن بر سئو

در مورد اثرات تگaddress  در رتبه بندی موتورهای جستجو مطالعات موردی یا پژوهش های خاصی صورت نگرفته اما برخی بر این عقیده هستند که وقتی این تگ وارد بازی سئو شد نباید به راحتی به دست سرنوشت سپرده شود . بنابراین توصیه میشود که از این برچسب، به ویژه در SEO محلی استفاده کنید .

تگ address و تاثیر آن بر سئو
تگ address و تاثیر آن بر سئو

با استفاده از تگ address یک پیام قوی به موتورهای جستجو در مورد محل کسب و کارتان  ارائه خواهید داد . تگ address به ساختار معنایی اسناد وب شما نیز کمک می کند و امیدوار باشید که بین مطالب مهم (در اینجا برایSEO  محلی منظور همان آدرس است) و مطالب بی ارزش تمیز قایل خواهد شد .

کاربرد تگ address

تگ address اطلاعات تماس نویسنده یا مالک یک سند و یا یک وب سایت را تعریف می کند و اجازه می دهد که بازدیدکنندگان سایت با آنها ارتباط برقرار کنند. عنصر address معمولا به header یا footer یک صفحه وب اضافه میشود. ساختار HTML این تگ مشابه مثال زیر است :

برای کسب اطلاعات بیشتر در مورد ویژگی های اختیاری و استاندارد تگ address به مقاله مربوط به این تگ مراجعه کنید.

نکاتی درباره تگ address برای طراحان وب

  • روند طراحی footer استفاده از یک صفحه بندی ۴ یا ۵ ستونه است. این باعث می شود که پاصفحه مکانی ایده آل برای نمایش اطلاعات آدرس باشد .
  • سعی کنید تمام اطلاعات مربوط به یک مکان (آدرس، شماره تلفن، شماره فکس و غیره) را ارائه کنید.
  • از متن خالص برای نمایش آدرس فیزیکی استفاده کنید و آن را در تصاویر جاسازی نکنید، روبات های موتور جستجو، متون نوشته شده در تصاویر را مانند یک انسان نمیخوانند .
  • حداقل مطمئن شوید که صفحه تماس با ما، حاوی این تگ باشد.
  • CSSبه شما کمک خواهد کرد، اما به خاطر داشته باشید ، عناصری که با <div> گروه بندی می شوند فاقد ارزش معنایی هستند مگر اینکه به آنها یک class یا ID اختصاص داده شود. از <”div class=”address> استفاده نکنید تا زمانی که یک عنصر وجود دارد که همان کار را برای شما انجام میدهد .

نکاتی درباره تگ address برای متخصصان سئو

  • مایکروسافت از یک الگوریتم (VIPS) مبتنی بر رویکرد “بصری”برای شناسایی بخشی از یک صفحه استفاده میکند ، این بدان معناست که موتورهای جستجو می توانند درک کنند که بخش footer و یا navigation در کدام قسمت یک صفحه میباشد . با قرار دادن تگ address در پایین صفحه وب سایت، به وضوح به موتورهای جستجو مکان فیزیکی کسب و کار یا وب سایت خود را نشان خواهید داد.
  • تگ address ، بخش مهمی از SEO محلی است.
  • فراموش نکنید که آدرس خود را در لیست های محلی مانند Google Places و یا صفحات زرد شامل Yelp ، Localeze، Citysearch، Yahoo و … ثبت کنید .
  • با توجه به کلمات کلیدی مورد نظر شما، احتمالا ایده خوبی خواهد بود اگر نام شهر خود را نیز در عنصر address و در تگ title درج کنید
  • اگر در حال کار بر روی وب سایتی هستید که دارای چندین فروشگاه فیزیکی است ، مدیر سایت را متقاعد کنید که برای هر یک از این فروشگاه ها یک صفحه وب جدا ایجاد کند .

نکاتی درباره تگ address برای برنامه نویسان

  • اطمینان حاصل کنید که هر یک از آدرس های شما که در وب سایت نمایش داده می شود با این تگ محصور شده باشد.
  • گزینه بهتر برای نمایش جزئیات تماس، استفاده از میکرو فرمت hCard می باشد.

نکاتی درباره تگ address برای کپی رایترها

  • سعی کنید در صفحات خود، فرمت آدرسی که توسط گوگل در Google Places استفاده شده را به کار ببرید
  • فرمت آدرس بین المللی، از کشوری به کشور دیگر متفاوت خواهد بود