Иногда возникает необходимость посмотреть не только фронт-энд сайта, но и его код. Бывает так, что встречается хороший веб-ресурс с необычным дизайном и хочется понять, как в нём сделаны те или иные элементы, какие используются теги и стили.

Предупреждаю сразу – воровать, таким образом, чужие проекты нельзя! Но для того чтобы сделать резервную копию своего сайта или посмотреть на то как свёрстан тот или другой элемент понравившегося вам ресурса, такой подход может быть использован.

Особенно удобно иметь файлы нужного сайта на жёстком диске своего ПК или в хранилище dropbox. Просмотреть его код можно в любое время, вне зависимости от того есть интернет или нет.

Скачиваем сайт своими руками

Итак, первый способ как скачать сайт целиком на компьютер состоит в том, что делаем всё своими руками, без сторонних он-лайн сервисов или особых программ. Для этого нам понадобится браузер и простой редактора кода, например Noutepad++.

  1. Создаём на рабочем столе корневую папку с названием сайта
  2. Создаём в ней ещё три папки и называем одну images (сюда будем складывать картинки); вторую – css (для файлов со стилями); и третью – js (для скриптов).

Загружаем html код страницы

Далее всё очень просто: находим интересующий нас проект, открываем главную страницу и нажимаем на клавиши ctrl + U. Браузер сразу же показывает нам её код.

исходный код html сайта

Копируем его, создаём новый файл в редакторе кода, вставляем код главной страницы, в новый файл, сохраняя его под названием index, с расширением html (index.html). Всё, главная страница сайта готова. Размещаем её в корне документа, то есть кладём файл индекс.html рядом с папками images, css и js

Далее чтобы скачать сайт целиком на компьютер проделываем тоже со всеми страницами сайта. (Данный метод подходит, только если ресурс имеет не слишком много страниц). Таким же образом, копируем все html-страницы понравившегося нам сайта в корневую папку, сохраняем их с расширением html и называем каждую из них соответствующим образом (не русскими буквами – contact.html, about.html).

Создаём css и js файлы

После того как мы сделали все страницы сайта, находим и копируем все его css стили и java скрипты. Для этого кликаем по ссылкам, ведущим на css и js файлы в коде.

ссылка в коде ведущие на стили css

ссылка на js файл в коде сайта

Таким же образом как мы копировали файлы html, копируем все стили и скрипты создавая в редакторе Notepad++ соответствующие файлы. Делать их можно с такими же названиями, сохраняя их в папках сss и js. Файлы стилей кладём в папку css, а код java script в папку js.

Копируем картинки сайта

Чтобы скачать сайт целиком на компьютер также нам нужны все его картинки. Их можно загрузить, находя в коде сайта и открывая по порядку одну за другой. Ещё можно увидеть все картинки сайта, открыв инструменты разработчика в браузере с помощью клавиши F12. Находим там директорию Sources и ищем в ней папку img или images В них мы увидим все картинки и фотографии сайта. Скачиваем их все, ложа в папку images.

Просмотр директорий сайта через инструменты разработчика в браузере

Убираем всё лишнее в html коде

После того как мы скачали все файлы сайта нужно почистить его код от всего лишнего. Например, можно удалить:

  • код google analytics и yandex метрики;
  • код верификации сайта в панелях для веб мастеров яндекса и гугла:
  • можно удалить любой код, который нам не нужен и оставить тот, что нужен.

Настраиваем пути к картинкам, скриптам и стилям

Теперь если открыть файл index.html с помощью браузера то мы увидим только его хтмл код, который выглядит так же как сайты на заре появления интернета. Чтобы сайт стал таким же, как он есть он-лайн нужно подключить к нему css стили, скрипты и фотографии. Для этого подключаем в html коде файлы со стилями css и скрипты, а так же прописываем правильный путь к фотографиям. Чтобы не ошибиться при прописывании пути к файлам, я не рекомендую делать большую вложенность папок в папки. Все фотографии пусть будут в папке images а стили в css . Ссылки на файлы css и js могут быть приблизительно такими:

А вот ссылка к файлу с логотипом лежащим в папке images:

Если мы всё правильно подключили то, открыв индексный файл с помощью браузера, мы увидим сайт точно таким же, как он есть в интернете.

Скачиваем сайт целиком на компьютер с помощью wget

Этот способ намного быстрее предыдущего. Скачиваем последнюю версию консольной программы wget здесь.

страница скачивания wget

Подробно об этой программе написано в Википедии и сейчас нет необходимости расписывать все нюансы её работы.

Далее распаковываем архив и создаём на диске С в папке Program Files папку с названием wget. Затем вставляем файлы из корневой папки распакованного архива в только что созданную папку.

Установка wget на диск С

После этого находим на рабочем столе системный значок «Компьютер», кликаем правой кнопкой мыши по нему, открываем «Свойства», заходим в «Дополнительные свойства системы», «Перемены среды» и находим здесь строку «Path» в директории «Системные переменные» и жмём на кнопку «Изменить».

Перед нами появится строка, в конце которой нужно поставить точку с запятой и затем вставить скопированный путь к папке wget на диске С (C:\Program Files\wget). Вставляем его после точки с запятой в строке и сохраняем всё.

Прописываем путь к папке wget

После этого чтобы скачать сайт целиком на компьютер, открываем консоль windows в директории «Пуск» и вводим в командную строку cmd. После этого мы увидим консоль, куда вводим wget –h чтобы убедится, что данное приложение работает.

Для того чтобы скопировать HTML-код вам достаточно скопировать ссылку на сайт и использовать любой специализированный сервис. Например, онлайн-пасер кода от sitecopy точка pro вполне вам подойдет. Просто вставьте ссылку в поле и запустите копирование. После чего вы делите и сохраните код.

Что можно узнать, просмотрев код страницы сайта?

Просматривая бесчисленное множество сайтов в интернете, можно встретить такие, которые очень нам нравятся. Сразу же возникает ряд вопросов. Сайт сделан с помощью самописного кода или какой-нибудь CMS? Какие у него CSS стили? Какие у него мета-теги? И так далее.

Существует много инструментов, с помощью которых можно извлечь информацию о коде страницы сайта. Но под рукой у нас всегда есть правая кнопка мыши. Её-то мы и будем использовать, на примере моего сайта.

Как просмотреть код страницы?

Чтобы посмотреть исходный код страницы сайта, нужно навести курсор мыши на любую область веб-страницы (за исключением изображений и ссылок). После этого нажать на правую кнопку мыши. Перед нами откроется окно с несколькими опциями (в разных браузерах они могут немного отличаться). В браузере Google Chrome, например, это команды:

  • назад;
  • вперёд;
  • перезагрузить;
  • сохранить как;
  • печать;
  • перевести на русский;
  • просмотр кода страницы;
  • просмотреть код.

