Необходимо быстро посмотреть все изменения на самом сайте, не затрагивая файлы и код сайта, выложенного в Интернет. Например, изменить цветовую гамму какого-либо блока, пододвинуть съехавший элемент и т.д.
Для этого многие вебмастера используют локальные серверы Denwer или OpenServer, запуская полную копия сайта у себя на компьютере. Этот способ универсальный и подойдет для профессионалов, с помощью него можно проверить работу различных скриптов и плагинов, поэкспериментировать с изменением дизайна и отредактировать все файлы сайта, а после теста перенести подходящие изменения непосредственно на сайт.
Пользователям далеким от вебмастерского искусства рекомендую для этих целей использовать браузер. Так как я использую Сhrome, приведу инструкцию со скриншотами именно по этому браузеру. По аналогии можно работать с Opera, Яндекс.Браузер, Mozilla Firefox и другими браузерами, принцип их инструментов схож.
Инструкция 1: как просмотреть весь HTML код сайта в браузере
Открываем необходимую веб-страницу вашего сайта. Кликаем правой кнопкой мыши по необходимому элементу, появится контекстное выпадающее меню браузера с доступными командами:
Рисунок 1. Просмотр всего HTML кода веб-страницы в браузере Chrome
Важно:
Команды в выпадающем меню могут отличаться, например, для активных элементов (ссылки, картинки, видео) и неактивных (текст, фон, дивы):
Рисунок 2. Выпадающее меню браузера Chrome
Поэтому если вы не нашли необходимой команды, просто нажмите правую кнопку мыши в другом месте или воспользуйтесь горячими клавишами браузера.
Вернемся к рисунку 1, на нем показана необходимая команда для просмотра всего HTML кода исходной веб-страницы, она называется «Просмотр кода страницы
«. Кликаем по команде, откроется новая вкладка с полным кодом исходной веб-страницы, большой плюс ко всему — просмотр доступен с подсветкой синтаксиса:
Рисунок 3. Фрагмент кода данного сайта
Данный инструмент очень полезен для нахождения и правки искомых элементов.
Альтернативные способы просмотра всего HTML кода веб-страницы
Для более быстрого доступа, можно использовать другие способы вызова данного инструмента
- На рисунке 1 мы также видим, что данная команда доступна по сочетанию клавиш + ;
- Вставить в адресную строку браузера view-source:сайт вместо моего домена вставляем свой адрес;
Оба способа универсальны и должны работать во всех браузерах.
Кому-то поначалу покажется, что это совсем не нужный инструмент, но просмотр всего HTML кода сайта отлично подходит для поиска в коде необходимых элементов, это могут быть ссылки, теги, мета-теги, атрибуты и другие элементы.
Сочетанием горячих клавиш + открываем окно поиска, в браузере Chrome оно появляется верху справа:
Рисунок 3. Поиск по коду сайту
После того, как вы ведете запрос в поисковую форму экран переместится к первому найденному элементу, с помощью стрелок можно перемещаться между ними и выбрать необходимый:
Рисунок 4. Поиск по HTML коду сайта
Инструкция 2: как просмотреть и отредактировать HTML и CSS код сайта в браузере Google Chrome
Теперь самая важная часть, в которой я покажу, как можно редактировать HTML и CSS код сайта в браузере. после чего переносить изменения в браузер.
Вот такой полезный инструмент всегда доступен в вашем браузере, экспериментируйте с другими командами, которые вам облегчат редактирование сайта.
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы,
которые не меняются от вида и направленности сайта. В примере 4.1 показан
код простого документа, содержащего основные теги.
Пример 4.1. Исходный код веб-страницы
Пример веб-страницы
Заголовок
Первый абзац.
Второй абзац.
Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под
именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть
файл (Ctrl+O)
. В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.
Рис. 4.1. Результат выполнения примера
Элемент
предназначен для указания типа текущего документа -
DTD (document type definition, описание типа документа). Это необходимо, чтобы
браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML
существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText
Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но
различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал,
согласно какому стандарту отображать веб-страницу и необходимо в первой строке
кода задавать
.
Существует несколько видов
, они различаются в зависимости
от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные
типы документов с их описанием.
Табл. 4.1. Допустимые DTD
| DOCTYPE
|
Описание
|
|---|
| HTML 4.01
|
|
|
Строгий синтаксис HTML.
|
|
|
Переходный синтаксис HTML.
|
|
|
В HTML-документе применяются фреймы.
|
| HTML 5
|
|
|
В этой версии HTML только один доктайп.
|
| XHTML 1.0
|
|
|
Строгий синтаксис XHTML.
|
|
|
Переходный синтаксис XHTML.
|
|
|
Документ написан на XHTML и содержит фреймы.
|
| XHTML 1.1
|
|
|
Разработчики XHTML 1.1 предполагают,
что он постепенно вытеснит HTML. Как видите, никакого деления на виды
это определение не имеет, поскольку синтаксис один и подчиняется четким
правилам.
|
Разница между строгим и переходным описанием документа состоит в различном
подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения
спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится
к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать
предпочтительнее.
Например, в строгом HTML и XHTML непременно требуется наличие тега
,
а в переходном HTML его можно опустить и не указывать. При этом помним, что
браузер в любом случае покажет документ, независимо от того, соответствует
он синтаксису или нет. Подобная проверка осуществляется при помощи валидатора
и предназначена в первую очередь для разработчиков, чтобы отслеживать ошибки
в документе.</p>
<p>В дальнейшем будем применять преимущественно строгий <!DOCTYPE>
, кроме
случаев, когда это оговаривается особо. Это позволит нам избегать типичных
ошибок и приучит к написанию синтаксически правильного кода.</p>
<p>Часто можно встретить код HTML вообще без использования <!DOCTYPE>
,
веб-страница в подобном случае все равно будет показана. Тем не менее, может
получиться, что один и тот же документ отображается в браузере по-разному при
использовании <!DOCTYPE>
и без него. Кроме того,
браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется»,
т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы
не произошло подобных ситуаций, всегда добавляйте <!DOCTYPE>
в начало документа.</p><p>Тег <html>
определяет начало HTML-файла, внутри него хранится заголовок
(<head>
) и тело документа (<body>
).</p><p>Заголовок документа, как еще называют блок <head>
, может содержать текст
и теги, но содержимое этого раздела не показывается напрямую на странице, за
исключением контейнера <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Тег <meta>
является универсальным и добавляет целый класс возможностей,
в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять
кодировку страницы, добавлять ключевые слова, описание документа и многое другое.
Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.</p><p>
<title>Пример веб-страницы
Тег
определяет заголовок веб-страницы, это один из важных элементов
предназначенный для решения множества задач. В операционной системе Windows
текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).</p>
<p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy></p>
<p>Рис. 4.2. Вид заголовка в браузере</p>
<p>Тег <title>
является обязательным и должен непременно присутствовать
в коде документа.</p><p>Обязательно следует добавлять закрывающий тег </head>
, чтобы показать,
что блок заголовка документа завершен.</p><p>Тело документа <body>
предназначено для размещения тегов и содержательной
части веб-страницы.</p><p>
<h1>Заголовок</h1>
</p><p>HTML предлагает шесть текстовых заголовков разного уровня, которые показывают
относительную важность секции, расположенной после заголовка. Так, тег <h1>
представляет
собой наиболее важный заголовок первого уровня, а тег <h6>
служит
для обозначения заголовка шестого уровня и является наименее значительным.
По умолчанию, заголовок первого уровня отображается самым крупным шрифтом
жирного начертания, заголовки последующего уровня по размеру меньше. Теги <h1>...<h6>
относятся
к блочным элементам, они всегда начинаются с новой строки, а после них другие
элементы отображаются на следующей строке. Кроме того, перед заголовком и
после него добавляется пустое пространство.</p><p>
<!-- Комментарий -->
</p><p>Некоторый текст можно спрятать от показа в браузере, сделав его комментарием.
Хотя такой текст пользователь не увидит, он все равно будет передаваться
в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.</p>
<h3>Ctrl + U</h3>
<h3>Как посмотреть исходный код элемента?</h3>
<p>Нажмите правую кнопку мыши на интересующем элементе страницы.</p>
<p>Google Chrome
: <b>“Просмотр кода элемента”
</b></p>
<p>Opera
: <b>“Проинспектировать элемент”
</b></p>
<p><img src='https://i1.wp.com/wordpress-life.ru/wp-content/uploads/2013/10/code_opera.png' height="402" width="261" loading=lazy></p>
<p>FireFox
: <b>“Анализировать элемент”
</b></p>
<p><img src='https://i1.wp.com/wordpress-life.ru/wp-content/uploads/2013/10/code_firefox.png' height="298" width="222" loading=lazy></p>
<p>В других браузерах ищите подобный по смыслу пункт меню.</p>
<p>Всем привет!</p>
<p>Специально вначале статьи выложил всю суть, для тех, кто ищет быстрый ответ.</p>
<p>Информация может быть многим известна, но поскольку пишу для начинающих блоггеров, веб-программистов и прочих старателей, то эта справочная статья обязательно должна присутствовать.</p>
<p>В будущем вы обязательно будете изучать исходный код страниц и отдельных элементов.</p>
<p>Давайте посмотрим на конкретном примере как можно использовать просмотр исходного кода страницы.</p>
<p>Например, мы хотим посмотреть какие ключевые слова (keywords) используются для конкретной страницы. Заходим на интересующую нас веб-страницу и нажимаем Ctrl+U . В отдельном окне или в отдельной закладке откроется исходный код данной страницы. Нажимаем Ctrl+F <span>для поиска фрагмента кода. В данном случае печатаем в окне поиска слово “<i>keywords”.
</i>Вас автоматически перебросит на фрагмент кода с этим мета-тегом и выделит искомое слово.
</p>
<p>По аналогии можно искать и изучать другие фрагменты кода.</p>
<p>Просмотр всего исходного кода страницы в большинстве случаев не очень удобен, поэтому во всех браузерах существует возможность просмотреть код отдельного элемента или фрагмента.</p>
<p>Давайте применим на конкретном примере просмотр кода элемента. Например, посмотрим есть ли у ссылки атрибут nofollow . Нажимаем правой кнопкой мыши на интересующей нас ссылке и в выпадающем контекстном меню левой кнопкой кликаем по пункту <span>“Просмотр кода элемента”
</span> или подобному (в зависимости от вашего браузера). Внизу, в специальном окне для анализа кода, получаем нечто подобное.</p>
<p>Мы видим, что в коде ссылки присутствует rel=”nofollow” . Это значит, что по этой ссылке не будет “утекать” и PR. Об этом подробней поговорим в следующих статьях. Сейчас же важно то, что вы теперь знаете как посмотреть исходный код страницы и исходный код отдельного элемента.</p>
<p>». Такой же пункт есть и в контекстном меню, которое , если щелкнуть правой кнопкой мыши текст <b>страницы
</b>. Можно использовать и сочетание клавиш CTRL + U. Mozilla FireFox при этом не использует внешних программ - исходный <b>код
</b> <b>страницы
</b> с подсветкой синтаксиса будет открыт в отдельном окне браузера.</p> <p>В обозревателе Internet Explorer щелкните в меню раздел «Файл» и выберите «Править в Блокнот». Вместо названия Блокнот может быть написана другая , вы назначили в настройках браузера для просмотра исходного <b>код
</b>а. По щелчку <b>страницы
</b> правой кнопкой мыши выпадает контекстное меню, в котором тоже есть пункт, позволяющий открыть исходный <b>код
</b> <b>страницы
</b> во внешней программе - «Просмотр HTML-<b>код
</b>а».</p> <p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy></p> <p>В браузере Opera откройте меню, перейдите в раздел «Страница» и у вас будет возможность выбрать в подразделе «Средства разработки» пункт «Исходный <b>код
</b>» или пункт «Исходный <b>код
</b> фрейма». Такому выбору назначены горячие клавиши CTRL + U и CTRL + SHIFT + U соответственно. В контекстном меню, привязанном к щелчку <b>страницы
</b> правой кнопкой мыши, тоже есть пункт «Исходный <b>код
</b>». Opera исходник <b>страницы
</b> во внешней программе, которая назначена в ОС или в настройках браузера для редактирования HTML-файлов.</p> <p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy></p> <p>Браузер Google Chrome безо всяких сомнений имеет лучшую организацию просмотра исходного <b>код
</b>а. Щелкнув правой кнопкой мыши, вы можете выбрать пункт «Просмотра <b>код
</b>а <b>страницы
</b>» и тогда исходник с подсветкой синтаксиса будет открыт на отдельной вкладке. А можете выбрать в том же меню строку «Просмотр <b>код
</b>а элемента» и в этой же вкладке откроет два дополнительных фрейма, в которых вы можете инспектировать HTML- и CSS-<b>код
</b> элемента <b>страницы
</b>. Браузер будет реагировать на перемещение курсора по строкам <b>код
</b>а, подсвечивая на странице элементы, соответствующие этому участку HTML-<b>код
</b>а.</p> <p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy></p>
<p>Вероятность заглянуть в начальный <b>код
</b> веб-<b>страницы
</b> , получаемый браузером в результат на запрос серверу, есть фактически в всяком интернет-обозревателе. Доступ к соответствующей команде организован приблизительно идентично, но есть значительные отличия в том, каким методом и в каком виде вам будет представлен начальный <b>код
</b> .</p>
<h3>Инструкция</h3>
<p><b>1.
</b> В браузере Mozilla FireFox раскройте в меню раздел «Вид» и щелкните пункт «Начальный <b>код
</b> <b>страницы
</b> ». Такой же пункт есть и в контекстном меню, которое возникает, если щелкнуть правой кнопкой мыши текст <b>страницы
</b> . Дозволено применять и сочетание клавиш CTRL + U. Mozilla FireFox при этом не использует внешних программ – начальный <b>код
</b> <b>страницы
</b> с подсветкой синтаксиса будет открыт в отдельном окне браузера.</p><p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95d5fa552552b95d5fe3.jpg' height="748" width="680" loading=lazy></p><p><b>2.
</b> В обозревателе Internet Explorer щелкните в меню раздел «Файл» и выберите «Править в Блокнот». Взамен наименования Блокнот может быть написана иная программа, которую вы назначили в настройках браузера для просмотра начального <b>код
</b> а. По щелчку <b>страницы
</b> правой кнопкой мыши выпадает контекстное меню, в котором тоже есть пункт, дозволяющий открыть начальный <b>код
</b> <b>страницы
</b> во внешней программе – «Просмотр HTML-<b>код
</b> а».</p><p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy></p><p><b>3.
</b> В браузере Opera откройте меню, перейдите в раздел «Страница» и у вас будет вероятность предпочесть в подразделе «Средства разработки» пункт «Начальный <b>код
</b> » либо пункт «Начальный <b>код
</b> фрейма». Такому выбору назначены жгучие клавиши CTRL + U и CTRL + SHIFT + U соответственно. В контекстном меню, привязанном к щелчку <b>страницы
</b> правой кнопкой мыши, тоже есть пункт «Начальный <b>код
</b> ». Opera открывает исходник <b>страницы
</b> во внешней программе, которая назначена в ОС либо в настройках браузера для редактирования HTML-файлов.</p><p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy></p><p><b>4.
</b> Браузер Google Chrome безо любых сомнений имеет лучшую организацию просмотра начального <b>код
</b> а. Щелкнув страницу правой кнопкой мыши, вы можете предпочесть пункт «Просмотра <b>код
</b> а <b>страницы
</b> » и тогда исходник с подсветкой синтаксиса будет открыт на отдельной вкладке. А можете предпочесть в том же меню строку «Просмотр <b>код
</b> а элемента» и браузер в этой же вкладке откроет два дополнительных фрейма, в которых вы можете инспектировать HTML- и CSS-<b>код
</b> всякого элемента <b>страницы
</b> . Браузер будет реагировать на перемещение курсора по строкам <b>код
</b> а, подсвечивая на странице элементы, соответствующие этому участку HTML-<b>код
</b> а.</p><p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy></p><p><b>5.
</b> В браузере Apple Safari раскройте раздел «Вид» и выберите строку «Просмотр HTML-<b>код
</b> а». В меню, которое возникает по щелчку правой кнопкой открытой <b>страницы
</b> , соответствующий пункт назван «Посмотреть источник». Этому действию назначены жгучие клавиши CTRL + ALT + U. Начальный <b>код
</b> открывается в отдельном окне браузера.</p><p><img src='https://i0.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b960eafe52552b960eb45.jpg' width="100%" loading=lazy></p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
<div class="post-social-counters-block">
<div style="margin-top: 12px">
<noindex></noindex>
</div>
</div>
</div>
</div>
<a name="comments"></a>
<h3 class="best-theme-posts-title">Лучшие статьи по теме</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="/ccleaner-polnaya-versiya-programmy-dlya-ochistki-kompyutera-ot.html">
<div class="img_container"><img src="/uploads/3ac7798a92e4fe15e95cb41ca4963e85.jpg" border="0" alt="Программы для очистки компьютера от ненужных файлов" width="320" height="180" / loading=lazy></div>
<span class="theme-post-link">Программы для очистки компьютера от ненужных файлов</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="/koordinaty-sputnika-yamal-primorskom-krae-kak-nastroit-sputnikovuyu.html">
<div class="img_container"><img src="/uploads/61088406887ceb094cd2b812e1cc61f9.jpg" border="0" alt="Как настроить спутниковую антенну самостоятельно: несколько практических рекомендаций" width="320" height="180" / loading=lazy></div>
<span class="theme-post-link">Как настроить спутниковую антенну самостоятельно: несколько практических рекомендаций</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="/usluga-mobilnyi-perevod-megafon-perevesti-dengi-s-megafona-na.html">
<div class="img_container"><img src="/uploads/5a136d2de6e09ee3a330ef72fdadba63.jpg" border="0" alt="Перевести деньги с Мегафона на Мегафон и на другие операторы просто" width="320" height="180" / loading=lazy></div>
<span class="theme-post-link">Перевести деньги с Мегафона на Мегафон и на другие операторы просто</span>
</a>
</div>
</div>
</div>
</div>
<a name="comments"></a>
</div>
<div class="right-column col-sm-4 col-md-4">
<div class="write">
<span class="tags-title">Категории:</span>
<ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags">
<li class=""><a href="/category/programs/">Программы</a></li>
<li class=""><a href="/category/safety/">Безопасность</a></li>
<li class=""><a href="/category/windows-10/">Windows 10</a></li>
<li class=""><a href="/category/iron/">Железо</a></li>
<li class=""><a href="/category/windows-8/">Windows 8</a></li>
<li class=""><a href="/category/vkontakte/">Вконтакте</a></li>
<li class=""><a href="/category/errors/">Ошибки</a></li>
</ul>
</div>
<div class="banner">
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="footer">
<div class="subscribe">
<div class="main-wrapper container">
<div class="row">
<div class="col-sm-8">
</div>
<div class="col-sm-4">
<div class="social">
<a href="https://vk.com/share.php?url=https://bumotors.ru/kak-pokazat-kod-stranicy-google-chrome-instrumenty-dlya-web-mastera.html" class="vk social-ico"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/kak-pokazat-kod-stranicy-google-chrome-instrumenty-dlya-web-mastera.html" class="fb social-ico"></a>
<a href="https://www.twitter.com/share?url=https://bumotors.ru/kak-pokazat-kod-stranicy-google-chrome-instrumenty-dlya-web-mastera.html" class="tw social-ico"></a>
</div>
</div>
</div>
</div>
</div>
<div class="info">
<div class="main-wrapper container">
<div class="row">
<span class="footer-info col-xs-12">
© 2024 bumotors.ru. Как настроить смартфоны и ПК. Информационный портал. </span>
</div>
</div>
</div>
</div>
</body>
</html> 