В прошлый раз мы ознакомились с основными понятиями HTML и CSS, установили среду разработки и нашли первые источники обучения. Если вы пропустили этот материал, ознакомиться с вводной частью можно тут .
Сегодня мы с Вами познакомимся с HTML тегами, атрибутами и их значениями. Начнем!
HTML теги, атрибуты и значения
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
…
</body>
</html>
Приведенная выше запись является основной структурой веб-документа.
Вот так это будет выглядеть в редакторе кода:
<tag attribute="value">...</tag>
Эта запись представляет собой основную формулу при написании тех или иных объектов. Наличие атрибутов у тегов опционально. Некоторые теги требуют включения атрибутов- некоторые нет.
Напишем наш первый тег, например тег заголовка и зададим ему класс со значением title, используя эту формулу:
Вот так это будет выглядеть. Теперь внутри этого тега впишем текст: Заголовок, заголовочек и откроем это в браузере. Чтобы это сделать достаточно зайти в папку, где хранятся два файла, которые мы создали ранее и дважды ткнуть на index.html
На выходе получим вот это:
Вуаля! Красота, правда?
Основные теги, используемые при написании HTML кода сайта
Примечание:
Запись <!DOCTYPE HTML> - обязательна к написанию в каждом html-документе. Нынешний стандарт - html5 - и, в соответствии с этим стандартом, каждый html документ должен иметь эту запись. Она позволяет браузеру понять, что он обрабатывает именно веб-сайт.
<html>...</html> - данный тег представляет собой основной контейнер для содержимого веб-страницы. Весь контент, находящийся на странице, должен быть написан внутри этого тега.
<head>...</head> - данный тег представляет собой контейнер для служебной информации на сайте. Подключение стилей, различных библиотек CSS и JS, кодировка страницы и пр. - все это должно находится внутри этого тега.
<title>...</title> - внутри этого тега находится название веб-страницы, которое будет отображаться во вкладке браузера.
В title написано document, поэтому во вкладке в браузере будет написано document.
<meta charset="UTF-8"> - конструкция, дающая понять браузеру в какой кодировке написана веб-страница
<meta> - служебный тег. Содержит различную служебную информацию- кодировка, ключевые слова и ТД.
charset- атрибут "кодировка". В качестве значения имеет разные типы кодировок. "UTF-8"- кодировка по умолчанию.
<link href="css/main.css" rel="stylesheet"> - конструкция, подключающая в данном случае файл со стилями веб-страницы.
Сделаем цвет нашего заголовка красным в файле со стилями и посмотрим, что из этого выйдет:
Цвет текста мы задали(обратите внимание, что мы обратились к заголовку по его классу title), теперь посмотрим, как это будет выглядеть в браузере:
Ничего не изменилось. Резонный вопрос: А как так? Почему не работает? Всё же правильно написано: и свойство, которые меняет цвет текста; и обратились правильно. ТАК ПОЧЕМУ?(( Ответ прост: файл с разметкой не может распознать стили, потому что их надо подключить. Того, что они лежат в одной папке, недостаточно.
Это как поезд с двумя вагонами. Поезд приехал, но одного вагона нет - его забыли прицепить. Вагон-то есть, но он остался где-то далеко.
Поэтому подключим файл со стилями к файлу с разметкой: используем следующую запись:
<link href="css/main.css" rel="stylesheet"> - конструкция, подключающая в данном случае файл со стилями веб-страницы.
Результат:
Стили мы подключили, теперь всё должно работать - смотрим, что по этому поводу думает браузер:
Всё работает! Прекрасно, просто изумительно.
Теперь пару слов о том, из чего состоит тег для подключения стилей:
В нем так же, как и во всех остальных тегах используется эта формула
<tag attribute="value">...</tag>
href- атрибут, указывающий на путь к файлу. В этом примере файл со стилями находится в папке css, имя файла- main.css
rel- атрибут, указывающий на тип подключаемого файла. stylesheet- означает, что подключается именно файл со стилями.
<body>...</body> - контейнер для основного содержимого сайта. head для служебного, body- для всего остального. НЕ ПУТАТЬ!
Примечание: каждый тег может имет следующий атрибут: class="" - задаёт тегу класс, по которому будет осуществляться обращение к определенному элементу при задании стилей. Может иметь любое значение, как и было в случае с заголовком.
На сегодня всё. В следующий раз мы освоим теги текста и теги декораций. Если устали от кода, можете почитать другие статьи от автора:
Что такое flat design и как его использовать
Что такое Типографика для мобильных сайтов
Понравилась статья? Поддержи автора: подпишись на канал и поставь лайк!
