Пройдите тест, узнайте какой профессии подходите
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы
Введение
Создание простого сайта на HTML может показаться сложным, особенно если вы новичок. Однако, с помощью обычного текстового редактора, такого как Блокнот, это становится вполне выполнимой задачей. В этой статье мы рассмотрим, как создать простой сайт на HTML в Блокноте, начиная с установки и настройки программы и заканчивая сохранением и просмотром вашего сайта. Мы также углубимся в основы HTML, чтобы вы могли лучше понять, как работает этот язык разметки.
Установка и настройка Блокнота
Блокнот (Notepad) — это стандартный текстовый редактор, который поставляется вместе с операционной системой Windows. Если у вас установлена Windows, то Блокнот уже есть на вашем компьютере. Это простой и легкий инструмент, который идеально подходит для написания кода на HTML.
Как открыть Блокнот
- Нажмите клавишу Windows на клавиатуре или кликните на значок Windows в левом нижнем углу экрана.
- Введите «Блокнот» в строку поиска.
- Кликните на иконку Блокнота, чтобы открыть его.
Настройка Блокнота для работы с HTML
Хотя Блокнот не требует особой настройки для работы с HTML, есть несколько рекомендаций, которые могут сделать процесс более удобным:
- Включите отображение расширений файлов: Это поможет вам убедиться, что вы сохраняете файл с правильным расширением (.html). Для этого откройте «Проводник», перейдите в меню «Вид» и установите флажок «Расширения имен файлов».
- Используйте моноширинный шрифт: Это облегчит чтение и редактирование кода. Вы можете изменить шрифт в настройках Блокнота, выбрав «Формат» -> «Шрифт» и выбрав моноширинный шрифт, такой как Courier New.
Основы HTML: структура и теги
HTML (HyperText Markup Language) — это язык разметки, используемый для создания веб-страниц. Основные элементы HTML включают теги, которые определяют структуру и содержание веб-страницы. Понимание этих основ поможет вам создавать более сложные и функциональные веб-страницы в будущем.
Основная структура HTML-документа
Каждый HTML-документ имеет базовую структуру, которая включает следующие элементы:
<!DOCTYPE html>: Объявление типа документа, указывающее, что документ написан на HTML5.<html>: Корневой элемент HTML-документа, который содержит все остальные элементы.<head>: Содержит метаданные о документе, такие как его заголовок и ссылки на стили и скрипты.<title>: Заголовок документа, который отображается на вкладке браузера.<body>: Содержит видимое содержимое веб-страницы, такое как текст, изображения и ссылки.
Основные теги HTML
<h1>–<h6>: Заголовки различных уровней, где<h1>— это самый крупный заголовок, а<h6>— самый мелкий.<p>: Параграф текста, который используется для создания абзацев.<a>: Гиперссылка, которая позволяет пользователям переходить на другие страницы или сайты.<img>: Изображение, которое можно вставить в веб-страницу.<ul>и<li>: Ненумерованный список и его элементы, используемые для создания списков с маркерами.<ol>и<li>: Нумерованный список и его элементы, используемые для создания списков с номерами.
Создание простого HTML-документа
Теперь, когда вы знаете основные теги и структуру HTML-документа, давайте создадим простой сайт. Этот процесс включает несколько шагов, начиная с открытия Блокнота и заканчивая сохранением и просмотром вашего сайта в браузере.
Шаг 1: Откройте Блокнот
Откройте Блокнот, как описано в разделе «Как открыть Блокнот». Убедитесь, что вы готовы к написанию кода, и что у вас есть необходимое время и внимание для выполнения всех шагов.
Шаг 2: Напишите HTML-код
Введите следующий HTML-код в Блокнот:
Этот код создает простой HTML-документ с заголовком, параграфом текста и гиперссылкой. Вы можете изменить текст и URL ссылки по своему усмотрению.
Шаг 3: Сохраните файл
- Нажмите «Файл» в верхнем меню и выберите «Сохранить как…».
- В поле «Имя файла» введите
index.html(убедитесь, что вы добавили расширение.html). - В поле «Тип файла» выберите «Все файлы».
- Нажмите «Сохранить».
Сохранение и просмотр вашего сайта
Теперь, когда вы создали и сохранили HTML-документ, давайте посмотрим, как его открыть в браузере. Это позволит вам увидеть результат вашей работы и убедиться, что все работает правильно.
Шаг 1: Найдите сохраненный файл
Перейдите в папку, где вы сохранили файл index.html. Убедитесь, что файл имеет правильное расширение и что вы можете его найти.
Шаг 2: Откройте файл в браузере
- Дважды кликните на файл
index.html. - Файл откроется в вашем браузере по умолчанию, и вы увидите ваш первый сайт.
Пример результата
Ваш сайт должен выглядеть примерно так:
- Заголовок «Добро пожаловать на мой сайт!» будет отображаться крупным шрифтом.
- Под заголовком будет текст «Это мой первый сайт, созданный с помощью HTML и Блокнота.»
- Ссылка «Посетите мой любимый сайт» будет вести на указанный вами URL.
Вы можете экспериментировать с различными тегами и элементами, чтобы улучшить и расширить ваш сайт. Например, вы можете добавить изображения, таблицы или формы для ввода данных.
Заключение
Создание простого сайта на HTML в Блокноте — это отличный способ начать изучение веб-разработки. Следуя этим шагам, вы сможете создать и просмотреть свой первый сайт. В дальнейшем вы можете усложнять свои проекты, добавляя новые элементы и стили. Удачи в ваших начинаниях!
HTML — это мощный инструмент, который позволяет создавать красивые и функциональные веб-страницы. Начав с простых проектов, вы сможете постепенно освоить более сложные концепции и техники. Не бойтесь экспериментировать и учиться на своих ошибках. Веб-разработка — это увлекательное и полезное занятие, которое открывает множество возможностей для творчества и профессионального роста.
Читайте также
Загрузить PDF
Загрузить PDF
Вас интересует веб-дизайн? Чтобы попробовать свои силы в создании веб-страниц, необязательно пользоваться сложными программами. Веб-страницу можно создать в Блокноте, предустановленном на компьютерах с Windows. В качестве языка программирования будет использован HTML — HyperText Markup Language (язык гипертекстовой разметки). Вы можете написать HTML-код страницы в Блокноте или любом другом текстовом редакторе, а затем просто сохранить файл как HTML-документ. Этот язык легко изучить, даже если у вас нет навыков программирования. Итак, в нашей статье мы расскажем, как создать простую веб-страницу с помощью Блокнота.
-
Нажмите на логотип Windows в нижнем левом углу экрана. На экране появится меню «Пуск».
-
Введите блокнот в меню «Пуск». Вверху меню появятся результаты поиска.
-
Это голубой значок в виде блокнота верхней части результатов поиска. Откроется Блокнот.
-
Оно находится в верхнем левом углу окна Блокнота.
-
Эта опция находится в открывшемся меню «Файл». Откроется окно «Сохранить как».
-
Оно находится в нижней части окна; в нем отобразится опция «Текстовые документы (*.txt)». Нажмите на нее, чтобы появилось выпадающее меню.
-
Эта опция находится в выпадающем меню. Теперь файл можно сохранить как HTML-документ.
-
Для этого нажмите на нужную папку на левой панели окна.
- Например, чтобы сохранить документ на рабочем столе, прокрутите вверх и нажмите «Рабочий стол» на левой панели.
-
Нажмите на текстовое поле «Имя файла», введите имя файла, а затем введите .html.
- Например, чтобы назвать файл веб-страницы «hello», введите hello.html.
-
Текстовый документ будет сохранен как документ HTML. Теперь можно перейти к созданию структуры веб-страницы.
- Если Блокнот неожиданно закрылся или вы хотите вернуться к документу позже, щелкните правой кнопкой мыши по HTML-файлу и в меню выберите «Изменить».
Реклама
-
Первый тег, который нужно добавить в Блокнот, указывает всему документу, что будет использоваться язык HTML. В Блокноте введите следующее:
-
Этот раздел HTML-документа содержит метаданные веб-страницы. В веб-браузере они не отображаются. Здесь может содержаться такая информация, как имя страницы, таблицы стилей (CSS), скрипты и так далее. Сейчас просто введите <head> после тега <html>, дважды нажмите ↵ Enter, чтобы вставить пустые строки, а затем введите </head>.
- Каждый HTML-элемент должен находиться между двумя тегами. Когда мы добавляем новый элемент, например тег «<head>», открывающий соответствующий раздел, нам нужно добавить и закрывающий тег. В данном случае это «</head>».
-
Оно должно находиться внутри раздела «head», так что его нужно ввести между открывающим тегом «<head>» и закрывающим «</head>». Чтобы добавить имя, наберите открывающий тег <title>, затем введите текст (собствнно имя) и сразу за ним добавьте закрывающий тег </title>. Например, если именем вашей страницы будет «Мой сайт», введите следующее:
-
Все, что будет отображаться на вашей странице в веб-браузере, должно находиться между этими тегами. Под тегом </title> введите:
-
Последним тегом документа будет закрывающий тег «html», чтобы обозначить конец страницы. Введите </html> под тегом </body>, чтобы закрыть тег HTML.
-
На данном этапе документ должен выглядеть следующим образом:
<!DOCTYPE html> <html> <head> <title>Мой сайт</title> </head> <body> </body> </html>
-
Для этого нажмите «Файл» и затем «Сохранить» на панели меню. В качестве альтернативы для сохранения документа можно нажать Ctrl+S. Не забывайте чаще сохранять его в процессе работы.
Реклама
-
Запомните, что все элементы веб-страницы должны находиться между тегами «body». Любой элемент — будь то заголовок или абзац — нужно вводить после тега <body> и перед тегом </body>.
-
Введите <h1></h1> между тегами «body», а затем введите заголовок внутри тегов <h1></h1>. Например, чтобы создать страницу с заголовком «Добро пожаловать», введите следующее:
<h1>Добро пожаловать</h1>
- Используйте теги от <h2></h2> до <h6></h6>, чтобы создать заголовки меньшего размера.
-
Введите теги абзаца <p></p>, а затем введите текст внутри этих тегов. Результат должен выглядеть примерно так:
<p>Это мой сайт. Голосуйте за меня на выборах!</p>
-
Чтобы добавить пустые строки между абзацами или заголовками, введите <br> после закрывающего тега строки. Например, чтобы создать разрыв строки после абзаца, введите следующее:
<p> Это мой сайт. Голосуйте за меня на выборах!</p><br> <p>А еще я люблю картошку</p>
- После первого тега <br> можно ввести такой же тег, чтобы добавить еще один разрыв строки, то есть между двумя абзацами будут две пустые строки.
- Для разрыва абзаца закрывающий тег не нужен.
-
Полужирным, наклонным или подчеркнутым, а также надстрочным и подстрочным можно сделать слово, предложение или блок текста, если они находится между тегами абзаца. Для форматирования используйте следующие теги:
<b>Полужирный текст</b> <i>Наклонный текст</i> <u>Подчеркнутый текст</u> <sub>Подстрочный текст</sub> <sup>Надстрочный текст</sup>
-
Чтобы изображение можно было добавить на веб-страницу, оно должно быть загружено на сервер в интернете, и вам нужно знать веб-адрес этого изображения. Наберите <img src=, затем адрес изображения в кавычках. В конце добавьте закрывающий значок >. Вот пример, как это должно выглядеть:
<img src="https://www.mywebsite.me/images/me.jpg">
- Если изображение хранится не в интернете, а на вашем компьютере, вместо веб-адреса можете использовать путь к его местоположению. Например: <img src="C:\Users\username\Pictures\me.jpg">
-
Ссылки — важнейший аспект веб-разработки. Они позволяют пользователям переходить с одной страницы на другую. Чтобы добавить ссылку, вам нужно знать адрес веб-страницы, на которую она будет вести. Наберите <a href=, затем веб-адрес нужной страницы в кавычках. В конце добавьте закрывающий значок >. Затем сразу за ним наберите текст ссылки и закрывающий тег </a>. Вот пример того, как добавить на веб-страницу ссылку:
<a href="https://www.mywebsite.me/ipage2">Вторая страница</a>
- Вы также можете добавить ссылку на адрес электронной почты или использовать вместо текста ссылки изображение.
-
Хотя элементы веб-страницы могут различаться, документ должен выглядеть примерно так:
<!DOCTYPE html> <html> <head> <title>Мой сайт</title> </head> <body> <h1>Добро пожаловать!</h1> <a href="https://www.mywebsite.me/ipage2">Вторая страница</a> <img src="https://www.mywebsite.me/images/me.jpg"> <p>Это мой сайт. Надеюсь, он вам понравится!</p> <p><b>Полужирным текстом выделены главные моменты.</b></p> <p><i>Курсив выглядит зловеще.</i></p> </body> </html>
Реклама
-
Для этого нажмите Ctrl+S. Теперь, когда вы откроете документ HTML, отобразится последняя версия вашей веб-страницы.
-
Откроется меню.
-
Эта опция находится в меню. Откроется новое меню.
-
HTML-документ можно открыть в любом браузере, поэтому в меню выберите предпочитаемый веб-браузер. HTML-документ откроется в окне веб-браузера.
-
Реклама
Об этой статье
Эту страницу просматривали 329 469 раз.
Была ли эта статья полезной?
Создание сайта html в блокноте с нуля
Если сайт состоит из одной или нескольких страниц и в ближайшей перспективе не будет наполнятся большим количеством контента или обрастать сложным функционалом (интернет магазин, каталог товаров, форум и прочее). То создать такой сайт лучше на html в блокноте.
- Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
- Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
- Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:\site\index.html
- Файл c:\site\style.css. Это файл стилей, зачем он нужен станет понятно позже.
- Папка c:\site\images. В эту папку нужно поместить все изображения нужные для будущего сайта.
- Купить хостинг и домен если нужно сайт выложить в интернете
Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами index.html и style.css. Скачай и распакуй архив в нужную тебе папку.
Для работы сайта в сети необходим веб-сервер. Сервер при обращении к домену или папке сайта без указания конкретного файла будет искать в ней index.html или index.php если не найдет отобразит список файлов папки.
Так как у нас простая html страничка нам не потребуется установка сервера на нашем компьютере, так как язык разметки понимает любой браузер. Однако если потребуется использование php, то просто браузером уже не обойтись.
Теперь нужно открыть файл index и style в NotePad++
Структура html документа
Скопируй код в файл index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок страницы для браузера</title> <link rel="stylesheet" href="/style.css" type="text/css" /> </head> <body> <h1>Заголовок страницы</h1> <!-- Комментарий --> <p>Абзац.</p> </body> </html>
Теперь открой его в браузере, должно получится так:
В кратце опишу что значат эти теги. Если хочешь подробнее разобраться то по googl-и как говорится информации на эту тему море.
Указываем браузеру по какому стандарту нужно отображать страницу:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Тег html говорит о том где начинается и заканчивается html документ
<html>...</html>
Тег head необходим для размещения служебной информации, тут подключаются стили, скрипты и размещена meta информация страницы. Посетители сайта не видят содержимого этого тега.
<head>...</head>
Тег body содержит разметку страницы, содержимое этого тега видят посетители сайта.
<body>...</body>
Верстка или создание сайта на html
В процессе верстки сайта будут встречаться теги и атрибуты описать которые в данной статье невозможно. Поэтому рекомендую пользоваться сайтом htmlbook.ru. Кроме того советую внимательно изучать каждый тег и стиль css, который тебе встречается.
{module 110}
Итак что будем верстать:
Фон и основной каркас сайта
Замени содержимое своего файла index.html на следующее:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой первый сайт на html</title>
<link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
<!-- Основной блок сайта -->
<div id="basic">
</div>
</body>
</html>
И добавь в style.css такой код:
/*Каркас сайта*/
body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}
Обнови страницу с сайтом в браузере (F5), должно получится так:
Шапка сайта
Добавьте в тег div с идентификатором basic следующий код:
<!-- Шапка сайта -->
<div id="head-site">
<a href="/"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
</div>
Что бы получилось следующее:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой первый сайт на html</title>
<link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
<!-- Основной блок сайта -->
<div id="basic">
<!-- Шапка сайта -->
<div id="head-site">
<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
</div>
</div>
</body>
</html>
И добавляем в файл css строки:
/*Шапка сайта*/
li.none-bg {background:none!important;}
.telefon {float:right;}
Верхнее меню сайта
Что бы на нашем html сайте появилось навигационное меню, которое изображено в макете добавить в index.html после:
<!-- Шапка сайта -->
<div id="head-site">
<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
</div>
Этот код:
<!-- Верхнее меню сайта -->
<div id="menu-top">
<div class="bg-1">
<ul>
<li><a href="#">О нас</a></li>
<li><a href="#">Ассортимент</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Забронировать столик</a></li>
<li><a href="#">Наши клиенты</a></li>
<li class="none-bg"><a href="#">Контакты</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
Что бы получилось так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой первый сайт на html</title>
<link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
<!-- Основной блок сайта -->
<div id="basic">
<!-- Шапка сайта -->
<div id="head-site">
<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
</div>
<!-- Верхнее меню сайта -->
<div id="menu-top">
<div class="bg-1">
<ul>
<li><a href="#">О нас</a></li>
<li><a href="#">Ассортимент</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Забронировать столик</a></li>
<li><a href="#">Наши клиенты</a></li>
<li class="none-bg"><a href="#">Контакты</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
</div>
</body>
</html>
А в файл style.css:
/*Верхнее меню сайта*/
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#ff9c00;}
Теперь сайт имеет логотип телефон и меню при наведении на которое меняется фон:
Левое меню и контент
Пришло время сделать левое меню и блок с контентом. Для этого копируем код и тщательно изучаем, что к чему. После блока:
<!-- Верхнее меню сайта --> <div id="menu-top"> ...... </div>
Добавляем следующее:
<!-- Левое меню и Контент -->
<div id="content">
<!-- Контент - правый блок -->
<div class="right">
<h1>Кофе Американо</h1>
<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img3.png" alt="" title="" />
<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
</div>
<!-- Левое меню - левый блок блок -->
<div class="left">
<div id="left-menu">
<div class="block-nad-menu"></div>
<div class="block-menu">
<ul>
<li><a href="#">Кофе Айриш</a></li>
<li><a href="#">Кофе Американо</a></li>
<li><a href="#">Кофе Глясе</a></li>
<li><a href="#">Кофе Диппио</a></li>
<li><a href="#">Кофе Капучино</a></li>
<li><a href="#">Кофе Кон Панна</a></li>
<li><a href="#">Кофе Коретто</a></li>
<li><a href="#">Кофе Латте</a></li>
<li class="none-bg"><a href="#">Кофе Лунго</a></li>
</ul>
</div>
<div class="block-pod-menu"></div>
</div>
</div>
</div>
Файл index.html будет выглядеть вот так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой первый сайт на html</title>
<link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
<!-- Основной блок сайта -->
<div id="basic">
<!-- Шапка сайта -->
<div id="head-site">
<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
</div>
<!-- Верхнее меню сайта -->
<div id="menu-top">
<div class="bg-1">
<ul>
<li><a href="#">О нас</a></li>
<li><a href="#">Ассортимент</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Забронировать столик</a></li>
<li><a href="#">Наши клиенты</a></li>
<li class="none-bg"><a href="#">Контакты</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
<!-- Левое меню и Контент -->
<div id="content">
<!-- Контент - правый блок -->
<div class="right">
<h1>Кофе Американо</h1>
<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img3.png" alt="" title="" />
<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
</div>
<!-- Левое меню - левый блок блок -->
<div class="left">
<div id="left-menu">
<div class="block-nad-menu"></div>
<div class="block-menu">
<ul>
<li><a href="#">Кофе Айриш</a></li>
<li><a href="#">Кофе Американо</a></li>
<li><a href="#">Кофе Глясе</a></li>
<li><a href="#">Кофе Диппио</a></li>
<li><a href="#">Кофе Капучино</a></li>
<li><a href="#">Кофе Кон Панна</a></li>
<li><a href="#">Кофе Коретто</a></li>
<li><a href="#">Кофе Латте</a></li>
<li class="none-bg"><a href="#">Кофе Лунго</a></li>
</ul>
</div>
<div class="block-pod-menu"></div>
</div>
</div>
</div>
</div>
</body>
</html>
И в конец файла css копируем:
/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h1 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}
li.none-bg {background:none!important;}
Если все сделано правильно получится сайт как на картинке ниже:
Подвал сайта
После блока:
<!-- Левое меню - левый блок блок --> <div class="left"> ... </div>
Вставляем:
<div class="myclr"></div>
<!-- Подвал -->
<div id="podval">
<div class="yellow"></div>
<div class="p1">ООО “Кофейня” 2015г.<br/>
г. Москва, ул Революционная 1а</div>
<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>
<div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
</div>
<div class="myclr"></div>
Теперь весь файл index.html выглядит вот так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой первый сайт на html</title>
<link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
<!-- Основной блок сайта -->
<div id="basic">
<!-- Шапка сайта -->
<div id="head-site">
<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
</div>
<!-- Верхнее меню сайта -->
<div id="menu-top">
<div class="bg-1">
<ul>
<li><a href="#">О нас</a></li>
<li><a href="#">Ассортимент</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Забронировать столик</a></li>
<li><a href="#">Наши клиенты</a></li>
<li class="none-bg"><a href="#">Контакты</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
<!-- Левое меню и Контент -->
<div id="content">
<!-- Контент - правый блок -->
<div class="right">
<h1>Кофе Американо</h1>
<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img3.png" alt="" title="" />
<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
</div>
<!-- Левое меню - левый блок блок -->
<div class="left">
<div id="left-menu">
<div class="block-nad-menu"></div>
<div class="block-menu">
<ul>
<li><a href="#">Кофе Айриш</a></li>
<li><a href="#">Кофе Американо</a></li>
<li><a href="#">Кофе Глясе</a></li>
<li><a href="#">Кофе Диппио</a></li>
<li><a href="#">Кофе Капучино</a></li>
<li><a href="#">Кофе Кон Панна</a></li>
<li><a href="#">Кофе Коретто</a></li>
<li><a href="#">Кофе Латте</a></li>
<li class="none-bg"><a href="#">Кофе Лунго</a></li>
</ul>
</div>
<div class="block-pod-menu"></div>
</div>
</div>
</div>
<div class="myclr"></div>
<!-- Подвал -->
<div id="podval">
<div class="yellow"></div>
<div class="p1">ООО “Кофейня” 2015г.<br/>
г. Москва, ул Революционная 1а</div>
<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>
<div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
</div>
<div class="myclr"></div>
</div>
</body>
</html>
В файл css добавляем код в самый низ:
/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}
Теперь весь файл style.css выглядит следующим образом:
/*Каркас сайта*/
body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}
#basic {width:960px; min-height:500px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}
img {border:0;}
a {color:#ff9c00;}
a:hover {text-decoration:none;}
/*Шапка сайта*/
#head-site {height:70px;}
li.none-bg {background:none!important;}
.telefon {float:right;}
/*Верхнее меню сайта*/
#top-menu {width:960px; height:74px; }
.bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}
.bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}
.bg-1 ul {margin:0; padding:0; list-style:none;}
.bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}
.bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}
.bg-1 ul li a:hover {color:#fff; background:#ff9c00;}
/*Левое меню и Контент*/
#content {width:960px; padding:20px 0 0 0; }
/*Контент - правый блок*/
.right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}
.right h1 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}
/*Левое меню - левый блок*/
.left {width:250px; float:left;}
.block-nad-menu {width:240px; height:10px; background:#ff9c00;}
.block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}
.block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}
.left ul {margin:0; padding:10px 0 0 0; list-style:none;}
.left ul li {background:url(images/m3.png) no-repeat bottom left;}
.left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}
.left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}
/*Подвал*/
.myclr {clear:both; float:none; width:100%; height:1px;}
#podval {border-top:10px solid #4c281e; margin-top:20px;}
.yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}
.p1 {float:left; width:300px; padding:15px 0 0 0;}
.p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}
.p3 {float:right; width:30px; padding:15px 0 0 0;}
А сам сайт вот так:
Другие страницы сайта и ссылки меню
Получился сайт, но при клике на ссылки меню ничего не происходит. Поэтому нам нужно придумать название страниц, прописать их в URL меню и создать страницы с этими названиями.
Названия страниц должны быть уникальными и состоять из латинских символв. Я просто перевел названия пунктов меню на транслит.
- o-nas.html – О нас
- assortiment.html – Ассортимент
- otzivi.html – Отзывы
- zabronirovat-stolik.html – Забронировать столик
- nashi-klienty.html – Наши клиенты
- kontakty.html – Контакты
То же самое нужно сделать и с левым меню.
- kofe-ayrish.html – Кофе Айриш
- kofe-amerikano.html – Кофе Американо
- kofe-glyase.html – Кофе Глясе
- kofe-dippio.html – Кофе Диппио
- kofe-kapuchino.html – Кофе Капучино
- kofe-kon-panna.html – Кофе Кон Панна
- kofe-koretto.html – Кофе Коретто
- kofe-latte.html – Кофе Латте
- kofe-lungo.html – Кофе Лунго
Теперь открываем index.html в NotePad++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Мой первый сайт на html</title>
<link rel="stylesheet" href="/style.css" type="text/css" />
</head>
<body>
<!-- Основной блок сайта -->
<div id="basic">
<!-- Шапка сайта -->
<div id="head-site">
<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>
<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />
</div>
<!-- Верхнее меню сайта -->
<div id="menu-top">
<div class="bg-1">
<ul>
<li><a href="/o-nas.html">О нас</a></li>
<li><a href="/assortiment.html">Ассортимент</a></li>
<li><a href="/otzivi.html">otzivi.html</a></li>
<li><a href="/zabronirovat-stolik.html">Забронировать столик</a></li>
<li><a href="/nashi-klienty.html">Наши клиенты</a></li>
<li class="none-bg"><a href="/kontakty.html">Контакты</a></li>
</ul>
</div>
<div class="bg-2"></div>
</div>
<!-- Левое меню и Контент -->
<div id="content">
<!-- Контент - правый блок -->
<div class="right">
<h1>Кофе Американо</h1>
<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>
<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>
<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />
<img src="/images/img3.png" alt="" title="" />
<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>
<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>
<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>
</div>
<!-- Левое меню - левый блок блок -->
<div class="left">
<div id="left-menu">
<div class="block-nad-menu"></div>
<div class="block-menu">
<ul>
<li><a href="/kofe-ayrish.html">Кофе Айриш</a></li>
<li><a href="/kofe-amerikano.html">Кофе Американо</a></li>
<li><a href="/kofe-glyase.html">Кофе Глясе</a></li>
<li><a href="/kofe-dippio.html">Кофе Диппио</a></li>
<li><a href="/kofe-kapuchino.html">Кофе Капучино</a></li>
<li><a href="/kofe-kon-panna.html">Кофе Кон Панна</a></li>
<li><a href="/kofe-koretto.html">Кофе Коретто</a></li>
<li><a href="/kofe-latte.html">Кофе Латте</a></li>
<li class="none-bg"><a href="/kofe-lungo.html">Кофе Лунго</a></li>
</ul>
</div>
<div class="block-pod-menu"></div>
</div>
</div>
</div>
<div class="myclr"></div>
<!-- Подвал -->
<div id="podval">
<div class="yellow"></div>
<div class="p1">ООО “Кофейня” 2015г.<br/>
г. Москва, ул Революционная 1а</div>
<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>
<div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>
</div>
<div class="myclr"></div>
</div>
</body>
</html>
Теперь жми “Сохранить” потом “Файл > Сохранить как” и сохраняй для каждой ссылки файл с соответствующим именем в папке с файлами сайта. Вот что получилось у меня:
Все сайт готов. Осталось только поменять в каждой странице контент.
У такого сайта не смотря на его простоту есть очень большой недостаток. Что бы поменять один пункт меню или элемент дизайна придется это делать это в каждом сайте. Когда страниц больше 10 начинается страшная путаница при его обслуживании. Так что создание сайта html в блокноте советую делать только для очень маленьких сайтов или одно-страничных LandingPage. А для полноценных сайтов осваивать CMS (они не так сложны как кажется).
При взгляде на огромное разнообразие сайтов, представленных в сети, у людей непосвящённых зачастую создаётся впечатление, что создание сайтов бесплатно самостоятельно — дело избранных. Тем не менее, как и любая дальняя дорога начинается с первого шага, а шедевр с первого штриха в альбоме, так и создание нового сайта начинается с малого, можно даже сказать, подручными средствами. А для этого нам понадобится всем известный инструмент и простейший текстовый редактор — Блокнот.
Что такое HTML
Дело в том, что странички сайтов, которые мы видим на мониторах и экранах гаджетов, по сути, являются не чем иным, а текстовыми документами, правда, созданными с использованием языка гипертекстовой разметки или HTML, а делать это можно в обычном Блокноте. Следует отметить, что HTML не относится к языкам программирования — это способ предоставления информации в виде «доступном для понимания» браузерами. Браузеры, выступая в роли переводчиков со своего на человеческий язык, интерпретируют страницы в HTML, в результате чего вы видите на экране не набор символов, а форматированный текст.
Вот как выглядит на экране домашняя страница сайта umi.ru:
А вот как её «видит» браузер:
Чтобы понять, как работает HTML необходимо ознакомиться с его основным понятием, каковым является тег. Этот термин обозначает специальный структурный элемент, представляющий собой определенную комбинацию символов, при помощи которого и осуществляется разметка страницы. Определить тег очень просто — что бы он не означал, он всегда выделен в тексте знаками “<” перед и “>” в конце названия тега. Например, <script> или <table>, означающие «сценарий» и «таблица» соответственно. Если действие относится к определённой части текста, например, выделение полужирным шрифтом, то границы этого участка обозначаются парными тегами. В случае с полужирным текстом это будут комбинации <b> и </b>. Обратите внимание, что любой закрывающий тег отличается от открывающего косой чертой “/”.
Существуют и непарные теги, когда действие разовое и не относится к определённому участку текста, например, перенос строк, обозначаемый в HTML комбинацией <br>.
Основные виды тегов и их роль в разметке веб-страницы
- <!DOCTYPE html>. С этого элемента начинается сайт. Он сообщает браузеру, что документ создан с помощью языка гипертекстовой разметки HTML. По большому счёту, этот элемент не обязателен, но его присутствие позволит избежать потенциальных проблем с отображением страницы;
- парный тег <html> и </html> сообщает о начале и конце каждой страницы;
- внутри между элементами парного тега <head> и </head> указывается всевозможная служебная информация о странице, в том числе, ее заголовок, указания на стили, использованные в ее оформлении, подключаемые скрипты, специальные метаданные;
- ещё один парный тег <title> содержит заголовок страницы и находится внутри тега <head>. Благодаря этому тегу браузер и поисковые роботы определяют название каждой страницы;
- область документа, отображаемая непосредственно на мониторе и видная пользователю, ограничивается парным тегом <body>. На странице эта область следует за тегом </head>.
- для добавления в текст ссылок служит тег <a>, однако он несколько отличается от предыдущих своим видом и выглядит <a href=”URL ссылки”>текст ссылки</a>.
- абзацы в тексте обозначаются парным тегом <p>.
- для разделения текста при помощи подзаголовков различных уровней существуют парные теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Благодаря им можно выделять текст в зависимости от его важности.
- для выделения текста полужирным шрифтом служит парный тег <b>.
Это всего лишь небольшая часть из всего разнообразия тегов, которых насчитывается около ста. Тем не менее, с их помощью уже можно начинать cоздание сайта через блокнот. Есть также ряд правил, по которым теги располагаются в документе. Для основных тегов, включая <html>, <head>, <title>, <body>, существует строгий порядок распределения, тогда как в блоке, ограниченном тегами <body>, остальные теги комбинируются в зависимости от общего замысла и в соответствии со стандартами языка HTML.
Создаём сайт своими руками в Блокноте
Давайте попробуем научиться cозданию сайта через блокнот, чтобы были понятны роль и функции тегов, а также структура создаваемого документа.
Для работы с текстом сайта лучше работать не с традиционной программой «Блокнот», а со специальной его версией Notepad++, созданной как раз для написания кода. Скачать её можно с сайта разработчика. Всё описанное можно сделать и в обычном «Блокноте», но в Notepad++ работать с кодом гораздо удобнее.
Как уже говорилось, документ начинается с тега <!DOCTYPE html>, который сообщает браузеру, как его интерпретировать. Это и будет первая строчка в коде вашего сайта.
Следующий шаг. Обозначьте начало и конец страницы, добавив тег <html> во вторую строку и </html> через несколько строк ниже. Все остальное содержимое будет находиться в пределах, ограниченных этим парным тегом.
Затем выделим в документе участок страницы со служебной информацией, добавив парный тег <head> между тегами <html>, как показано ниже:
Чтобы указать заголовок страницы, в пространстве между тегами <head> и </head> в одну строку напишите парный тег <title></title> и вставьте между них заголовок (название сайта), например, «Создание сайта через блокнот».
А вот как её «видит» браузер:
Это будет единственная служебная информация нашего сайта. Далее приступаем к оформлению той части, которая будет видна на экране дисплея, выделив её тегами <body>. Открывающий тег ставим в строке после тега </head>, а закрывающий — перед тегом </html>, обозначающим, как мы помним, конец страницы.
Теперь, воспользовавшись парным тегом <h1> и </h1>, в строке, следующей после тега <body>, укажем заголовок нашей страницы, который будет показан пользователю. Между этими тегами добавим название страницы, например то же, что и у сайта — «Создание сайта через блокнот».
Наполним сайт содержанием, создав один абзац текста, и ограничив его открывающим тегом <p> в строке после </h1> и </p> в конце абзаца. Между ними добавим текст. Например: «Чтобы научиться cозданию сайта через блокнот, сначала необходимо получить представление об HTML».
Если вы хотите в тексте сделать выделение полужирным шрифтом, воспользуйтесь парным тегом <b>. В нашем примере выделим слово «HTML» — <b>HTML</b>.
Создадим подзаголовок. Для этого в новой строке пропишем парный тег <h3> в который вставим подзаголовок следующего блока текста, например, «Что такое теги».
Далее создадим еще один абзац текста, использовав уже знакомые нам теги <p> и </p>, вставив между ними отрывок из нашей статьи.
Не переживайте, что текст вышел за пределы окна — на экране компьютера или смартфона он будет автоматически подстроен под ширину страницы. Впрочем, если вы хотите сделать перенос, вставьте тег <br> — теперь строка будет заканчиваться именно в этом месте, а дальнейший текст начинаться с новой строки (на экране, но не в Блокноте). Так и поступим — разделим наш абзац переносом.
Осталось научиться вставлять ссылки — один из ключевых элементов гипертекстов. Для этого воспользуемся тегами <a href=””></a>. Например, в новом абзаце с текстом: «В создании сайта через блокнот нам помогли специалисты компании UMI», — дадим ссылку на сайт. В результате у вас должна получиться комбинация вида <a href=”https://umi.ru/”>UMI</a>. То есть, между кавычками в теге <a href=””> указывается URL страницы, на которую ведёт ссылка, а перед закрывающим тегом </a> указывается текст, который будет отображён на странице. Как это выглядит на деле, видно на приведённом ниже рисунке.
Наш наипростейший сайт, созданный с помощью блокнота, почти готов. Осталось сохранить документ в формате *.html. Теперь его можно открывать в любом браузере. Заметьте, после сохранения с расширением HTML содержимое файла выглядит несколько по-другому — теперь в нём выделены все теги и ссылки, а при помощи расположенных слева плюсов и минусов можно скрывать и раскрывать содержимое отдельных блоков, находящихся между парными тегами, к примеру, скрыть участок, ограниченный тегом <head>.
Если всё сделано как следует, то результатом вашей работы должна быть вот такая HTML-страница, готовая для публикации в интернете, в результате чего получится вот такой маленький одностраничный сайт:
Конечно, создавать современный сайт через блокнот будет сложно, да и, при существовании специальных конструкторов и сервисов готовых сайтов, которые значительно упрощают процесс создания сайтов и экономят время, это вряд ли оправданно. Тем не менее, иметь представление о том, из чего состоит веб-страница, как она выглядит «без оболочки» будет весьма полезно. Кроме того, теперь вам по силам cоздание сайта через блокнот и вы всегда сможете сделать это, не обращаясь к услугам программистов.
Онлайн-конструкторы
- Всё в одном: хостинг, поддержка, редактор контента
- Оплата по мере использования
- Не нужны профильные знания и навыки
CMS-системы
- Идеальный вариант для многостраничных сайтов
- Контроль данных, можно менять и апгрейдить хостинг
- Нужны базовые знания HTML, CSS, JavaScript
Офлайн-конструкторы и программы
- Разработка в точном соответствии с ТЗ и требованиями
- Полный контроль данных
- Максимальное погружение в код
Способов создания современных сайтов огромное множество. Это и готовые движки, и CMS-системы, и фреймворки, и CMF-системы, и конструкторы web-приложений, и даже полное написание кода с нуля (обратите внимание, не только на HTML, но и с использованием разных языков программирования: PHP, Python, Ruby и пр.).
Чем сложнее сайт, тем он технологичнее. Даже в простейших лендингах подтягивается несколько библиотек и скриптов, которые отвечают за разные задачи: аналитика, обработка форм, онлайн-чаты, отрисовка иконок, обеспечение адаптивной вёрстки (как Bootstrap) и т.п.
Ниже попробуем погрузить вас глубже в мир создания сайтов и показать, как следует подходить к выбору рабочих инструментов.
Способы создания HTML-сайтов:
- Использование движков (CMS-систем)
- Использование онлайн-конструкторов
- Использование IDE (сред разработки)
-
Создание простых сайтов в блокноте
- Шаг 1 – создание страницы формата HTML
- Шаг 2 – добавляем разметку веб-страницы
- Шаг 3 – работаем со стилями CSS
- Шаг 4 – загрузка сайта на хостинг
- Что такое HTML-сайт
- Работает ли HTML-сайт без CSS и JS?
- Лучший способ создания HTML сайта
- Что делать с динамическими элементами?
- Как скачать HTML-версию сайта
- Выводы и рекомендации
Что такое HTML-сайт
HTML-сайт – это сайт, который использует HTML-разметку. Условно под это описание попадают буквально все сайты в сети Интернет, так как любые языки веб-программирования в конечном счёте формируют HTML-код и выводят в нём разные данные.
Но чаще под HTML-сайтами подразумеваются сайты, состоящие из статичных HTML-страниц, которые могут работать без серверной составляющей. Их можно разместить где угодно, хоть на жёстком диске своего компьютера, и браузер обязательно их отобразит, так как внутри HTML-страницы есть всё необходимое.
HTML – это язык гипертекстовой разметки. Этот язык проще представить как совокупность тегов, которые позволяют браузеру понять что, где и как нужно показать. Например, в каком месте отобразить заголовок и какого уровня, где вывести изображение и откуда его взять, куда отправить данные из формы и прочее.
HTML-код легко прочитать и отредактировать, для этого достаточно открыть HTML-файл в любом текстовом редакторе.
Чтобы увидеть HTML-код этой страницы, нажмите на ней правой кнопкой мыши выберите пункт «Просмотр кода страницы». Вместо этого можно нажать Ctrl+U (это актуально в первую очередь для браузера Google Chrome).
Что удивительно, даже в статичных HTML-сайтах может быть подгружаемый код. Например, это могут быть скрипты и библиотеки, хранящиеся на удалённых серверах. При отработке в браузере такой код может исполняться, если устройство имеет выход в сеть (а сайт, на котором хранится скрипт/библиотека, будет в свою очередь доступен).
Чем отличаются статические и динамические сайты?
- Статические HTML-страницы работают на любом хостинге. Их достаточно расположить в определённом каталоге web-сервера и обратиться к ним напрямую. Браузер обязательно их обработает и покажет в удобочитаемом виде.
- Динамические сайты работают с использованием баз данных и языков программирования. Они сначала обрабатываются сервером, в разным местах шаблона подтягиваются разные текстовки и информация (из таблиц), и только потом результирующий HTML-код отдаётся браузеру.
- Если миновать шаг обработки скриптов, написанных на языке программирования, то вместо страницы вы увидите кашу из функций, тегов и текста. Ну или просто ошибку о недоступной странице.
Исключение – сайты, написанные на JavaScript (о них расскажем ниже).
Почему современные HTML-сайты не работают без CSS и JavaScript?
Ранее мы уже описывали основные HTML-теги – таблица HTML-тегов с примерами. Простейший пример заголовка:
<H2>Здесь текст заголовка</H2>
Тег h2 говорит браузеру, что текст между открывающим и закрывающим элементом нужно показать как заголовок второго уровня. Теги не всегда могут закрываться и открываться. Например, тег <BR>, который отвечает за перекат строки, всегда одиночный.
Теперь предположим, что нам нужно раскрасить заголовок и определить для него шрифт.
С этими задачами лучше всего справляются CSS-стили.
Вот так будет выглядеть декорирование заголовка (красный цвет, высота 20 пикселей и шрифт Verdana):
<H2 style="color: red; font-size: 20px; font-family: Verdana;”>Здесь текст заголовка</H2>
Мы прописали стили прямо внутри тега.
Но что, если нам нужно декорировать все заголовки страницы? Достаточно прописать стили прямо в HTML-файле (после открывающего тега <HEAD> или перед закрывающим </HEAD>):
<style>
H2 {
color: red;
font-size: 20px;
font-family: Verdana;
}
</style>
Все теги H2 на странице будут оформлены однообразно.
А если нам нужен единый стиль на всех страницах? Логично вынести все стили в один файл и подключать его на всех страницах.
<link rel="stylesheet" href="css/style.css">
(внутри файла нужно поместить стили, показанные выше)
А если нам одни заголовки нужны красным, а другие синим? Без проблем, описываете правила декорирования на уровне CSS-классов. Стили классов выносите в файл, а на уровне HTML-тега просто даёте ссылку на класс.
<H2 class="red-header”>Здесь текст красного заголовка</H2>
В CSS-файле:
.red-header {
color: red;
}
Вроде просто. Но как такое же сделать без CSS-стилей? Если честно, то никак, у HTML-языка синтаксис достаточно скудный.
Современные каскадные таблицы стилей позволяют творить чудеса. С их помощью можно определить разные условия декорирования на основе размера экрана и других триггеров.
Но и они не всесильны. Рано или поздно вы можете столкнуться с задачами, когда потребуется скрыть или показать отдельные элементы, найти что-то и посчитать, проверить на соответствие, например, на длину или на совпадение структуры.
За это уже отвечает код, исполняемый непосредственно в браузере. Такой код пишется на языке JavaScript.
Пример JS-кода, который меняет цвет фона контейнера:
<div id="block-color">Какой-то блок</div>
<button onclick="changeYourColor()">Сделать блок красным</button>
<script>
function changeYourColor() {
document.getElementById('block-color').style.backgroundColor = 'red';
}
</script>
Сейчас на JavaScript создаются целые сайты. Так как код выносится в статичные файлы и исполняется уже по факту в браузере, то их можно выгрузить на CDN-серверы и существенно снизить нагрузку на свою инфраструктуру (чтобы сократить число запросов к базам данных). Круто же? Если вдруг ваш сайт обрастёт многомиллионной аудиторией, вы сюда вернётесь и всё перечитаете.
Но даже на небольших сайтах JavaScript выполняет массу полезных функций: проверяет ввод в формах, отправляет данные (например, для сбора заявок) или ротирует слайдеры.
Способы создания HTML-сайтов
Ниже опишем наиболее адекватные варианты создания современных сайтов.
Использование движков (CMS-систем)
CMS-системы нужны для того, чтобы в HTML-макетах можно было выводить куски динамического контента.
Простой пример – запись блога:
- Шапка, футер и сайдбар могут оставаться статичными.
- Менять можно только текст записи.
- Текст записи хранится в базе данных.
- Движок определяет по URL-адресу индекс материала, который нужно показать пользователю.
- Он берёт HTML-шаблон, вставляет в него содержимое записи из БД и отдаёт браузеру.
- Готово.
На основе всего одного шаблона можно показать любое количество материалов блога (лишь бы их содержимое было в базе данных).
Как выглядит создание сайта на базе CMS:
- Дизайнер отрисовывает макет всех основных (типовых) страниц, которые умеет выводить CMS-система. Например, запись блога, страница товара, страница поиска и т.п.
- На основе дизайна создаются HTML-макеты.
- Затем HTML-макеты подключаются к шаблонизатору CMS-системы (иногда страницы могут нарезаться на отдельные блоки или элементы, чтобы локализовать вывод динамического контента).
- CMS устанавливается на сервер.
- Администратор наполняет базу данных (структура меню, посты, товары и прочий контент).
- CMS отдаёт страницы пользователям.
Если интересуют технические детали…
Многие популярные CMS-системы, представляют собой так называемый «монолит». Это значит, что вся обработка страниц происходит внутри сервера и по результатам браузеру отдаётся HTML-код. Отдельные участки кода могут работать с Ajax (JavaScript) это когда виджеты или блоки перерисовываются в браузере на основе триггеров или действий пользователя без перезагрузки всей страницы. Получается, что классические CMS – это конструкторы, собирающие результирующий HTML-код.
Но есть противовес монолиту – микросервисы. Они работают с headless-движками. Страницы сайта собираются с помощью JavaScript-фреймворков, браузеру отдаётся не готовый HTML, а набор из скриптов. Сайт отрисовывается по мере их исполнения.
Есть движки, как GravCMS, которые не работают с базами данных. Вся информация хранится в виде файлов на сервере. Тем не менее, они всё равно являются динамическими, так как для их отрисовки нужна поддержка PHP или другого языка web-программирования.
Вам никто не запрещает создать сайт на CMS-системе, наполнить его и затем преобразовать всё в статичный вид. Достаточно сохранить все страницы в виде HTML-файлов и вернуть на сервер (примерно так и работают системы кеширования). О сохранении HTML-страниц ниже.
Использование онлайн-конструкторов
Онлайн-конструкторы – это революция в отрасли сайтостроения. Если для запуска сайта на базе CMS вам потребуется хостинг, домен, а также глубокие технические знания (для установки и настройки движка), то в случае с SaaS-решениями вы получаете всё в готовом виде (под ключ). В подписку уже будет входить всё необходимое, вплоть до техподдержки и визуального редактора, в котором можно создавать и наполнять страницы.
Механизм создания сайтов здесь максимально простой:
- Регистрируется учётная запись.
- Оплачивается подписка/тариф.
- Выбирается стартовая тема (некоторые платформы все шаблоны предоставляют бесплатно, а некоторые предлагают покупку премиум-тем).
- Подключается домен (хотя можно воспользоваться и бесплатным техническим).
- Сайт наполняется контентом.
Пока вы оплачиваете подписку, сайт будет работать. Собственно, в случае с арендой хостинга действует тот же принцип.
Из минусов только то, что мало какие облачные конструкторы разрешают забирать сайт на свой хостинг. Исключения:
- uCoz (здесь есть система бэкапа, на основе которой легко организовать миграцию в CMS-систему),
- 1C-UMI и некоторые аналогичные платформы (здесь есть возможность покупки лицензии коробочной CMS с переносом данных на ваш сервер).
Обратите внимание, многие облачные конструкторы рассчитаны на обслуживание малостраничных проектов. Приятное исключение – uCoz (и его полная копия uWeb), здесь можно создавать блоги, форумы, доски объявлений, масштабные интернет-магазины.
Использование IDE (сред разработки) и профессиональных программ
Если попытаться собрать современный сайт с нуля, то можно быстро разочароваться. Даже элементарные посадочные страницы содержат около 1-2 тыс. строк кода (в символах это несколько десятков тысяч).
На создание HTML-макетов могут уйти месяцы. По этой причине профессиональные программисты и web-разработчики, дизайнеры, которые занимаются созданием нестандартных сайтов и web-интерфейсов, используют профильный софт.
К числу профессиональных инструментов можно отнести:
- IDE-системы.
- Библиотеки и сниппеты (коллекции готовых блоков кода для типовых задач).
- Системы отладки и тестирования.
- Парсеры (а к ним ещё и прокси-серверы).
- Сервисы прототипирования интерфейсов.
- Таск-трекеры.
- Редакторы кода (с подсветкой синтаксиса, с автоподстановкой, отладкой и пр.).
- Хранилища кода.
- Конструкторы интерфейсов (как Quarkly).
- Фреймворки или CMF-системы.
Реже могут использоваться No-Code-конструкторы сайтов и оффлайн-конструкторы. Дело в том, что в таких программах ограничена свобода действий.
Оффлайн-конструкторы, как Mobirise или WebsiteX5, рассчитаны либо на работу в поток (для быстрой вёрстки типовых малостраничных сайтов клиентам), либо на личное использование (чтобы сделать лендинг или визитку для себя, но цены при этом получаются неоправданно высокими).
Как и в случае с self-hosted движками, сайты, собранные с использованием профессиональных программ, требуют аренды хостинга.
Обратите внимание, с помощью профессионального ПО как раз и разрабатываются шаблоны для CMS-систем, чтобы потом конечным пользователям, далёким от дизайна, было проще наполнять сайты.
Создание простых сайтов в блокноте
Самый адекватный способ создания одностраничного или малостраничного сайта на базе HTML-страниц – покупка готовых HTML-шаблонов на специальных маркетплейсах.
Реже можно найти качественные бесплатные макеты (наш список HTML-шаблонов).
Самый неправильный путь – скопировать/скачать HTML-код конкурентов. Это чревато юридическими исками и другими неприятными последствиями.
Самый сложный путь – написание кода с нуля в блокноте. Но это дорога истинных самураев. Сейчас уже так никто не делает. Разработка сильно усложнилась. Создание сайтов в блокноте подходит максимум для обучения.
HTML-сайты пользовались широкой популярностью в 90-х и 2000-х годах. Просто потому, что особых альтернатив-то и не было.
Вёрстка в HTML бывает табличной (table – устаревший стандарт) и блочной (div – именно её сейчас используют в адаптивных шаблонах).
Небольшой ликбез.
HTML-язык использует обширный набор тегов, почти все из которых работают парой – открывающий и закрывающий (например, — тег абзаца), внутри которых содержится контент. В CSS используются атрибуты, свойства и их значения, подключаемые к отдельным элементам HTML-каркаса страницы. С помощью CSS можно придавать желаемый вид каждому элементу на сайте по отдельности.
Мы не ставим своей целью обучить вас синтаксису языков – если нужно, то без труда сможете найти сотни уроков и справочников по ним в Сети. Покажем основу – как сделать простой HTML-сайт в блокноте. Что называется, для примера и понимания масштабов бедствия. Заодно сможете понять – нужно оно вам или нет
Шаг 1 – создание страницы формата HTML
Откройте стандартный блокнот для Windows (или любой другой текстовый редактор – Notepad++, Sublime Text – неважно), измените кодировку с ANSI на UTF-8 (для правильного отображения русских букв в браузере), откройте меню «Файл», выберите «Сохранить как», укажите название файла (желательно латиницей) и измените расширение с txt на html (оно идёт после точки), после чего сохраните изменения.
Шаг 2 – добавляем разметку веб-страницы
Теперь приступаем к редактированию файла. Первым делом необходимо добавить веб-разметку – стандартный блок кода, позволяющий браузерам распознавать контент, находящийся во внутренних тегах. Просто скопируйте и вставьте его:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Топовый сайт новичка</title> </head> <body> <h1>Это тег заголовка первого уровня для содержимого страницы</h1> <p>Первый абзац</p> <p>Второй абзац</p> <p>Третий абзац и т. д.</p> </body> </html>
Это базовые элементы, которые есть на любом веб-ресурсе. Весь контент страницы должен находится между тегами (это тело документа), всё, что выходит за их пределы выше и ниже, не будет отображаться на сайте.
Шаг 3 – работаем со стилями CSS
Допустим, вы добавили какой-то текст в параграфы, теперь нужно придать им стилистику – выбрать шрифты, фон, отступы, ширину области страницы и т. д. Это может выглядеть вот так:
body {
background: #F2F2F2;
max-width: 900px;
margin: 10px auto;
padding: 30px;
}
h1{
color: #4C4C4C;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #BEBEBE;
}
p{
font:italic;
}
В примере вы видите цвет фона (background) и значение этого атрибута (#F2F2F2), ширину страницы (900 пикселей), отступы, цвет заголовка, отступы от основного текста и границ страницы (padding и margin), а также цветную границу нижней части сайта в 2 пикселя (border-bottom). Вся страница в сборе с разметкой, контентом и стилями будет выглядеть так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Топовый сайт новичка</title>
<style>
body {
background: #F2F2F2;
max-width: 900px;
margin: 10px auto;
padding: 30px;
}
h1{
color: #4C4C4C;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 2px solid #BEBEBE;
}
p{
font:italic;
}
</style>
</head>
<body>
<h1>Это тег заголовка первого уровня для содержимого страницы</h1>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац и т. д.</p>
</body>
</html>
Как видите, свойства CSS мы добавили между тегами <style></style>. После завершения всех операций сохраните результат. Теперь, если вы попытаетесь открыть полученную страницу в браузере, то она будет выглядеть, как на скрине ниже. Поздравляем, вы создали свой первый простенький сайт в блокноте.
Шаг 4 – загрузка сайта на хостинг
Понятно, что сайт из примера – не из тех, что публикуют в Интернете и тратятся ради этого на платный хостинг. Но, если вдруг вы, изучив HTML и CSS, создадите действительно стоящий сайт для достижения своих целей, то для его отображения в Сети обязательно потребуются хостинг и домен.
Лучший способ создания HTML сайта
Идеальный способ создания сайта – это тот, который потребует от вас меньше сил и финансовых вложений.
Глупо предполагать, что, выбрав бесплатную CMS-систему, вы сможете реально сэкономить. На поверку такие сайты могут обходиться дороже, чем сайты, собранные в онлайн-конструкторах. Чтобы понять это, нужно посчитать абсолютно все вложения: время и силы, потраченные на освоение платформы, расходы на плагины и шаблоны, затраты на доработки и программистов, на хостинг, на сопутствующие сервисы и интеграции.
Максимум подробностей в материале Сколько стоит сайт.
А ещё всё будет зависеть от типа сайта и стоящих перед ним задач.
Наши рекомендации:
- Если нужен небольшой сайт для бизнеса (лендинг, визитка, мини-магазин, портфолио, каталог услуг и т.п.) – выбирайте облачные конструкторы. Здесь есть масса готовых тем, не нужно думать о техническом сопровождении или о настройке хостинга. Достаточно его наполнить и время от времени актуализировать – всё это можно делать своими силами. Экономия будет ощутимой, так как не нужно задействовать труд программистов.
- Если вы впервые делаете интернет-магазин (без опыта и предметных знаний) – тоже начинайте с облачных платформ. Получается модель MVP (минимальный работоспособный продукт). Можно быстро и беспроблемно запуститься, протестировать спрос/нишу, откупиться малыми расходами. Если бизнес пойдёт, то расходы на инфраструктуру быстро окупятся.
- Если опыт набран и магазин сильно разросся – логично переехать на свой хостинг. Но нужно детально посчитать силы на внедрение и обслуживание движка. В определённый момент может оказаться, что проще нанять собственный отдел разработки.
- Если нужно сделать блог или информационный сайт, то тут может быть два пути. Первый – сразу в облаке, но можно упереться в лимиты платформы (нужно считать). Второй – сразу на базе CMS-системы (но тут всё равно будут крупные разовые вложения, даже если движок будет бесплатным).
- Если у вас серьёзный бизнес-проект, то нужно вкладываться в полноценную разработку. Архитектура должна соответствовать масштабам и бюджетам. Самый адекватный вариант – задействовать фреймворки.
- Статические HTML-сайты подходят только для создания простых визиток и лендингов.
Что делать с динамическими элементами?
Предположим, что вы создали статичный HTML-сайт. Но остаётся одна очень важная проблема – как собирать обратную связь от клиентов? Сюда можно отнести приём заявок, переписку в чате с консультантом, оформление подписок на email-рассылки и т.п.
Организовать динамические элементы на статическом сайте можно несколькими способами:
- Натянуть HTML-макет на CMS-систему (чтобы задействовать её механизмы обработки форм).
- Написать PHP-скрипт, который будет обрабатывать формы сайта (нужен специальный хостинг и навыки программирования).
- Написать JS-скрипт, который будет задействовать серверные библиотеки для отправки почты (тоже нужны навыки программирования и поддержка тех самых библиотек на хостинге).
- Использовать виджеты сторонних сервисов.
Примеры реализаций таких сервисов:
- Как сделать онлайн-калькуляторы и формы для сайта (с помощью uCalc)
- Виджеты онлайн-консультантов
- Всплывающие окна
- Проведение онлайн-опросов
- Сервисы email-рассылок (со встроенными конструкторами форм подписок)
Как скачать HTML-версию сайта, собранную в конструкторе или CMS?
Выше мы упомянули, что любой сайт, даже если он динамический, можно сохранить в виде HTML-страниц.
Делается это очень просто – прямо в браузере. На примере Google Chrome:
- Откройте нужную страницу сайта.
- В меню браузера найдите пункт «Сохранить и поделиться».
- В выпадающем списке нажмите пункт «Сохранить страницу как…» (а можно сразу нажать комбинацию Ctrl+S).
- Выберите папку и при необходимости переименуйте файл (не забудьте проверить тип сохранения – веб-страница полностью).
- Готово. Браузер выгрузит страницу в виде HTML-файла, а рядом создаст одноимённую папку и в ней сохранит все связанные файлы и скрипты (изображения, иконки, CSS-таблицы, JS-скрипты).
Обратите внимание, часть CSS-таблиц и JS-скриптов может по-прежнему оставаться на внешних источниках (они будут прописаны внутри кода и браузер это никак не может исправить).
Единственная сложность – когда нужно сохранить сразу все страницы с выбранного сайта.
Но и эта задача решаема, для этого существуют специальные оффлайн-браузеры (часть из них распространяется платно, некоторые представители могут морально устареть, так как современный web сильно поменялся).
Потенциальные проблемы копирования HTML
Всегда возникает второй вопрос – какова цель таких действий?
Во-первых, можно столкнуться с юридическими ограничениями: воровать дизайн и контент нельзя, даже если они технически ваши (например, вы создали их в онлайн-конструкторе, но отказались платить подписку).
Во-вторых, сайт и его содержимое, включая HTML-код, это интеллектуальная собственность. Правообладатели могут подать на вас в суд.
В-третьих, если вам понравился дизайн конкурентов, и вы хотите использовать его на своём сайте, то как минимум дизайн получится неуникальным и из-за этого могут наложиться санкции от поисковых систем (особенно, если сайт был скопирован вместе с контентом).
Выводы и рекомендации
Динамические сайты придумали не просто так, чем больше на сайте становится страниц, тем актуальнее вопросы обновления ссылок и индексов, поиска, фильтрации, обработки форм ввода, и т.п.
Статические HTML-сайты потребляют минимум ресурсов сервера, но они совершенно нефункциональные. Максимум, это могут быть онлайн-визитки. Добавить интерактивные функции к ним можно за счёт натяжки HTML-шаблонов на CMS-системы (движки) или на фреймворки, а также за счёт написания своих скриптов или интеграции профильных сервисов.
Гораздо проще сразу собирать свой сайт в онлайн-конструкторах, тогда интерактивные функции и виджеты будут в комплекте.
Создание сайтов в блокноте – это что-то из области фантастики, особенно без опыта и профильных знаний. Максимум для чего понадобится блокнот – отредактировать имеющийся HTML-код ну или обучиться основам HTML-вёрстки (разобраться что и как работает).