В этой статье мы познакомимся с языком разметки html 5 и создадим вашу первую страницу сайта. Для создания сайта ,как я писал в прошлой статье, вам понадобиться компьютер с текстовым редактором. Текстовый редактор можете выбрать сами по своему усмотрению, в компьютере есть системный редактор "БЛОКНОТ" на нем тоже можно работать но по моему мнению это может оказаться долго и мучительно.
Для начала давайте разберем что такое сайт. Визуально это страница любого интернет ресурса который вы видите в окне своего браузера это может быть меню, картинка, видео, текст или кнопка с ссылкой ну и без красочного оформления никак))). А теперь заглянем за кулисы, во многих браузерах есть горячая комбинация клавиш это Ctr+U которую нажав можно предварительно увидеть *написание кода на текстовом редакторе и сохранёном в надлежащем формате*. Получиться примерно такая картина
Начинаем, открываем блокнот и пишем в нем скелет такого содержания
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
после чего его можете пока сохранить на рабочем столе назвав index.html index=это имя файла а html=это формат так же как и txt или doc. После сохранения ваш файл должен обрести иконку вашего браузера который стоит у вас по умолчанию а нажав на него откроется пустое окно браузера за исключением одного
<title>Document</title> браузер показал только надпись Document а остальное он не показал. Почему так получилось мы разберем далее.
Теперь разбираем нашего скелета, он же каркас html файла и вашего будущего сайта.
<!DOCTYPE html> эта строка дает браузеру команду что все что ниже написаные коды надо читать на языке html 5, а не более раними версиями html.
В языке html есть два вида тегов. Первые парные, к примеру <div> это открывающий тег и </div> это закрывающий тег. Между ними может находиться любое содержание. Разница между ними /-это слеш. И теперь чтобы начать саму страницу открываем тег <html> но не забываем написать атрибут lang="ru" он дает команду на каком языке заполняется сам сайт. Вместо ru можно написать en и тогда браузер будет думать что сайт заполнен на английском языке и предложит вам перевести страницу на русский язык хоть он и будет заполнен на русском языке. Как на рисунке ниже
В итоге у вас должно получиться так <html lang="ru"> и не забываем про закрывающий тег </html>. Между этими тегами уже будет находиться содержимое вашего сайта.
Между тегами <head> и </head> находятся данные сайта, обязательно должна находиться кодировка сайта <meta charset="UTF-8"> . Там находятся теги <title> </title> между ними пишется краткое описание или название сайта которое отображается в самом верху окна браузера
название подчеркнул красной полоской. В тегах head ещё в дальнейшем будут находиться ссылки на файл css, js и ссылки на подключение шрифтов и другие сторонние объекты. В двух словах в голове *head* распологатся данные о сайте.
Теги <body> </body> уже вмещают в себя все содержимое сайта, это то что вы должны будете видеть в окне своего браузера, ну а поскольку это голый каркас поэтому браузер вам и показал пустое окно а все теги и атрибуты это уже набор команд для браузера.
Выше когда я вам приводил пример о парных тегах не с проста упомянул тег <div></div> он считается блочным. Т.е. если вы в своем блокноте html файла напишете примерный код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>Привет</div> <div>Мир</div>
</body>
</html>
Сохраните и откроете через браузер, то увидете
Теги div всегда располагаются в колонку хоть даже если вы их в коде написали в строчку друг за дружкой, сам по себе div это контейнер в котором можно разместить фактически все что угодно. Теперь давайте в каркасе вместо div поставим другой тег <span> </span> только не напишем в строчку а в колонку, в итоге у вас должно получиться так
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>Привет</span>
<span>Мир</span>
</body>
</html>
После сохранения получиться так
Теги <span> </span> являются строчными и хоть в коде мы их выстроили в колонку в браузере надпись выстроилась в строчку, парадокс не правдали))).
И примите мои поздравления вы создали первый свой самый простой сайт, по мере написания статей дальше может показаться немного сложно но интерестно.
Мои рекомендации начинащим верстальщикам ознакомиться с тегами html 5, ненадо их учить (большинство из них и не понадобиться) просто чтобы вы знали что такие теги есть.