Нам нужно кликнуть на просмотр кода страницы , и перед нами откроется html код страницы сайта.

Просмотр кода страницы: на что обратить внимание?

Итак, Html код страницы представляет собой пронумерованный список строк, каждая из которых несёт информацию о том, как сделан данный сайт. Чтобы быстрей научиться разбираться в этом огромном количестве знаков и специальных символов, нужно различать разные участки кода.

Например, строки кода, находящиеся в внутри тега head содержат информацию для поисковых машин и веб-мастеров. Они не выводятся на сайт. Здесь можно увидеть, по каким ключевым словам продвигается эта страница, как написаны её title и description. Также здесь можно встретить ссылку, перейдя по которой узнаем о семействе google шрифтов, используемых на сайте.

Если сайт сделан на CMS WordPress или Joomla, то это также будет видно здесь. Например, в этой области выводится информация о теме WordPress или шаблоне Joomla сайта. Увидеть её можно, прочитав содержание ссылок, выделенных синим цветом. В одной ссылке виден шаблон сайта.

Из этой ссылки видно, что сайт сделан на базе WordPress. На это указывают буквы wp-content и название темы сайта. Перейдя по ссылке:

Мы увидим CSS стили шрифтов страницы. В данном случае используется шрифт. Это видно здесь – font-family: ‘Source Sans Pro’.

Данный сайт оптимизируется с помощью сео-плагина Yoast SEO. Это видно из этого закомментированного участка кода:

This site is optimized with the Yoast SEO plugin v3.4.2 — https://yoast.com/wordpress/plugins/seo/

Вся информация, находящаяся внутри тега body, выводится браузером на экране монитора. Здесь мы видим html код страницы, а в самом низу находится код скрипта Яндекс метрики. Он облечён закомментированным тегом с текстом:

Подводим итоги

Проведя довольно поверхностный анализ кода главной страницы сайта, можно сделать вывод о том, с помощью каких инструментов сделана эта страница. Мы увидели на ней:

  • CMS WordPress;
  • Google шрифт Source Sans Pro;
  • тема WordPress – Sydney;
  • плагины Yoast;
  • счётчик Яндекс метрики.

Теперь принцип анализа html кода страницы сайта вполне понятен. Совсем необязательно держать исследуемую страницу открытой в браузере. Сохранить код страницы себе на компьютер можно с помощью комбинаций клавиш ctrl+a, ctrl+c, ctrl+v. Вставьте её в любой текстовый редактор (лучше Notepad++) и сохраните с расширением html. Таким образом, вы в любое время сможете изучить её глубже и найти больше полезной для себя информации.

Как посмотреть исходный код сайта?

Главная » Уроки и статьи » Интернет

Каждая веб-страница интернета позволяет вам просматривать ее исходный код. Бывают, конечно, исключения, когда код запаролен, но это редкость. В этой статье вы узнаете, как посмотреть исходный код сайта в разных браузерах.

Просмотр исходного кода в браузере Opera

  • Сочетание клавиш «Ctrl + U».
  • Меню Файл «Вид/Средства разработки/Исходный код».

Просмотр исходного кода сайта в Google Chrome

  • Сочетание клавиш «Ctrl + U».
  • Настройка (иконка гаечного ключа в верхнем правом углу) «Инструменты/Просмотреть исходный код».
  • Правая кнопка мыши по сайту – «Просмотр кода страницы».

Просмотр кода сайта в Mozilla Firefox

  • Сочетание клавиш «Ctrl + U».
  • Меню «Firefox/Веб-разработка/Исходный код страницы».
  • Меню Файл «Инструменты/Веб-разработка/Исходный код страницы».

Совет: Если вы не видите меню Файл, нажмите клавишу «Alt» на клавиатуре.

  • Правая кнопка мыши по сайту – «Исходный код страницы».

Просмотр исходного кода веб-страницы в IE

  • Меню Файл «Вид/Просмотр HTML-кода».
  • Правая кнопка мыши по сайту – «Просмотр HTML-кода».

Понравилось? Поделись с друзьями!

Дата: 15.09.2012 Автор/Переводчик: Linchak

Как просмотреть исходный код веб-страницы в браузере

Веб-страница, которую вы читаете, состоит, среди прочего, из исходного кода. Это информация, которую ваш веб-браузер загружает и преобразует в то, что вы сейчас читаете.

Большинство веб-браузеров предоставляют возможность просматривать исходный код веб-страницы без дополнительного программного обеспечения, независимо от того, на каком устройстве вы находитесь. Некоторые даже предлагают расширенные функциональные возможности и структуру, облегчая просмотр HTML и другого программного кода на странице.

Зачем нужен исходный код

Есть несколько причин, по которым вы можете захотеть увидеть исходный код страницы. Если вы веб-разработчик, возможно, вы захотите увидеть конкретный стиль или реализацию другого программиста. Может быть, вы занимаетесь обслуживанием сайта и пытаетесь выяснить, почему определенная часть веб-страницы отображается или ведет себя не так, как должна.

Вы также можете быть новичком, пытаетесь научиться кодировать свои собственные страницы и ищите примеры из реальной жизни. Конечно, возможно, что вы не попадаете ни в одну из этих категорий и просто хотите просмотреть исходный код из чистого любопытства.

Ниже приведены инструкции по просмотру исходного кода в выбранном вами браузере.

Исходный код страницы в Google Chrome

Настольная версия Chrome предлагает три различных способа просмотра исходного кода страницы, первый и самый простой с использованием следующей комбинации клавиш быстрого доступа: CTRL + U (COMMAND + OPTION + U в macOS).

