Вміння змінити вихідний код сторінки– корисна навичка для просунутого користувача Інтернету. За допомогою заміни HTML коду, ви зможете змінити відкриту веб-сторінку як завгодно. У цій статті ми розповімо, як змінити код сторінкиу Google Chrome. Втім, в інших браузерах все робиться аналогічно, тому проблем виникнути не повинно.
Що таке HTML-код сторінки?
Кожна сторінка, яку ви відкриваєте у браузері, має код на мові розмітки HTML. Цей код являє собою теги та текст. Теги це своєрідні мітки, які вказують браузеру, як відображати ту чи іншу частину сайту. Текст – це заповнення сторінки, те, що бачить юзер. Також до сторінки можуть бути підключені стилі CSS, які задають зовнішній вигляд елементів сторінки. Щоб змінити вихідний код сайтуне потрібно досконально знати HTML і CSS і скоро ви в цьому самі переконаєтесь.
Навіщо змінювати веб-сторінку?
Ви можете підмінити дані на сайті, змінити текст повідомлення, зробити фейковий скріншот. Зверніть увагу, що всі зміни видно лише вам і при перезавантаженні сторінки вони зникнуть. Також змінені дані не будуть реальними. Наприклад, якщо у мене є 10 доларів, а я зміню на 100, то грошей у мене більше не стане. Це лише відображення сторінки браузером. Приклад:
Після:
Для прикладу я візьму цей сайт і зміню попередній анонс статті “ ” Відкриваю головну сторінку в Google Chrome. Натискаю ПКМ по елементу, який хочу змінити, наприклад заголовок анонсу і вибираю “Подивитися код”.
У вікні переходимо на вкладку Elements і бачимо HTML код сторінки. У ньому потрібно знайти цікавий для нас текст. (підкреслять червоним)
Тепер видалю старий текст та впишу новий.
Ось і все назва анонсу змінена. Тепер я зраджу сам анонс, мітки та рубрику.
Вставити іншу картинку можна, змінивши атрибут src в тезі img.
Доброго часу доби, шановні читачі мого блогу. Буває знаходиш на сайті якусь гарну фішку і починає мучити питання, як же творець досяг такого цікавого ефекту.
Виявляється, знайти відповідь досить просто. А якщо ви маєте деякі навички, то можете назбирати безліч таких фішок і за короткий час створити свій унікальний сайт.
Сьогодні ми поговоримо про те, як відкрити код сторінки, певного елемента та навчитися використовувати цю навичку собі на благо.
Базові знання про код
Мій сайт призначений для новачків і спочатку мені хотілося б у двох словах розповісти про сайти і код в цілому.
Щоб намалювати картинку, потім розрізати її на дрібні частини, написати код, завдяки якому браузер знову збере всі елементи в єдине ціле. Здається все дуже складно? Зовсім ні, та й сумувати з цього приводу не варто.
Якісні сайти створюються саме так. Хочете - влазьте в цю справу і вивчайте, немає бажання - ніхто не може вас змусити.
Скажу тільки одне… немає нічого приємнішого, ніж бачити, як незрозумілі слова, написані тобою, перетворюються на єдине ціле і оживають: посилання працюють, кнопки рухаються, картинки рухаються, текст повзе. Думаю, що я знаю, як почував себе Віктор Франкенштейн.
Коли ви почнете осягати таємну мову і бачити, що все насправді значно простіше, ніж здавалося спочатку, ви не можете не вірити у власні сили та можливості мозку. Це дуже круто.
Як роблять сайти? В ідеалі, спершу. Він просто малює картинку. Наприклад, як показано на малюнку нижче. Поки що це лише зображення, фотографія. Не працюють посилання, при натисканні ви нікуди не переходите, пошук не здійснюється.
По цьому малюнку. Подивіться на скріншот унизу. Вам може здатися, що це безглуздий і складний набір символів. Насправді все не так вже й складно, є певний алгоритм.
Існує всього близько 150 тегів і кожен із них відповідає за певну дію: посилання, перенесення, виділення жирним, колір, заголовок і так далі. Розібратися в них не так вже й складно, якщо є бажання і не шкода часу.
Завдяки знанням цих атрибутів можна вирішити практично будь-яке завдання. Ось тільки шляхи задля досягнення мети кожен розробник знаходить свої.
Досвідчені творці відразу бачать як досягти результату, а іншим доводиться думати, шукати відповіді у статтях чи вихідному коді конкурентів. Вони просто беруть необхідну частину на сторонньому сайті та редагують під себе. Це значно скорочує процес роботи.
Трохи згодом, я покажу вам конкретний приклад.
Перегляд коду
Отже, давайте я спочатку покажу як діяти, якщо вам потрібно дізнатися чужий html. Потім ми докладніше розглянемо всі інші питання.
Найкращий спосіб
Метод, який я опишу першим, трохи складний для новачків, але як ознайомлення – піде, читайте. Відкриваєте сторінку та натискаєте на праву клавішу миші. Вибираєте пункт «Зберегти як…»
Зберігайте веб-сторінку повністю. Як можете побачити на скріншоті, я вже все завантажив заздалегідь. Тут у нас дві папки.
Тут є все, що потрібно. Кожен елемент. Якщо знаєте на цьому, то зможете швидко отримати все необхідне. Але таке завдання все частіше стає нездійсненним. Закачування не здійснюється. Що робити, якщо заборонено копіювати сторінку?
Це ж Гугль хром
Як ви вже напевно могли помітити, я найчастіше використовую Google Chrome і дізнатися про чужий код у цьому браузері простіше простого. Як у принципі, і в будь-якому іншому. Схема буде не те що схожа, а ідентична. Відкриваємо сторінку, код якої хочемо дізнатися, та клацаємо у будь-якому місці правою клавішею миші. У вікні, що з'являється, клацаємо «Подивитися код сторінки».
У новому вікні відкриється простирадло коду, в якому досить складно розібратися новачкові. Але, не лякайтеся раніше.
Якщо вам потрібно дізнатися код лише одного елемента, достатньо навести на нього мишею та клацнути правою клавішею. Вибираємо іншу функцію хрому: "Перегляд коду елемента".
Мені, наприклад, може бути цікаво, яким чином зроблено логотип, при використанні картинки або мови програмування? Адже намалювати квадрат можна за допомогою CSS. Багато фахівців радять якнайбільше інформації прописувати кодом. Як працюють на популярних сайтах?
Ось і з'явилася потрібна інформація. Зверху html, внизу CSS. Це дві мови. Перший відповідає за текстову складову, а другий – за дизайн. Якби не було css, то вам довелося б щоразу прописувати колір, розмір шрифту. Для кожної сторінки це дуже довго. Але якби не було html, то ми не мали б текстів. Грубо пояснив, але загалом усе так і є.
До речі, якщо вас зацікавило як тут влаштований, то можете знизу подивитися посилання на картинку. Ось вам і відповідь.
Mozilla Firefox
Якщо ви любите працювати в мазилі, то все буде так само. Відкриваєте сторінку та натискаєте на праву кнопку миші. "Вихідний код сторінки" якщо хочете побачити весь код повністю.
При наведенні на елемент з'являється можливість відкрити його код.
Тут дані відображаються в нижній частині екрану, а в іншому все так само.
Яндекс браузер
В Яндекс браузері все так само, як і в попередніх двох варіантах, відкриваємо сторінку, права клавіша миші, подивитися код сторінки.
Наводимо курсор на елемент, якщо хочемо дізнатися саме його код.
Відображається все тут так само, як і в хромі.
Опера
Ну і насамкінець Opera.
До речі, можливо, ви помітили, що не обов'язково користуватися мишею. Для відкриття коду є швидке поєднання клавіш і для всіх браузерів воно однакове: CTRL+U.
Для елементів: Ctrl+Shift+C.
Ось так виглядає результат.
Це буде цікаво новачкам
А тепер дивіться, як усе працює. Знаходьте сайт і дуже вам подобається якийсь елемент. Наприклад, ось цей. Як відкрити код елемента, ви вже знаєте.
Тепер копіюєте його.
Я користуюся , вставляю цей код у новий html файл, у тег body (тіло англійською).
Тепер подивимося, як це все виглядатиме у браузері.
Готово. Щоб текст був вирівняний по краях і отримав зелений колір необхідно підключити до цього документа css і скопіювати інший код з того веб-сайту, з якого ми тирали цей.
Зараз я не займатимуся цим. На це потрібно більше часу: і мого, і вашого. Думаю, всі подробиці я опишу у своїх майбутніх публікаціях. Підписуйтесь на розсилку та дізнаєтеся про появу статті першим.
Якщо ж терпіти немає сил, а дізнатися більше про html і css хочеться вже зараз, то можу за традицією порекомендувати безкоштовні навчальні курси.
Тут 33 уроки, які дозволять освоїти «Безкоштовний курс з HTML» .
А тут повна інформація про css. «Безкоштовний курс з CSS (45 відеоуроків!)» .
Тепер ви знаєте трохи більше. Бажаю вам успіхів у ваших починаннях. До нових зустрічей!
Необхідно швидко переглянути всі зміни на самому сайті, не торкаючись файлів і коду сайту, викладеного в Інтернет. Наприклад, змінити колірну гаму будь-якого блоку, підсунути елемент, що з'їхав, і т.д.
Для цього багато вебмайстрів використовують локальні сервери Denwer або OpenServer, запускаючи повну копію сайту у себе на комп'ютері. Цей спосіб універсальний і підійде для професіоналів, за допомогою нього можна перевірити роботу різних скриптів та плагінів, поекспериментувати зі зміною дизайну та відредагувати всі файли сайту, а після тесту перенести відповідні зміни безпосередньо на сайт.
Користувачам далеким від вебмайстерня рекомендую для цих цілей використовувати браузер. Оскільки я використовую Сhrome, наведу інструкцію зі скріншотами саме з цього браузеру. За аналогією можна працювати з Opera, Яндекс.Браузером, Mozilla Firefox та іншими браузерами, принцип їх інструментів схожий.
Інструкція 1: як переглянути весь HTML код сайту у браузері
Відкриваємо необхідну веб-сторінку вашого сайту. Клацаємо правою кнопкою миші по необхідному елементу, з'явиться контекстне меню браузера з доступними командами:
Малюнок 1. Перегляд всього HTML-коду веб-сторінки в браузері Chrome
Важливо:Команди у меню, що випадає, можуть відрізнятися, наприклад, для активних елементів (посилання, картинки, відео) і неактивних (текст, фон, діви):
Рисунок 2. Меню браузера Chrome, що випадає
Тому, якщо ви не знайшли потрібної команди, просто натисніть праву кнопку миші в іншому місці або скористайтеся гарячими клавішами браузера.
Повернемося до малюнка 1, на ньому показано необхідну команду для перегляду всього HTML коду вихідної веб-сторінки, вона називається « Перегляд коду сторінки«. Клацаємо по команді, відкриється нова вкладка з повним кодом вихідної веб-сторінки, великий плюс до всього перегляд доступний з підсвічуванням синтаксису:
Малюнок 3. Фрагмент коду даного сайту
Даний інструмент дуже корисний для знаходження та редагування шуканих елементів.
Альтернативні способи перегляду всього HTML-коду веб-сторінки
Для більш швидкого доступу можна використовувати інші способи виклику даного інструменту
- На малюнку 1 ми також бачимо, що ця команда доступна за допомогою клавіш
+ ; - Вставити в адресний рядок браузера view-source: сайт замість мого домену вставляємо свою адресу;
Обидва способи є універсальними і повинні працювати у всіх браузерах.
Комусь спочатку здасться, що це зовсім не потрібний інструмент, але перегляд всього HTML коду сайту відмінно підходить для пошуку в коді необхідних елементів, це можуть бути посилання, теги, мета-теги, атрибути та інші елементи.
Поєднанням гарячих клавіш
Малюнок 3. Пошук за кодом сайту
Після того, як ви ведете запит у пошукову форму, екран переміститься до першого знайденого елемента, за допомогою стрілок можна переміщатися між ними і вибрати необхідний:
Малюнок 4. Пошук за HTML кодом сайту
Інструкція 2: як переглянути та відредагувати HTML та CSS код сайту в браузері Google Chrome
Тепер найважливіша частина, в якій я покажу, як можна редагувати HTML та CSS код сайту у браузері. після чого переносити зміни до браузера.
Ось такий корисний інструмент завжди доступний у вашому браузері, експериментуйте з іншими командами, які полегшать редагування сайту.
Ми випустили нову книгу «Контент-маркетинг у соціальних мережах: Як засісти в голову передплатників та закохати їх у свій бренд».
Вихідний код сайту – це сукупність HTML-розмітки, CSS стилів та скриптів JavaScript, які браузер отримує від веб-сервера.
Більше відео на нашому каналі - вивчайте інтернет-маркетинг із SEMANTICA
Його можна порівняти із набором команд, які дає солдатам командир. Уявіть, що глядачі не бачать та не чують начальника. З їхньої точки зору військові самостійно виконують дії. У нашому випадку командир – це браузер, команди – це вихідний код, а солдати, що марширують, – це кінцевий результат.
Зберігається сайт на веб-сервері, який надсилає сторінку на запит користувача. Запит – це введення URL у рядку адреси, клацання посилання або натискання на кнопку відправки даних у формі. Не важливо, якою мовою написані веб-сторінки, чи включають програмну частину. Кінцевим результатом роботи будь-якого серверного алгоритму є набір html-тегів та тексту.
Вихідний код сторінки – це набір даних, що включає:
- html-розмітку;
- стильову таблицю або посилання на файл;
- програми, написані JavaScript або посилання на файли з кодом.
Ці три розділи обробляються браузером. Для сервера це просто текст, який потрібно надіслати у відповідь на запит.
Навіщо нам знадобиться вивчати вихідний код
Все, що ми побачимо, ми зможемо проаналізувати та застосувати для вирішення тих чи інших завдань, які виникають у ході роботи з сайтом, особливо під час його оптимізації. Переглянувши вихідний код, ми можемо:
- Побачити мета-теги свого чи чужого сайту для їхнього аналізу.
- Побачити наявність або відсутність деяких елементів на сайті: лічильників, кодів ідентифікації у різних системах, певних скриптів та інше.
- Дізнатися про параметри елементів: розміри, кольори, шрифти.
- Знайти шлях до фотографій та інших елементів на сторінці.
- Вивчити посилання на сторінці.
- Знайти проблеми з кодом, що заважають у процесі оптимізації сайту: невинесені до окремих файлів стилі, скрипти, невалідний код.
Це основні можливості, але насправді, вміючи читати код, ви зможете дізнатися про сторінку набагато більше.
Як подивитися вихідний код сайту
Цілком у тому вигляді, в якому він викладений на сервері, з браузера це зробити не вдасться. А ось побачити всю розмітку можна, натиснувши на сторінці праву кнопку миші. Тут і далі на прикладі Google Chrome.
Вибираємо опцію «Перегляд коду сторінки» та отримуємо повний лістинг в окремій вкладці.
Це просто текст, який доведеться аналізувати, щоб зрозуміти. А ось отримати інтерактивний код можна за допомогою інструментів розробника.
Як знайти вихідний код сторінки сайту
Натискаємо на піктограму меню у браузері. Найчастіше він знаходиться праворуч і має вигляд трьох точок або смужок.
У розділі додаткових інструментів вибираємо "Інструменти розробника".
Відкриється вікно, де відображається активний стан коду. Це означає, що при натисканні миші на розмітці поруч з'явиться стиль елемента, а на сторінці підсвічуватимуться вибрані блоки.
У вкладці "Source" можна переглянути вміст деяких файлів: скрипти, шрифти, зображення.
У вкладці 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-фахівців будуть корисні мета-теги, інформація в яких може сказати про сайт багато.
Довгий час для мене опція «показати вихідний код сторінки» була марною та нецікавою. Поки що вивчення HTML на Codecademy і верстках власних сайтів не переросло в моє нове захоплення. Тут і постало питання: де знайти реальні кейси та запозичити цікаві рішення для своєї «скарбнички»? Відповідь була несподівано проста, як все геніальне: подивитися вихідний код сторінки в Google Chrome! Ділюсь з вами своїми скромними знахідками.
Що таке вихідний код сторінки
Якщо ви, як і я, тільки робите перші кроки в HTML-програмуванні, не зайвим буде дізнатися, що таке вихідний код сторінки.
Вихідний код, він HTML код сторінки - текст на мові Hyper Text Markup Language (HTML). Він включає в себе контент сторінки (текст, таблиці) і теги. Останні відіграють роль інструкції для браузера: як відображати контент, який форматувати формат, куди вставити гіперпосилання або медіафайл. Ну а для нас, програмістів-початківців вихідний код – найкращий полігон для навчання: знаходимо цікавий сайт і підглядаємо, зберігаємо, використовуємо вдалі фрагменти. Як?
Як переглянути вихідний код у сторінці браузера Google Chrome
Знаходимо сподобану сторінку. Наприклад, мене зацікавило оформлення меню сайту. Відкрити вихідний код у браузері Google Chrome можна трьома способами:
- Клацаємо по іконці менюу правому верхньому куті браузера та вибираємо пункт «Додаткові інструменти». Серед інших є опція "Подивитися вихідний код". Зізнатись, рідко використовую цей спосіб: багато зайвих рухів. Можна зробити ще простіше.
- Натискаємо комбінацію клавіш Ctrl+U- Відкривається нове вікно з вихідним кодом;
- Для фанатів контекстного меню: клацання правою кнопкою миші по сторінці та вибираємо опцію «Перегляд коду сторінки».
Із завданням подивитися HTML код сторінки у браузері впоралися. Переходимо до найцікавішого етапу.
Як відредагувати та зберегти вихідний код
Щоб навчитися створювати сайти недостатньо читати чужий HTML код. Потрібно грати з ним, експериментувати, вносити зміни та перевіряти результат. Почати можна навіть із компіляції кількох вдалих зразків. Як відредагувати та зберегти вихідний код?
Варіант 1. "Вручну"
Після того, як ми відкрили вихідний код сторінки, викликаємо контекстне меню та вибираємо опцію «Зберегти як» та зберігаємо файл на жорсткий диск. Редагуємо файл у блокноті або Notepad, зберігаємо зміни та відкриваємо через браузер. Результати наших змін (вдалі та не дуже) відобразяться у вікні браузера.
Варіант 2. Для профі
Коли «граєш» з вихідним кодом щодня, процес «зберегти – відкрити – змінити – зберегти – перевірити» стомлює. Для себе я знайшла рішення у вигляді встановлення плагіна для Google Chrome - Firebug Lite. Він дозволяє відредагувати та зберегти вихідний код, не залишаючи вікно браузера.