Структура web-страницы, теги

Что такое сайт?

Сайт, или веб-сайт (от англ. website: web — «паутина, сеть» и site — «место», буквально «место, сегмент, часть в сети»), — одна или несколько логически связанных между собой веб-страниц; также место расположения контента сервера. Обычно сайт в Интернете представляет собой массив связанных данных, имеющий уникальный адрес и воспринимаемый пользователем как единое целое.

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

По своему информационному содержанию и целям сайты можно разделить на:

Landing page (одностраничный сайт, посадочная страница) — содержит информацию о компании или продукте, которая побуждает пользователя совершить целевое действие.

Корпоративный сайт – расширенная информация о компании: ее контакты, новости, перечень услуг, сотрудники, и т.д. Часто такие сайты создаются в рекламных и/или информационных целях, рекламируют товары и услуги компаний. Например, сайт Юниум.

Блог – сайт с авторскими публикациями на определенную тему. Например, Varlamov.ru.

Интернет-магазин — сайт, с помощью которого можно заказать товары (обычно с доставкой). Например, ozon.ru или lamoda.ru.

Поисковые системы – это не просто сайты, а Титаны современного Интернета. Они обрабатывают огромное количество информации по все сети, чтобы пользователь смог найти что угодно за несколько мгновений. Например, google.com или yandex.ru.

Социальные сети — сайты, которые позволяют людям организовывать сообщества, общаться между собой и обмениваться контентом. Например, vk.com или facebook.com.

И это еще не все. Как ты понимаешь, это разделение условно и далеко не всегда можно понять к какой категории отнести сайт. И ничего не мешает тебе придумать свои цели для сайта и изобрести что-то новое.

Как сделать свой сайт?

Самый простой сайт — это файл расширения .html, HTML — стандартизированный язык разметки. Именно в нем содержится вся (почти) информация, которая обрабатывается браузером, а затем отображается на экране пользователя. Вот пример:

<html>
<head>
<title>Название сайта</title>
</head>
<body>
<a href="http://google.com">Google</a>
<h1>Главный заголовок</h1>
<h2>Подзаголовок</h2>
<p>Текст твоей статьи</p>
</body>
</html>

Для того, чтобы сделать такую страницу, достаточно программы Блокнот, но мы рекомендуем использовать Sublime. Его можно бесплатно скачать и установить на свой компьютер для работы. Открой Блокнот или Sublime и набери или скопируй текст из примера в окно программы. После чего файл нужно сохранить как HTML-документ. Сохраненный файл можно открыть любым браузером, чтобы посмотреть на результат.

Пример простой HTML-страницы
Пример простой HTML-страницы

Теги

Чтобы браузер при отображении документа понимал, что имеет дело не с простым текстом, а с элементом форматирования применяются теги.

Синтаксис:

<тег Атрибут1="значение" Атрибут2="значение">

<тег Атрибут1="значение" Атрибут2="значение">…тег>

Как видно из данного примера, теги бывают двух типов — одиночные и парные (контейнеры). Одиночный тег используется самостоятельно, а парный может включать внутри себя другие теги или текст. У тегов допустимы различные атрибуты, которые разделяются между собой пробелом. Впрочем, есть теги без всяких дополнительных атрибутов. Условно атрибуты можно подразделить на обязательные, они непременно должны присутствовать, и необязательные, их добавление зависит от цели применения тега.

Пример:

<a href="http://google.com" >Google</a>

Разберем теги из самого первого примера:

  1. <html></html> — является контейнером, который заключает в себе все содержимое веб-страницы, включая теги <head> и <body>.
  2. <head></head> — предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными.
  3. <body></body> — предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера.
  4. <a href="Ссылка">Отображаемый на странице текст</a> — предназначен для создания ссылок.
  5. <h1></h1><h6></h6> — теги, внутри которых содержится заголовок, h1 — самый главный, h2, 3 … 6 — подзаголовки.
  6. <p></p> — тег, внутри которого содержится целый абзац текста.