Как скачать html файл с сайта
Перейти к содержимому

Как скачать html файл с сайта

  • автор:

Как скачать сайт?

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

10 апр 2022 в 17:46

Если «просто посмотреть», то зачем скачивать? Просто открываете в браузере исходный код страницы да и всё

10 апр 2022 в 17:46
это не удобно, хотелось бы на vscode его смотреть
10 апр 2022 в 17:47
Ну тогда в любом браузере есть пункт меню «Сохранить как»
10 апр 2022 в 17:48
спасибо все получилось 🙂
10 апр 2022 в 18:10

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

В гугл хроме или яндекс браузере нажимаете ctrl + s или правой кнопкой мыши «и сохранить страницу как», выбираете путь и вам скачается html файл и папка с js b css, а вообще не понимаю зачем скачивать, если вам нужно просто посмотреть.

Отслеживать
ответ дан 10 апр 2022 в 19:18
Тв0р0бушек Тв0р0бушек
63 8 8 бронзовых знаков

  • html
  • css
  • вёрстка
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Атрибут download

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

Синтаксис

Обязательный атрибут

Значения

Значение по умолчанию

По умолчанию этот атрибут выключен.

HTML5 IE Cr Op Sa Fx

    download  

Открыть файл в браузере

Скачать файл

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

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Ссылка на файл

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

Когда мы переходим по ссылкам, то попадаем на другие страницы или места на странице. Но при переходе по ссылке на файл браузер предложит его скачать.

Однако, если браузер умеет обрабатывать файлы этого типа, то содержимое файла откроется прямо в браузере. Чаще всего так происходит с изображениями. Но в последнее время браузеры научились открывать PDF-файлы и многие другие.

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

При скачивании или загрузке файлов со сторонних сайтов для безопасности можно использовать атрибут rel=»noopener» . Этот атрибут позволяет игнорировать скрипты сторонней страницы, которые могут влиять на загрузку файла. Особенно актуален этот атрибут в случае, если загрузка происходит в новой вкладке или новом окне.

Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

Сайт начинающего верстальщика

Блог

День двенадцатый. Все любят печенье

Сегодня Кекс попросил меня сделать рецепт того самого рыбного печенья доступным для всех своих клиентов. Но вот незадача, у меня нет принтера, да и печатать рецепт на всех, тратить бумагу, не хочется. Пришлось сделать ссылку для скачивания файла.

Скачать

Подвал сайта

Два способа скачать сайт целиком на компьютер

Как-скачать-сайт-целиком-на-компьютер

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

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

Особенно удобно иметь файлы нужного сайта на жёстком диске своего ПК или в хранилище 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 чтобы убедится, что данное приложение работает.

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

значение команд wget

Всё, скачивание сайта началось. Скопированные файлы теперь находятся на диске С в папке «Пользователи», «Admin» (на windows 7). В папке «Админ» находим папку сайта со всеми его файлами. Запускаем файл index.html и убеждаемся, что веб-ресурс скачан на компьютер полностью и он такой же, как он-лайн.

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

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