Теги как основа HTML-страницы
Привет! Ну что, сделали свою первую страничку? Молодцы! Теперь давайте поговорим о тегах: что это такое и зачем они нужны.
Тег представляет собой следующую последоветельность символов:
- Открывающая угловая скобка <
- Название тега
- Закрывающая угловая скобка >
Пример тега:
<html>Браузер, когда читает HTML-страничку обрабатывает каждый тег и складывает их сочетание в общую картину, которую мы видим на экране, когда просматриваем сайты.
Теги в свою очередь могут быть как одиночными, так и парными.
Одиночные теги представляют собой просто один тег. Например, тег <br>, который просто помещается между двумя строками, которые нужно разделить переносом.
Парные же теги используются в паре. При этом есть открывающий тег и закрывающий. Закрывающий тег отличается от открывающего тем, что после открытой угловой скобки помещается ещё один символ - / (слэш). Между открывающим и закрывающим тегом помещаются какие-либо данные. К примеру - текст.
Пример парных тегов - тег для выделения абзацев <p>. Его использование выглядит следующим образом:
<p>Абзац первый</p>
<p>Абзац второй</p>Атрибуты HTML-тегов
У некоторых тегов есть атрибуты, которые указываются следующим образом:
<имя_тега атрибут1="значение атрибута" атрибут2="значение атрибута">Атрибуты могут быть как обязательными, так и необязательными. Пример тега с атрибутом - тег для вставки картинок <img>. В атрибуте src ему обязательно нужно указывать адрес картинки. Например:
<img src="https://php.zone/app/img/html-350x184.jpg">Из каких тегов должна состоять любая HTML-страничка
Абсолютно любая страничка должна иметь следующую структуру:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
...
</head>
<body>
Контент здесь...
</body>
</html>О каждом из тегов:
- <!DOCTYPE html> - Указывает браузеру, что этот документ использует последнюю пятую версию HTML.
- <html> - Идет сразу после doctype-тега. Внутри него содержится вся остальная страничка, включая теги <head> и <body>. У него есть атрибут lang, которому мы задали значение ru, чтобы указать на то, что страничка на русском языке.
- <head> - Здесь располагается служебная информация для браузера и для поисковиков.
- <meta charset="UTF-8"> - Указание кодировки страницы, если её не указать явно, страничка может отображаться некорректно. Сейчас всегда используется UTF-8. И заметьте, кодировка файла должна ей соответствовать. Помните, мы задавали её в Notepad++ в прошлом уроке? Так вот не забывайте всегда это проверять.
- <body> - Здесь у нас непосредственно контент странички, то, что отображается у пользователя в браузере.
Итак, надеюсь, тут всё просто и понятно. Но если вдруг что, смело спрашивайте - обязательно помогу. В следующих уроках мы будем разбирать различные теги и изучать, для чего каждый из них предназначен.
Комментарии