شرح مختصری از تمام توابع html. آماده سازی زمین: بیایید در مورد HTML صحبت کنیم. برای هر صفحه یک توضیح منحصر به فرد ایجاد کنید

ابرداده که برای ارائه اطلاعات (فراداده) در مورد یک صفحه وب استفاده می شود، در یک صفحه وب نمایش داده نمی شود، اما دستورالعمل هایی را به مرورگر می دهد یا ارائه می دهد. اطلاعات تکمیلیبرای موتورهای جستجو:

کلید واژه ها">

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

توجه: برچسب ها باید در یک عنصر باشد .

رمزگذاری

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

تگ برای تعیین رمزگذاری استفاده می شود. با ویژگی charset که توصیه می شود به عنوان اولین عنصر در داخل قرار گیرد :

توجه: UTF-8 یک رمزگذاری جهانی است که از اکثر زبان ها و کاراکترهای خاص پشتیبانی می کند.

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

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

ساده ترین راه برای یافتن کلمات کلیدی مناسب برای صفحه فعلی این است که تعیین کنید خودتان از چه کلماتی برای جستجوی مطالب ارائه شده در آن استفاده می کنید؟ اینها کلمات کلیدی هستند که شما نیاز دارید. مثال:

کلمات کلیدی با کاما یا فاصله از هم جدا می شوند و در هر صورت می توان آنها را نوشت. توصیه می شود بیش از 10-15 کلمه یا عبارت کلیدی را مشخص نکنید.

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

توضیحات (توضیحات کوتاه)

مقدار توضیحات برای توصیف مختصر محتوای صفحه فعلی استفاده می شود. توصیه شده حداکثر طولچنین توصیفی نباید بیش از 180 کاراکتر باشد:

توضیح کوتاهی از صفحه می تواند توسط موتورهای جستجو در صفحه با نتایج جستجو در زیر عنوان صفحه و URL استفاده شود:

همچنین توضیح کوتاهدر برخی از سایت های رسانه های اجتماعی هنگام افزودن پیوند استفاده می شود:

هنگام نوشتن توضیحات مختصر باید به نکات زیر توجه کرد:

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

توجه: به توضیح کوتاهی که در زیر یک پیوند در صفحه نتایج جستجو وجود دارد، قطعه قطعه می گویند.

برچسب بزنید

HTML یک زبان نشانه گذاری وب سایت است. بسیاری آن را برنامه نویسی می دانند، اما اینطور نیست. HTML حاوی هیچ یک از متغیرها، محاسبات، آرایه ها و سایر عناصر موجود در هیچ زبان برنامه نویسی نیست.

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

ایجاد یک سند html

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

به عنوان یک قاعده، Notepad فقط زمانی استفاده می شود که ابزار دیگری در دسترس نباشد. ابتدا یک سند متنی ایجاد می شود و سپس با فرمت html ذخیره می شود. تمام صفحات سایت باید با پسوند html باشند.

زبان html سلسله مراتبی است. یعنی ساختار خاصی از سند html وجود دارد. آن چیست؟ برای وضوح موارد زیر را در نظر بگیرید.

ساختار سند html. مثال

ساختار همیشه یکسان است. اگر می‌خواهید چیزی را تغییر دهید، مرورگر نمی‌تواند آن را پردازش کند. در نتیجه به آن چیزی که در نظر داشتید نخواهید رسید.

شکل بالا ساختار هر فایل html را نشان می دهد. مورد اول نوع فایل را نشان می دهد. این تگ یک بار مشخص می شود. اگر از ویرایشگرهای ویژه استفاده می کنید، کل ساختار به طور خودکار ایجاد می شود. شما باید مقادیر پیش فرض را تغییر دهید.

ساختار سند html - برچسب های اصلی:

این سه تگ چارچوب کل سایت را تشکیل می دهند. به نقاشی توجه کنید. همه این تگ ها دارای یک تگ بسته شدن با علامت “/” هستند. اگر با دست می نویسید، عادت کنید که هر دو تگ را به طور همزمان قرار دهید - باز و بسته کنید.

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

بخش سر

در شکل زیر مورد 3 قسمت سر نشان داده شده است. این بخش حاوی اطلاعات خدمات است. برای مثال می توانید کدگذاری (نقطه 4) و عنوان صفحه (نقطه 5) را مشخص کنید.

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

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

برچسب ها و . . بدنه سند. .


مناطق و هر گونه اطلاعات خارج از آنها، اما در داخل -area در صورتی نادیده گرفته می شود که یک کاراکتر کنترلی همراه خود نداشته باشد (مثلاً یک اسکریپت جاوا است).

2.4 نمایش رنگ در HTML.

یک رنگ در هایپراسناد به صورت سه جزء دو بایتی که با نماد هگزادسیمال نوشته شده اند نشان داده می شود. به جای "WHITE" نشانگر "#ffffff" است، که در آن # نشان می دهد که عدد بعدی هگزادسیمال است، و هر یک از اجزای نور (اجازه دهید یادآوری کنم، یک مدل رندر رنگ افزودنی در اینجا استفاده شده است) مقدار ff را دارد، یعنی: بر این اساس، رنگ‌های اصلی می‌توانند عبارتند از: #ff0000 قرمز قرمز #00ff00 سبز سبز #0000ff آبی آبی متداول‌ترین ترکیب‌های استفاده شده از این سه جزء در جدول موجود در هر مرجع HTML فهرست شده‌اند. از ترکیبات دارای یک نام خاص است که توسط مرورگر شناسایی شده است .

2.5 تگ های اصلی HTML.

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

برچسب هایی که نمایش متن را مشخص می کنند
• اندازه فونت

  - متن زیر تگ پایانی را به عنوان عنوان سطح اول تعریف می کند (اندازه حروف حداکثر مجاز است)

  - ..

  - .. اندازه حروف به تناسب تغییر می کند

  - .. به سمت حداقل قابل قبول

  - ..

  - اندازه حروف - حداقل مجاز - حداکثر فونت مجاز - حداقل فونت مجاز (محدودیت های تحمل قلم توسط مرورگر با استفاده از یک مقدار متوسط ​​که معمولا توسط کاربر تعیین می شود تعیین می شود)

• نوع کتیبه - (مورب) فونت ایتالیک - (پررنگ) فونت با انتخاب ضخامت کاراکتر - (زیر خط بکش) متن خط دار - (تله تایپ) پیام تله تایپ الف - کتیبه چشمک زن

  خروجی متن فرمت شده (به طور گسترده از MS Word 8 استفاده می کند)
  علاوه بر این، یک برچسب وجود دارد که نوع فونت، اندازه و رنگ را مشخص می کند. -

  جایی که
  نوع فونت چهره (از فونت های عجیب و غریب غافل نشوید، زیرا ممکن است در سیستم مشتری در دسترس نباشند)
  اندازه - اندازه (از 1 تا 6) در واحدهای نسبی. همچنین می توان آن را به طور نسبی تنظیم کرد، به عنوان مثال: size=+1 (مقدار بولی فعلی را 1 افزایش دهید)
  رنگ - رنگ فونت را تنظیم می کند.
  تگ بالا برای برجسته کردن یک خط خاص با رنگ بسیار مناسب است.
