02. Структура HTML и основы CSS
На прошлом уроке мы познакомились с историей возникновения языка разметки HTML и простейшими тегами. Сейчас изучим структуру HTML документов.
Создайте HTML файл и наберите в нем следующий текст:
<html>
<head>
<meta charset=utf8>
<title>Заголовок</title>
</head>
<body>
<h1>Заголовок</h1>
<p>Текст моего документа</p>
</body>
</html>
Обратите внимание где начинаются и заканчиваются теги html, head, body. Они образуют контейнеры в которых находится некое содержимое.
Тег html это контейнер для всего документа.
Тег head это контейнер для описания документа.
Тег body это контейнер для самого содержимого документа.
Внутри контейнера head может быть множество различных тегов помогающих браузеру правильно понять и отобразить документ. Например тег meta с атрибутом charset устанавливает кодировку символов. Сейчас практически всегда используется универсальная кодировка utf8 которая может содержать символы практически для всех алфавитов мира. В более старых документах могут применяться иные кодировки, например cp1251. Формат кодировки в документе и теге meta должен совпадать, иначе браузер вместо русских букв может вывести непонятные символы.
Тег title устанавливает заголовок документа который будет отображаться во вкладке браузера.
Также на прошлом уроке мы изучили, что у тегов могут буть атрибуты которые уточняют свойства тегов. Например <font color=red>текст</font> устанавливает цвет текста. Но так как язык HTML постоянно развивался и количество атрибутов росло, то для изменения внешнего вида было создано расширение CSS (каскадные таблицы стилей). Хоть атрибуты определяющие внешний вид поддерживаются браузерами, но сейчас они считаются уже устаревшими и использовать их не рекомендуется. Внешний вид принято указывать в свойствах CSS.
Давайте рассмотрим как выглядит CSS. Есть три способа: как атрибут тега, внутри файла html, в отдельном файле например style.css
Наберите текст внутри body:
<span style='color:red;'>текст</span>
Тут применяется тег span который сам по себе никак не меняет текст, но является контейнером свойств которые задаются с помощью css. Это первый вариант когда используется атрибут style для тега. Синтаксис css выглядит как "свойство:параметр;". И таких свойств может быть много идущих друг за другом в произвольном порядке.
Теперь давайте расмотрим второй вариант. Наберите текст и посмотрите результат:
<html>
<head>
<meta charset=utf8>
<title>Заголовок</title>
</head>
<style>
span.red{
color:red;
}
</style>
<body>
<span class=red>текст</span>
</body>
</html>
Здесь для тега span указан атрибут class которому мы придумали произвольное имя red. А свойства этого класса указали в контейнере style между head и body.
span.red означает, что далее будут указаны свойства для всех тегов span с классом red. А в документе теперь необязательно прописывать свойства для тега, достаточно указать только класс. Если тегов с классом red у нас несколько, то можно будет поменять color:red; на color:green; один раз и цвет поменяется для всех <span class=red> сколько бы много их не было в документе.
Есть еще очень популярный тег <div></div>. Если span меняет вид текста, то div позволяет менять положение. div создает блок у которого мы можем указать также размеры и расположение на странице.
Наберите текст и посмотрите результат:
<html>
<head>
<meta charset=utf8>
<title>Заголовок</title>
</head>
<style>
div.test{
color:red;
background:yellow;
border:1px solid green;
margin:60px;
padding:20px;
font-size:24px;
}
</style>
<body>
<div class=test>текст</div>
</body>
</html>
Тут для блока div с классом test мы задали целый ряд свойств.
Подобных свойств огромное количество. С их помощью можно оформить документ как угодно.
На сайте htmlbook.ru есть подробный справочник по всем тегам HTML и свойствам CSS. Откройте этот сайт и прочитайте описание тегов и свойств с которыми мы познакомились.
