عناصر معنایی HTML5به وضوح معنی یا هدف آنها را برای مرورگرها و توسعه دهندگان وب توضیح دهید.
قبل از ظهور استاندارد HTML5، تمام نشانه گذاری صفحات عمدتاً با استفاده از عناصر انجام می شد
استاندارد HTML5 عناصر جدیدی را برای ساختاربندی، گروه بندی محتوا و علامت گذاری محتوای متنی معرفی کرد. عناصر معنایی جدید بهبود ساختار یک صفحه وب را امکان پذیر ساخت و معنای معنایی را به محتوای موجود در آنها اضافه کرد.
طبق مشخصات HTML5، هر عنصر به یک دسته خاص (صفر یا بیشتر) تعلق دارد. هر یک از آنها عناصری با ویژگی های مشابه را گروه بندی می کند. دسته های کلی زیر متمایز می شوند:
- محتوای متا
- جریان محتوا
- محتوای بخش
- محتوای سربرگ
- محتوای متن
- محتوای تعبیه شده
- محتوای تعاملی
توضیحات عناصر HTML5
1. عنصر
دسته بندی مطالب:جریان محتوا
عناصر مقدماتی و ناوبری گروه، اختیاری است. ممکن است حاوی عنوان، محتویات بخش صفحه، فرم جستجو یا لوگو باشد. یک سند HTML می تواند چندین عنصر را به طور همزمان داشته باشد
توضیحات سایت
عنصر
2. عنصر
دسته بندی مطالب:
برای ایجاد یک بلوک ناوبری برای یک صفحه وب یا کل وب سایت طراحی شده است، اما لازم نیست در داخل آن قرار گیرد
شما می توانید از مواردی بیشتر از فهرست به عنوان عناصر نوار پیمایش استفاده کنید:
...
همچنین می توانید هدرها را در داخل یک عنصر اضافه کنید:
...
3. عنصر
دسته بندی مطالب:جریان محتوا، محتوای بخش.
برای گروه بندی ورودی ها - نشریات، مقالات، مطالب وبلاگ، نظرات استفاده می شود. این یک بلوک مستقل و جداگانه است که برای استفاده مکرر در نظر گرفته شده است که معمولاً با یک هدر شروع می شود. ممکن است در صفحات دیگر سایت کپی شده و حاوی عناصر دیگری در داخل باشد
...
4. عنصر
دسته بندی مطالب:جریان محتوا، محتوای بخش.
یک عنصر نشان دهنده بخش عمومی یک سند است. محتوای موضوعی را گروه بندی می کند و معمولاً حاوی عنوان است. این یک بلوک بسته بندی نیست، برای این منظور استفاده از عنصر مناسب تر است
...
...
...
داخل
می توانید عناصر والد ایجاد کنید
نکاتی در مورد طبیعت
...
...
یادداشت های تاریخی
...
...
عنصر پنجم
دسته بندی مطالب:جریان محتوا، محتوای بخش.
محتوایی را گروه بندی می کند که مستقیماً با محتوای اطراف مرتبط است اما می تواند جداگانه در نظر گرفته شود (یعنی حذف این بلوک بر درک محتوای اصلی تأثیر نمی گذارد). اغلب، یک عنصر به عنوان یک ستون کناری قرار می گیرد (مانند کتاب ها) و شامل گروهی از عناصر است:
6. عنصر
دسته بندی مطالب:جریان محتوا
نشان دهنده پاورقی بخش یا عنصر ریشه است. معمولاً حاوی اطلاعاتی در مورد نویسنده مقاله، اطلاعات حق چاپ و غیره است. هنگامی که به عنوان پاورقی تمام صفحه استفاده می شود، محتوا با اعلامیه های حق چاپ، پیوندهایی به شرایط استفاده، اطلاعات تماس، پیوندهایی به محتوای مرتبط و غیره تکمیل می شود.
می تواند چندین عنصر در یک سند وب وجود داشته باشد
7. عنصر
دسته بندی مطالب:جریان محتوا
برای تعیین اطلاعات تماس نویسنده/صاحب یک سند یا مقاله استفاده می شود. برای نشان دادن نویسنده سند، تگ در داخل عنصر قرار می گیرد
8. عنصر
دسته بندی مطالب:جریان محتوا
عنصر
عنصر
پودل
در مورد نژاد
9. عنصر
دسته بندی مطالب:محتوای جریان، محتوای بخش ریشه.
عنصر
عنصر
10. عنصر
عنصر
11. عنصر
دسته بندی مطالب:
زمان (24 ساعت) یا تاریخ را با توجه به تقویم میلادی، با نشانه احتمالی زمان و منطقه زمانی تعیین میکند. متن محصور شده در این تگ توسط مرورگر سبک نشده است. این تگ دارای یک ویژگی datetime در دسترس است که محتوای آن نشان میدهد که کاربر چه چیزی را روی صفحه رایانه خود خواهد دید:
برای اینکه تاریخ به طور خودکار خوانده شود، باید در قالب YYYY-MM-DD باشد. زمان، که می تواند نیز مشخص شود، در قالب HH:MM با اضافه کردن یک پیشوند جداکننده T (زمان) مشخص می شود:
12. عنصر
دسته بندی مطالب:محتوای جریانی، محتوای متنی.
متن قرار داده شده در داخل یک برچسب ، به طور پیش فرض برجسته شده است رنگ زرد(رنگ پس زمینه و رنگ فونت در بلوک انتخاب شده را می توان با تنظیم سبک های خاص CSS تغییر داد). با استفاده از از این تگشما می توانید محتوای مهم و همچنین کلمات کلیدی را علامت گذاری کنید.
13. عنصر
دسته بندی مطالب:محتوای جریانی، محتوای متنی.
قطعه ای از متن را که برای قالب بندی متن دو جهته باید از بقیه متن جدا شود جدا می کند. برای متون نوشته شده به طور همزمان به زبان هایی که از چپ به راست و راست به چپ خوانده می شوند استفاده می شود.
14. عنصر
دسته بندی مطالب:محتوای جریانی، محتوای متنی.
یک تگ به مرورگر مکانی را نشان می دهد که در صورت لزوم، یک خط طولانی را اضافه کند.
15. عناصری برای توصیف شخصیت های آسیای شرقی
دسته بندی مطالب:محتوای جریانی، محتوای متنی.
عنصر به شما امکان می دهد یک یا چند عنصر از یک دسته محتوای متنی را با استفاده از حاشیه نویسی یاقوت علامت گذاری کنید. حاشیه نویسی یاقوت عمدتاً در تایپوگرافی آسیای شرقی به عنوان راهنمای تلفظ یا شامل سایر ویژگی ها استفاده می شود. عنصر ممکن است شامل موارد زیر باشد:
- یک یا چند گره متن یا عنصر
- یک یا چند عنصر
عناصر
عنصر
عنصر
Cap نشان می دهد که عددی که در وسط صفحه نوشته شده و بزرگ است بیشتر به چشم می آید. اگر می خواهید تا حد امکان این کار را انجام دهید مشتریان بیشترما توانستیم با کارمندان شرکت تماس بگیریم و صحبت کنیم.
مخاطبین بخش های مختلف را ارائه دهید
برای یک شرکت بزرگ که هر روز جریان عظیمی از درخواست های مشتری را دریافت می کند، منطقی است که بلافاصله مختصات بخش فروش، پشتیبانی فنی، منابع انسانی و سایر بخش ها را ارسال کند. به این ترتیب افراد می توانند سریعتر پاسخ سوال خود را دریافت کنند.
وب سایت هلدینگ بین المللی رستوران "جینزا پروژه" شامل شماره تلفن های مرکز تماس، خدمات روابط عمومی، بخش منابع انسانی و سایر بخش ها می باشد.
در سایت " تینکوف بانک» علاوه بر مخاطبین بخش، انواع مختلفی نیز وجود دارد شماره تلفن هابرای دسته های مختلف مشتریان: مالکان کارت های اعتباری, کارت های بدهیو سرمایه گذاران
لازم نیست تماس های بخش های منطقه ای را در یک لیست بزرگ به یکباره ارسال کنید. فقط با کلیک بر روی نام نمایندگی مورد نظر می توانید آنها را نمایش دهید. به عنوان مثال، مانند بخش اطلاعات تماس در وب سایت Refinish Avtolac.
مرکز مبادلات بینالمللی شعبههای کمی در سرتاسر جهان دارد. نمایندگان شرکت به بخشهایی بر اساس کشور دستهبندی میشوند جستجوی راحتشماره تلفن و آدرس آنها
عکس های تابلوهای فروشگاه آفلاین در وب سایت برند لباس خیابانی "BatNorton" به مشتریان کمک می کند تا در مرکز خرید حرکت کنند و بخش مناسب را پیدا کنند.
مخاطبین دفاتر منطقه ای Sayner در پنجره های بازشو ظاهر می شوند. این تکنیک صفحه تماس را از اطلاعات اضافی آزاد می کند. کاربر می تواند تنها با شماره تلفن و آدرس فروشنده مورد نیاز خود به طور دقیق آشنا شود.
Window Continent چهل و هفت دفتر نمایندگی در مسکو دارد. برای راحتی مشتریان، مخاطبین به سه شکل در یک لیست، بر روی نقشه شهر و بر روی نقشه مترو در وب سایت قرار می گیرند. در دو گزینه آخر، با کلیک بر روی نمایندگی مورد نظر، اطلاعات تماس در یک پنجره پاپ آپ ظاهر می شود.
مخاطبین کارمند را بنویسید
یک شخص بیشتر از نام غیرشخصی یک شرکت به شخص دیگری اعتماد دارد. بنابراین، در مورد متخصصان خود به ما بگویید. نشان دهید که افراد خاصی مسئول هر بخش از کار شرکت هستند.
سعی کنید عکس های کارمندان خود را ارسال کنید. به این فکر کنید که کدام عکس ها بیشترین اعتماد را در بین مشتریان ایجاد می کند؟ شاید این عکس ها در محل کار یا عکس هایی با لباس های تجاری در یک استودیو حرفه ای باشد.
نمایش مسیرها
یک نقشه مسیرهای واضح باعث صرفه جویی در زمان در توضیح نحوه رسیدن به شرکت به هر مشتری می شود. و تضمین می کند که بیشتر مهمانان گم نخواهند شد.
مسیرهای رانندگی زیبا کشیده شده است. آنها تصاویر واقعی از ساختمان ها، پارک ها و سایر اشیاء مجاور تولید می کنند که افراد هنگام جستجوی دفتر شما روی آنها تمرکز می کنند.
با این حال، به خاطر داشته باشید که ترسیم نقشه سفر یک کار سخت است. و به احتمال زیاد برای شرکت هایی مناسب خواهد بود که دفتر یا نقطه فروش کمی دارند، یک یا دو.
اگر یک شرکت دفاتر یا دفاتر نمایندگی زیادی داشته باشد، استفاده از نقشه مسیر استاندارد به جای نقشه دستی آسان تر است. ایجاد آن در هر طراح نقشه آسان است. و برای اینکه صفحه تماس در وب سایت با مسیرهای رانندگی متعدد شلوغ نشود، می توان آنها را در پنجره های پاپ آپ پنهان کرد.
وبسایت مری ترافل حاوی دستورالعملهایی است که به دو سالن عروسی کشیده شده است.
نقشه رندر شده مسیر به فروشگاه هدیه Presentstar کوچکترین جزئیات را نشان می دهد: از گربه زیر درخت تا بیگانگانی که یک لادا را می دزدند.
اطلاعات تماس دفاتر نمایندگی "مرکز". تبادل بین المللی» به صورت لیست در وب سایت قرار می گیرند. اگر روی نام دفتر نمایندگی کلیک کنید، نقشه موقعیت مکانی در یک پنجره پاپ آپ باز می شود.
در بخش با اطلاعات تماس در وب سایت بانک PSKB، مسیرهای هر دفتر در ابتدا پنهان است. و با کلیک بر روی نام دفتر در بلوک های کشویی ظاهر می شوند.
در صفحه تماس با فروشگاه اینترنتی برند سونی، کاربر شهر مورد نظر را در یک پنجره بازشو انتخاب می کند. و بلافاصله پس از آن، صفحه اطلاعات تماس مربوطه، مسیرها و توضیحات متننحوه رسیدن به آنجا
در وب سایت جشنواره خودرو "Unlim 500+" سه طرح های مختلف- جهت رسیدن به محل رویداد، نقشه محدوده رانندگی و موقعیت کافه و صحنه در عرشه مشاهده. شما انتخاب کنید نمودار مورد نیاز- توضیحات سمت چپ صفحه و نقشه سمت راست تغییر می کند.
در وب سایت روزووز، اطلاعات تماس در یک پنجره پاپ آپ درج شده است. و در حال حاضر در داخل پنجره می توانید دو بلوک اطلاعاتی را تغییر دهید: آدرس انبارهای گل و شماره تلفن خدمات تحویل.
در وب سایت مجتمع مسکونی پانوراما Skolkovo می توان مسیری را از یک نقطه دلخواه روی نقشه تا دفتر فروش ترسیم کرد.
از فضای موجود در پنجره پاپ آپ داخل نقشه استفاده کنید
گاهی اوقات لازم است آدرس و شماره تلفن چندین فروشگاه خرده فروشی را روی نقشه نشان دهید. اما اگر همه چیز را مشخص کنید اطلاعات تماسبلافاصله، صفحه بیش از حد بارگیری می شود، پیدا کردن چیزی خاص دشوار خواهد بود.
مخفی کردن مخاطبین در پنجره های پاپ آپی که با کلیک بر روی نقطه خاصی از نقشه ظاهر می شوند، راحت است. عدم وجود تعداد زیادی اطلاعات تماس برای فروشگاه ها، دفاتر نمایندگی و دفاتر مختلف، صفحه را از نظر بصری ساده می کند و حرکت را آسان تر می کند.
با این حال، موارد بیشتری وجود دارد راه های جالبنحوه استفاده از یک قطعه کوچک فضای خالیداخل یک پنجره پاپ آپ روی نقشه!
در وب سایت هلدینگ رستوران Ginza Project، می توانید چهار بلوک اطلاعاتی را در یک پنجره بازشو تغییر دهید: آدرس رستوران، شماره تلفن، ساعات کاری و نزدیکترین ایستگاه مترو.
در سایت لتو بانک در یک پنجره پاپ آپ روی نقشه می توانید کار شعبه را در مقیاس 5 درجه ای ارزیابی کنید.
در وب سایت پایگاه گل "همه چیز در یک بسته"، علاوه بر آدرس، شماره تلفن و ساعات کار، در پنجره پاپ آپ نیز عکس هایی از هر انبار وجود دارد.
در پنجره های پاپ آپ روی نقشه برای مسیرهای مراکز مطالعه زبان های خارجی"J&S" یک دکمه تماس آنلاین، پیوندی به گروه VKontakte و چندین عکس وجود دارد. و همینطور " مجموعه استاندارد» مانند آدرس، شماره تلفن و ساعات کار.
یک عکس از ورودی دفتر شرکت ارسال کنید
نشان دهید که ورودی دفتر شرکت چگونه است. به خصوص اگر علامت لوگوی خود را در جلوی ساختمان ندارید. نشان دادن این یک بار در یک عکس آسان تر از توضیح دادن آن به مشتریان با کلمات است.
نحوه رسیدن به دفتر را بنویسید
چندین گزینه برای توصیف نحوه دسترسی افراد به شما ارائه دهید: پیاده، با ماشین، با ماشین حمل و نقل عمومی. خود را به جای شخصی تصور کنید که از آخرین واگن مترو در ایستگاه Kaluzhskaya پیاده شد و برای اولین بار خود را در خیابان Profsoyuznaya دید. بعدش کجا باید بره؟ کدام طرف خیابان؟ کجا و به کجا باید مراجعه کرد؟ تا جایی که ممکن است در این مورد با جزئیات به ما بگویید.
دستورالعمل های ناوبری را می توان به یکباره پست کرد یا در آن پنهان کرد بلوک های اطلاعاتی، با کلیک ماوس باز می شود.
وب سایت فروشگاه هدیه Presentstar دستورالعمل هایی برای کوهنوردان و رانندگان دارد.
شما نه تنها می توانید با پای پیاده به گازپروم بیایید، بلکه با واگن برقی یا ماشین نیز می توانید به گازپروم بیایید. توضیحات پیاده روی و سفر به مطب در صفحه مخاطبین قرار داده شده است.
در وب سایت Refinish Avtolac، با کلیک بر روی عنوان مربوطه، توضیحاتی در مورد نحوه رسیدن به شرکت با ماشین یا حمل و نقل عمومی نشان داده می شود.
در صفحه تماس با کلینیک تکثیر MAMA نه تنها دستورالعمل هایی برای کاربران ترولی بوس و اتومبیل، بلکه برای مهمانان خارج از شهر که از ایستگاه یا فرودگاه سفر می کنند وجود دارد. بلوک با متون مختلفبا کلیک کردن روی نمادها با ماشین، اتوبوس، قطار تغییر دهید.
به متون دقت کنید
خسته نباشید، روی متون و عناوین صفحه تماس خود کار کنید. یک عنوان روشن باعث می شود که چشم در مکان مناسب سرگردان شود.
رامبلر می گوید دلایل زیادی برای نوشتن به او وجود دارد. اما در این مکان ممکن است یک عبارت بیمعنا مانند «فهرست آدرسهای ایمیل» وجود داشته باشد.
برند کلاه بافتنی "Handy Hat" می خواهد به مشتریان خود نزدیکتر باشد. او می گوید، بیا پیش ما در VKontakte.
در صفحه تماس سازنده اشباع تزئینی "Veres" یک عبارت ساده وجود دارد که محصولات در بیش از 300 شهر روسیه ارائه شده است. در این مرحله ممکن است یک عنوان استاندارد "نمایندگان ما" وجود داشته باشد. اما هیچ کس نمی داند که جغرافیای فعالیت های شرکت چقدر گسترده است.
پیوندی به مخاطبین در بخش های دیگر سایت قرار دهید
«در پاورقی سیاه و سفید، در دورترین گوشه، در میان ده ها پیوند دیگر، تنها پیوند موجود در سایت به صفحه تماس، پنهان شده است. به طوری که هیچ کس مطمئناً آن را پیدا نکند،» یک داستان وحشتناک در مورد یک شرکت است که نمی خواست تماس ها را بشنود و نامه های مردم را بخواند.
اگر میخواهید تا جایی که ممکن است مشتریان بیشتری با هم تماس بگیرند، پیوند بخش مخاطبین را تا حد امکان قابل مشاهده کنید. به عنوان مثال، از تصاویر برای طراحی لینک استفاده کنید.
در صورت لزوم، پیوندی برای اطلاعات تماس ارائه دهید. به عنوان مثال، شما در حال نوشتن اخباری در مورد سخنرانی آینده یک مربی تجاری معروف در شرکت خود هستید. منطقی است که مقاله را با پیوندی به اطلاعات تماس تکمیل کنید تا همه بتوانند برای سخنرانی ثبت نام کنند.
در هر صفحه از وب سایت پایه گل "همه چیز در بسته نرم افزاری" یک پیوند به وضوح قابل مشاهده به آدرس انبارها وجود دارد.
صفحه تماس یکی از صفحات کلیدی در یک وب سایت تجاری است. نه تنها باید روی آن متمرکز شود ارتقاء موتور جستجو(اگرچه این نیز مهم است) تا چه اندازه به بازدیدکنندگان اطلاع رسانی شود. اطلاعات تماس شرکت می باشد عوامل تجاریرتبه بندی - موتورهای جستجو از آنها برای ارزیابی یک منبع از نظر آن استفاده می کنند مزایای رقابتیقبل از سایت های مشابه
طبیعتا، صفحه کاملمخاطبین مسیر مستقیمی را به TOP-3 باز نمی کنند، اما سهم آن در کل استراتژی ارتقاء مهم خواهد بود. در این مقاله، نحوه طراحی صحیح صفحه "مخاطبین" در یک وب سایت را بررسی خواهیم کرد تا از نظر PS یک امتیاز اضافی برای کارمای سایت بدست آوریم.
در دسترس بودن با 1 کلیک
صفحه تماس باید با 1 کلیک از هر صفحه از منبع باز شود. توصیه می شود پیوندی به آن در اولین قسمت قابل مشاهده صفحه قرار دهید: معمولاً اینطور است منوی افقیدر هدر سایت همچنین می توانید لینک را در فوتر کپی کنید تا کاربر بتواند با خواندن اطلاعات تا انتها و قرار گرفتن در انتهای سایت راه های ارتباطی را پیدا کند. توصیه می شود پیوند صفحه تماس را تا حد امکان در کد قرار دهید - بنابراین ربات جستجوگربه آن اولویت بیشتری خواهد داد.
نشانه گذاری میکرو در طرح
بهتر است در طرح بندی صفحه تماس، ویژگی های Schema.org را در کد HTML قرار دهید. استفاده از نشانهگذاری میکرو استاندارد، موتورهای جستجو را قادر میسازد تا منابع را بهتر مطالعه کرده و از آن به دست آورند اطلاعات مهمو در نتایج روی آن تمرکز کنید نتایج جستجو. به زبان ساده، در قطعه زمانی که تنظیم صحیحآدرس، منطقه و سایر داده ها نمایش داده می شود که نرخ کلیک را بهبود می بخشد. موتورهای جستجو اطلاعات دقیقی در مورد استفاده از نحو Schema.org به کمک خود ارائه می دهند. همچنین در تگ مشخص کنید
استفاده از عناصر مورد نیاز
صفحه تماس باید حاوی لیست کاملراه های تماس با شرکت (از جمله آدرس فیزیکی)، اطلاعات مربوط به ساعات کار. تا حد امکان اطلاعات بیشتری را به مشتریان ارائه دهید - و کمتر به سؤالات "احمقانه" در مورد نحوه تماس با بخش فروش یا آدرسی که درخواست تجاری ارسال کنید پاسخ دهید. عناصر مورد نیاز صفحه مخاطبین:
- شماره تلفن همراه با کد منطقه (یک شماره تلفن ثابت همیشه به شماره تلفن همراه ترجیح داده می شود). حتی بهتر - اگر شرکت استفاده کند شماره تلفن تماس رایگانبا کد 8(800). شماره موبایل باید ثانویه باشد نه اولیه. نشان دادن شماره متخصصان کلیدی شرکت ضرری ندارد.
- آدرس - شما باید آدرس واقعی را نشان دهید آدرس پستیبا شاخص این به میزان زیادی سطح اعتماد به شرکت را افزایش می دهد (اگر در صفحه تماس - فقط شماره موبایلو میدان بازخورد، این سوال به طور منطقی مطرح می شود - او از چه کسی پنهان شده است؟)
- پست الکترونیک. در این صورت بهتر است نیز منتشر شود آدرس اصلیو آدرس متخصصان/بخش های کلیدی؛
- برنامه کاری - شما باید اطلاعاتی در مورد ساعات کاری، ساعات اداری متخصصان کلیدی، زمان استراحت ناهار، کار در تعطیلات آخر هفته ارائه دهید. عنصر مفیدزمان تا بسته شدن را نشان می دهد، به عنوان مثال: "1 ساعت و 14 دقیقه تا بسته شدن فروشگاه باقی مانده است."
- مسیرهای رانندگی - می توان آن را با استفاده از Yandex.Maps داخلی یا نقشه های Google سازماندهی کرد. بهتر است مسیر را همراه با تفسیر متنی برای رانندگان و عابران پیاده، اطلاعاتی در مورد وجود پارکینگ و سیستم دسترسی ارائه دهید. برای تصویر کامل، اضافه کنید مختصات GPS، به خصوص اگر شرکت شما در مکانی کمتر شناخته شده واقع شده باشد.
- ورودی ساختمان - بهترین راه حلعکسی وجود خواهد داشت که به شما امکان می دهد درب مورد نیاز را به دقت ببینید. همچنین میتوانید آن را با ویدیوی هدایتشده با استفاده از فناوریهای واقعیت مجازی در نقشههای گوگل تکمیل کنید.
در دسترس بودن عناصر اضافی
اگر اطلاعات توضیح داده شده در بالا را در صفحه ارائه دهید، در بیشتر موارد این کافی خواهد بود مشتریان بالقوهیا شرکا راهی برای تماس با شما و آمدن به دفتر شما پیدا کرده اند. اما در صورت ارائه اطلاعات تکمیلی می توان این امکانات را گسترش داد. این شامل:
- ابزارهای ارتباط آنلاین - فرم های بازخورد لاکونیک (به معنای واقعی کلمه - نام، فیلد برای آدرس ایمیلیا تلفن، فیلد پیام)، اسکایپ؛
- شخصی سازی کارمندان - انتشار عکس ها و اسامی مدیران و متخصصان کلیدی؛
- ویدئو یا گرافیک - عکس اداری، ویدئو با نمودار مسیر پیاده روی؛
- جزئیات حقوقی - OGRN، INN، ایست بازرسی، آدرس قانونی، نام کامل مدیر و سایر اطلاعات لازم برای شرکا؛
- یک کد QR با اطلاعات اولیه سفر اضافه کنید.
- دکمه "چاپ نسخه متنی".
اگر بازدیدکنندگان و مشتریان فعال زیادی دارید، باید یک کپچا برای فرم بازخورد ارائه دهید، که به قطع کردن کمک میکند. تعداد زیادی ازهرزنامه ها. اما فراموش نکنید که کپچا یک عامل "دلسرد کننده" برای تعدادی از بازدیدکنندگان است که ممکن است نظر خود را در مورد ارسال پیام تغییر دهند.
چه خوب است چه بد
قبل از اینکه دو صفحه از مخاطبین باشید. اولین آنها در TOP-10 Yandex است، دومی خارج از TOP-50 است. با استفاده از دانش به دست آمده، خودتان ارزیابی کنید که چرا چنین تفاوتی به وجود آمد.
طراحی صحیح صفحه "مخاطبین".
طراحی نادرست صفحه "مخاطبین".
با مخاطبین شعبه چه کنیم؟
اگر یک شرکت چندین شعبه در یک شهر یا دفاتر نمایندگی در مناطق دارد، باید مراقب ایجاد صفحات تماس جداگانه برای هر بخش باشید. اگر 2-3 شعبه در یک شهر وجود دارد، توصیه می شود مخاطبین آنها را در یک صفحه نشان دهید، اما نباید اجازه داد که صفحه به "برگ" تبدیل شود. اگر آدرس های زیادی وجود دارد، آنها را ایجاد کنید صفحه جداگانهبرای هر کدام، و در صفحه عمومی یک نقشه با نشانگرها و پیوندهای تمام شاخه ها یا لیست کوتاهبا لینک ها هم کاربران و هم ربات های جستجوگر این را دوست دارند.
سازماندهی صفحات تماس برای واحدهای منطقه ای کمی دشوارتر است. کاملاً ممکن است که مجبور شوید آدرس های منطقه ای را به صفحات مربوطه تقسیم کنید. با این حال، در این مورد، شما باید هدف گذاری جغرافیایی را در نظر بگیرید. که در موتورهای جستجو ah - تحویل وابسته به جغرافیایی. به زبان ساده، ساکنان مسکو یا سن پترزبورگ برای هر درخواست تجاری سایت های مختلفی را در نتایج جستجو خواهند دید. هنگام مطالعه داده های مشخص شده در صفحه "مخاطبین"، منطقه توسط موتورهای جستجو اختصاص داده می شود. بنابراین منطقی تر است که دفاتر نمایندگی وب سایت های جداگانه ای در زیر دامنه ها ایجاد کنند و آنها را در نتایج جستجوی منطقه ای تبلیغ کنند.
مخاطبین و ارتقاء وب سایت
Yandex.Webmaster و ابزارهای گوگل برای وب مسترها به شما امکان می دهد موتورهای جستجو را در مورد منطقه سایت خود، خدمات شرکت، برنامه کاری آن، آدرس و سایر داده های مهمی که در نتایج جستجو نمایش داده می شود، مطلع کنید. در Yandex.Webmaster، برای این کار باید از ابزارهای "منطقه سایت" و "آدرس ها و سازمان ها" استفاده کنید. گوگل برای این طراحی شده است آدرس های گوگل" علاوه بر یک قطعه با کیفیت بالا، این فرصت را به شما می دهد تا داده های شرکت را در آن قرار دهید خدمات نقشه- و این باعث جذب ترافیک اضافی می شود.
قرار دادن اطلاعات تماس در تمام صفحات
تلفن و سایر اطلاعات تماس (یا پیوند به آنها) باید در هر صفحه از سایت مشخص شود. در عین حال، آنها باید به وضوح قابل مشاهده باشند، در غیر این صورت بازدیدکننده ای که آماده تماس و ثبت سفارش است، ممکن است مخاطبین شما را پیدا نکند و به سراغ رقبا برود.
برای اینکه بازدیدکننده بتواند روش مناسبی را برای سفارش کالا برای خود انتخاب کند، تمام اطلاعات تماس خود را ذکر کنید: تلفن، ایمیل، اسکایپ، ICQ و غیره. در بیشتر موارد، شماره تلفن ثابت از شماره تلفن همراه قابل اعتمادتر است.
داشتن یک صفحه تماس مناسب و آموزنده امکان ایجاد را فراهم می کند کانال کارآمدارتباط با بازدیدکنندگان، افزایش سطح اعتماد در شرکت. بهینه سازی مناسب این صفحه باعث افزایش جذابیت سایت برای موتورهای جستجو و کمک به آن می شود استراتژی کلیارتقاء موفق پرس و جوهای تجاری. برای دستیابی به این مزایا از مراجعه به متخصصان دریغ نکنید.
که به شما امکان می دهد بلوک های محتوا را به وضوح توصیف کنید
HTML5 چیست؟
HTML5 است جدیدترین نسخهزبان نشانه گذاری فرامتن (HTML)، که نشان دهنده ریشه ای ترین تجدید نظر این زبان در کل تاریخ آن است. این نسخه دارای بسیاری از ویژگی های جدید است مناطق مختلف. مهمترین آنها شامل موارد زیر است.
- برچسب های رسانه ای داخلی برای پشتیبانی از محتوای صوتی و تصویری
- برچسب بوم برای ترسیم محتوا به طور مستقیم در مرورگر
- فرم های هوشمندی که با استفاده از یک ویژگی مورد نیاز، عملیاتی مانند اعتبار سنجی را امکان پذیر می کند
بهبود صلاحیت ها در این موضوع
این مقاله بخشی از برنامه «مسیری به سوی دانش» برای بهبود مهارتهای صلاحیت (مسیر دانش) است. سانتی متر. .
تنظیم جدیدعناصر ساختاری (برچسب ها) در HTML5 نحوه ساختار اسناد HTML را تغییر می دهند. جدید برچسب های ساختاربر تقسیم یک سند HTML به بخش های منطقی متمرکز هستند. نام هر تگ ساختار، نوع محتوایی را که تگ برای ذخیره سازی در نظر گرفته شده است، توصیف می کند. این مقاله به توصیف همراه با جزئیاتاین تگ های جدید
زمینه
در سال 1989، تیم برنرز لی اولین نسخه از زبان HTML را برای غلبه بر محدودیت های روش های موجود در آن زمان برای دسترسی به اطلاعات در اینترنت ایجاد کرد. بر مرحله اولیهوجود اینترنت، ناوبری در آن بود وظیفه چالش برانگیز. محتوای موجود در اینترنت مجموعهای از اسناد فردی بود و وجود نداشت روش سادهپیمایش از طریق این اسناد در واقع، کاربر باید می دانست آدرس دقیقسندی که به دنبال آن هستید و این آدرس را به صورت دستی وارد کنید. برای حل این مشکل، برنرز لی دو فناوری ایجاد کرد: HTTP (پروتکل انتقال ابرمتن) و زبان HTML(زبان نشانه گذاری فرامتن).
HTTP یک پروتکل سرویس است که سرورهای وب برای ارائه محتوا از آن استفاده می کنند. نگاه کنید نوار آدرسمرورگر وب شما اگر مرورگر شما یک URL کامل را نمایش می دهد، به احتمال زیاد با کاراکترهای "http://" شروع می شود. این قسمت از URL به مرورگر می گوید که از چه نوع پروتکلی هنگام درخواست به سرور وب استفاده کند. هنگامی که یک وب سرور درخواستی برای یک سند دریافت می کند، در بیشتر موارد این سند در آن ارائه می شود فرمت HTMLیا به این فرمت تبدیل می شود. این سند HTML است که به مرورگر ارسال می شود که این درخواست را ارسال کرده است.
HTML یک زبان برنامه نویسی است که به مرورگر وب می گوید چگونه محتوا را ارائه کند. محتوا ممکن است حاوی پیوندهایی به اسناد دیگر باشد که روشی کاربرپسند برای پیمایش بین اسناد در اینترنت ارائه می دهد.
این ترکیب از فناوریهای HTTP و HTML، ناوبری سریع و آسان محتوای اینترنت را تضمین میکند - برای پیمایش بین اسناد، فقط باید روی پیوندهای موجود در متن کلیک کنید. پس از ایجاد دو فناوری ذکر شده در بالا، برنرز لی سازمانی به نام W3C ( در سراسر جهانکنسرسیوم وب). W3C توسعه چهار نسخه اول HTML را رهبری کرد.
هدف اصلی اینترنت ارائه خدمات ساده بود اسناد متنی. اولین مرورگرها فقط متنی بودند (به عبارت دیگر، آنها هیچ پنجره شیک نداشتند - فقط متن روی صفحه نمایش داده می شد). حتی اضافه کردن تصاویر زمانی که برای اولین بار ظاهر شدند، دستاورد بسیار مهمی بود. امروزه مردم کارهای مختلفی را در اینترنت انجام می دهند، از ارسال پیام تا پست الکترونیکقبل از مشاهده برنامه های تلویزیونی. اینترنت در حال حاضر بسیار بیشتر از مکانیزمی برای انتقال اسناد متنی ساده شده است. ویژگی های جدید و استفاده های جدید مشکلات و مشکلات جدیدی را ایجاد کرده است که HTML هرگز برای حل آنها طراحی نشده است.
W3C سعی کرد مشکلات اینترنت امروزی را با استاندارد XHTML 2.0 (Extensible Hypertext Markup Language) حل کند. با این حال، این استاندارد به طور گسترده مورد پذیرش قرار نگرفته است و اکنون عملاً کنار گذاشته شده است. در سال 2004، در حالی که W3C تلاشهای خود را بر روی استاندارد XHMTL 2.0 متمرکز میکرد، سازمان دیگری به نام WHATWG (گروه کاری فناوری کاربرد ابرمتن وب) شروع به توسعه استاندارد HTML5 کرد که بسیار مطلوبتر از استاندارد XHTML 2.0 مورد استقبال جامعه قرار گرفت. W3C کار بر روی XHTML 2.0 را متوقف کرده است و در حال حاضر با WHATWG برای توسعه مشخصات HTML5 کار می کند.
مرورگرهای پشتیبانی شده
در زمان نگارش این مقاله، استاندارد HTML5 هنوز به طور رسمی منتشر نشده است. اکثر مطالب موجود در وب همچنان بر اساس مشخصات HTML 4 ایجاد می شوند، اما برخی از مرورگرها از مشخصات HTML5 پشتیبانی می کنند. این می تواند مشکل باشد زیرا هر یک از این مرورگرها فقط می توانند زیر مجموعه ای از ویژگی های HTML5 را پشتیبانی کنند. قبل از ایجاد یک وب سایت مبتنی بر HTML5، هر یک از مرورگرهای هدف خود را آزمایش کنید تا مطمئن شوید که از ویژگی هایی که قصد دارید در سایت خود استفاده کنید پشتیبانی می کنند.
اعلامیه doctype به روز شد
صرف نظر از قابلیت های مرورگرهای هدف خود، باید به هر مرورگر بگویید که می خواهید محتوای خود را با استفاده از مشخصات HTML5 نمایش دهید. این را می توان با استفاده از اعلان doctype انجام داد.
اعلان doctype به مرورگر می گوید که صفحه فعلی با چه نسخه ای از زبان نشانه گذاری نوشته شده است. این کار را با استفاده از یک الگوی DTD (تعریف نوع سند) انجام می دهد. یک DTD قوانینی را مشخص می کند که یک زبان نشانه گذاری برای کمک به مرورگرها برای نمایش صحیح محتوا استفاده می کند.
مفهوم اعلانهای doctype میتواند کاملاً گیجکننده باشد. مشخصات HTML فعلی دارای اعلانهای doctype زیادی است که تفاوتهای بین آنها کاملاً مشخص نیست. جدول 1 در دسترس را نشان می دهد این لحظهاعلامیه های doctype و قابلیت های آنها
جدول 1. اعلامیه های Doctype و قابلیت های آنها
اعلامیه Doctype | ممکن ها | مثال |
---|---|---|
HTML 4.01 سختگیرانه | امکان استفاده از تمام عناصر و ویژگی های HTMLبا این حال، برچسب های ارائه مانند فونت را مجاز نمی داند. عناصر Frameset مجاز نیستند. | |
HTML 4.01 انتقالی | شبیه به اعلان سخت HTML است، اما اجازه استفاده از برچسب هایی مانند فونت را می دهد. عناصر Frameset مجاز نیستند. | |
مجموعه فریم HTML 4.01 | شبیه به اعلان انتقالی HTML است، اما اجازه استفاده از عناصر مجموعه فریم را می دهد. | |
XHTML 1.0 سختگیرانه | مشابه اعلان سخت HTML، اما تمام محتوا باید در قالب XML باشد. به عنوان مثال، هر عنصر باز کننده باید یک عنصر بسته کننده مربوطه داشته باشد. عناصر Frameset مجاز نیستند. | |
XHTML 1.0 انتقالی | مشابه اعلان انتقالی HTML، اما تمام محتوا باید در قالب XML باشد. عناصر Frameset مجاز نیستند. | |
مجموعه فریم XHTML 1.0 | شبیه به اعلان انتقالی XHTML، اما به عناصر مجموعه فریم اجازه می دهد. | |
XHTML 1.1 | مشابه اعلان سخت XHTML، به علاوه قابلیتهای ماژول مانند پشتیبانی Ruby برای زبانهای آسیای شرقی را فراهم میکند. |
خوشبختانه، مشخصات HTML5 اعلان doctype را بسیار ساده می کند. در واقع، تنها یک چنین اعلان در HTML5 وجود دارد. برای اینکه مرورگر شما با استفاده از مشخصات HTML5 رندر شود، اعلان doctype را که در نشان داده شده است اضافه کنید.
فهرست 1. اعلان نوع doctype HTML5
اعلان باید در ابتدای سند HTML، قبل از تگ باشد .
برچسب های ساختار جدید
فرض پشت ایجاد تگهای ساختاری جدید، تمایل به تقسیم صفحات وب به بخشهای منطقی با استفاده از عناصری است که نامهای توصیفی آنها با محتوای آنها مطابقت دارد. از نظر مفهومی، یک صفحه وب را می توان به عنوان یک سند در نظر گرفت. اسناد شامل سرصفحه ها، پاورقی ها، فصل ها و موارد دیگر هستند نمادها، تقسیم اسناد به بخش های منطقی.
که در این بخشبا استفاده از یک مثال، روش های فعلی تقسیم یک سند HTML مورد بحث قرار می گیرد. در بخشهای بعدی مقاله، کد اصلی را با استفاده از تگهای ساختاری HTML5 و حالت گام به گامبیایید ایجاد یک ساختار سند منطقی را در نظر بگیریم.
رویکرد HTML 4
حتی اگر قبلا فقط اسناد اولیه HTML ایجاد کرده باشید، همچنان با تگ div آشنا هستید. در دوران قبل از HTML5، تگ div مکانیزم اصلی برای ایجاد بلوکهای محتوا در یک سند HTML بود. به عنوان مثال، استفاده از تگهای div را برای ایجاد یک صفحه ساده با هدر، ناحیه محتوا و پاورقی نشان میدهد.
فهرست 2. صفحه HTML ساده با استفاده از تگ های div
این رویکرد عالی کار می کند. تگ div یک عنصر عالی است همه منظوره. با این حال، بدون نگاه کردن به ویژگی id هر تگ div، تشخیص اینکه هر تگ div کدام بخش از سند را نشان می دهد دشوار است. می توان استدلال کرد که اگر ویژگی id به درستی نامگذاری شود، قابلیت های آن به عنوان یک شاخص کافی است، اما استفاده از ویژگی های id اجباری نیست. طعم های زیادی از ویژگی id وجود دارد که می توان آنها را به همان اندازه معتبر دانست. تگ div به خودی خود هیچ نشانی از نوع محتوایی که وظیفه نمایش آن را بر عهده گرفته است ندارد.
رویکرد HTML5
HTML5 این مشکل را با ارائه مجموعهای از برچسبها حل میکند که بلوکهای اصلی محتوایی را که یک سند HTML را تشکیل میدهند، با دقت بیشتری تعریف میکنند. صرف نظر از محتوای حاصل که یک صفحه وب نمایش می دهد، اکثر صفحات وب از آن تشکیل شده اند ترکیبات مختلفبخش های معمولی و عناصر صفحه
فهرست 4. افزودن یک تگ بخش
این بخش مهمی از صفحه است.
برچسب مقاله
برچسب مقاله بخش های مهمی از محتوای یک صفحه وب را نشان می دهد. به عنوان مثال، در یک وبلاگ، هر پست فردی یک محتوای معنادار است. پس از افزودن تگ مقاله به مثال کد، کد نشان داده شده در .
فهرست 5. افزودن برچسب های مقاله
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
برچسب کنار
تگ کنار نشان می دهد که محتوای موجود در این عنصر به محتوای اصلی آن صفحه مرتبط است، اما بخشی از آن نیست. استفاده از آن به نوعی شبیه به جاسازی یک نظر در متن متن است (مانند این نظر). محتوای داخل پرانتز اطلاعات بیشتری در مورد عنصر حاوی آن محتوا ارائه می دهد. پس از افزودن تگ aside به کد مثال، کد نشان داده شده در آن را دریافت می کنیم.
فهرست 6. افزودن یک برچسب کناری
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
تگ پاورقی
تگ پاورقی محتوایی را که در آن موجود است به عنوان پاورقی سند جاری مشخص می کند. پس از افزودن تگ فوتر به کد مثال، کدی را دریافت می کنیم که در .
فهرست 7. افزودن یک تگ پاورقی
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
در این مرحله، تمام تگهای div از نمونه اصلی با تگهای ساختار HTML5 جایگزین شدهاند.
برچسب ناوبری
فهرست 8. افزودن یک برچسب ناوبری
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
مثال پایانی
در اینجا نشان داده شده نتیجه جایگزینی تگ های div اصلی با تگ های ساختار HTML5 جدید است.
فهرست 9. مثال نهایی
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
این بخش مهمی از محتوا در صفحه است. شاید یک پست وبلاگ.
اگرچه این مثال تا حد امکان برای اهداف نمایشی ساده شده است، اما مقایسه نمونه اصلیروی پایه عناصر div() با نوع حاصل () به وضوح هدف تگ های ساختار جدید را نشان می دهد.
نتیجه
تگهای ساختاری جدید HTML5 محتوایی را که شامل میشوند توصیف میکنند و به تقسیم یک سند به بخشهای منطقی کمک میکنند. مانند نویسنده ای که یک کتاب می نویسد، نویسنده سند همچنان می تواند تصمیم بگیرد که چه زمانی و کجا از این عناصر جدید در سند خود استفاده کند. اگرچه دو نویسنده ای که یک کتاب را می نویسند ممکن است راه های مختلفی را برای تقسیم آن کتاب به فصل انتخاب کنند، استفاده از فصل ها هنوز یک رویکرد ثابت برای تقسیم کتاب ها به بخش ها است. به همین ترتیب، اگرچه دو نویسنده از یک صفحه وب مشخص ممکن است ساختارهای متفاوتی را انتخاب کنند، عناصر ساختاری جدید HTML5 قابلیتهای جدید و سازگاری را در اختیار توسعه دهندگان صفحه وب قرار میدهند که توسط تگهای div قبلی ارائه نشده بود.