Создание простого HTML-сайта
Хоть HTML-сайты были популярны в 90-е годы прошлого века, когда ещё не было CMS или крутых фреймворков на подобии Yii, но они используются и по сей день. Создание простого HTML-сайта сегодня чаще всего используется для обучения новых веб-программистов и верстальщиков.
Отличие HTML-сайта от веб-сайта на PHP
По дизайну HTML-сайт не отличить от интернет-сайтов, созданных на любых других веб-технологиях. Сегодня можно найти и использовать шаблоны HTML-сайтов с крутыми дизайнами. Но чем же отличается HTML-сайт от сайтов на PHP к примеру?
Вот главные их отличия:
- В HTML-сайте нет возможности создать администраторскую панель как на PHP.
- При создании сайта к примеру, на 10 страниц на HTML придётся редактировать каждую страницу отдельно в программном коде, в то время как на PHP можно редактировать отдельные блоки.
- HTML часто используется для создания лендингов или сайтов визиток, если не учитывать обучение. PHP же можно использовать для всех типов сайтов в том числе небольших онлайн-игр.
Теперь, когда разобрали главные отличия, перейдем к созданию простого сайта с HTML-разметкой.
.png)
Создание простого HTML-сайта
Самым простым способом создать HTML-сайт является использование стандартного блокнота от используемой ОС. Но если хотите чтобы все было понятно, то лучше использовать программу Notepad++, которую можно скачать по ссылке с официального сайта. Этот инструмент специально предназначен для программирования и имеет мощный функционал. Главной особенностью является то, что программа подсвечивает отдельные блоки для удобства.
Итак, приступим. Для того чтобы создать HTML-сайт для начала требуется создать HTML-файл с кодировкой UTF-8. Это делается для того, чтобы сайт правильно отображался в браузере. Для этого переходим в программу Notepad++ в раздел «Кодировки». Там выбираем пункт «Кодировать в UTF-8 без BOM» и сохраняем файл в выбранном месте под именем «index» и выбираем тип файла «Hyper Text Markup Language file». Таким образом файл будет с именем «index.html».
Важно! Для названия всех файлов требуется использовать исключительно латинскими буквами.
Для того, чтобы будущий сайт принял правильный вид и браузеры смогли его распознать, требуется добавить веб-разметку, которую Вы можете скопировать и вставить к себе:
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Наш первый веб-сайт</title>
</head>
<body>
Тут будет код с содержимым сайта
</body>
</html>
.png)
Это стандартная разметка каждого интернет-портала независимо от темы или метода разработки. Чтобы сайт вывести информацию в требуемом виде, интернет-разработчики используют специальные теги. Самые популярные из них:
- <div></div> — используется для обозначения блоков выводимого контента.
- <p></p> — предназначен для обозначения параграфов.
- <a href=”ссылка-на-страницу”></a> — предназначен для добавления ссылок на сайт (внешних и внутренних).
- <ul></ul>, <ol></ol> — начало и конец списков (маркированный и нумерованный соответственно).
- <li></li> — элементы списка.
- <img src=”ссылка на картинку” /> — предназначен для добавления картинки.
- <table></table> — начало и конец таблицы.
- <tr></tr> — строка таблицы.
- <th></th> — ячейка таблицы жирным шрифтом.
- <td></td> — ячейка таблицы обычным шрифтом.
Существуют и другие теги, используемые в HTML, но пока для первого сайта нам хватит и этих. Давайте применим их на практике. Все изменения вносим в блок <body></body>:
<div>
<p>Здесь будет первый абзац <a href=”ссылка-на-страницу”>с ссылкой</a> на другую страницу.</p>
<p>Дальше будет список:</p>
<ul>
<li>Элемент списка 1</li>
<li> Элемент списка 2</li>
<li> Элемент списка 3</li>
</ul>
</div>
<div>
<p>Дальше выведем таблицу:</p>
</div>
<table>
<tr>
<td><img src=”ссылка на картинку 1” /> </td>
<th><p>Ячейка 2 с жирным текстом в первой строке таблицы</p></th>
<td><p>Ячейка 3 с обычным текстом в первой строке таблицы</p></td>
</tr>
<tr>
<td><img src=”ссылка на картинку 2” /> </td>
<th><p>Ячейка 2 с жирным текстом во второй строке таблицы</p> </th>
<td><p>Ячейка 3 с обычным текстом во второй строке таблицы</p> </td>
</tr>
</table>
<div>
<p>Строка после таблицы</p>
</div>
Вот так работает HTML-разметка для сайта. При этом теги <p></p> могут быть как в блоках <div></div>, так и без них. Тоже самое с тегами <a></a>. Если объединить весь код вместе, то получится следующее:
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Наш первый веб-сайт</title>
</head>
<body>
<div>
<p>Здесь будет первый абзац <a href=”ссылка-на-страницу”>с ссылкой</a> на другую страницу.</p>
<p>Дальше будет список:</p>
<ul>
<li>Элемент списка 1</li>
<li> Элемент списка 2</li>
<li> Элемент списка 3</li>
</ul>
</div>
<div>
<p>Дальше выведем таблицу:</p>
</div>
<table>
<tr>
<td><img src=”ссылка на картинку 1” /></td>
<th><p>Ячейка 2 с жирным текстом в первой строке таблицы</p></th>
<td><p>Ячейка 3 с обычным текстом в первой строке таблицы</p></td>
</tr>
<tr>
<td><img src=”ссылка на картинку 2” /></td>
<th><p>Ячейка 2 с жирным текстом во второй строке таблицы</p></th>
<td><p>Ячейка 3 с обычным текстом во второй строке таблицы</p></td>
</tr>
</table>
<div>
<p>Строка после таблицы</p>
</div>
</body>
</html>
При этом к каждому из тегов в блоке <body></body> можно добавить класс или идентификатор, или даже оба если это требуется. Это делается для того чтобы применять разные стили дизайна к каждому из них. Это делается следующим образом:
<div class=”block-1”>
<p id=”abzac-1”>Здесь будет первый абзац <a id=”ssylka1” class=”vneshnyaya” href=”ссылка-на-страницу”>с ссылкой</a> на другую страницу.</p>
</div>
Как видите, здесь нет ничего сложного. Главное писать классы и идентификаторы слитно или через дефис. Если же разделить класс или идентификатор пробелом, то этот тег получит 2 класса или 2 идентификатора.
Важно! Не рекомендуется использовать 2 идентификатора для одного тега. Лучше добавить 2 и больше классов.
На практике это выглядит так:
<div class=”class-1 class-2 class-n”>
<p>Здесь будет текст</p>
</div>
Также возможно применять один и тот же класс для нескольких разных блоков. Например:
<div class=”class-1”>
<p>Здесь будет текст</p>
</div>
<div class=”class-1”>
<ul>
<li>Элемент списка 1</li>
<li> Элемент списка 2</li>
<li> Элемент списка 3</li>
</ul>
</div>
Важно! Нельзя применять один и тот же идентификатор для разных блоков или тегов. Он предназначается только к одному элементу.
Кроме стилей классы и идентификаторы также используются в создании Javascript-скриптов. Они предназначены для улучшения веб-сайта и организации полезных функций. Как их создать Javascript-скрипты и стили дизайна, а также подключить их к нашему сайту, смотрите в наших следующих статьях.
Пока сайт сохранен на компьютере, он виден только Вам. Достаточно запустить файл «index.html» после сохранения, и он тут же откроется в браузере по умолчанию, где будет видно все изменения.
Для того чтобы сайт был виден другим, его требуется загрузить на хостинг (место, где он будет хранится) и купить ему домен (адрес, по которому его будет видно в интернете). Как это делается можете посмотреть в статье «Как создать собственный веб-сайт и заработать на нём?» в конце раздела «Как создать интернет-сайт».
Удачного программирования!