Приветствую Вас на своем блоге!
Прочитав эту статью вы узнаете, как узнать html код сайта и как редактировать css код другого сайта с помощью самых популярных браузеров Google Chrome, Mozilla Firefox и Opera.
Часто просматривая сайты или когда ищешь ответ на какой нибудь вопрос, связанный с web программированием, часто задаешь себе вопрос: «С помощью какого кода построен тот или иной блок на сайте?»
Профессионалы для работы с html кодом используют специальные программы, но бывают моменты, когда это совсем не нужно.
Если вам нужно просто посмотреть фрагмент кода на сайте, какой нибудь div блок или узнать название шаблона на блоге, браузер для этого отлично подойдет.
Еще это полезно для самообразования, так как ничто так не учит, как примеры, которые ты видишь и можешь с ними поработать.
Лично я очень многому научился изучая коды других сайтов, и советую вам делать так же. Плюс этого метода заключается в том, что просматривая код какого нибудь сайта вы можете его изменять, редактировать его css или html файл и наблюдать какие изменения происходят в это время на сайте.
Естественно, что реально вы код сайта не изменяете, все изменения происходят только в вашем браузере.
Чтобы узнать код всей веб страницы в браузере(кроме IE) достаточно использовать комбинацию клавиш CTRL+U.
Но для изучения отдельных ее элементов этот вариант не подходит.
Современные браузера сегодня способны не только отображать содержимое страниц, но и предоставляют разработчику целый ряд инструментов для работы с html и css кодом.
Как узнать код сайта в браузере Google Chrome.
Для того чтобы узнать html код всей страницы, нужно выбрать в меню «Просмотр кода страницы».
Чтобы узнать фрагмент html кода в браузере Google Chrome нужно навести мышкой на нужный нам элемент, и нажав правую кнопку мыши выбрать «Просмотр кода элемента».
Внизу экрана откроется панель разработчика, для просмотра и редактирования кода.
С помощью этой панели можно изучить css файл сайта, и причем не просто изучить, но и его изменять и сразу же смотреть, какие изменения происходят на странице.
Это очень полезно, когда вам надо поставить новый элемент на свой блог, и нужно определить, какие размеры или координаты ему дать. Чтобы потом просто взять, и смело изменить код своего сайта уже из админки своего блога или хостинга.
Так же в этой панели можно просмотреть и изменить html код сайта. Что тоже помогает в изучении web программирования.
Кроме того в этой панели можно посмотреть какие изображения отображаются на этой странице сайта. Из чего состоит шапка или подвал сайта.
Из всех браузеров панель разработчика браузера Chrome мне нравится больше всего, из за своей простоты.
Как узнать html код сайта в браузере Mozilla Firefox.
В Mozilla Firefox есть возможность просмотреть код выделенного участка страницы. Что очень удобно, когда нужно узнать html код только какого то отдельного текста, а не всей страницы.
Для этого нужно выделить мышкой нужный нам текст и нажав правую кнопку мыши выбрать в меню «Исходный код выделенного фрагмента».
Также есть возможность посмотреть код всей страницы. Для этого нужно нажать правой кнопкой мыши на странице и выбрать пункт «Исходный код страницы».
Если нужно узнать код отдельного элемента, надо нажать правой кнопкой мышки на нужном элементе, и выбрать пункт в меню «Исследовать элемент».
В открывшейся панели для вебмастера так же можно редактировать html и css код страницы.
Что очень удобно, так это то, что в Firefox есть подсказки, какой элемент от какого зависит или унаследован. То есть хорошо видна вложенность div блоков.
Еще в Firefox есть функция просмотра страницы в 3D изображении, чисто для информации смотрится красиво.
Как узнать код сайта в браузере Opera.
Для того чтобы узнать код сайта в Опере, так же как и в предыдущих браузерах вызываем меню.
Если нужно посмотреть код всей страницы, выбираем пункт «Исходный код».
А для того чтобы узнать код фрагмента страницы, выбираем в меню «Проинспектировать элемент».
В Опере также можно изменять код и смотреть, какие изменения происходят на странице.
Внешне все панели разработчика в этих браузерах разные. Но в целом выполняют одну и ту же задачу.
Имеет смысл познакомиться со всеми браузерами и выбрать тот, который вам больше подходит.
Даже если вы пользуетесь для просмотра сайтов Оперой, это совсем не значит, что в ней будет удобней просматривать и редактировать html код.
Как узнать название шаблона на сайте.
С помощью панели разработчика можно легко узнать название шаблона на блоге. Это интересует многих блогеров, которые ищут шаблон для своего сайта или просто хотят узнать, какой шаблон стоит на блоге, который им понравился.
Узнать название шаблона на сайте очень просто. Открываем окно разработчика в браузере и переходим к просмотру css файла. Для чего нажимаем на название css файла в правом окне панели разработчика.
В самом верху этого файла будет описание шаблона, как он называется, сайт разработчика и т.д.
Конечно, такое описание есть не везде, как правило на авторских или уникальных шаблонах этого может и не быть.
Но на стандартных темах, которые есть в сети для общего пользования, как правило всегда есть и название шаблона, и url сайта разработчика.
Конечно, тут описаны не все функции панелей разработчика для просмотра html кода, но для простого просмотра страниц этого хватит.
Чтобы не засорять свой системный диск цифровым мусором, лучше всего сохранять файлы, который вы загружаете в браузере на другом диске, тогда у вас всегда будет достаточно места на нем для работы системы.
Удачи!
С уважением Юрий Хрипачев.
Интересная статья. Но есть одно упущение. Нигде не
говорится, что по странице нужно кликнуть правой
кнопкой и в меню кнопки выбирать «Просмотр кода …».
«С помощью панели разработчика можно легко узнать
название шаблона …» — а где эта панель? Как на нее попасть?
Тамара, как открыть меню разработчика написано выше по статье. Если ее внимательно читать, то должно быть понятно. Если не понятно, то я допишу по подробней.
Лично я для просмотра кода сайта постоянно использую firebag — плагин для mozilla, кстати любой веб разработчик скажит вам, что это самый удобный инструмент из всех подобных в других браузерах, а вы почему-то о нем ничего не написали. Но зато узнал для себя интересную функцию «иследовать элемент», о которой до этого ничего не слышал.
Виталий, в этой статье про плагины и не должно ничего быть. Плагины для браузеров, это отдельная статья.
Ясно! Ну да в принципе, все логично, если писать о каждом плагине здесь, то выйшла бы очень длинная статья.
Интересная статья. Узнал, что у Вас блог работает на шаблоне wp-product, а поиск мне подсказал, что он платный и автор его некий Гудвин.
Так и есть, шаблон платный. К слову заметить, Гудвин классный мастер своего дела, все его шаблоны отменного качества.
Да, это правда. Он хорошо делает шаблоны + поддержка. А нынешний дизайн сайта был включён изначально в шаблон или это отдельный заказ с отдельной оплатой? Или Вы сами дизайн делали?
Никакой оплаты не нужно, все что хочешь изменить и не знаешь как, Алексей (Гудвин) подсказывает бесплатно, при условии, что вы покупали у него шаблон.
Я сам несколько раз к нему обращался с вопросами по изменению кода, и все время была качественная поддержка.
Мой шаблон по умолчанию немного другой, я его уже изменил внешне. Кое что мне подсказал Алексей и совершенно бесплатно. Потому что лучше спросить автора, как правильно изменить PHP код шаблона, чем ковырять его молча и что нибудь сделать не так.
Более подробно об его шаблонах вы можете узнать на сайте Алексея goodwinpress.ru.
Юрий, спасибо за ответ! Я читал интервью с Гудвиным на сайте Александрова. Честный открытый человек, имеющий свою точку зрения и умеющий её отстаивать. Мне он понравился.
Шаблон при наличии поддержки, конечно, не стоит копать, это займёт много времени и с заранее непредсказуемым результатом.
Мне нравятся такие вот, как у Вас, оригинальные, не шаблонные, сайты. Работают свободно, легко; страницы открываются быстро, дизайн приятный. Но таких сайтов немного. В основном, однотипные и шаблонные.
Юрий, как считаете, выкладывание кода платных шаблонов или плагинов для ВордПресс в свободный доступ теми, кто их приобрёл, это правильно? Или их дальнейшее распространение купившими с целью получения прибыли.
На вопрос меня подвигло рассуждение Гудвина.
Это нужно у автора шаблона спрашивать, если он не против, тогда можно, я думаю, что каждый автор ставит какие-то ограничения на распространение своих продуктов. У Гудвина четко написано, что можно и что нельзя делать с купленными у него шаблонами, лучше соблюдать эти правила.
Я Вас понял. Но на деле всё гораздо запутаннее. WP распространяется по GNU General Public License, позволяющей делать хоть что, в том числе и продавать, но с обязательным условием выкладывания исходного кода, который впоследствии каждый может скомпилировать. Как пример, платная ОС RedHat за 1000 $ за год и её бесплатный аналог ОС CentOS.
Потому и всё связанное с WP подпадает под законы GNU General Public License, о чём и рассуждал Гудвин, но и не только об этом.
А кто, что там хочет «можно и что нельзя делать» — это дело десятое. Это моя точка зрения. Мне продали, я могу перепродать. Условия GNU General Public License я ведь не нарушил.
По поводу этого несоответствия вам лучше с самим Алексеем поговорить, вам он прояснит ситуацию по поводу своих требований. Но раз он пишет, что нельзя, значит так и есть, а GNU это или еще что, отходит на втрой план.
Алексей как раз не прояснит, он сам в сомнении. GNU не будет учитывать требований ни Алексея, ни кого бы то ни было. GNU — международный стандарт. Пишешь программу? Код выложи обязательно. Не хочешь? Тогда иди в Виндоуз или Мак — там код закрыт, как раз то, что ты и хочешь.
А с другой стороны есть Россия со своими законами, которой без разницы стандарты GNU. В этом-то и нелепость ситуации. Все развитые страны GNU признают, а Россия — нет.
Добрый день! С удовольствием прочитал вашу статью Однако у меня есть вопрос личного характера: Я сделал блог на Гууглу и хочу вставить рекламный блок сторонненого от гууглу сайта. Для этого нужно изменить код элемента. Я не знаю как это делать. С ваше помощью я ужнал как увидеть код а вот как его изменить — я не знаю. Подскажите пожалуйста как и что делать для того, чтобы изменить код элемента в своем блоге. С уважением Василий.
Здравствуйте Василий! С кодом лучше работать в специальной программе, например Notepad++. Берете код, вставляете его в эту программу и редактируете его, а затем, измененный код вставляете к себе в блог.
Код, который вам показывает браузер, нужно изменять, зайдя в управление сайтом от имени администратора или в управление хостингом, найдя там нужный файл, например header.php.
Добрый день! Большое спасибо за рекомендации. Только у меня не получается. Код изменить получается, а сохранить изменения — нет. Я открывая блог, делаю все как вы советуете, потом вставляю изменения, закрываю, любуюсь, произвожу перезагрузку и изменения исчезают. Видимо я что-то не так делаю. Все равно спасибо Вам!
Здравствуйте. Если вы изменяете код в окне браузера, то он там и не сохранится. Вам нужно зайти в меню управления вашим сайтом и там изменять его файлы.
объясните если не трудно, как менять в хроме софт? Например ты с железа, а хочешь чтобы отображалось как мобилы. Знаю что такое есть, но не знаю как воспользоваться.
Режим адаптивного дизайна есть во многих браузерах, открывается он везде немного по разному. в рамках комментария я не могу подробно рассказать. В Хроме в режиме разработчика найдите кнопку «Hide drawer» (справа внизу), затем слева меню «Emulation». Там настраивайте то, что вам нужно.
Спасибо, как раз то, что я искала!