Доброго вам дня, шановні читачімого блогу. Буває знаходиш на сайті якусь гарну фішкуі починає мучити питання, як творець домігся такого цікавого ефекту.
Виявляється, знайти відповідь досить просто. А якщо ви маєте деякі навички, то можете назбирати безліч таких фішок і за короткий час створити свій унікальний сайт.
Сьогодні ми поговоримо про те, як відкрити код сторінки, певного елемента та навчитися використовувати цю навичку собі на благо.
Базові знання про код
Мій сайт призначений для новачків і спочатку мені хотілося б у двох словах розповісти про сайти і код в цілому.
Щоб намалювати картинку, потім розрізати її на дрібні частини, написати код, завдяки якому браузер знову збере всі елементи в єдине ціле. Здається все дуже складно? Зовсім ні, та й сумувати з цього приводу не варто.
Якісні сайти створюються саме так. Хочете - влазьте в цю справу і вивчайте, немає бажання - ніхто не може вас змусити.
Скажу тільки одне… немає нічого приємнішого, ніж бачити, як незрозумілі слова, написані тобою, перетворюються на єдине ціле і оживають: посилання працюють, кнопки рухаються, картинки рухаються, текст повзе. Думаю, що я знаю, як почував себе Віктор Франкенштейн.
Коли ви почнете осягати таємну мову і бачити, що все насправді значно простіше, ніж здавалося спочатку, ви не можете не вірити в власні силита можливості мозку. Це дуже круто.
Як роблять сайти? В ідеалі, спершу. Він просто малює картинку. Наприклад, як показано на малюнку нижче. Поки що це лише зображення, фотографія. Не працюють посилання, при натисканні ви нікуди не переходите, пошук не здійснюється.
По цьому малюнку. Подивіться на скріншот унизу. Вам може здатися, що це безглуздий і складний набір символів. Насправді все не так вже й складно, є певний алгоритм.
Існує всього близько 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 відеоуроків!)» .
Тепер ви знаєте трохи більше. Бажаю вам успіхів у ваших починаннях. До нових зустрічей!
Вміння змінити вихідний код сторінки – корисна навичкадля просунутого користувача Інтернету. За допомогою заміни HTML коду ви зможете змінити відкриту веб-сторінкуяк вам завгодно. У цій статті ми розповімо, як змінити код сторінкиу Google Chrome. Втім, в інших браузерах все робиться аналогічно, тому проблем виникнути не повинно.
Що таке HTML-код сторінки?
Кожна сторінка, яку ви відкриваєте у браузері, має свій код мовою розмітки HTML. Цей код являє собою теги та текст. Теги це своєрідні мітки, які вказують браузеру, як відображати ту чи іншу частину сайту. Текст – це заповнення сторінки, те, що бачить юзер. Також до сторінки можуть бути підключені CSS стилі, які задають зовнішній вигляделементів сторінки. Щоб змінити вихідний код сайтуне потрібно досконально знати HTML і CSS і скоро ви в цьому самі переконаєтесь.
Навіщо змінювати веб-сторінку?
Ви можете підмінити дані на сайті, змінити текст повідомлення, зробити фейковий скріншот. Зверніть увагу, що всі зміни видно лише вам і при перезавантаженні сторінки вони зникнуть. Також змінені дані не будуть реальними. Наприклад, якщо у мене є 10 доларів, а я зміню на 100, то грошей у мене більше не стане. Це лише відображення сторінки браузером. Приклад:
Після:
Для прикладу я візьму цей сайт і зміню попередній анонс статті “ ” Відкриваю головну сторінкуу Google Chrome. Натискаю ПКМ по елементу, який хочу змінити, наприклад заголовок анонсу і вибираю “Подивитися код”.
У вікні переходимо на вкладку Elements і бачимо HTML код сторінки. У ньому потрібно знайти цікавий для нас текст. (підкреслять червоним)
Тепер видалю старий текст та впишу новий.
Ось і все назва анонсу змінена. Тепер я зраджу сам анонс, мітки та рубрику.
Вставити іншу картинку можна, змінивши атрибут src в тезі img.
Кожен користувач інтернету має свої улюблені сайти, на яких він проводить довгий час. І тільки лінивий не думав подивитися, як він створений і з чого складається. Відповісти на всі ці питання не вийде, тому що існує багато способів створювати сайт, але подивитися ті команди і коди, з яких він складається - це можливо і загальнодоступно кожному.
Інше питання – чи зрозуміє людина, яка не займається програмуванням щось із тих символів, які складають код. Але з прикладів, які будуть наведені нижче за будь-який користувач Google Chrome зможе подивитися окремі елементисайтів.
Як переглянути вихідний код html-сторінки в браузері від Google
Що того, що б ви змогли подивитися код сторінки в Chrome необхідно зайти на сайт, що вас цікавить, і виконати наступні дії:
Два цих пункти відрізняються між собою своєю функціональністю та інформаційністю для користувача, програміста чи хакера. 
У чому різниця між кодом сторінки та просто командою «Подивитися код»
Розбираючи кожну з цих функцій, можна писати окрему статтю. Для програмістів ця різниця суттєва і вони розуміють у яких випадках необхідно використовувати "Подивитися код", а в яких "Перегляд коду сторінки" у браузері Google Chrome.
Але пояснюючи для звичайного користувача, можна розділити ці функції за такими призначеннями:
- "Перегляд коду сторінки" необхідно лише для того, щоб побачити основну комбінацію сторінки. Здебільшого – це структура сайту (без додаткових моделейу вигляді CSS файлівта інших доповнень, які залишилися в папці автора сайту). Ця структуране підходить для створення власної сторінкишляхом "копіювати - вставити", але вона дозволить побачити, що саме програміст робив і в якій послідовності для того, щоб сайт у браузері Google Chrome мав такий зовнішній дизайн.
- "Подивитися код" виводить детальну структуру з виділенням усіх областей, які стосуються сторінки. Якщо ви наведете на певний код списку, він виділить елемент на сайті, якому належить.
- Перегляд коду сторінки відкривається в окремому браузері без можливості його редагувати. Тобто він підходить лише для копіювання та читання коду сайту. Але це не менш корисна функція.
- "Подивитися код" змінюємо і можна редагувати будь-який елемент так, як вам буде зручно. Звичайно ж – всі ці зміни будуть «жити» до моменту оновлення сторінки, але іноді буває смішно полазити по тих налаштуваннях і просто зрозуміти для чого необхідно те чи інше значення, і що буде від того, якщо його змінити. Не варто припускати, що такими діями ви щось нашкодите собі або сайту - ці зміни діють тільки в коді вашого Google Chrome і не виходить в мережу.
Розглядаємо питання про те, як переглянути код елемента
Якщо вже й відповідати на таке запитання, то напрошується лише варіант із прикладом. Тому що за одну статтю стати людиною, яка розумітиме цю тематику (веб розробником) – дуже важко, але показати на прикладі, щоб питання було вичерпане – зробити набагато легше.
Функціонал коду елемента дуже широкий, тому беремо одне із слів на сайті браузера Google Chrome. Ми побажали розглянути які ключові слова(У коді він буде прописаний, як «keywords») використовувалися для нашого сайту. Для цього виконуємо наступний алгоритм:
Інші способи використання цієї функції у браузері Google Chrome
Загалом, продовжуючи відповідати питанням, як подивитися код елемента і навіщо він потрібен, слід перерахувати його функції. А саме завдяки можливості подивитися код елемента будь-якого сайту в браузері Google Chrome ми можемо:
- Побачити структуру сайту починаючи від head («шапка сайту») та закінчуючи end (кінцевою командою будь-якої програми);
- Переглянути всі функції сайту, а саме: посилання на інші сайти, додаткові модулі із зовнішніх сайтів та наявність вбудованих лічильників для збору різної інформації;
- Дізнатися, чи заборонено копіювання з сайту чи ні;
- У коді буде записано всі посилання на інші сторінки сайту, а також їх оформлення та подальші дії після натискання на них.
Це далеко не кінцевий перелік. Але слід нагадати, що без спеціальних знань – читати код сторінки Google Chrome практично неможливий і отримані дані звичайному користувачевіпрактично не потрібні.
Не працює пункт «Перегляд коду елемента»
Слід відразу сказати – кожен сайт буде з відкритим доступомдо кодів елементів. Тобто навіть найпопулярніші та найдорожчі сайти будуть відкриті для перегляду їхнього коду. Тому, якщо пункт у браузері Google Chrome не активний або видає помилку має такі можливі причини:
- Профіль користувача пошкоджено;
- Наявність шкідливого програмного забезпечення на комп'ютері;
- Блокування певним розширенням збільшення продуктивності (навіть таке можливо).
Виправляємо пошкоджений профіль користувача
Щоб створити новий профільпотрібно видалити старий з вашого комп'ютера. Для цього виконуємо таке:
- Закриваємо Google Chrome та запускаємо вбудований браузер Windows Explorer.
- Вводимо в адресний рядокнаступну команду: %LOCALAPPDATA%\Google\Chrome\User Data\.
- Коли каталог відкриється, шукаємо папку "Default" і додаємо до її назви "Backup", щоб вийшло таке: "Backup Default".
- Тепер після нового запуску браузера Хром буде створено новий профіль.
Видаляємо шкідливі ПЗ або його залишки
Якщо новий профіль не відкрив нам доступ до коду елемента сторінки і ми, як і раніше, бачимо помилку, слід виконати такі дії:
- Відкриваємо командний рядок Windows (Виконати) і вводимо туди команду cmd.
- Вписуємо в рядок наступну команду: RD / S / Q "% WinDir % System32 Group PolicyUsers".
- Після підтвердження дії, вбиваємо цю: RD / S / Q «% WinDir % System32 Group Policy».
- Тепер "gpupdate /force" (без кицьок).
Якщо все правильно було зроблено, то після перезавантаження комп'ютера Google Chrome відкриватиме код елементів і працездатність браузера буде в нормі.
Довгий час для мене опція «показати вихідний код сторінки» була марною та нецікавою. Бувай вивчення 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. Він дозволяє відредагувати та зберегти вихідний код, не залишаючи вікно браузера.
». Такий самий пункт є і в контекстному меню, яка , якщо клацнути правою кнопкою миші текст сторінки. Можна використовувати і клавіші CTRL + U. Mozilla FireFoxпри цьому не використовує зовнішніх програм - вихідний код сторінкипідсвічуванням синтаксису буде відкрито в окремому вікні браузера.
В браузері Internet Explorerклацніть у меню розділ "Файл" і виберіть "Правити до Блокноту". Замість назви Блокнот може бути написана інша, ви призначили в налаштуваннях браузера для перегляду вихідного кода. По клацанню сторінкиправою кнопкою миші випадає контекстне меню, в якому також є пункт, що дозволяє відкрити вихідний код сторінкиво зовнішньої програми- «Перегляд HTML- кода».
У браузері Operaвідкрийте меню, перейдіть до розділу «Сторінка» і ви матимете можливість вибрати в підрозділі «Засоби розробки» пункт «Вихідний» код» або пункт «Вихідний кодкадру». Такому вибору призначено гарячі клавіші CTRL+ U та CTRL + SHIFT + U відповідно. У контекстному меню, прив'язаному до клацання сторінкиправою кнопкою миші також є пункт «Вихідний код». Opera вихідник сторінкиу зовнішній програмі, яка призначена в ОС або налаштуваннях браузера для редагування HTML-файлів.
Браузер Google Chrome без жодних сумнівів має найкращу організаціюперегляду вихідного кода. Клацнувши правою кнопкою миші, ви можете вибрати пункт «Перегляду кода сторінки» і тоді вихідний підсвічування синтаксису буде відкрито на окремій вкладці. А можете вибрати у тому ж меню рядок «Перегляд кода елемента» і в цій же вкладці відкриє два додаткові кадри, в яких ви можете перевіряти HTML- і CSS- коделемента сторінки. Браузер буде реагувати на переміщення курсору рядками кода, підсвічуючи на сторінці елементи, що відповідають цій ділянці HTML- кода.
