Кожен користувач інтернету має свої улюблені сайти, на яких він проводить тривалий час. І тільки лінивий не думав подивитися, як він створений і з чого складається. Відповісти на всі ці питання не вийде, тому що існує багато способів створювати сайт, але подивитися ті команди і коди, з яких він складається - це можливо і загальнодоступно кожному.
Інше питання – чи зрозуміє людина, яка не займається програмуванням щось із тих символів, які складають код. Але з прикладів, які будуть наведені нижче будь-який користувач 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%System32GroupPolicyUsers».
- Після підтвердження дії, вбиваємо цю: RD / S / Q «% WinDir % System32 Group Policy».
- Тепер "gpupdate /force" (без ковучок).
Якщо все правильно було зроблено, то після перезавантаження комп'ютера Google Chrome відкриватиме код елементів і працездатність браузера буде в нормі.
Переглядаючи безліч сайтів в інтернеті, можна зустріти такі, які дуже нам подобаються. Одразу ж виникає низка питань. Сайт зроблений за допомогою самописного коду або CMS? Які в нього CSS стилі? Які в нього мета-теги? І так далі.
Існує багато інструментів, за допомогою яких можна отримати інформацію про код сторінки сайту. Але під рукою завжди є права кнопка миші. Її ми і будемо використовувати, на прикладі мого сайту.
Як переглянути код сторінки?
Щоб подивитись вихідний кодсторінки сайту, потрібно навести курсор миші на будь-яку область веб-сторінки (за винятком зображень та посилань). Після цього натиснути праву кнопку миші. Перед нами відкриється вікно з кількома опціями (у різних браузерахвони можуть трохи відрізнятись). У браузері Google Chrome, наприклад, це команди:
- назад;
- вперед;
- перезавантажити;
- зберегти як;
- друк;
- перекласти російською;
- перегляд коду сторінки;
- переглянути код.
Нам потрібно клікнути на перегляд коду сторінкиі перед нами відкриється html код сторінки сайту.
Перегляд коду сторінки: на що можна звернути увагу?
Отже, Html код сторінки є пронумерованим списком рядків, кожен з яких несе інформацію про те, як зроблений даний сайт. Щоб швидше навчитися розумітися на цьому величезній кількостізнаків та спеціальних символів, необхідно розрізняти різні ділянки коду.
Наприклад, рядки коду, що знаходяться всередині тега head містять інформацію для пошукових машинта веб-майстрів. Вони не виводяться на сайт. Тут можна побачити, за якими ключовими словами просувається ця сторінка, як написано її title та description. Також тут можна зустріти посилання, перейшовши по якому дізнаємося про сімейство google шрифтів, що використовуються на сайті.
Якщо сайт зроблено на CMS WordPressабо Joomla, то це також буде видно тут. Наприклад, у цій галузі виводиться інформація про темі WordPressабо шаблон Joomla сайту. Побачити її можна, прочитавши зміст посилань, виділених синім кольором. В одному посиланні видно шаблон сайту.
Наприклад:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
Ми побачимо CSS стилі шрифтів сторінки. У цьому випадку використовується шрифт. Це видно тут – font-family: Source Sans Pro.
Цей сайт оптимізується за допомогою сео-плагіну Yoast SEO. Це видно з цієї закоментованої ділянки коду:
Цей site is optimized with the Yoast SEO plugin v3.4.2 - https://yoast.com/wordpress/plugins/seo/
Вся інформація, що знаходиться всередині тега body, відображається браузером на екрані монітора. Тут ми бачимо html код сторінки, а в самому низу знаходиться код Яндекс скрипта метрики. Він наділений закоментованим тегом із текстом:
/Yandex.Metrika counter
Підбиваємо підсумки
Провівши досить поверховий аналіз коду головної сторінкисайту, можна зробити висновок про те, за допомогою яких інструментів зроблено цю сторінку. Ми побачили на ній:
- CMS WordPress;
- Google шрифт Source Sans Pro;
- тема WordPress – Sydney;
- плагіни Yoast;
- лічильник Яндекс метрики.
Тепер принцип аналізу html кодуСторінка сайту цілком зрозумілий. Зовсім необов'язково тримати досліджувану сторінку відкритою у браузері. Зберегти код сторінки собі на комп'ютер можна за допомогою комбінацій клавіш ctrl+a, ctrl+c, ctrl+v. Вставте її у будь-який текстовий редактор (краще Notepad++) і збережіть з розширенням HTML. Таким чином, ви у будь-який час зможете вивчити її глибше та знайти більше корисної для себе інформації.
Ctrl+U
Як переглянути вихідний код елемента?
Натисніть праву кнопку миші на елементі сторінки.
Google Chrome: "Перегляд коду елемента"
Opera: "Проінспектувати елемент"
FireFox: "Аналізувати елемент"
В інших браузерах шукайте подібний до змісту пункт меню.
Всім привіт!
Спеціально на початку статті виклав всю суть, для тих, хто шукає швидку відповідь.
Інформація може бути багатьом відома, але оскільки пишу для блоггерів-початківців, веб-програмістів та інших старателів, то ця довідкова стаття обов'язково повинна бути присутня.
У майбутньому ви обов'язково вивчатимете вихідний код сторінок та окремих елементів.
Давайте подивимося на конкретному прикладі, як можна використовувати перегляд вихідного коду сторінки.
Наприклад, ми хочемо подивитися, які ключові слова (keywords) використовуються для конкретної сторінки. Заходимо на веб-сторінку, що нас цікавить, і натискаємо Ctrl+U . В окремому вікні або окремій закладці відкриється вихідний код цієї сторінки. Натискаємо Ctrl+F для пошуку фрагмент коду. У разі друкуємо у вікні пошуку слово “ keywords”.Вас автоматично перекине на фрагмент коду з цим мета-тегом та виділить шукане слово.
За аналогією можна шукати та вивчати інші фрагменти коду.
Перегляд всього вихідного коду сторінки в більшості випадків не дуже зручний, тому у всіх браузерах є можливість переглянути код окремого елементачи фрагмента.
Давайте застосуємо на конкретному прикладі перегляд коду елемента. Наприклад, подивимося чи є посилання атрибут nofollow . Натискаємо правою кнопкоюмиші на посиланні, що нас цікавить, і у випадаючому контекстному менюлівою кнопкою клацаємо по пункту "Перегляд коду елемента"або подібне (залежно від вашого браузера). Внизу у спеціальному вікні для аналізу коду отримуємо щось подібне.
Ми бачимо, що у коді посилання є rel=”nofollow” . Це означає, що за цим посиланням не витікатиме і PR. Про це детальніше поговоримо у наступних статтях. Зараз важливо те, що ви тепер знаєте як подивитися вихідний код сторінки і вихідний код окремого елемента.
Інструкція
Найпростіший спосіб відкриття html- кодупов'язаний із використанням вбудованих можливостей браузерів. У кожному з них є опція перегляду кодусторінки. Так, у браузері Internet Explorer для перегляду кодутреба відкрити в меню: «Вид» - «Перегляд html- коду».
Тим, хто працює з браузером Opera, для перегляду кодуслід відкрити: "Вид" - "Вихідний код" або натиснути комбінацію клавіш Ctrl + F3. Користувачі Mozilla Firefoxможуть подивитися html-код, клацнувши по сторінці правою кнопкою мишки та вибравши в контекстному меню пункт «Вихідний код сторінки».
Користувачам, що працюють з Google Chrome, також слід скористатися контекстним меню, що викликається кліком правої кнопки мишки на сторінці, і вибрати в ньому пункт «Перегляд кодусторінки».
Щоб зберегти відкритий код Opera, натисніть на відкритій сторінціз html кнопку «Зберегти» у лівій верхній частині вікна. У Mozilla Firefox виберіть "Файл" - "Зберегти сторінку як…". Так само зберігається html-код і в IE. У Google Chrome клацніть правою кнопкою мишки відкритий код і виберіть пункт «Зберегти як» у контекстному меню.
Якщо вам потрібно працювати зі збереженим кодом, скористайтесь для цього спеціальними програмами. Для освоєння мови HTMLчудово підійде редактор з підсвічуванням синтаксису CuteHTML, дуже простий та зручний у використанні. З його допомогою можна створювати досить складні сторінки.
Для професійної роботи з HTML та створення складних сайтів скористайтесь програмою Dreamweaver. Це візуальний конструктор сайтів, що дозволяє швидко створювати дуже складні проекти. Працюючи в цій програмі, ви зможете використовувати готові шаблони сайтів, що суттєво прискорить та спростить створення інтернет-ресурсу.
Безліч безкоштовних шаблонів, на основі яких можна створювати дуже красиві сайти, викладені у мережі. Просто скачайте шаблон, що сподобався, відкрийте його в програмі Dreamweaver і доопрацюйте необхідним вам чином. Готові шаблониВи можете завантажити тут: http://www.internet-technologies.ru/templates/.
Веб-сторінка в Інтернеті може містити посилання на документ Word. При натисканні на посилання він може відображатися як у браузері, так і текстовому редакторі. Яким же способом краще відкривати текстовий файл?
Редактор Word не має самостійних налаштувань щодо документа з браузера. Усі параметри налаштовуються безпосередньо у Windows.
Відкрийте діалогове вікно «Типи файлів», виконавши одну з таких дій:
Натисніть та утримуйте клавішу Windows(Вона містить логотип ОС і знаходиться в нижній частині клавіатури, між клавішами Ctrl та Alt).
- На робочому столі двічі натисніть піктограму Мій комп'ютер.
Тепер з меню виберіть «Сервіс> Властивості папки» і перейдіть на вкладку «Типи файлів». Вам доведеться почекати кілька хвилин, поки Windows збирає інформацію про різних типахфайлів.
Коли з'явиться список, ви повинні знайти розширення DOCу списку. Клацніть на ньому, щоб виділити, а потім натисніть кнопку «Додатково». Тепер можна бачити діалогове вікно «Зміна властивостей типу файлу». Редагування пропонує два варіанти відображення документів Word у браузері.
Відкриття документа у текстовому редакторі
Це стандартне налаштування. Якщо ви вирішили залишити її, вам слід налаштувати лише деякі параметри. Якщо ви бажаєте мати можливість вибрати – відкрити або зберегти документ, ви повинні встановити прапорець навпроти пункту «Підтверджувати відкриття після завантаження». Зверніть увагу - якщо ви знімете прапорець у полі "Завжди запитувати при відкритті цього типу файлів", ви не зможете відзначити вищезазначений пункт.
Відкриття документа в Internet Explorer
Встановіть прапорець у діалоговому вікні «Зміна властивостей типу файлу» навпроти вкладки «Огляд у тому ж вікні». Таке налаштування означає, що документ Word за замовчуванням відкриється в Internet Explorer. Браузер при цьому використовуватиме відповідний плагін, панель інструментів якого є поєднанням головного меню Word і Internet Explorer. Ви можете змінювати і форматувати документ так само, як це можливо в текстовому редакторі, але деякі опції можуть бути недоступні.
Зняти це налаштування не складе ніяких труднощів. Просто відкрийте діалогове вікно "Зміна властивостей типу файлу" і зніміть прапорець з "Огляд у тому ж вікні". Після цього документ за замовчуванням завантажуватиметься у Word.
Відкриття документа в інших браузерах
Відкрити документ в інших браузерах можна лише після встановлення спеціальних плагінів. Наприклад, для Opera розроблено View Docs, для Firefox функціонує Google Docs Viewer, і таке інше. Також є великий вибіронлайн-інструментів, які не потребують жодних завантажень та установок на комп'ютері.