При нажатии этой комбинации вы откроете новую вкладку браузера с HTML и другим кодом активной страницы. Этот источник имеет цветовую кодировку и структурирован таким образом, чтобы упростить выделение и поиск того, что вы ищете. Вы также можете получить это, введя следующий текст в адресную строку Chrome, добавив выделенную часть слева от URL-адреса веб-страницы, и нажав клавишу Enter: view-source: (например, view-source:https://webznam.ru).

Третий метод заключается в использовании инструментов разработчика Chrome, которые позволяют вам глубже погрузиться в код страницы, а также настроить её на лету для целей тестирования и разработки. Интерфейс инструментов разработчика можно открывать и закрывать с помощью сочетания клавиш: CTRL + SHIFT + I (COMMAND + OPTION + I в macOS).

Вы также можете запустить их по следующему пути:

  1. Выберите кнопку главного меню Chrome, расположенную в верхнем правом углу и представленную тремя вертикально выровненными точками.
  2. Когда появится раскрывающееся меню, наведите курсор мыши на параметр «Дополнительные инструменты».
  3. Когда появится подменю, выберите Инструменты разработчика.

Google Chrome на Android

Просмотр источника веб-страницы в Chrome для Android также просто: добавьте следующий текст перед адресом (или URL) – view-source:. HTML и другой код рассматриваемой страницы будет немедленно отображаться в активном окне.

Google Chrome на iOS

Хотя нет собственных методов просмотра исходного кода с помощью Chrome на iPad, iPhone или iPod touch, наиболее простым и эффективным является использование стороннего решения, такого как приложение View Source.

Доступное за $0,99 в App Store, View Source предлагает вам ввести URL-адрес страницы (или скопировать/вставить его из адресной строки Chrome), и всё. Помимо отображения HTML и другого исходного кода, в приложении также есть вкладки, на которых отображаются отдельные ресурсы страницы, объектная модель документа (DOM), а также размер страницы, файлы cookie и другие интересные сведения.

Исходный код страницы в Microsoft Edge

Браузер Edge позволяет просматривать, анализировать и даже манипулировать исходным кодом текущей страницы через интерфейс инструментов разработчика.

Чтобы получить доступ к этому удобному набору инструментов, вы можете использовать одно из этих сочетаний клавиш: F12 или CTRL + U. Если вы предпочитаете мышь, вместо этого нажмите кнопку меню Edge (три точки в верхнем правом углу) и выберите в списке пункт «Средства разработчика F12».

После первого запуска инструментов разработчика Edge добавляет в контекстное меню браузера две дополнительные опции (доступные по щелчку правой кнопкой мыши в любом месте веб-страницы): Проверить элемент и Просмотреть источник , последний из которых открывает интерфейс инструментов разработчика с исходным кодом страницы сайта.

Исходный код страницы в Mozilla Firefox

Чтобы просмотреть исходный код страницы в настольной версии Firefox, вы можете нажать CTRL + U (COMMAND + U на macOS) на клавиатуре, чтобы открыть новую вкладку, содержащую HTML и другой код для активной веб-страницы.

При вводе следующего текста в адресную строку Firefox, непосредственно слева от URL-адреса страницы, на текущей вкладке будет отображён исходный код: view-source: (например, view-source:https://webznam.ru).

Ещё один способ получить доступ к исходному коду страницы – воспользоваться инструментами разработчика Firefox, доступными с помощью следующих шагов.

  1. Выберите кнопку главного меню, расположенную в верхнем правом углу окна браузера и представленную тремя горизонтальными линиями.
  2. Когда появится выпадающее меню, нажмите на Веб-разработка.
  3. Контекстное меню веб-разработчика теперь должно быть видно. Выберите параметр «Исходный код страницы».

Firefox также позволяет вам просматривать исходный код для определенной части страницы, что позволяет легко выявлять проблемы. Для этого сначала выделите интересующую область мышью. Затем щелкните правой кнопкой мыши и выберите

Mozilla Firefox на Android

Просмотр исходного кода в Android версии Firefox достижим через использование view-source: в URL-адресе.

Mozilla Firefox на iOS

Рекомендуемый метод просмотра исходного кода веб-страницы на вашем iPad, iPhone или iPod touch – через приложение View Source, доступное в App Store за $0,99. Хотя оно не интегрировано напрямую с Firefox, вы можете легко скопировать и вставить URL-адрес из браузера в приложение, чтобы раскрыть HTML-код и другой код, связанный с рассматриваемой страницей.

Исходный код страницы в Apple Safari

Хотя Safari для iOS по умолчанию не включает возможность просмотра источника страницы, браузер довольно легко интегрируется с приложением View Source, доступным в App Store за 0,99 долл. США.

После установки этого стороннего приложения вернитесь в браузер Safari и нажмите кнопку «Поделиться», расположенную в нижней части экрана и представленную квадратом и стрелкой вверх. Теперь должен быть виден общий лист iOS, перекрывающий нижнюю половину окна Safari. Прокрутите вправо и нажмите кнопку «Просмотр источника».

Теперь должно отображаться структурированное представление с цветовой кодировкой исходного кода активной страницы вместе с другими вкладками, которые позволяют просматривать ресурсы страницы, сценарии и многое другое.

На MacOS

Чтобы просмотреть исходный код страницы в настольной версии Safari, сначала необходимо включить меню «Разработка». Следующие шаги помогут вам активировать это скрытое меню и отобразить исходный HTML-код страницы:

  1. Выберите Safari в меню браузера, расположенного в верхней части экрана.
  2. Когда появится раскрывающееся меню, выберите параметр Настройки.
  3. Настройки Safari теперь должны быть видны. Нажмите на значок «Дополнительно», расположенный в правой части верхнего ряда.
  4. Внизу раздела «Дополнительно» находится опция «Показать меню разработки» в строке меню, сопровождаемая пустым флажком. Установите этот флажок и закройте окно настроек, щелкнув по красному значку «х» в верхнем левом углу.
  5. Откройте меню «Разработка», расположенное в верхней части экрана.
  6. Когда появится раскрывающееся меню, выберите «Показать источник страницы». Кроме того, можно использовать следующую комбинацию клавиш: COMMAND + OPTION + U.

Исходный код страницы в браузере Opera

Чтобы просмотреть исходный код активной веб-страницы в браузере Opera, используйте следующую комбинацию клавиш: CTRL + U (COMMAND + OPTION + U в macOS). Если вы предпочитаете загружать источник в текущей вкладке, введите следующий текст слева от URL-адреса страницы в адресной строке и нажмите Enter: view-source:

Настольная версия Opera также позволяет просматривать исходный код HTML, CSS и другие элементы с помощью встроенных инструментов разработчика. Чтобы запустить этот интерфейс, который по умолчанию будет отображаться в правой части главного окна браузера, нажмите следующую комбинацию клавиш: CTRL + SHIFT + I (COMMAND + OPTION + I в macOS).

Исходный код в браузере Vivaldi

Существует несколько способов просмотра исходного кода в браузере Vivaldi. Самое простое – это сочетание клавиш CTRL + U, которое представляет код с активной страницы в новой вкладке.

Вы также можете добавить следующий текст в начало URL-адреса страницы, который отображает исходный код на текущей вкладке: view-source:

Другой метод – через интегрированные инструменты разработчика браузера, доступные по сочетанию клавиш CTRL + SHIFT + I или через опцию средств разработчика в меню.

Исходный HTML-код страницы сайта — как посмотреть и внести изменения при помощи консоли

При заходе на тот или иной сайт, или же при просмотре своего собственного — может возникнуть желание посмотреть, как написан какой-либо элемент на HTML, а также внести изменения в код страницы без ее перезагрузки и посмотреть изменения. Подсмотренный образец можно использовать в дальнейшем и в своих разработках.

Для этого в браузерах существует специальная функция – режим просмотра исходного кода страницы.

Просмотреть исходный код страницы обычно можно двумя способами – просто открыть его в отдельной вкладке, либо же открыть консоль разработчика, встроенную в браузер и перейти во вкладку просмотра кода.

Первый вариант позволит просто просмотреть код, для этого можно нажать правую кнопку мыши на странице и выбрать пункт меню, который примерно называется «Просмотр кода страницы» или же нажать горячее сочетание клавиш – обычно CTRL + U. Второй же способ предоставляет богатую функциональность для управления исходным кодом страницы. Он и будет рассмотрен ниже на примере браузера Google Chrome.

Находясь на странице сайта, можно навести на элемент и нажать правую клавишу, затем выбрать «Просмотреть код». Такой подход хорош тем, что сразу открывается консоль в нужной вкладке и устанавливается позиция на данный элемент, что позволяет не тратить время на отыскивание элемента среда всего кода.

Аналогично можно открыть консоль и нажать на кнопку в самом верхнем левом углу консоли или сочетание клавиш CTRL + SHIFT + C – в результате браузер перейдет в режим подсветки элементов при наведении на них курсора. После наведения остается кликнуть по элементу и в консоли будет установлена позиция на нужный элемент.

Консоль позволяет выполнять большое количество операций над элементами и предоставляет дополнительный функционал. Она позволяет:

  • сворачивать и разворачивать содержимое тегов;
  • добавлять новые теги;
  • вносить изменения в теги;
  • удалять полностью весь тег с его содержимым;
  • копировать путь к элементу, для этого необходимо навести на элемент и нажать правую кнопку мыши, после чего выбрать пункт «Copy»«Copy selector» или «Copy XPath»;
  • установить (эмулировать) какое-либо состояние для элемента, например, наведение курсора мыши или нажатие;
  • скопировать полностью весь код элемента или только его содержимое.

Перечислены лишь только некоторые возможности, которые предоставляет консоль разработчика, встроенная в браузер.

Как видно из статьи, используя только лишь современный браузер, можно досконально изучить исходный HTML-код любой страницы сайта, а также выполнить разнообразные манипуляции над кодом. Все это может помочь разработчикам различных уровней подготовки разрабатывать проекты более эффективно.

13 октября 2021 Опубликовано в разделах: Азбука терминов. 61882

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Его можно сравнить с набором команд, которые дает солдатам командир. Представьте, что зрители не видят и не слышат начальника. С их точки зрения военные самостоятельно выполняют действия. В нашем случае командир – это браузер, команды – это исходный код, а марширующие солдаты – это конечный результат.

Хранится сайт на веб-сервере, который отправляет страницу по запросу пользователя. Запрос – это ввод URL в строке адреса, щелчок по ссылке или нажатие на кнопку отправки данных в форме. Не важно, на каком языке написаны веб-страницы, включают ли они программную часть. Конечным результатом работы любого серверного алгоритма является набор html-тегов и текста.
Исходный код страницы – это набор данных, включающий в себя:

  • html-разметку;
  • стилевую таблицу или ссылку на файл css;
  • программы, написанные на JavaScript или ссылки на файлы с кодом.

Эти три раздела обрабатываются браузером. Для сервера это просто текст, который необходимо отправить в ответ на запрос.

Зачем нам может понадобиться изучать исходный код

Все, что мы увидим, мы сможем проанализировать и применить для решения тех или иных задач, которые возникают в ходе работы с сайтом, особенно при его оптимизации. Просмотрев исходный код, мы можем:

  • Увидеть мета-теги своего или чужого сайта для их анализа.
  • Увидеть наличие или отсутствие некоторых элементов на сайте: счетчиков, кодов идентификации в различных системах, определенных скриптов и прочего.
  • Узнать параметры элементов: размеры, цвета, шрифты.
  • Найти путь к фотографиям и другим элементам, располагающимся на странице.
  • Изучить ссылки со страницы.
  • Найти проблемы с кодом, мешающие в процессе оптимизации сайта: невынесенные в отдельные файлы стили, скрипты, невалидный код.

Это основные возможности, но на самом деле, умея читать код, вы сможете узнать о странице намного больше.

Как посмотреть исходный код сайта

Полностью в том виде, в каком он выложен на сервере, из браузера это сделать не удастся. А вот увидеть всю разметку можно, нажав на странице правую кнопку мыши. Здесь и далее на примере Google Chrome.

Выбираем опцию «Просмотр кода страницы» и получаем полный листинг в отдельной вкладке.

Это просто текст, который придется анализировать, чтобы понять. А вот получить интерактивный код можно с помощью инструментов разработчика.

Как найти исходный код страницы сайта

Нажимаем на значок меню в браузере. Чаще всего он находится справа и имеет вид трех точек или полосок.

В разделе дополнительных инструментов выбираем «Инструменты разработчика».

Откроется окно, в котором отображается активное состояние кода. Это значит, что при щелчке мыши на разметке рядом отобразится стиль элемента, а на странице будут подсвечиваться выбранные блоки.

Во вкладке «Source» можно просмотреть содержимое некоторых файлов: скрипты, шрифты, изображения.

Их можно сохранить. Для этого нажимаем правую кнопку мыши (ПКМ) и выбираем «Save».

Во вкладке «Security» доступна проверка сертификата сайта.

Вкладка «Audits» поможет провести проверку выложенного на хостинг ресурса.

Если расположение панели справа неудобно, можно нажать три точки и поменять его, выбрав желаемый пункт.

Как посмотреть мета-теги

Каждый html-документ включает в себя теги структуры. Вот некоторые из них:

  1. Html – весь документ.
  2. Head – раздел служебных заголовков.
  3. Title – заголовок страницы (отображается на вкладке).
  4. Body – тело документа.
  5. H1-H6 – заголовки текста страницы.
  6. Article – статья.
  7. Section – раздел.
  8. Menu – меню.
  9. Div – блок.
  10. Span – строка.
  11. P – абзац.
  12. Table – таблица.

Элементы предназначены для логического разграничения разделов на странице, при необходимости они оформляются с помощью стилей. В них размещается текст, который так или иначе виден на странице. Но в теге Head присутствует служебная информация. Для ее указания служат мета-теги. Все что в них записано, предназначено для сервера и поисковых систем.

Их содержимое другим способом узнать невозможно.

Обратим внимание на тег Link. С его помощью указываются ссылки на внешние подключаемые файлы. При желании можно увидеть содержимое и сохранить на диск. Для этого наведите указатель на адрес и нажмите ПКМ. Выберите пункт «Open in new Tab».

В новой вкладке откроется указанный файл, который можно просмотреть или сохранить.

Как посмотреть исходный код страницы для отладки скрипта

В этом случае удобнее всего открывать страницу на локальной машине. Если необходимо только исправить разметку, стили и скрипты, то это можно делать прямо из папки. Html-код просматривается таким же образом. А вот ошибки кода JavaScript можно увидеть во вкладке «Console». Здесь показывает описание ошибки и номер строки, в которой она возникла.

Синтаксическую можно увидеть непосредственно в коде. Для этого предназначена вкладка «Source».

Как посмотреть код конкретного элемента

Для больших страниц с большим количеством элементов сложно найти нужный код во всей разметке. В таком случае следует воспользоваться специальной командой контекстного меню. Наведем мышь на фрагмент и нажмем ПКМ. Выберем команду «Просмотреть код».

Откроется то же окно, но с фокусировкой на выбранном объекте.

Резюме

Мы рассказали, что такое исходный код страницы. Достаточно освоить элементарные знания HTML и CSS, и пользуясь удобными инструментами разработчика, вы сможете проводить отладку своих собственных html-документов.

Просмотр кода ресурсов в интернете позволит вам учиться не только на собственном опыте, но и использовать реальные рабочие примеры. А для seo-специалистов будут полезны мета-теги, информация в которых может сказать о сайте многое.

Веб-страница, которую вы читаете, состоит, среди прочего, из исходного кода. Это информация, которую ваш веб-браузер загружает и преобразует в то, что вы сейчас читаете.

Большинство веб-браузеров предоставляют возможность просматривать исходный код веб-страницы без дополнительного программного обеспечения, независимо от того, на каком устройстве вы находитесь. Некоторые даже предлагают расширенные функциональные возможности и структуру, облегчая просмотр HTML и другого программного кода на странице.

Зачем нужен исходный код

Есть несколько причин, по которым вы можете захотеть увидеть исходный код страницы. Если вы веб-разработчик, возможно, вы захотите увидеть конкретный стиль или реализацию другого программиста. Может быть, вы занимаетесь обслуживанием сайта и пытаетесь выяснить, почему определенная часть веб-страницы отображается или ведет себя не так, как должна.

Вы также можете быть новичком, пытаетесь научиться кодировать свои собственные страницы и ищите примеры из реальной жизни. Конечно, возможно, что вы не попадаете ни в одну из этих категорий и просто хотите просмотреть исходный код из чистого любопытства.

Ниже приведены инструкции по просмотру исходного кода в выбранном вами браузере.

Исходный код страницы в Google Chrome

Настольная версия Chrome предлагает три различных способа просмотра исходного кода страницы, первый и самый простой с использованием следующей комбинации клавиш быстрого доступа: CTRL + U ( COMMAND + OPTION + U в macOS).

При нажатии этой комбинации вы откроете новую вкладку браузера с HTML и другим кодом активной страницы. Этот источник имеет цветовую кодировку и структурирован таким образом, чтобы упростить выделение и поиск того, что вы ищете. Вы также можете получить это, введя следующий текст в адресную строку Chrome, добавив выделенную часть слева от URL-адреса веб-страницы, и нажав клавишу Enter : view-source: (например, view-source:https://webznam.ru).

Третий метод заключается в использовании инструментов разработчика Chrome, которые позволяют вам глубже погрузиться в код страницы, а также настроить её на лету для целей тестирования и разработки. Интерфейс инструментов разработчика можно открывать и закрывать с помощью сочетания клавиш: CTRL + SHIFT + I ( COMMAND + OPTION + I в macOS).

Вы также можете запустить их по следующему пути:

  1. Выберите кнопку главного меню Chrome, расположенную в верхнем правом углу и представленную тремя вертикально выровненными точками.
  2. Когда появится раскрывающееся меню, наведите курсор мыши на параметр «Дополнительные инструменты».
  3. Когда появится подменю, выберите Инструменты разработчика.

Google Chrome на Android

Просмотр источника веб-страницы в Chrome для Android также просто: добавьте следующий текст перед адресом (или URL) – view-source:. HTML и другой код рассматриваемой страницы будет немедленно отображаться в активном окне.

Google Chrome на iOS

Хотя нет собственных методов просмотра исходного кода с помощью Chrome на iPad, iPhone или iPod touch, наиболее простым и эффективным является использование стороннего решения, такого как приложение View Source.

Доступное за $0,99 в App Store, View Source предлагает вам ввести URL-адрес страницы (или скопировать/вставить его из адресной строки Chrome), и всё. Помимо отображения HTML и другого исходного кода, в приложении также есть вкладки, на которых отображаются отдельные ресурсы страницы, объектная модель документа (DOM), а также размер страницы, файлы cookie и другие интересные сведения.

Исходный код страницы в Microsoft Edge

Браузер Edge позволяет просматривать, анализировать и даже манипулировать исходным кодом текущей страницы через интерфейс инструментов разработчика.

Чтобы получить доступ к этому удобному набору инструментов, вы можете использовать одно из этих сочетаний клавиш: F12 или CTRL + U . Если вы предпочитаете мышь, вместо этого нажмите кнопку меню Edge (три точки в верхнем правом углу) и выберите в списке пункт «Средства разработчика F12».

После первого запуска инструментов разработчика Edge добавляет в контекстное меню браузера две дополнительные опции (доступные по щелчку правой кнопкой мыши в любом месте веб-страницы): Проверить элемент и Просмотреть источник, последний из которых открывает интерфейс инструментов разработчика с исходным кодом страницы сайта.

Исходный код страницы в Mozilla Firefox

Чтобы просмотреть исходный код страницы в настольной версии Firefox, вы можете нажать CTRL + U ( COMMAND + U на macOS) на клавиатуре, чтобы открыть новую вкладку, содержащую HTML и другой код для активной веб-страницы.

При вводе следующего текста в адресную строку Firefox, непосредственно слева от URL-адреса страницы, на текущей вкладке будет отображён исходный код: view-source: (например, view-source:https://webznam.ru).

Ещё один способ получить доступ к исходному коду страницы – воспользоваться инструментами разработчика Firefox, доступными с помощью следующих шагов.

  1. Выберите кнопку главного меню, расположенную в верхнем правом углу окна браузера и представленную тремя горизонтальными линиями.
  2. Когда появится выпадающее меню, нажмите на Веб-разработка.
  3. Контекстное меню веб-разработчика теперь должно быть видно. Выберите параметр «Исходный код страницы».

Firefox также позволяет вам просматривать исходный код для определенной части страницы, что позволяет легко выявлять проблемы. Для этого сначала выделите интересующую область мышью. Затем щелкните правой кнопкой мыши и выберите Исходный код выделенного фрагмента из контекстного меню браузера.

Mozilla Firefox на Android

Просмотр исходного кода в Android версии Firefox достижим через использование view-source: в URL-адресе.

Mozilla Firefox на iOS

Рекомендуемый метод просмотра исходного кода веб-страницы на вашем iPad, iPhone или iPod touch – через приложение View Source, доступное в App Store за $0,99. Хотя оно не интегрировано напрямую с Firefox, вы можете легко скопировать и вставить URL-адрес из браузера в приложение, чтобы раскрыть HTML-код и другой код, связанный с рассматриваемой страницей.

Исходный код страницы в Apple Safari

Хотя Safari для iOS по умолчанию не включает возможность просмотра источника страницы, браузер довольно легко интегрируется с приложением View Source, доступным в App Store за 0,99 долл. США.

После установки этого стороннего приложения вернитесь в браузер Safari и нажмите кнопку «Поделиться», расположенную в нижней части экрана и представленную квадратом и стрелкой вверх. Теперь должен быть виден общий лист iOS, перекрывающий нижнюю половину окна Safari. Прокрутите вправо и нажмите кнопку «Просмотр источника».

Теперь должно отображаться структурированное представление с цветовой кодировкой исходного кода активной страницы вместе с другими вкладками, которые позволяют просматривать ресурсы страницы, сценарии и многое другое.

На MacOS

Чтобы просмотреть исходный код страницы в настольной версии Safari, сначала необходимо включить меню «Разработка». Следующие шаги помогут вам активировать это скрытое меню и отобразить исходный HTML-код страницы:

  1. Выберите Safari в меню браузера, расположенного в верхней части экрана.
  2. Когда появится раскрывающееся меню, выберите параметр Настройки.
  3. Настройки Safari теперь должны быть видны. Нажмите на значок «Дополнительно», расположенный в правой части верхнего ряда.
  4. Внизу раздела «Дополнительно» находится опция «Показать меню разработки» в строке меню, сопровождаемая пустым флажком. Установите этот флажок и закройте окно настроек, щелкнув по красному значку «х» в верхнем левом углу.
  5. Откройте меню «Разработка», расположенное в верхней части экрана.
  6. Когда появится раскрывающееся меню, выберите «Показать источник страницы». Кроме того, можно использовать следующую комбинацию клавиш: COMMAND + OPTION + U .

Исходный код страницы в браузере Opera

Чтобы просмотреть исходный код активной веб-страницы в браузере Opera, используйте следующую комбинацию клавиш: CTRL + U ( COMMAND + OPTION + U в macOS). Если вы предпочитаете загружать источник в текущей вкладке, введите следующий текст слева от URL-адреса страницы в адресной строке и нажмите Enter : view-source:

Настольная версия Opera также позволяет просматривать исходный код HTML, CSS и другие элементы с помощью встроенных инструментов разработчика. Чтобы запустить этот интерфейс, который по умолчанию будет отображаться в правой части главного окна браузера, нажмите следующую комбинацию клавиш: CTRL + SHIFT + I ( COMMAND + OPTION + I в macOS).

Исходный код в браузере Vivaldi

Существует несколько способов просмотра исходного кода в браузере Vivaldi. Самое простое – это сочетание клавиш CTRL + U , которое представляет код с активной страницы в новой вкладке.

Вы также можете добавить следующий текст в начало URL-адреса страницы, который отображает исходный код на текущей вкладке: view-source:

Другой метод – через интегрированные инструменты разработчика браузера, доступные по сочетанию клавиш CTRL + SHIFT + I или через опцию средств разработчика в меню.

Опишу практически универсальный способ копирования. Обычно скрипты и теги, защищающие от копирования, прописаны в заголовке кода страницы или в самом ее начале. Сам текст и картинки, которые нужно скопировать, располагаются где-то в середине исходного кода страницы. В них уже нет тегов, защищающих от копирования. Задача в том, чтобы в исходном коде страницы найти, выделить и скопировать нужный текст и картинки.

Для начала вам надо открыть исходный код страницы.

Для этого в Internet Explorer идем Вид -> Просмотр HTML-кода.

В Firefox надо пройти Инструменты -> Веб-разработка — Исходный код страницы.

В Google Chrome щелкнуть по значку Настройка в правом верхнем углу. Затем выбрать Инструменты -> Просмотреть исходный код.
В Opera щелкните по кнопке Opera в левом верхнем углу экрана и в меню выберите Инструменты разработчика — Просмотреть исходный текст.

Обычно в начале кода страницы идут описания стилей, различные скрипты для защиты от копирования, рекламные ссылки и т.д. Мы все это пропускаем и ищем собственно текст, картинки, т.е. то, что хотим скопировать. В текст будут вкраплены html — теги. Постарайтесь определить начало и конец такого цельного, завершенного фрагмента, который вам нужен. Он начинается тегами div, p, тегами заголовков h1,h2,h3, тегами таблиц table и т.п. Обычно такой текст располагается кучно и его довольно легко определить в исходном коде страницы. Он находится где-то в середине кода.
Но иногда целый абзац текста или даже статья может быть в одной, очень длинной строке. Внимательно просматривайте исходный код, чтобы не пропустить такую строку. Особенно трудно бывает ее увидеть, когда на странице много рекламных вставок. Также затруднительно выделить фрагмент самой статьи, когда в ней мало текста и очень много вставленных картинок.
Выделите мышкой этот фрагмент и скопируйте в буфер обмена (Ctrl + C). Откройте Блокнот или другой простой текстовый редактор (Notepad и т.п.) и вставьте текст из буфера. MS Word для этой цели не подойдет.
При просмотре кода не копируйте рекламные вставки вроде Яндекс.Директ и т.п. Но даже если вы нечаянно скопируете их, в полученном документе они вряд ли будут отображаться, так как выпадают из контекста отображения страницы.

Чтобы текст корректно отображался в браузере, первой строкой впишите тег , а в конце текста впишите закрывающий тег . Сохраните текст в виде файла с расширением htm.

Задача решена. В проводнике щелкните по имени файла и он откроется в вашем браузере по умолчанию. При таком способе открытия Windows иногда некорректно отображает страницу, поэтому лучше в меню браузера выбирать Файл — Открыть файл. В Firefox для этого надо включить Панель меню, если она отключена.
Нужная вам информация будет отображаться на экране, хотя и не так красиво, как на исходной странице. Значит, вам все-таки удалось скопировать страницу на свой компьютер.

Иногда вместо читаемого текста отображаются кракозябры, так как html- файл получился не совсем корректный. В этом случае просто надо поменять кодировку текста. В Firefox, например, в верхнем меню идем Вид — Кодировка текста и выбираем Юникод или иногда более старую — кириллицу (Windows). Другой способ — изменить кодировку принудительно, прописав ее в заголовке файла. Можно попробовать разные кодировки. Для этого в самом начале htm-файла после тега пропишите строки, например, так:

Определить кодировку текста можно в программе Notepad++. Откройте htm-файл в этой программе. Внизу окна в строке состояния будет указана кодировка. Останется прописать ее в теге . Можно поменять кодировку. В верхнем меню выберите Кодировка. В открывшемся списке выберите Преобразовать в нужную кодировку. В строке состояния поменяется кодировка. Сохраните полученный файл.

Если текст отобразился в виде таблицы, но ячейки не выделены линиями, то это тоже нетрудно исправить. В htm — файле найдите тег table и в конце тега допишите border=1 cellspacing=0. Получится примерно так:

Сохраните файл и откройте в браузере — таблица будет выделена тонкими линиями. Если убрать cellspacing=0, то ячейки таблицы выделятся двойными линиями.

Но каждый раз открывать страницу в браузере не очень удобно. Ещё часто бывает так, что текст копируется, а картинки — нет. Поэтому продолжим. Снова выделим текст полученной htm-страницы, скопируем и вставим в документ Word. Придется вручную вставить картинки в Word’овский документ.
На странице сайта щелкните по картинке правой кнопкой мыши (ПКМ) и в меню выберите Сохранить изображение как . . Откроется окно Сохранение, в котором тип файла должен быть JPEG Image или другой графический формат (GIF, PNG). Введите желаемое имя файла или оставьте то, которое указано. Запомните место, где сохранили картинку. Откройте документ Word и поставьте курсор туда, где должна быть картинка. В главном меню Word выберите Вставка — Рисунок. В окне Вставка рисунка выберите сохраненную картинку и нажмите Вставить. Картинка будет вставлена в документ в нужном месте. Повторите эти действия для всех остальных картинок. Не забудьте сохранить измененный документ Word.
В Linux вместо Блокнота можно использовать текстовый редактор gedit или подобный, а вместо Word — свободный пакет LibreOffice.

Короче, вы поняли? Сначала в Блокноте создаем html — документ без защитных скриптов и рекламных вставок, содержащий необходимую вам информацию, затем открываем его в вашем любимом браузере.
Всю открывшуюся страницу выделяем и копируем в Word. Но! Иногда бывает так, что индикатор мышки крутится, а текст на вставляется в документ Word — придется немного подождать. Если никакое ожидание не помогает, то сделайте следующее. Выделенный фрагмент вставьте в текстовый редактор Notepad. В тексте будут присутствовать абзацы и заголовки, что и требовалось. Снова выделите весь текст и скопируйте в документ Word. Текст должен вставиться без проблем, так как в нем теперь отсутствуют теги, которые сбивали с толку MS Word. Далее можно поменять шрифт, выделить заголовки и т.д.
Если картинки не скопировались, то снова идем на сайт. Копируем по очереди картинки с сайта и вставляем в нужные места Word’овского документа. Сохраняем документ Word. Такая вот технология. В 90 % случаев она прекрасно работает.
Бывает случай, когда картинка выделяется, команда на копирование также принимается, но в документ вставляется «пустое место» вместо картинки. Но ничто не мешает вам сделать скриншот картинки и потом вставить его в документ. Проще это сделать в Linux. В пакете стандартных программ имеется утилита Снимок экрана. Она позволяет сделать скриншот всего экрана, активного окна или выделенной области экрана. Можно задать задержку для снимка. В Windows лучше всего установить какую-либо утилиту для снятия скриншота выделенной области экрана.

Однако простое копирование ФРАГМЕНТА кода веб-страницы не всегда помогает. Например, могут скопироваться заголовки абзацев, а содержимое абзацев отсутствует. Тогда придется скопировать почти весь код веб-страницы, НО не копируйте строки кода защиты от копирования. Обычно они идут в самом начале веб-страницы, об этом написал выше. Отличить их довольно легко от строк, в которых уже идет текст с нужной вам информацией. Также в конце веб-страницы можно не копировать код со ссылками на рекламу и т.п.

Иногда картинки вылазят за край листа или, наоборот, очень маленькие. Это легко исправить. Щелкните по картинке (появятся квадратики по углам). Подведите курсор мыши к нижнему левому (правому) углу картинки. Как только появится двунаправленная стрелка, нажмите левую кнопку мыши и, не отпуская ее, перемещайте курсор внутрь (или наружу) по диагонали картинки, уменьшая (или растягивая) ее. Отпустите кнопку. Картинка уменьшится (увеличится) в размерах и разместится в пределах листа.
Часто бывает так, что текст после вставки выравнивается по ширине страницы, т.е. между словами вставлено по нескольку пробелов. Такой текст неудобно читать. Для исправления выделите весь текст и щелкните по кнопке Выравнивание по левому краю.

Если картинка маленькая и плохо различимы детали, попробуйте щелкнуть по ней, чтобы она предстала в увеличенном размере. Многие сайты позволяют делать это. Остается сохранить эту увеличенную копию картинки. Бывает, что увеличенную картинку не удается скопировать или сохранить. При щелчке правой кнопкой мыши по картинке выдается меню, в котором пункты Копировать ссылку и т.д., но нет пункта Сохранить как . или Копировать изображение. Такое бывает при просмотре галереи изображений. Тогда открываем исходный код страницы и в нем ищем ссылку на картинку, в которой указано расширение .jpg. Например, что-то вроде http://j.klhis.com/9GPc1A.jpg. Щелкаем по ссылке. Должно открыться изображение. Если не угадали, то ищем следующую подобную ссылку. Когда требуемая картинка найдена, щелкаем по ней ПКМ и выбираем пункт Сохранить как. или Копировать изображение. Проверьте, чтобы сохраняемый файл имел расширение .jpg, .png или .gif, т.е. графический формат.

Бывает, что вебмастер вставляет текст на страницу в виде картинки. Выделить текст и скопировать не удается, но можно скопировать саму картинку и вставить в Word. Щелкните правой кнопкой мыши (ПКМ) по тексту и в меню выберите Сохранить изображение как... Если в меню отсутствует такой пункт, а есть Сохранить как. значит браузер предлагает сохранить ее в виде веб-страницы. В данном случае это не требуется. Тогда кликните по тексту мышкой, обычно после этого текст представляется в увеличенном виде. Снова щелкните ПКМ, в меню должен появиться пункт Сохранить изображение как.. так как текст будет отображаться в виде изображения. Сохраните изображение и затем вставьте в Word. Аналогично можно скопировать и другие страницы текста.

Пока я знаю один ресурс, где этот прием не работает. Это Google Play Книги.

Бесплатный фрагмент книги выделяется, но скопировать его не удается. Можно поступить следующим образом.

Выделить нужный фрагмент страницы книги и нажать в окне меню пункт Поиск в книге. В новом окне снова выделяем нужный фрагмент и нажимаем Ctrl+C.

Теперь фрагмент удается скопировать и вставить в документ Word. Только переносы строк сбиваются, приходится вручную корректировать. Поставьте курсор в нужное место и нажмите клавиши Shift+Enter для переноса строки. Это все же лучше, чем совсем ничего. Этим способом плохо копируется текст на двух языках (англ. и русский) или содержащий специальные символы.

Иногда на фоне вставленной картинки не видно текст, так как цвета текста и фона совпадают. Выделите этот блок и измените цвет фона или цвет текста, чтобы текст выделился.

Бывает, что страница копируется без проблем, но текст, вставленный в Word, бледно серого цвета и все строки подчеркнуты. Такой текст трудно читать и маскируются ссылки, содержащиеся в тексте. Такое случается при табличной верстке сайта. В исходном коде видны табличные теги table, tr, td. Конечно, можно вручную удалить их. Но это занятие неблагодарное. Проще сделать по-другому. На странице сайта выделим первый абзац текста и скопируем его. Вставим абзац в новый документ Word. Щелкнем правой кнопкой мыши по картинке, следующей за абзацем, и выберем в меню Копировать изображение. Вставим картинку в документ Word следом за абзацем, скопированным ранее. Таким способом можно скопировать всю информацию со страницы в документ Word. Текст нормально отображается и в нем сохраняются все ссылки на другие ресурсы. Это тоже утомительно, но результат того стоит. Т.е. мы раздельно копируем ячейки табличной верстки в документ Word.

Часто на странице располагаются таблицы, которые нужно скопировать. Используйте для этих целей браузер Internet Explorer. При всех его недостатках он корректно копирует таблицы. Microsoft Edge из Windows 10 тоже правильно копирует таблицы. Выделите таблицу и нажмите Копировать (Ctrl+C). Откройте MS Word и вставьте скопированный фрагмент. Таблица должна без искажений вставиться в документ MS Word. При использовании браузеров Firefox, Opera и Google Chrome вы, скорее всего, вместо таблицы получите сплошной абзац текста с набором слов без какого-либо разбиения на строки и столбцы.

Иногда текст на сайте есть, а в htm-файле его нет — вместо него пробелы и переводы строк. И как картинку этот блок текста сохранить не удается. Часто такое бывает в статьях, посвященных языку html. Тогда применяю «силовой» прием. Делаю скрин нужной части странички (нажать Alt+ PrintScreen для сохранения активного окна). Запускаем Paint и вставляем изображение (Ctrl+V). Нажимаем инструмент Выделить и выделяем нужную часть картинки. Нажимаем ПКМ и выбираем в меню пункт Копировать. Идем в документ Word, ставим курсор в нужное место и вставляем картинку (Ctrl+V).

Если вы хорошо разбираетесь в html-коде, то можете найти и удалить (закомментировать) в исходном коде скрипт, защищающий от копирования. Остается сохранить измененный код в виде htm — файла.

Выделите мышкой исходный код или в меню выберите Выделить все. Нажмите Ctrl + C или в меню выберите Копировать. Вставьте скопированный код в Блокнот (только не в Word!). WordPad также не рекомендуется использовать. Он иногда выдает ошибку при вставке текста.

Исходный код — это текст, имеющий заголовок — head и тело — body. Найдите в нем строку наподобие такой:

В этом теге указаны параметры защиты от копирования. Нужно удалить эти параметры, оставив те, которые не влияют на защиту. В данном случае можно оставить параметр, задающий цвет фона, а остальные удалить. Получится так:

Другой вариант — закомментируйте исходный тег и впишите новый укороченный.

Сохраните откорректированный текст в виде текстового файла с расширением .htm. Откройте сохраненную страницу в браузере. Для этого в строке для ввода названия сайта впечатайте имя файла htm. Или просто щелкние по имени файла и он откроется в браузере. Теперь становится возможным выделять и копировать текст, картинки и вставлять их в Word или в другую программу.

Часто корректировать код даже не требуется, после сохранения в виде файла .htm копирование становится возможным без всяких исправлений.

Вебмастера применяют разные методы защиты от копирования. Если описанное выше не помогло, попробуйте удалить заголовок html-файла, т.е. весь текст между тегами и . Отображение html — страницы нарушится, но зато станет возможным копирование. Скопированную страницу можно вставить в MS Word и отредактировать по своему усмотрению.

Если вам надо скопировать текст без графики, то можно использовать текстовый браузер. В Linux есть несколько текстовых (консольных) браузеров. Они отображают только текст без графики и рекламы, поэтому работают очень быстро. Их можно использовать и для копирования защищенных страниц.
Для копирования обычного текста без таблиц можно использовать браузер lynx, есть версия для Windows. В браузере lynx просто выделите текст мышкой и скопируйте в буфер обмена. Внизу экрана расположены строка состояния и строки подсказки.
Если страница содержит таблицы и фреймы, то используйте links. Он корректно выводит таблицы. Например, указанную выше страницу можно скопировать так. В Linux раскройте окно терминала на весь экран и дайте команду links metmk.com.ua/inch.php.

Если русский текст выводится английскими буквами (транслитерация), то нужно сделать настройки. Нажмите Esc, появится строка верхнего меню. В нем выбираем File -> Setup -> Character Set. В списке выбираем кодировку Unicode UTF-8 или другую русскую кодировку, в которой написана веб-страница. Ее можно посмотреть в исходном коде страницы в заголовке. Также можно поменять язык меню на русский. Идем File -> Setup -> Language -> Russian. И последнее: Файл -> Настройка -> Сохранить настройки.
В меню выбираем Сохранить форматированный документ. Сохраняем в виде обычного текстового файла. Причем текст будет черными буквами на белом фоне. Как говорится, дешево и сердито.
Для перехода на другую страницу щелкните по ссылке. Ссылки выделены более ярким цветом.

Как скопировать код страницы сайта