Структура HTML-документа: основные теги, пример
HTML – это язык разметки сайта. Многие считают его программированием, но это не так. В HTML нет никаких переменных, вычислений, массивов и других элементов, присутствующих в любом языке программирования.
Пользуясь HTML, разработчик может создать только внешний вид сайта. Важно понимать, что ни один сайт не существует без разметки. HTML является базой создания веб-страниц. Весь остальной функционал добавляется различными языками программирования.
Создание html-документа
Создать простую страничку сайта можно в любом редакторе. Подойдет даже "Блокнот". Для начинающего разработчика рекомендуется использовать другие редакторы, у которых есть функции автоподстановки и другие подсказки. Благодаря этому можно создавать готовые таблицы, ссылки, изображения и другие элементы. А в "Блокноте" каждую букву приходится писать вручную.
Как правило, "Блокнот" используют только в тех случаях, когда под рукой нет других инструментов. Сначала создается текстовый документ, а потом сохраняется в формате html. Все страницы сайта должны быть с расширением html.
Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.
Структура html-документа. Пример
Структура всегда одна и та же. Если вы захотите поменять что-то, браузер не сможет это обработать. В результате вы не получите то, что задумали.
На рисунке выше указана структура любого html-файла. Первый пункт указывает на тип файла. Этот тег указывается один раз. Если вы будете использовать специальные редакторы, то вся структура создастся автоматически. Вам нужно будет подправить стандартные значения.
Структура html-документа - основные теги:
- <html>
- <head>
- <body>
Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега – открывающий и закрывающий.
Выше было сказано, что страницы сайтов имеют расширение .html. То есть если вы создадите текстовый документ, но при этом напишете правильный код, браузер всё равно отобразит вам просто текст. Никакого преобразования кода не будет.
Раздел head
На рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).
Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.
Структура html-документа такова, что заголовок <title> указывается только в разделе head. Если тег <title> указать в разделе body или после него, то обработчик на него не обратит внимания.
Кроме этого, в разделе head указывается информация для подключения скриптов, файлов стилей, инструкции для поисковых систем или любые другие данные, которые пользователь не должен видеть, но они важны для браузера или программистов.
Подключение стилей
Структура html-документа позволяет подключать стили различными способами. Более того, их можно писать индивидуально в каждом элементе. Но данный способ не рекомендуется, поскольку код становится слишком большим и неудобным.
Поисковые системы рекомендуют все стили выносить в отдельный файл, а в элементах просто использовать различные классы.
Подключается файл следующим образом.
<link rel = “stylesheet” href = “style.css” type = “text/css”>
В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.
Другим вариантом является определение стилей прямо в разделе head.
Но этот вариант также не очень рекомендуется. Эти методы сильно отличаются тем, что файл css может быть одним для всего сайта, и все изменения в нем будут мгновенно применяться ко всем страницам. А если вы используете метод, который указан на рисунке выше, то вам придется вносить изменения во все существующие страницы сайта.
Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.
Подключение скриптов
Скрипты подключаются следующим образом.
<script type=“text/javascript” src=“main.js”></script>
Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй – где расположен файл. Если вы допустите опечатку, то ничего работать не будет.
Раздел body
Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.
Здесь указывается весь основной код страницы, который может включать неограниченное число элементов. Но чем длиннее код, тем дольше он будет обрабатываться.
Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.
Основные теги
Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками <>. Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.
Рассмотрим на примере тега изображения. Обратите внимание, что этот тег не закрывающийся, в отличие от ссылок, абзаца и многих других.
Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным – цифровое или текстовое.
Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием – фотография птицы.
Кроме этого, в теге img, можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.
Рассмотрим другие основные теги, которые указываются в разделе body.
Тег | Назначение |
<a>…</a> | Ссылки |
<img> | Изображения |
<p>…</p> | Абзац |
<br> | Перенос текста на новую строку |
<strong>…</strong> | Жирный текст |
<i>…</i> | курсив |
<s>…</s> | Перечеркнутый текст |
<u>…</u> | Подчеркнутый текст |
<ol></ol>, <ul></ul> | Списки |
<table></table> | Таблицы |
Как всё это можно представить в голове
Начинающие разработчики не всегда сразу могут представить всё это умозрительно. Посмотрите несколько примеров структуры веб-страниц, и тогда вам точно станет понятно.
Имеет место быть такой вариант:
И такой:
Использование стилей
Как и говорилось вначале, стили можно подключать как файлом, так и указывать в разделе head. В любом случае описание классов происходит совершенно одинаково.
Например, можно указать стиль для заголовка. Тогда вам нужно написать h1 (поскольку стиль будет для заголовка второго уровня), открыть скобки и писать, какие свойства будут в этом элементе. Если вы знаете базовый английский, то проблем быть не должно. Все свойства названы человеческим языком.
Если хотите указать этот стиль сразу для нескольких элементов, то напишите их через запятую.
Результатом будет красный заголовок.
Вышеуказанные способы подходят для оформления стандартных элементов. Но также можно создавать и свои классы. Их название должно начинаться с точки, затем пишется любое произвольное имя.
Использовать их нужно вот так.
Обратите внимание: если вы указали настройки стилей для стандартного элемента, не нужно в дальнейшем писать слово class. Стиль будет применяться по умолчанию. В атрибуте class можно указать только те стили, которые у вас начинаются с точки.