8 (800) 500-54-06
Создать сайт
Создать сайт
ГлавнаяБлогСерёжа Сыроежкин
Серёжа Сыроежкин
Серёжа СыроежкинКопирайтер
3.06.2015

Как создать сайт HTML

Сегодня мы разберемся как создать сайт в блокноте при помощи HTML. HTML-документ должен иметь следующую структуру:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Как создать сайт с нуля - "Нубекс"</title>
 </head>
 <body>
  <h1>Мой первый сайт в блокноте HTML</h1>
  <p>Привет! Это мой первый сайт.</p>
 </body>
</html>

Скопируйте приведенный код в блокнот (Notepad) и сохраните на компьютере в формате .html. Чтобы теперь посмотреть на нашу веб-страницу, откройте сохраненный файл с помощью браузера (Правой кнопкой мыши -> Открыть с помощью).

Большинство тегов, которые используются в нашем коде уже были рассмотрены в предыдущих статьях:

  • html - корневой тег документа, является контейнером веб-страницы;
  • head - в этом теге указываются основные данные, касающиеся генерации веб-страницы (заголовок, стили, скрипты, мета-теги и так далее);
  • body - основной тег страницы. Представляет собой "тело" документа, внутрь которого помещаются остальные теги;
  • <!DOCTYPE html> - указывает на тип документа (Doctype);
  • meta - используется для указания метаданных страницы (в нашем случае тег указывает на кодировку страницы. Подробнее о мета-тегах читайте в статье Мета-теги);
  • title - задает непосредственный заголовок страницы (Тег title);
  • H1 - заголовок страницы/статьи (подзаголовки задаются тегами H2-H6);
  • P - тег, с помощью которого выделяются абзацы в тексте страницы;

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>ООО Василий Пупкин</title>
 </head>
 <body>
  <h1>Информация о нашей компании</h1>
	<center><img src="we.jpg" width="30%" /></center>
    <h2>Кто мы?</h2>
	<p>Мы - комманда профессионалов.</p>
    <h2>Наши услуги</h2>
	<h3>Создание сайтов</h3>
	  <p>Мы создаем по-настоящему крутые сайты.</p>
	<h3>Продвижение сайтов</h3>
	  <p>Ваш сайт в ТОП-3 поисковых систем через 2 дня.</p>
	<h3>Посадка картошки</h3>
	  <p>20 соток в час.</p>
     <h2>Контакты</h2>
	<div id="map">Карта проезда: 
	   ...	
	</div>
	<p>Телефон: 0000</p>
 </body>
</html>

Основная информация о создании сайта при помощи конструктора сайтов "Нубекс" описана в статье: Как правильно создать сайт.

Смотрите также: