Як подивитися вихідний код сторінки в Google Chrome?

МИ У СОЦМЕРЕЖАХ -

html Довгий час для мене опція «показати вихідний код сторінки» була марна і нецікава. Поки вивчення 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. Він дозволяє відредагувати і зберегти вихідний код, не покидаючи вікно браузера.

Новини