• قالب بندی متن (و عناصر دیگر) - تراز وسط - تراز چپ - تراز سمت راست
• برچسب ها مسئول تشکیل لیست ها -
  - - این دو تگ ناحیه مرزی را به عنوان لیستی با تورفتگی مناسب از مرز سمت چپ سند تعریف می کنند -
  • - اطلاعات بعدی را به عنوان یک عنصر جدید از لیست تعریف می کند. با ارقام مختلف (نقاط) متمایز می شود
    لیست ها می توانند تودرتو باشند، یعنی یک عنصر از یکی از لیست ها می تواند لیست دیگری باشد.
  • برچسب های عمومی
    • - درج اطلاعات گرافیکی در سند.(سوء استفاده از این تگ باعث کاهش ترافیک صفحه می شود!)
      گزینه ها:
      • src="filename" مشخص می کند که کدام فایل شامل خواهد شد. مرورگرهای مدرن غیر متنی با تصاویر در قالب های GIF89، JPEG، متحرک GIF، کمتر - PNG و XPM کار می کنند.
      • alt="text-analogue" - применяется в случае, если у клиента отключена загрузка графических изображений.!}
      • عرض - عرض تصویر بر حسب پیکسل (ممکن است با واقعی مطابقت نداشته باشد).
      • ارتفاع - ارتفاع تصویر بر حسب پیکسل.

    • ---

      - خطی که بخش‌های سند را از هم جدا می‌کند. پارامتر عرض، طول را هم به صورت مطلق (پیکسل) و هم در واحدهای نسبی (درصد) تعریف می‌کند.
    • 
      - برچسب شروع یک خط جدید.
    • کد>.
    • - تگ پیوند فرامتن. می تواند اسناد را به:
      • شبکه جهانی
        پارامتر href شامل مسیر کامل (با آدرس کامپیوتر حاوی فایل داده شده) و نام فایل است.
      • فایل روی این دستگاه(سند html اختیاری)
        پارامتر href شامل مسیر فایل، نسبت به دایرکتوری فعلی و نام فایل است.
      • برچسب در سند فعلی
        پارامتر href حاوی نماد # و نام برچسب است. برای مثال، برای برچسب 001، پیوند شبیه به آن است. .برچسب ها توسط یک تگ تنظیم می شوند، اما با یک پارامتر متفاوت ، که در آن نام، نام برچسب است (# - استفاده نشده است!) برای 001 می پذیرد -

  2.6 کار با جداول در HTML.

  جداول در HTML یکی از ابزارهای قدرتمند برای ارائه اطلاعات هستند که با مجموعه ای از برچسب ها توصیف می شوند که تقریباً هر کدام پارامترهای خاص خود را دارند. بیایید موارد اصلی را در نظر بگیریم:
  • - اعلام جدول و تعریف برخی از پارامترها
    
    bgcolor - رنگ پس زمینه جدول
    عرض - عرض جدول در واحدهای مطلق و نسبی
    حاشیه - عرض حاشیه جدول (به پیکسل)
    cellpadding - padding هنگام ارائه محتوای جدول (به پیکسل)
    فاصله سلولی - فاصله بین سلول های جدول (بر حسب پیکسل)
    - اعلان عناصر رشته جدول در ارتباط با برچسب استفاده می شود شامل یک یا چند ناحیه است که توسط برچسب مشخص شده است

    - عنوان جدول معمولاً بعد از اعلام جدول اعمال می شود

    - عنوان هر ستون
    ، که خطوط تقسیم عمودی را هنگام رندر کردن جدول مشخص می کند. یعنی ناحیه محدود شده توسط برچسب
    ، تعریف می کند که در هر سلول در ردیف داده شده چه چیزی وجود دارد. مثال:راه حل HTML: شما باید یک جدول بسازید: 1 1 3 2 2 3 1 1 3 2 2 3 سه تگ آخر تعدادی گزینه دارند: colspan=.. - "کشش" سلول داده شده در عرض با تعداد صحیح مشخص شده سلول. (برای tr قابل اجرا نیست) rowspan=.. - مشابه، اما عمل به صورت عمودی اتفاق می افتد. bgcolor=.. - رنگ پس زمینه را برای هر سلول تنظیم کنید 2.7 فریم. قاب ها- اینها پنجره های مشاهده مستقل اسناد مختلف html هستند. گاهی اوقات سازماندهی ناوبری صفحه در قالب یک منو در یک قاب جداگانه و پنجره اصلی بسیار راحت است که در آن تمام اطلاعات تعیین شده توسط کاربر در ناحیه منو ارائه می شود. در اینجا، پنجره باید به صورت زیر درک شود. بخشی از فضای کاری مرورگر، و نه به عنوان یک پنجره جدا از آن در محیط ویندوز یا X11 (اگرچه این کار با جاوا اسکریپت امکان پذیر است). اجازه دهید عملکرد فریم ها را با استفاده از یک مثال توضیح دهم: بیایید 2 فریم ایجاد کنیم: یک منو و یک پنجره اطلاعات. فایل html اصلی به شکل زیر خواهد بود: index.htm Стоит учитывать, что фреймы могут быть вложенными. Рассмотрим теперь страницы навигации, загружаемую в фрейм Menu menu.htm About me My favorite books Nice links Замечу, что у тэга появился параметр tagert, указывающий на фрейм Info.Это означает, что при нажатии на ссылку искомый документ загрузится не в текущий, а в определяемый tagert фрейм. Вот так, довольно просто можно организовать навигацию по стра ницам припомощи фреймов.Однако с развитием технологии SSI (о ней далее) многие Web-дизайнеры предпочитают организацию сопровождения по сайту при помощи таблиц. 2.8 Неупомянутые тэги. После всего того, что было сказанно, остается еще достаточно большое количество неупомянутых тэгов, которые можно использовать для приукрашения и придания большей функциональности уже существующей странице.Не буду останавливаться на них - в Сети достаточно много страниц, посвященных Web-дизайну - вспомню лишь некоторые: Тэги ,,,<select> и <option> предназначены для организации так называемых заполняемых форм, являющихся по сути дела обратной связью во взаимодействии "клиент-сервер". <br>Тэги <map> и <area> необходимы для использования в качестве меню одного графического изображения.Разным участкам этого изображения ставится в соответствие разлчные документы, при активизаци (нажатии) участка происходит переход на другой документ, аналогичный переходу при нажатии на гиперссылку. <br>И,наконец, тэг <embeed> позволяет встраиватьв документ файлы раз личных форматов (например, midi-музыку).При получении такого файла браузер пользователя (если у него доступны функции, отвечающие за работу с этим файлом) сам отобразит этот файл как часть общего до кумента, не прибегая к помощ сторонних приложений. </p><p> <h3>3.1 Технологии создания динамических HTML - документов.</h3> </span> Создание динамических страниц (то есть изменяющихся во времени) -необ ходимость, диктуемая вовлечением все большего количества людей и инфор мационных потоков в Интернет.Не останавливаясь на широчайших просторах их практического применения, кратко перечислю технологии,позволяющие их реализовать.Надо заметить,что и сам HTML-документ достаточно динами чен (например,), потому результаты, выдаваемые различными машинами с разными браузерами,будут различны.Однако это не является препядствием для появления новых программных средств и технологий, имеющих в качестве выходного формата HTML. </p><p><i>JavaScript </i> - объектно-ориетированный скрипт-язык с ограниченным количеством классов(Java-язык, адаптированный под HTML).Исполняется на стороне клиента его браузером, что влечет за собой определенные трудности - не все браузеры поддерживают данную технлогию,а в остальных ее версии довольно сильно различаются и одни и те же скрипты, уверенно работающие на одном браузере, не воспринимаются на другом. </p><p><i>CGI (Common Getaway Interface) </i> - за этой аббревиатурой кроется принцип передачи результатов программы, работающей на сервере, клиенту(пользователю). Такая программа может быть написана на любом языке программирования, который поддерживает платформа сервера.Очень часто для подобных целей используют PERL - интерпретируемый язык, похожий на Си. </p><p><i>SSI(Server Side Includes) </i>- технолгия, позволяющая вставлять в статические html-документы динамически меняющиеся документы или результаты ис полняемых на сервере программ. </p><p>Следующая технология, применяемая в Web-дизайне, призвана, наоборот,обеспечить соответствие задаваемых при создании документов их отображением на клиентских машинах. </p><p><i>CSS(Cascade Style Sheets) - технология, позволяющая определить для каждого тэга вид, размер(в абсолютных единицах) и тип шрифта текста,ограничиваемого данным тэгом. </i></p><p><i>VRML </i> - своеобразный язык для создания 3х-мерных сцен и страниц.Похож на HTML. </p><p>И,наконец, <i>ASP(Active Server Page) </i>,<i> DHTML(DynamicHTML) </i> и <i>XML(eXtendet Makeup Language) </i> - совсем новые, но довольно быстро распространяющиеся технологии, разработанные консорциумом W3C и корпорацией Microsoft. </p><p> <h3>3.2 Инструменты и приемы создания Web-страничек.</h3> </span> Первое, что необходимо для создания html-документов, это браузер. Развитие Интернета спровоцировало появление около десятка различных программных продуктов подобного рода.В настоящее время браузеры су ществуют практически для всех платформ, а в некоторых графических оболочках (например, в KDE для Linux) стали неотъемлемой частью сис темы.Названия некоторых из них приведены ниже: Netscape Navigator MacOS,Windows,UNIX Internet Explored Windows,some UNIX Opera Windows Arachne DOS,Linux Arena Linux <br>Второе - редактор HTML-документов.Рынок програмного обеспечения на сыщен комерческими программными продуктами, позволяющими содавать HTML-страницы на основе приципа WYSIWYG(What You See Is What You Get) - приципа соответствия выходного html-кода задаваемому программе виду, желаемому пользователем.В качестве примера назову MS FrontPage, Lotus Domino, Xara Webster.В браузере Netscape Navigator начиная с 3-ей версии встроен достаточно неплохой редактор Netscape Composter. Однако нет необходимости в сложных и дорогих редакторах, поскольку html-документ по сути обычный текстовой файл, то есть для его создания и редактирования достаточно простейшего текстового редактора. </p><p>Третье - полноценный графический редактор.Советую обзавестись как редактором растровых изображений (например, Adobe Photoshop или GIMP), так и редактором векторной графики (CorelDraw! или CorelXara). </p><ul>Напоследок объявлю несколько негласных правил Web-дизайна: <li>Недопустим избыток графических изображений. Поскольку не все могут позволить себе многомегабитные линии доступа в Сеть, часто пользователи отключают автозагрузку графической информации, что сведет на нет все усилия сделать страницу максимально привлекательной</li><li>Желательно, чтобы все графически оформленные ссылки были продублированны текстовой ремаркой по той-же причине.</li><li>Как правило, при оформлении используют ограниченный набор цветов, причем для отображения информации подбираются контрастные элементы палитры.(Это не строго,но,согласитесь, разобрать светло-зеленые буквы на светло-сером фоне достаточно сложно)</li><li>Прежде,чем размещать страницу, необходимо проверить, адекватно ли она воспринимается другими браузерами.</li><li>При помещении страницы в нерусской зоне Интернет необходимо учитывать, что, в отличии от Windows-систем, в UNIX-ах используется другая кодировка символов KOI8, потому нужно предусмотреть возможность просмотра тех же документов в данной кодировке.(Обычно в русском Интернете на всех серверах имеются автоматические перекодировщики, поэтому тут достаточно одного экземпляра страницы в определенной кодировке).</li> </ul></li> </ul></td> <p>Мэтт Каттс, руководитель службы анти-спама Google, ответил на вопрос пользователя о <b>мета-теге Description </b> в своем видео-обращении.</p> <p>Пользователь спросил: «Действительно ли необходимо, чтобы каждая страница веб-сайта содержала уникальный <b>мета-тег Description </b>?».</p> <p>Мэтт считает, что когда вопрос касается <b>мета-тега Description </b>, то реально существуют только два жизнеспособных варианта. Вы можете либо включить уникальный <b>мета-тег Description </b> в каждую страницу сайта, или вы можете вообще его не использовать. Однако, в случае использования мета-тега , ни в коем случае нельзя допускать дублирования содержания последнего.</p> <p>Очень простой способ выявления повторяющихся <b>мета-тегов Description </b> - это регистрация и регулярная проверка вашего веб-ресурса в бесплатном сервисе Google - «Инструменты для веб-мастеров ». В случае выявления дублируемого описания на страницах сайта вы будете извещены об этом в соответствующем разделе «Инструментов».</p> <p>Вообще говоря, Мэтт заявил, что вероятно не стоит тратить свое время на то, чтобы писать уникальный текст <b>мета-тега Description </b> для каждой отдельной страницы на вашем сайте. Мэтт, к примеру, даже не делает это на своем собственном блоге.</p> <p>Что Мэтт, настоятельно рекомендует, так это - включать <b>мета-тег Description </b> на страницы, которые действительно имеют важное значение. Например, домашние страницы или страницы, которые имеют высокий коэффициент окупаемости инвестиций (ROI).</p> <table width="500" border="1" cellpadding="1"><tr><td bgcolor="#99FFFF"><p><i><b>ROI </b> (Return on Investment) – коэффициент окупаемости инвестиций, или показатель рентабельности вложений, то есть процент прибыльности (при значении больше 100%) или убыточности (при значении меньше 100%) конкретной суммы вложения денежных средств в определенный проект </i> </span>.</p> <p><i>Формула для расчета ROI: </i></p> <p><i><b>ROI </b> = ((B – A) / C) * 100%, </i></p> <ul><li><i><b>себестоимость продукта или услуги (А) </b> – включает в себя абсолютно все затраты на покупку частей для продукции, доставку до склада, производство товара, зарплату работникам и т.д.; </i></li> <li><i><b>доход (В) </b> – конечная прибыль с продажи продукта или услуги; </i></li> <li><span><i><b>сумма инвестиций (С) </b> – суммарное количество денежных средств, которые выступали в роли вложения, например бюджет на контекстную рекламу </i> </span>.</li> </ul></td> </tr></table><p>Если вы заметили, что некоторые из ваших страниц имеют не очень удачные автоматически сгенерированные сниппеты в поисковой выдаче, то вам следует рассмотреть возможность написания уникальных <b>мета-тегов Description </b> для таких страниц также.</p> <p>Подытоживая все сказанное Мэттом, можно сделать следующий вывод: вы должны не только избегать, но и исключить любую возможность наличия дублированного описания в <b>мета-тегах Description </b> на всех страницах своего сайта. Создавайте уникальные описания для некоторых, особо значимых страниц и пусть Google автоматически создает остальные.</p> <p>Вы можете прослушать полное видео-обращение Мэтта ниже (на английском языке):</p> <p><span class="W4gr88oHb-k"></span></p> <p>А теперь познакомьтесь поближе с <b>мета-тегом Description </b>, который раньше, да и сейчас, продолжает играть важную роль при проведении поисковой оптимизации сайтов . При этом, вам следует учитывать, как современные тенденции (см. рекомендации Мэтта), так и реальное состояние вещей в данном вопросе. А чтобы постоянно быть в курсе новых веяний, не забывайте заглядывать на мой сайт.</p> <h2><b><span>Характерные особенности </span> </b><b>мета-тега Description </b></h2> <p><b>HTML Мета-тег Description </b> применяют при создании краткого описания страницы, он используется поисковыми системами для индексации, а также при создании сниппета (аннотации) в выдаче по запросу.</p> <p>При отсутствии <b>мета-тега Description </b>, поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова.</p> <p>Не ошибитесь при оптимизации <b>мета-тега Description </b> – этот тег очень важен. Правильное использование данного тега, без учета других элементов поисковой оптимизации, не сделает вас первым номером рейтинга само по себе, но, безусловно, поможет вам добраться до вершин.</p> <p>Больше узнать о значении мета-тегов в проведении поисковой оптимизации сайта можно в статье "Почему следует использовать поисковую оптимизацию мета-тегов для продвижения сайтов ".</p> <p>Как и в случае с <b>мета-тегом Keywords </b>, старайтесь не повторять слова и фразы слишком часто, чтобы избежать наказания со стороны поисковиков. Более подробно познакомиться с <b>мета-тегом Keywords </b> вы можете в статье "Как правильно использовать html мета-тег keywords ".</p> <p><b>Мета-тег Description </b> используется не только для роботов поисковых систем - текст, который заключен в него, появляется в результате выдачи по поисковым запросам интернет пользователей.</p> <p>Ваша задача – создать такой <b>мета-тег Description </b>, который будет привлекательным как для роботов, так и для людей. Таким образом, как и в случае с <b>тегом Title </b>, важно, чтобы <b>мета-тег Description </b> был наполнен ключевыми словами и был привлекательным для людей. Поисковая оптимизация <b>тега Title </b> описана в статье "Kак правильно составить html тег title заголовка страницы сайта ".</p> <p>Правила для <b>мeтa-тега Description </b> более или менее те же, что и для <b>тега Title </b>. Однако содержание этого тега, как правило, будет объемнее, чем <b>тега Title </b>.</p> <p>Если вебмастер не уделил должного внимания заполнению мета-тега <b>Description </b>, то поисковая система сама формирует т.н. сниппет - краткое описание под ссылкой на страницу - из фрагментов предложений, соответствующих тематике запроса, со всей страницы.</p> <p><b>Description </b> совместно с <b>Title </b> образуют пару очень важных мета-тегов, от которых зависит перейдёт ли пользователь из поисковой выдачи на ваш сайт или обратится к конкурентам. Поэтому его, как и Title , нужно прописывать для каждой страницы! Причем, для каждой страницы должны быть подобраны разные слова и фразы, входящие в названные теги.</p> <p>HTML-код мета-тега <b>Description </b> располагается в следующем месте:</p> <p><i><html> </i><br><i><head> </i><br><i><meta name="keywords" content=" </i><i>Перечень </i><i>ключевых </i><i>слов </i><i>"> </i><br><b><i><meta name="description" content=" </i> </b><b><i>Содержимое </i> </b><b><i> мета </i> </b><b><i>- </i> </b><b><i>тега </i> </b><b><i> «description»"> </i> </b><br><i><title> </i><i>Содержимое </i><i>мета </i><i>- </i><i>тега </i><i> «title»< /title> </i><br><i>< /head> </i><br><i><body>Основное содержимое страницы< /body> </i><br><i>< /html> </i></p> <p>Вот как, к примеру, бы мог выглядеть <b>HTML-код </b> <b>мета-тега Description </b> для ключевого слова “Туры в Одессу”:</p> <p><i><meta name="description " content="Туры в Одессу - Мы позаботимся обо всех деталях поездки, так что вы можете отдыхать с полным спокойствием"> </i></p> <p>Обратите внимание, что в этом описании повторяется ключевое слово “Туры в Одессу”, а также указывается на очевидные выгоды: клиент будет иметь возможность отдыхать, не беспокоясь о деталях поездки - вы будете заботиться о них.</p> <p>Размещайте ваши самые важные <b>ключевые слова и фразы </b> в начале каждого <b>мета-тега Description </b> и старайтесь иметь различные описания для каждой страницы вашего сайта. Использование одних и тех же описаний в <b>мета-теге Description </b> на каждой странице еще хуже, чем вообще оставить их пустыми.</p> <p>Помните, что не заполненный <b>мета-тег Description </b> может явиться источником серьезных проблем при определении рейтинга вашего сайта.</p> <p><b>Мета-тег </b> <b>Description </b> должен быть использован на каждой странице сайта, так как он остается полезным дополнением к уникальному контенту самой страницы. <b>Мета-теги </b> <b>Description </b> не должны повторять заголовок страницы, а должны содержать краткое описание темы, рассматриваемой на странице.</p> <p>Всегда старайтесь, чтобы наиболее важные идеи, которые вы пытаетесь донести до пользователей, находились в начале описания и содержали <b>ключевые слова </b>, а также, чтобы описание точно отображало содержимое страницы.</p> <p>Следует помнить, что каждая страница вашего сайта должна содержать свой уникальный и точный <b>мета-тег </b> <b>Description </b>, так как дублирование <b>мета-тега </b> <b>Description </b>на страницах сайта всегда оценивалось отрицательно поисковыми системами.</p> <p>Как только ваш сайт полностью проиндексирован Google , вы можете проверить случаи дубликата мета-тегов в <i>Google Webmaster tools </i>, например.</p> <p>Несмотря на то, что <b>мета-тег </b> <b>Description </b> не является одним из основных критериев при SEO , вы все равно должны уделять максимум внимания на качество содержания <b>мета-тега </b> <b>Description </b>. Вам необходимо составить одно или два предложения, так описывающих вашу страницу, что посетителям захочется зайти на ваш сайт, а не на сайт конкурентов.</p> <p>Хорошо написанные и уникальные <b>мета-теги </b> <b>Description </b> на каждой странице вашего сайта будут способствовать увеличению количества кликов по вашей ссылке.</p> <h2>Рекомендации от Google по использованию мета-тега Description</h2> <table width="500" border="0" cellpadding="1"><tr><td><p><i><b>МЕТА-ТЕГ Description </b> </i></p> </td> </tr><tr><td bgcolor="#DAF8FE"> <p><b>Придумайте краткое описание для каждой страницы </b></p> <p><b>Метатег <description> дает поисковой системе краткое описание содержимого страницы </b>. Если в теге <title> мы использовали одну фразу, то в <description> мы уже можем написать пару предложений или небольшой параграф. В наборе инструментов для веб-мастеров Google есть удобный инструмент для анализа контента, который поможет вам подсказкой, если ваши метатеги <description> слишком длинны/коротки или слишком часто повторяются (та же функция доступна для тегов <title>). Так же как и тег <title>, метатег <description> размещается внутри тега <head> html-страницы.</p> <p><b>Значение метатега <description> для оптимизации поиска </b></p> <p>Метатеги описания важны потому, что <b>Google может использовать их при создании сниппетов к вашему сайту </b>. Заметьте, мы говорим “может”, потому что Google может выбрать для сниппета другой подходящий текст с вашего сайта, если он более релевантен запросу пользователя. Так же Google может использовать описание вашего сайта из проекта Open Directory, если ваш сайт в него включен.</p> <p>Добавление метатегов <description> поможет Google и в том случае, если поисковый робот не может самостоятельно найти подходящий текст для сниппета. В центральном Блоге для Веб-мастеров есть полезная статья об улучшении сниппетов с помощью метатегов <description>.</p> <p>Слова в сниппете выделяются жирным, если они соответствуют поисковому запросу пользователя. Таким образом, пользователь получает представление о том, что ожидает его на вашей странице.</p> </td> </tr><td><p><i><b>ПРАКТИЧЕСКИЕ СОВЕТЫ </b> </i></p> </td> <tr><td bgcolor="#DAF8FE"> <p><b>Кратко и точно опишите содержание страницы </b></p> <p>Постарайтесь сделать описание страницы интересным и содержательным для пользователей, которые увидят его в качестве сниппета на странице поиска. <b>Не советуем: </b></p> <ul><li>вставлять в тег <description> описание, не соответствующее содержимому страницы;</li> <li>использовать общие слова в описании, например “это моя страница” или “страница про открытки”;</li> <li>наполнять тег <description> ключевыми словами;</li> <li>вставлять в тег <description> полный текст страницы.</li> </ul><p><b>Создайте уникальное описание для каждой страницы </b></p> <p>Уникальное описание каждой страницы полезно как для поисковой системы, так и для пользователей: например, если в результатах поиска появятся несколько страниц вашего домена (в особенности при поиске с оператором site:). Если на вашем сайте тысячи и миллионы страниц, то проставить описания вручную чаще всего невозможно. В этом случае вы можете автоматически создать описание каждой страницы на основании ее содержимого. <b>Не советуем:</b></p> </td> </tr></table> <p><b>Основы HTML </b> содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.</p> <p>HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе <b>(Блокнот) </b>, так и в специализированном, с подсветкой кода <b>(Notepad++, Visual Studio Code и т.п.) </b>. HTML-документ имеет расширение.html .</p> <p>HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).</p> <p><b>Начальный тег </b> показывает, где начинается элемент, конечный - где заканчивается. <b>Закрывающий тег </b> образуется путем добавления слэша / перед именем тега: <имя тега> … </имя тега> . Между начальным и закрывающим тегами находится содержимое тега - контент.</p> <p>Одиночные теги не могут хранить в себе содержимого напрямую, оно прописывается как значение атрибута, например, тег <input type="button" value="Кнопка"> создаст кнопку с текстом <b>Кнопка </b> внутри.</p> <p>Теги могут вкладываться друг в друга, например, <p><i>Текст</i></p> . При вложении следует соблюдать порядок их закрытия <b>(принцип «матрёшки») </b>, например, следующая запись будет неверной: <p><i>Текст</p></i> .</p> <p>HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.</p> <p>Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, <div class="nav top"> . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.</p> <p>Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.</p> <p>Процесс интерпретации <b>(парсинг) </b> начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.</p> <p>HTML-документ состоит из двух разделов - заголовка — между тегами <head> … </head> и содержательной части — между тегами <body> … <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> .</p> <h2>Структура веб-страницы</h2> <i> </i><h3>1. Структура HTML-документа</h3> <p>Язык HTML следует правилам, которые содержатся в файле объявления типа документа <i>(Document Type Definition, или DTD) </i>. DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.</p> <p><b>DOCTYPE </b> отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.</p><p> <!DOCTYPE html> <!-- Объявление формата документа --> <html> <head> <!-- Техническая информация о документе --> <meta charset="UTF-8"> <!-- Определяем кодировку символов документа --> <title>...</title> <!-- Задаем заголовок документа --> <link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей --> <script src="script.js"></script> <!-- Подключаем сценарии --> </head> <body> <!-- Основная часть документа --> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html> </p><p>عناصر درون یک تگ <html>، یک درخت سند را تشکیل دهید که به اصطلاح <b><a href="https://ow5.ru/fa/system-utilities/dom-obektnaya-model-dokumenta-osnovy-raboty-s-dom-v-javascript-vozmozhnosti.html">مدل شی</a>سند، DOM (مدل شیء سند)</b>. در عین حال، عنصر <html>عنصر ریشه است.</p> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2014/10/DOM.png' width="100%" loading=lazy loading=lazy>برنج. 1. ساده ترین ساختار یک صفحه وب <p>برای درک تعامل عناصر یک صفحه وب، لازم است به اصطلاح در نظر گرفته شود <b>"نسبت خانوادگی"</b>بین عناصر روابط بین چندین عنصر تو در تو به روابط والدین، فرزند و خواهر و برادر طبقه بندی می شود.</p> <p><b>جد</b>عنصری که حاوی عناصر دیگری است. در شکل 1، جد همه عناصر است <html>. در عین حال، عنصر <body>نیای تمام برچسب هایی است که شامل آن می شود: <h1> , <p> , <span> , <nav>و غیره.</p> <p><b>نسل</b>- عنصری که در داخل یک یا چند نوع عنصر قرار دارد. مثلا، <body>از نوادگان است <html>، و عنصر <p>فرزند هر دو است <body>و <html> .</p> <p><b>عنصر والد</b>- یک عنصر مرتبط با عناصر دیگر بیش از <a href="https://ow5.ru/fa/office/uroven-sar---chto-eto-takoe-v-telefone-spisok-telefonov-s-nizkim-i-vysokim.html">سطح پایین</a>و روی درخت بالای سرشان بودن. شکل 1 <html> <head>و <body>. برچسب بزنید <p>فقط والدین به <span> .</p> <p><b>عنصر کودک</b>- عنصری که مستقیماً تابع عنصر دیگری است <a href="https://ow5.ru/fa/tv-and-video/skachat-ammi-admin-versiya-3-4-vysokii-uroven-bezopasnosti-i-shifrovaniya-dannyh.html">سطح بالا</a>. در شکل 1، فقط عناصر <h1> , <h2> , <p>و <nav>فرزندان هستند <body> .</p> <p><b>عنصر خواهر</b>- عنصری که یک عنصر والد مشترک با عنصر مورد نظر دارد که اصطلاحاً به آن عناصر هم سطح می گویند. شکل 1 <head>و <body>- عناصر هم سطح و همچنین عناصر <h1> , <h2>و <p>آنها با یکدیگر خواهر هستند.</p> <h3>1.1. عنصر <html></h3> <h3>1.2. عنصر <head></h3> <p>فصل <head>...</head>شامل <a href="https://ow5.ru/fa/photo-editors/samsung-galaxy-trend-ii-duos---tehnicheskie-harakteristiki-samsung-galaxy-trend-ii-duos---tehnicheskie.html">اطلاعات فنی</a>در مورد صفحه: عنوان، توضیحات، کلمات کلیدی برای موتورهای جستجو، رمزگذاری و غیره. اطلاعات وارد شده در آن در پنجره مرورگر نمایش داده نمی شود، بلکه حاوی داده هایی است که به مرورگر می گوید که چگونه صفحه را پردازش کند.</p> <h4>1.2.1. عنصر <title></h4> <p>تگ بخش مورد نیاز <head>برچسب است <title>. متن قرار داده شده در داخل این تگ در نوار عنوان مرورگر وب نمایش داده می شود. طول عنوان نباید بیشتر از 60 کاراکتر باشد تا به طور کامل در عنوان جا شود. متن عنوان حداکثر باید حاوی باشد <a href="https://ow5.ru/fa/more/megafon-tarifnyi-plan-svoboda-za-platezh-polnoe-opisanie.html">توضیحات کامل</a>محتوای صفحه وب</p> <h4>1.2.2. عنصر <meta></h4> <p>تگ بخش اختیاری <head>یک تگ است <meta>. با استفاده از آن، می توانید توضیحاتی از محتوای صفحه و کلمات کلیدی را برای موتورهای جستجو، نویسنده سند HTML و سایر ویژگی های ابرداده تنظیم کنید. عنصر <head>می تواند شامل چندین عنصر باشد <meta>، زیرا بسته به ویژگی های مورد استفاده، حامل اطلاعات متفاوتی هستند.</p><p> <meta name="description" content="توضیحات محتوای صفحه"> <meta name="keywords" content="کلمات کلیدی که با کاما از هم جدا شده اند"> </p><p>شرح محتوای صفحه و کلمات کلیدی را می توان به طور همزمان به چندین زبان، به عنوان مثال، در روسی و انگلیسی مشخص کرد:</p><p> <meta name="description" lang="ru" content="توضیحات محتوای صفحه"> <meta name="description" lang="en" content="شرح"> <meta name="keywords" lang="ru" content="کلمات کلیدی که با کاما از هم جدا شده اند"> <meta name="keywords" lang="en" content="کلید واژه ها"> </p><p>با برچسب <meta>می‌توانید فهرست‌بندی یک صفحه وب را توسط موتورهای جستجو غیرفعال یا مجاز کنید:</p> <p> <meta name="robots" content="index, follow"> </p><p> <meta name="robots" content="index, nofollow"> </p><p> <meta name="robots" content="noindex, nofollow"> </p><p>برای بارگیری خودکار صفحه پس از یک دوره زمانی مشخص، باید از مقدار refresh استفاده کنید:</p><p> <meta content="30"> </p><p>صفحه در 30 ثانیه دوباره بارگیری می شود. برای هدایت بازدیدکننده به صفحه دیگر، باید URL را در پارامتر url مشخص کنید:</p><p> <meta content="0; url=http://yandex.ru/"> </p><table class="t3">جدول 2. ویژگی های برچسب <meta> <tbody><tr><th style="width: 20%;">صفت</th> <th></th> </tr><tr><td>مجموعه شخصیت ها</td> <td>رمزگذاری کاراکتر برای سند HTML فعلی را مشخص می کند: <meta charset="UTF-8"> </td> </tr><tr><td>محتوا</td> <td>حاوی متن دلخواه است که مقدار مرتبط با ویژگی http-equiv یا name را بسته به مقدار آنها مشخص می کند.</td> </tr><tr><td>http-equiv</td> <td>اقدامات مرورگر را در این صفحه وب (معادل هدرهای HTTP) کنترل می کند. هنگام نمایش صفحه، مرورگر دستورالعمل های داده شده در ویژگی را دنبال می کند: <br>default-style سبک ترجیحی برای استفاده در صفحه را مشخص می کند. ویژگی محتوا باید حاوی شناسه عنصر باشد <link>، که به یک شیوه نامه CSS یا شناسه عنصر اشاره دارد<style> , содержащего таблицу стилей.<br> refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br> Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br> <meta content="30"> <br> Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br> <meta content="0; url=http://mail.ru/"> </td> </tr><tr><td> name </td> <td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br> application-name указывает название веб-приложения, используемого на странице.<br> author указывает имя автора документа в свободном формате.<br> description определяет краткое описание к содержимому страницы, например:<br> <meta name="description" content="Описание содержимого страницы"> <br> generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br> <meta name="generator" content="WordPress 4.0"> .<br> keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br> <meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято. </i> </td> </tr></tbody></table><h4>1.2.3. Элемент <style></h4> <p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p> <p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p> <style type="text/css"> .paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; } </p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p> <div class="paper"> ... </div> </p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p> <h4>1.2.4. Элемент <link></h4> <p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p> <p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через директиву @import url</p><p> <!DOCTYPE html> <html> <head> <style> @import url(style.css); </style> <meta> <title> </title> </head> </p><p>با استفاده از عنصر <link>. عنصر نیازی به تگ بسته شدن ندارد. این عنصر رابطه بین صفحه جاری و سایر اسناد را تعریف می کند. می تواند چندین عنصر از این قبیل در یک صفحه وجود داشته باشد. ورودی به این صورت خواهد بود:</p><p> <link rel="stylesheet" href="style.css" type="text/css"> </p><table class="t3">جدول 4. ویژگی های برچسب <link> <tbody><tr><th style="width: 20%;">صفت</th> <th>توضیحات، ارزش پذیرفته شده</th> </tr><tr><td>متقاطع</td> <td>مشخص می کند که آیا CORS (فناوری مرورگری که به صفحه وب اجازه می دهد به منابع از دامنه دیگری دسترسی داشته باشد) باید هنگام واکشی تصویر از یک سایت استفاده شود یا خیر. <br>ناشناس - در یک درخواست متقابل دامنه، مرورگر به طور خودکار یک سرصفحه مبدأ حاوی نام دامنه ای که درخواست از آن انجام شده است اضافه می کند. اگر سرور با هدر CORS Access-Control-Allow-Origin: * (یا نام دامنه به جای ستاره) پاسخ ندهد، بارگذاری تصویر مسدود می شود. <br>use-credentials - اگر سرور اعتبارنامه‌های Access-Control-Allow-Credentials را ارائه نکند: درست است، در این صورت بارگیری تصویر مسدود می‌شود.</td> </tr><tr><td>href</td> <td>ویژگی اصلی تگ، مقدار مسیر فایل با سبک است.</td> </tr><tr><td>hreflang</td> <td>زبان متن را در سند پیوند شده مشخص می کند.</td> </tr><tr><td>رسانه ها</td> <td>نوع دستگاهی را که قرار است منبع پیوند روی آن اعمال شود، مشخص می کند.</td> </tr><tr><td>هیچ</td> <td>یک متغیر رشته ای که به طور تصادفی توسط سرور تولید می شود که قوانین استفاده از سبک های درون خطی را برای محافظت از محتوا تعیین می کند. مقدار مشخصه یک رشته متن است.</td> </tr><tr><td>رابطه</td> <td>ویژگی رابطه بین سند جاری و سند ارجاع شده را تعریف می کند. <br>جایگزین - پیوندی به همان سند اما در قالبی متفاوت (مثلاً صفحات قابل چاپ، ترجمه، آینه، RSS یا فید Atom)، <br> <link rel="alternate stylesheet" type="text/css" title="فونت_کوچک" href="small-font.css"> .<br> <link rel="alternate" type="application/rss+xml" title="my_RSS" href="index.xml"> <br> <link rel="alternate" type="application/atom+xml" title="اخبار" href="/atom.xml?type=news"> <br>بایگانی نشان می‌دهد که سند پیوندی دارای اهمیت تاریخی است. پیوند می تواند به مجموعه ای از سوابق، اسناد و سایر مطالب اشاره کند. <br>پیوند نویسنده به صفحه مربوط به نویسنده سند یا صفحه با مشخصات تماس نویسنده. <br>نشانک ارجاع به نزدیکترین اجداد مقاله که پیوند است، یا به بخشی از مقاله که بیشترین ارتباط را با عنصر دارد، در صورتی که اجدادی وجود نداشته باشد. <br>خارجی برای نشان دادن اینکه صفحه پیوند داده شده بخشی از این سایت نیست استفاده می شود. <br>ابتدا پیوندی را به اولین سند در دنباله ای از اسناد مشخص می کند. <br>پیوند راهنما به یک سند راهنما <br>icon مسیر آیکون مورد استفاده برای سند فعلی را مشخص می کند. <br>last پیوندی را به آخرین سند در دنباله ای از اسناد مشخص می کند. <br>مجوز پیوندی به اطلاعات حق چاپ سند. <br>next نشان می دهد که این سند بخشی از یک سری است و پیوند به سند بعدی در سری اشاره می کند. <br> <link rel="next" href="/next.html" type="text/html" title="صفحه بعد"> <br>nofollow نشان می دهد که لینک مورد تایید نویسنده صفحه نیست یا اینکه لینک تجاری است. <br>noreferrer مشخص می کند که هدر درخواست مشتری حاوی آدرس منبع درخواست نباید هنگام دنبال کردن پیوند ارسال شود. <br>pingback آدرس سرور pingback را مشخص می کند، که به وبلاگ اجازه می دهد تا به طور خودکار سایت هایی را که به آن پیوند دارند اطلاع دهد. <br>prefetch مشخص می کند که فایل ارجاع شده باید از قبل ذخیره شود. <br>prev نشان می دهد که این سند بخشی از یک سری است و پیوند به سند قبلی در مجموعه اشاره می کند. <br> <link rel="prev" href="/next.html" type="text/html" title="صفحه قبلی"> <br>جستجو نشان می دهد که سند ارجاع شده حاوی یک رابط جستجو و منابع مرتبط است. <br>نوار کناری نشان می دهد که سند پیوند داده شده، در صورت امکان، در یک زمینه مرورگر اضافی نشان داده می شود، و برخی از مرورگرها، هنگامی که روی پیوند کلیک می شود، پنجره ای را برای افزودن پیوند به نوار نشانک ها باز می کنند. <br>stylesheet یک مرجع به یک فایل خارجی است که به عنوان شیوه نامه برای این سند استفاده می شود. <br>تگ نشان می دهد که برچسبی که هایپرلینک به آن منتهی می شود متعلق به این سند است. <br>بالا نشان می دهد که صفحه بخشی از یک ساختار سلسله مراتبی است، و این که هایپرلینک به یک منبع سطح بالاتر در ساختار منجر می شود.</td> </tr><tr><td>اندازه ها</td> <td>اندازه نمادها را برای نمایش بصری مشخص می کند. ویژگی sizes فقط همراه با rel="icon" استفاده می شود و می تواند مقادیر زیر را داشته باشد: <br>عرض ها ارتفاع - لیستی از اندازه ها را تعریف می کند که با فاصله از هم جدا شده اند، هر اندازه باید در قالب باشد - ارتفاع عرض (اندازه نمادها بر حسب پیکسل مشخص شده است)، به عنوان مثال: <br> <link rel="icon" href="favicon.png" sizes="16x16 32х32" type="image/png"> ;<br>هر - نماد را می توان به هر اندازه بزرگ کرد.</td> </tr><tr><td>عنوان</td> <td>عنوان پیوند یا نام مجموعه شیوه نامه های جایگزین را مشخص می کند. مقدار مشخصه متن است.</td> </tr><tr><td>نوع</td> <td>نوع MIME سندی که به آن پیوند داده می شود را مشخص می کند. در این مورد، مقدار "text/css" را می گیرد.</td> </tr></tbody></table><h4>1.2.5. عنصر<script></h4> <table class="t3"> Таблица 5. Атрибуты тега <script> <tbody><tr><th style="width: 20%;">Атрибут </th> <th>Описание, принимаемое значение </th> </tr><tr><td> async </td> <td>Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы). </td> </tr><tr><td> charset </td> <td>Определяет кодировку символов </td> </tr><tr><td> crossorigin </td> <td>Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).<br> anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен.<br> use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true , скрипт не будет загружен. </td> </tr><tr><td> defer </td> <td>Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя. </td> </tr><tr><td> nonce </td> <td>Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется. </td> </tr><tr><td> src </td> <td>Указывает на месторасположение файла со сценарием, значение атрибута - это url файла, содержащего JavaScript-программу. </td> </tr><tr><td> type </td> <td>Используются для объявления языка сценария, использованного при составлении содержимого тега. </td> </tr></tbody></table><h3>1.3. Элемент <body></h3> <p>В этом разделе располагается все содержимое документа. Для элемента доступны .</p> <table class="t3"> Таблица 5. Атрибуты тега <body> <tbody><tr><th style="width: 20%;">Атрибут </th> <th>Описание, принимаемое значение </th> </tr><tr><td> onafterprint </td> <td>Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати. </td> </tr><tr><td> onbeforeprint </td> <td>Событие, срабатывающее перед отправкой страницы на печать. </td> </tr><tr><td> onbeforeunload </td> <td>Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу. </td> </tr><tr><td> onhashchange </td> <td>Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2 . </td> </tr><tr><td> onmessage </td> <td>Событие происходит, когда сообщение получено через источник события. </td> </tr><tr><td> onoffline </td> <td>Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало. </td> </tr><tr><td> ononline </td> <td>Событие вызывается браузером в том случае, когда соединение с интернет возобновилось. </td> </tr><tr><td> onpagehide </td> <td>Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д. </td> </tr><tr><td> onpageshow </td> <td>Событие происходит, когда пользователь переходит на веб-страницу, после события onload. </td> </tr><tr><td> onunload </td> <td>Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера. </td> </tr></tbody></table> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="comment_box" id="comments"> </div> </div> <div id="sidebar"> <div class="widget widget_nav_menu" id="nav_menu-2"> <div class="menu-mainmenu-container"> <ul id="menu-mainmenu-2" class="menu"> <li class="submenu"><a href="https://ow5.ru/fa/category/android-total/">اندروید - عمومی</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/security/">ایمنی</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/more/">دیگر</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/game/">بازی ها</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/internet/">اینترنت</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/keyboard/">صفحه کلید</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/multimedia/">چند رسانه ای</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/navigation/">جهت یابی</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/office/">دفتر</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/program/">برنامه ها</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/different/">متفرقه</a> </li> <li class="submenu"><a href="https://ow5.ru/fa/category/system/">سیستمیک</a> </li> </ul> </div> </div> <div class="widget"> <div class="heading star">آخرین یادداشت ها</div> <div class="popular_posts"> <div class="news_box"> <a href="https://ow5.ru/fa/system-utilities/kak-vosstanovit-moyu-stranicu-v-odnoklassnikah-vozvrat.html" class="thumb"><img width="95" height="95" src="/uploads/aeaa41ce84ea748fe76cf90e7edb532e.jpg" class="attachment-mini size-mini wp-post-image" alt="بازگرداندن صفحه حذف شده یا مسدود شده در همکلاسی ها" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/system-utilities/kak-vosstanovit-moyu-stranicu-v-odnoklassnikah-vozvrat.html">بازگرداندن صفحه حذف شده یا مسدود شده در همکلاسی ها</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/fa/game/chto-delat-esli-audiozapisi-vk-ne-vosproizvodyatsya-pochemu-vkontakte-ne.html" class="thumb"><img width="95" height="95" src="/uploads/65770e61a298aa3e28ddf470cb2579e0.jpg" class="attachment-mini size-mini wp-post-image" alt="چرا Vkontakte موسیقی پخش نمی کند و در مورد آن چه باید کرد؟" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/game/chto-delat-esli-audiozapisi-vk-ne-vosproizvodyatsya-pochemu-vkontakte-ne.html">چرا Vkontakte موسیقی پخش نمی کند و در مورد آن چه باید کرد؟</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/fa/photo-editors/upominaniya-vkontakte-kak-v-vkontakte-upomyanut-cheloveka-kak-v-kontakte.html" class="thumb"><img width="95" height="95" src="/uploads/f181ff1ade1a6984ed85c2954ab71048.jpg" class="attachment-mini size-mini wp-post-image" alt="چگونه یک شخص را در Vkontakte ذکر کنیم؟" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/photo-editors/upominaniya-vkontakte-kak-v-vkontakte-upomyanut-cheloveka-kak-v-kontakte.html">چگونه یک شخص را در Vkontakte ذکر کنیم؟</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/fa/program/gde-zhivet-maks-tarasenko-adres-biograficheskie-dannye-braina-mapsa.html" class="thumb"><img width="95" height="95" src="/uploads/1f58bb94499f926e7b02137d77d764cd.jpg" class="attachment-mini size-mini wp-post-image" alt="اطلاعات بیوگرافی نقشه های برایان" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/program/gde-zhivet-maks-tarasenko-adres-biograficheskie-dannye-braina-mapsa.html">اطلاعات بیوگرافی نقشه های برایان</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/fa/tv-and-video/vkontakte-vk-mp3-vkontakte-mp3-mod-izmeneniya-v-poslednei-versii.html" class="thumb"><img width="95" height="95" src="/uploads/9f280d6ec603eb33f62eccc15ac78d44.jpg" class="attachment-mini size-mini wp-post-image" alt="VKontakte MP3 mod تغییرات در آخرین نسخه" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/tv-and-video/vkontakte-vk-mp3-vkontakte-mp3-mod-izmeneniya-v-poslednei-versii.html">VKontakte MP3 mod تغییرات در آخرین نسخه</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading star">محبوب</div> <div class="popular_posts"> <div class="news_box"> <a href="https://ow5.ru/fa/multimedia/ne-zagruzhaetsya-fifa-18-vyletaet-fifa-pri-zapuske-chto-delat.html" class="thumb"><img width="95" height="95" src="/uploads/dc70fb5a8f8e301c6a58d0cd510e9703.jpg" class="attachment-mini size-mini wp-post-image" alt="فیفا هنگام راه اندازی از کار می افتد" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/multimedia/ne-zagruzhaetsya-fifa-18-vyletaet-fifa-pri-zapuske-chto-delat.html">فیفا هنگام راه اندازی از کار می افتد</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/fa/system/350-minut-v-chasah-perevod-chasov-v-minuty-v-microsoft-excel-zachem-takie-slozhnosti.html" class="thumb"><img width="95" height="95" src="/uploads/4b18c2f9a0964faaea01b8c95275c258.jpg" class="attachment-mini size-mini wp-post-image" alt="تبدیل ساعت به دقیقه در مایکروسافت اکسل" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/system/350-minut-v-chasah-perevod-chasov-v-minuty-v-microsoft-excel-zachem-takie-slozhnosti.html">تبدیل ساعت به دقیقه در مایکروسافت اکسل</a> </div> </div> </div> <div class="news_box"> <a href="https://ow5.ru/fa/internet/kak-soedinit-2-diagrammy-v-eksele-grafiki-i-diagrammy-v-microsoft-excel.html" class="thumb"><img width="95" height="95" src="/uploads/63e48e2f3fcceab1c239ec2b3b42d900.jpg" class="attachment-mini size-mini wp-post-image" alt="نمودارها و نمودارها در مایکروسافت اکسل" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://ow5.ru/fa/internet/kak-soedinit-2-diagrammy-v-eksele-grafiki-i-diagrammy-v-microsoft-excel.html">نمودارها و نمودارها در مایکروسافت اکسل</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading">اخبار</div> <div class="business_news"> <div class="news"> <div class="date">2022-10-21 03:04:00</div> <a href="https://ow5.ru/fa/internet/nine-store-chto-eto-za-programma-nine-store-chto-eto-za-programma.html" class="title">Nine Store - این برنامه چیست دانلود نسخه قدیمی فروشگاه نه</a> </div> <div class="news"> <div class="date">2021-11-30 17:27:20</div> <a href="https://ow5.ru/fa/office/failovaya-sistema-refs-preimushchestva-i-perspektivy-refs.html" class="title">مزایا و چشم اندازها</a> </div> <div class="news"> <div class="date">2021-11-30 17:27:20</div> <a href="https://ow5.ru/fa/system-utilities/odnoklassniki-polnaya-versiya-vhod-na-moyu-stranicu-zaiti-v-odnoklassniki-na.html" class="title">رفتن به همکلاسی ها در صفحه خود: اطلاعات دقیق</a> </div> <div class="news"> <div class="date">2021-11-25 03:14:50</div> <a href="https://ow5.ru/fa/strategy/professiya-veb-dizainer-skolko-zarabatyvayut-i-gde-uchitsya-etoi-specialnosti-professiya-web-dizain.html" class="title">حرفه ای طراح وب: چقدر درآمد دارند و کجا باید این تخصص را مطالعه کرد؟</a> </div> <div class="news"> <div class="date">2021-11-25 03:14:50</div> <a href="https://ow5.ru/fa/system-utilities/pochemu-bet-tokom-ot-vsego-v-chem-prichina-udar-tokom.html" class="title">شوک الکتریکی: عواقب، اقدامات لازم و اقدامات صحیح نحوه برق رسانی دست ها به شوک</a> </div> </div> </div> <div class="widget ai_widget" id="ai_widget-5"> <div class='dynamic dynamic-13' style='margin: 8px 0; clear: both;'> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="fixed"> <div class="inner"> <div class="footer_l"> <a href="https://ow5.ru/fa/" class="logo" style="background:none;">ow5.ru</a> <div class="copyright"> <p>ow5.ru - آموزش. ایمنی. جهت یابی. اینترنت. بازی ها. برنامه های اداری</p> <p><span>2023 - کلیه حقوق محفوظ است</span></p> </div> </div> <div class="footer_c"> <ul id="menu-topmenu-1" class="nav"> <li><a href="https://ow5.ru/fa/feedback.html">مخاطب</a></li> <li><a href="">درباره سایت</a></li> <li><a href="">تبلیغات در وب سایت</a></li> </ul> <div class="footer_menu"> <ul id="menu-nizhnee-1" class=""> <li id="menu-item-"><a href="https://ow5.ru/fa/category/android-total/">اندروید - عمومی</a></li> <li id="menu-item-"><a href="https://ow5.ru/fa/category/security/">ایمنی</a></li> <li id="menu-item-"><a href="https://ow5.ru/fa/category/more/">دیگر</a></li> <li id="menu-item-"><a href="https://ow5.ru/fa/category/game/">بازی ها</a></li> </ul> <ul id="menu-nizhnee-2" class=""> <li id="menu-item-"><a href="https://ow5.ru/fa/category/android-total/">اندروید - عمومی</a></li> <li id="menu-item-"><a href="https://ow5.ru/fa/category/security/">ایمنی</a></li> <li id="menu-item-"><a href="https://ow5.ru/fa/category/more/">دیگر</a></li> <li id="menu-item-"><a href="https://ow5.ru/fa/category/game/">بازی ها</a></li> </ul> </div> </div> </div> </div> </div> </div> <script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script> <script type='text/javascript' src='https://ow5.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://ow5.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://ow5.ru/wp-content/themes/delo/assets/scripts/theme.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 60, "margin_bottom" : 200, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-8','ai_widget-5'] } ; </script> <script type='text/javascript' src='https://ow5.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script async="async" type='text/javascript' src='https://ow5.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><br> <br> </body> </html>