Найти в Дзене
Виктор Саитов

Как сделать сайт на HTML

1
1 мин
Сегодня мы разберемся как создать сайт в блокноте при помощи HTML. HTML-документ должен иметь следующую структуру: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Как создать сайт с нуля - "Нубекс"</title> </head> <body> <h1>Мой первый сайт в блокноте HTML</h1> <p>Привет! Это мой первый сайт.</p> </body> </html> Скопируйте приведенный код в блокнот (Notepad) и сохраните на компьютере в формате .html. Чтобы теперь посмотреть на нашу веб-страницу, откройте сохраненный файл с помощью браузера (Правой кнопкой мыши -> Открыть с помощью). Большинство тегов, которые используются в нашем коде уже были рассмотрены в предыдущих статьях: Как показано выше, HTML-страницы сайта имеют древовидную структуру. Одни теги могут быть вложены в другие, а те, в свою очередь, - в третьи. Это означает, что структура документа определена достаточно четко. Открывающиеся теги обязательно должны иметь закрывающую пару. Немного усложним нашу страницу: <!DOCTYPE html> <html> <head> <meta

Сегодня мы разберемся как создать сайт в блокноте при помощи 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>