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

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

Создано: 23.08.18 Категория: HTML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

После того как мы сделали все страницы сайта, находим и копируем все его css стили и java скрипты. Для этого кликаем по ссылкам, ведущим на 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 могут быть приблизительно такими:

<link rel=”stylesheet” href=”css/style.css” />

<script src=”js/common.js”></script>

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

<img src=”images/logo.png” /></a>

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

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

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

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

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

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

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

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

После копируем url нужного сайта и вводим wget –page-requisites -r -l 10 http://adress-sayta.com и запускаем консоль. (Параметр –page-requisites отвечает за то чтобы все картинки, шрифты и стили сайта скачались. Если оставить этот параметр и вставить в конце только url сайта, то загрузится только его главная страница. Поэтому нужно добавить ключи -l и -r и 10-ый уровень вложенности глубины загрузки.

Как сохранить страницу сайта на компьютере?

Чтобы иметь доступ к содержимому какого-то веб-портала даже без подключения к сети, надо сделать локальную копию страницы (скрин, текстовый или HTML-файл), которая будет храниться на диске. Так вы в любой момент сможете изучить находящуюся там информацию. Конечно, если компьютер с необходимыми данными окажется рядом. Можно перенести не только текстовый контент, но и картинки, элементы форматирования, структуру. Узнайте, как сделать скриншот страницы ресурса глобальной сети, скопировать её сразу со всем графическим и мультимедийным контентом или сохранить её содержимое в виде файла.

Скопировать из браузера

Можно перенести данные из обозревателя в любой текстовый редактор. Для этого лучше всего подойдёт Microsoft Word. В нём корректно отображаются изображения и форматирование. Хотя из-за специфики документа может не очень эстетично выглядеть реклама, меню и некоторые фреймы.

Вот как скопировать страницу сайта:

  1. Откройте нужный URL.
  2. Нажмите Ctrl+A. Или кликните правой кнопкой мыши по любой свободной от картинок и flash-анимации области и в контекстном меню выберите «Выделить». Это надо сделать для охвата всей информации, а не какого-то произвольного куска статьи.
  3. Ctrl+C. Или в том же контекстном меню найдите опцию «Копировать».
  4. Откройте Word.
  5. Поставьте курсор в документ и нажмите клавиши Ctrl+V.
  6. После этого надо сохранить файл.

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

  1. Проделайте предыдущие шаги до пункта 4.
  2. Кликните в документе правой кнопкой мыши.
  3. В разделе «Параметры вставки» отыщите кнопку «Сохранить исходное форматирование». Наведите на неё — во всплывающей подсказке появится название. Если у вас компьютер с Office 2007, возможность выбрать этот параметр появляется только после вставки — рядом с добавленным фрагментом отобразится соответствующая пиктограмма.

Способ №1: копипаст

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

Сайты с защитой от копирования

Иногда на ресурсе стоит так называемая «Защита от копирования». Она заключается в том, что текст на них нельзя выделить или перенести в другое место. Но это ограничение можно обойти. Вот как это сделать:

  1. Щёлкните правой кнопкой мыши в любом свободном месте страницы.
  2. Выберите «Исходный код» или «Просмотр кода».
  3. Откроется окно, в котором вся информация находится в html-тегах.
  4. Чтобы найти нужный кусок текста, нажмите Ctrl+F и в появившемся поле введите часть слова или предложения. Будет показан искомый отрывок, который можно выделять и копировать.

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

  1. Выделите весь html-код.
  2. Откройте редактор веб-страниц.
  3. Скопируйте туда этот код.
  4. Перейдите в режим просмотра, чтобы увидеть, как будет выглядеть копия.
  5. Перейдите в Файл — Сохранить как. Выберите тип файла (лучше оставить по умолчанию HTML), укажите путь к папке, где он будет находиться, и подтвердите действие. Он сохранится на электронную вычислительную машину.

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

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

Скриншот

Снимок экрана — это самый простой способ добавить какую-то информацию на компьютер. Она сохраняется в виде графического файла. Его можно открыть и просмотреть в любое время. Вот как сделать скрин:

  1. Зайдите на нужный портал.
  2. Нажмите на клавиатуре кнопку PrintScreen (иногда она называется «PrntScr» или «PrtSc»). Снимок экрана будет добавлен в буфер обмена — временное хранилище, используемое при операциях «Копировать-Вставить».
  3. Откройте любой графический редактор. В операционной системе Windows есть свой — называется «Paint». Можете воспользоваться им. В нём можно обрезать и немного подкорректировать скриншот. Для более серьёзного редактирования графики надо устанавливать на компьютер профессиональные программы (Adobe Photoshop, к примеру). Но чтобы просто сделать копию страницы, хватит и собственных средств Windows.
  4. Вставьте скрин в редактор. Для этого нажмите Ctrl+V.
  5. Можно добавить его и в текстовый процессор (тот же Word), который поддерживает работу с графикой.

Получить снимок страницы можно с помощью графических редакторов. Например, Paint.

Информация будет представлена в виде сплошной картинки, а не набора символов. Если понадобится скопировать какую-то часть материала, придётся перепечатывать его вручную. Ведь скриншот — не статья. Чтобы облегчить задачу, воспользуйтесь утилитами для распознавания текста с рисунков.

Так удобно копировать небольшие куски. Но вот с объёмным контентом сложнее. Придётся делать много снимков, прокручивать, часто открывать редактор. Но можно разобраться, как сделать скрин всей страницы портала, а не её части. Используйте специализированные программы.

Утилиты для создания скриншотов

Существуют программы для работы со снимками экрана. С их помощью можно охватить контент полностью, а не скринить по кускам.

  • Популярное приложение с разнообразным функционалом.
  • Расширение для веб-браузера. Можно сделать картинку всей страницы, просто нажав кнопку на панели инструментов.
  • Снимает всё, что можно снять: произвольные области, окна, большие веб-ресурсы. Есть инструментарий для редактирования получившихся изображений и библиотека эффектов.
  • Автоматически прокручивает, делает серию кадров и самостоятельно объединяет их в один скриншот.

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

  • Capture Full Page
  • Web Screenshots
  • Thumbalizr
  • Snapito

Сохранить как HTML-файл

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

  1. Откройте сайт.
  2. Кликните правой кнопкой мышки в любом месте, свободном от рисунков, фонов, видео и анимации.
  3. Выберите «Сохранить как». В Mozilla Firefox аналогичную кнопку можно найти в меню. Для этого нужно нажать на значок с тремя горизонтальными чёрточками. В Opera эти настройки вызываются кликом на логотип.
  4. Задайте имя. Укажите путь.
  5. Подтвердите действие.

Сохранить как PDF

В Google Chrome можно создать из страницы PDF-файл. Данная функция предназначена для распечатки на принтере. Но доступно копирование и на компьютер.

  1. Кликните на пиктограмму в виде трёх линий (они справа вверху).
  2. Нажмите «Печать» или воспользуйтесь сочетанием клавиш Ctrl+P.
  3. Кликните «Изменить».
  4. Пункт «Сохранить как PDF».
  5. На левой панели повторно нажмите кнопку с таким же названием.
  6. Дайте файлу имя и укажите путь.

Еще один способ — сохранить как PDF-страницу с помощью штатных средств Chrome.

Эта функция доступна исключительно в Chrome. Для других веб-обозревателей нужны плагины. Printpdf для Firefox и Web2PDFConvert для Opera.

Утилиты для сохранения сайтов целиком

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

  • HTTrack Website Copier.
  • Local Website Archive.
  • Teleport Pro.
  • WebCopier Pro.

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *