- Навіщо нам може знадобитися вивчати вихідний код
- Як подивитися вихідний код сайту
- Як знайти вихідний код сторінки сайту
- Як подивитися мета-теги
- Як подивитися вихідний код сторінки для налагодження скрипта
- Як подивитися код конкретного елемента
- резюме
Ми збільшуємо відвідуваність і позиції у видачі. Ви отримуєте продажу і платите тільки за реальний результат, тільки за цільові переходи з пошукових систем
Вихідний код сайту - це сукупність HTML-розмітки, CSS стилів і скриптів JavaScript, які браузер отримує від веб-сервера.
Його можна порівняти з набором команд, які дає солдатам командир. Уявіть, що глядачі не бачать і не чують начальника. З їх точки зору військові самостійно виконують дії. У нашому випадку командир - це браузер, команди - це вихідний код, а марширують солдати - це кінцевий результат.
Зберігається сайт на веб-сервері, який відправляє сторінку за запитом користувача. Запит - це введення URL в рядку адреси, клацання по посиланню або натискання на кнопку відправки даних в формі. Не важливо, якою мовою написані веб-сторінки, чи включають вони програмну частину. Кінцевим результатом роботи будь-якого серверного алгоритму є набір html-тегів і тексту.
Вихідний код сторінки - це набір даних, що включає в себе:
- html-розмітку;
- стильову таблицю або посилання на файл css ;
- програми, написані на JavaScript або посилання на файли з кодом.
Ці три розділи обробляються браузером. Для сервера це просто текст, який необхідно відправити у відповідь на запит.
Навіщо нам може знадобитися вивчати вихідний код
Все, що ми побачимо, ми зможемо проаналізувати і застосувати для вирішення тих чи інших завдань, які виникають в ході роботи з сайтом, особливо при його оптимізації. Переглянувши вихідний код, ми можемо:
- Побачити мета-теги свого або чужого сайту для їх аналізу.
- Побачити наявність або відсутність деяких елементів на сайті: лічильників, кодів ідентифікації в різних системах, визначених скриптів та іншого.
- Дізнатися параметри елементів: розміри, кольори, шрифти.
- Знайти шлях до фотографій і інших елементів, розташованим на сторінці.
- Вивчити посилання зі сторінки.
- Знайти проблеми з кодом, що заважають в процесі оптимізації сайту: невинесення в окремі файли стилі, скрипти, невалідний код.
Це основні можливості, але насправді, вміючи читати код, ви зможете дізнатися про сторінку набагато більше.
Як подивитися вихідний код сайту
Повністю в тому вигляді, в якому він викладений на сервері, з браузера це зробити не вдасться. А ось побачити всю розмітку можна, натиснувши на сторінці праву кнопку миші. Тут і далі на прикладі Google Chrome.
Вибираємо опцію «Переглянути джерело сторінки» і отримуємо повний лістинг в окремій вкладці.
Це просто текст, який доведеться аналізувати, щоб зрозуміти. А ось отримати інтерактивний код можна за допомогою інструментів розробника.
Як знайти вихідний код сторінки сайту
Натискаємо на значок меню в браузері. Найчастіше він знаходиться праворуч і має вигляд трьох крапок або смужок.
У розділі додаткових інструментів вибираємо «Інструменти розробника».
Відкриється вікно, в якому відображається активний стан коду. Це означає, що при натисканні миші на розмітці поруч відобразиться стиль елемента, а на сторінці будуть підсвічуватися вибрані блоки.
У вкладці «Source» можна переглянути вміст деяких файлів: скрипти, шрифти, зображення.
Їх можна зберегти. Для цього натискаємо праву кнопку миші (ПКМ) і вибираємо «Save».
У вкладці «Security» доступна перевірка сертифіката сайту.
Вкладка «Audits» допоможе провести перевірку викладеного на хостинг ресурсу.
Якщо розташування панелі праворуч незручно, можна натиснути три точки і поміняти його, вибравши бажаний пункт.
Як подивитися мета-теги
Кожен html-документ включає в себе теги структури. Ось деякі з них:
- Html - весь документ.
- Head - розділ службових заголовків.
- Title - заголовок сторінки (відображається на вкладці).
- Body - тіло документа.
- H1-H6 - заголовки тексту сторінки.
- Article - стаття.
- Section - розділ.
- Menu - меню.
- Div - блок.
- Span - рядок.
- P - абзац.
- Table - таблиця.
Елементи призначені для логічного розмежування розділів на сторінці, при необхідності вони оформляються за допомогою стилів. У них розміщується текст, який так чи інакше видно на сторінці. Але в тезі Head присутній службова інформація. Для її вказівки служать мета-теги. Все що в них записано, призначене для сервера і пошукових систем.
Їх вміст в інший спосіб дізнатися неможливо.
Звернемо увагу на тег Link. З його допомогою вказуються посилання на зовнішні підключаються файли. При бажанні можна побачити вміст і зберегти на диск. Для цього наведіть покажчик на адресу і натисніть ПКМ. Виберіть пункт «Open in new Tab».
У новій вкладці відкриється вказаний файл, який можна переглянути або зберегти.
Як подивитися вихідний код сторінки для налагодження скрипта
В цьому випадку найзручніше відкривати сторінку на локальній машині. Якщо необхідно тільки виправити розмітку, стилі і скрипти, то це можна робити прямо з папки. Html-код проглядається таким же чином. А ось помилки коду JavaScript можна побачити у вкладці «Console». Тут показує опис помилки і номер рядка, в якій вона виникла.
Синтаксичну можна побачити безпосередньо в коді. Для цього призначена вкладка «Source».
Як подивитися код конкретного елемента
Для великих сторінок з великою кількістю елементів складно знайти потрібний код у всій розмітці. В такому випадку слід скористатися спеціальною командою контекстного меню. Наведемо миша на фрагмент і натиснемо ПКМ. Виберемо команду «Переглянути код».
Відкриється те саме вікно, але з фокусуванням на вибраному об'єкті.
резюме
Ми розповіли, що таке вихідний код сторінки. Досить освоїти елементарні знання HTML і CSS, і користуючись зручними інструментами розробника, ви зможете проводити налагодження своїх власних html-документів.
Перегляд коду ресурсів в інтернеті дозволить вам вчитися не тільки на власному досвіді, а й використовувати реальні робочі приклади. А для seo-фахівців будуть корисні мета-теги, інформація в яких може сказати про сайті багато.
