Урок 1. Что такое HTML в современном сайте
На сегодняшний день трудно представить современную успешную компанию у которой не имелось бы в своем управлении хотя бы одного сайта. В некоторых случая у одной компании может быть два, три и более сайта. Так что не стоит думать, что сегодня у каждой фирмы нет потребности в IT специалистах, которые создавали бы для них новые интернет площадки.
Давайте же начнём наше обучение с основы, без которой нам будет сложно разбираться в строении современных сайтов. Все сайты делятся на разные категории, возможно о некоторых Вы уже слышали:
- Лендинг. Простые одностраничные сайты, которые в основном применяются для раскрутки товара или услуги компании.
- Корпоративный сайт. Это сайт, который рассказывает о деятельности компании и иногда предлагает список оказываемых услуг.
- Интернет магазин. Тут не стоит объяснять, ведь интернет-магазином, наверно, уже пользовался каждый из нас.
Что же может объединять все эти категории сайтов? Всё очень просто. На самом деле, любой сайт делается путём написания тегов и скриптов. Тегами мы расставляем все объекты на нужные места, а скриптами мы управляем этой информацией. Ниже на примере, мы покажем, очень простой пример и разберём его:
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>Новый сайт</title>
-
</head>
-
<body>
-
<h1>Привет мир!</h1>
-
</body>
-
</html>
Уже стало страшно? Не волнуйтесь, ведь сейчас мы разберём каждую строчку этого кода. Цифрами слева показан номер строки. На них мы будем ссылаться, если нам будет трудно ориентироваться в коде дальше. А все остальное это разметка нашего HTML документа. Теги — то основные элементы, применяемые для отображения гипертекста. Одни теги могут быть оставаться открытыми (между тегами не будет других тегов), а другие необходимо закрывать (между тегами будет много других вложенных тегов).
Сначала необходимо показать какой тип документа будет отображаться в браузере. Для этого мы первой строкой объявляем тег html. В конце документа в строке номер 9 мы его закрываем, так как этот тег, внутри которого мы будем еще добавлять информацию. Теперь мы рассказали браузеру то, какой тип документа будет использоваться далее, теперь объявим заголовки. В нашем случае HTML.
Тег head отправляет особо важные информационные данные о сайте. Это могут быть: название всего документа, описание документа, перечисление ключевых слов, какие внешние скрипты надо подключить и т.д. В примере мы передаём два паратмера: в теге meta в параметрах (или атрибутах) мы указываем кодировку документа (в примере указан UTF-8) и в теге title мы указываем название всего документа, который будет отображаться во вкладке браузера. В нашем случае мы больше не передаём информационные данные в заголовке документа и закрывает тег head.
Мы подошли к самому главному тегу body, внутри которого происходит вся магия по созданию сайтов. Внутрь этого тега добавляется вся информация, которая будет отображаться на экране монитора: тексты, картинки, формы, видео и прочий контент. В примере мы добавили заголовок первого уровня h1 с текстом Привет мир. Подробнее о заголовках мы разберем в следующих уроках. Запомните, что основная работа по дизайну и наполнению сайтов происходит внутри тега body.
Скопируйте исходный код и попробуйте поменять информацию внутри тегов title и h1 в тестовой среде, которая находится ниже и посмотрите готовые результаты, чтобы лучше понять, что вы меняете и что происходит после изменений. Для этого необходимо перейти по ссылке Edit in JSFiddle в виджете тестовой среды.
Надеемся это этот вводный урок Вам был понятен. Мы не заостряем внимание на деталях, мы работаем, учимся и делаем сайт самостоятельно!
