Совет 1: Как открыть исходный код страницы в Opera

Нередко при обучении веб-дизайну приходится просматривать исходные коды чужих веб-страниц. Никакого дополнительного программного обеспечения для этого не требуется. Достаточно любого браузера, например, Opera.
Инструкция
1
Запустите браузер Opera.
2
Зайдите на сайт, HTML-код которого вы желаете просмотреть. При необходимости, откройте на нем ту или иную страницы.
3
Если используется современная версия браузера Opera, нажмите на красную кнопку с белой буквой O, расположенную в левом верхнем углу. Появится меню. В старых версиях браузера, а также в случае, если в современной версии выбран классический вид, меню и так уже имеется в верхней части экрана.
4
Независисмо от того, каким именно образом вы вызвали меню, выберите в нем пункт под названием «Вид».
5
В появившемся подменю выберите пункт «Исходный код».
6
HTML-код страницы откроется в отдельной вкладке. Обратите внимание на то, что различные его фрагменты выделены цветами для облегчения чтения. При желании, переключайтесь между страницей и исходным кодом столько раз, сколько необходимо, чтобы понять, какие из его фрагментов отвечают за какие отображаемые элементы.
7
Помните, что:
- отправить модифицированный исходный код на сервер невозможно;
- отображается только HTML-код страницы, а увидеть содержание скриптов «движка» сайта (в частности, на языке PHP) также невозможно;
- действующее законодательство не допускает использование фрагментов кода чужих страниц, являющихся оригинальными и созданными в результате творческой деятельности (например, Java-скриптов), на других сайтах без разрешения авторов этих фрагментов.
8
При желании, найдите аналогичные по назначению пункты меню во всех остальных браузерах, имеющихся на вашем компьютере. Сравните исходный код одной и той же страницы при открывании ее другими браузерами. Возможно, он будет немного различаться. Связано это с тем, что некоторые серверы, получив информацию о используемом браузере, слегка изменяют код автоматически генерируемой страницы. Раньше это нередко намеренно делалось для того, чтобы ухудшить совместимость сайта с различными браузерами, а сегодня - в основном, чтобы, наоборот, ее улучшить.

Совет 2: Как смотреть исходный код страницы

Просмотр страниц в браузере организован таким образом: программа отправляет запрос на сервер, указанный в ссылке, а в ответ получает набор «запчастей» и инструкцию по сборке. Запчасти - это изображения, флэш-элементы, звуковые и др. файлы, а инструкции по правильному их размещению в странице, расцвечиванию ее фона, использованию определенных гарнитур и размеров шрифтов и т.д. содержатся в исходном коде страницы. Пользователь браузера может увидеть и сам этот код, а не только собранную по его инструкциям страницу.
Инструкция
1
Современные браузеры имеют встроенные функции просмотра исходного кода страницы. Например, в Opera чтобы активировать эту опцию кликните свободное от картинок, ссылок и других элементов пространство открытой страницы сайта и в выпавшем контекстном меню выберите пункт «Исходный код». Браузер откроет исходник в отдельной вкладке, раскрасив в три цвета строки, относящиеся к HTML-тегам, скриптам и обычному тексту.
2
Аналогичные пункты, но сформулированные немного по-другому, есть в контекстном меню и других браузеров. Например, в Google Chrome этот пункт назван «Просмотр кода страницы», в Mozilla Firefox выбирайте строку «Исходный код страницы», а интернет-обозревателе Internet Explorer - «Просмотр HTML-кода». Цветовое оформление кода тоже будет немного различаться в разных приложениях.
3
В браузере Google Chrome есть значительно более продвинутая опция просмотра исходников. Чтобы ее задействовать, в том же контекстном меню выберите пункт «Просмотр кода элемента». После этого вкладка с открытой веб-страницей разделится на два фрейма - в верхнем останется ее внешний вид, а в нижнем появится подробнейшая информация, собранная не только из тегов исходного кода, но и из подключаемых файлов CSS-стилей. Можно выделять строки исходника в нижнем фрейме, и браузер будет подсвечивать в верхнем те области страницы, которые формируются этими строками. Точно так же выбор какого-либо элемента в верхнем фрейме вызовет отображение в нижнем относящегося к этому элементу кода.
4
Если страница сохранена на жесткий диск компьютера, файл можно открыть любым текстовым редактором - исходный код записан в нее как обычный текст. Просто перетащите этот файл в окно запущенного «Блокнота», Word или любого другого приложения этого рода. С помощью обычного редактора исходный код можно не только просматривать, но и редактировать.
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500