FB
.ru

Структура HTML-документа: основные теги, пример

Подписаться Редактировать статью

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.

стили в html

Но этот вариант также не очень рекомендуется. Эти методы сильно отличаются тем, что файл css может быть одним для всего сайта, и все изменения в нем будут мгновенно применяться ко всем страницам. А если вы используете метод, который указан на рисунке выше, то вам придется вносить изменения во все существующие страницы сайта.

Если создаваемый класс будет использоваться только на одной странице, тогда этот вариант вам подходит.

Подключение скриптов

Скрипты подключаются следующим образом.

<script type=“text/javascript” src=“main.js”></script>

Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй – где расположен файл. Если вы допустите опечатку, то ничего работать не будет.

Раздел body

Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.

Здесь указывается весь основной код страницы, который может включать неограниченное число элементов. Но чем длиннее код, тем дольше он будет обрабатываться.

Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.

Основные теги

Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками <>. Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.

Рассмотрим на примере тега изображения. Обратите внимание, что этот тег не закрывающийся, в отличие от ссылок, абзаца и многих других.

структура 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>

Таблицы

Как всё это можно представить в голове

Начинающие разработчики не всегда сразу могут представить всё это умозрительно. Посмотрите несколько примеров структуры веб-страниц, и тогда вам точно станет понятно.

создание html документа

Имеет место быть такой вариант:

 структура html документа основные теги

И такой:

структура html документа пример

Использование стилей

Как и говорилось вначале, стили можно подключать как файлом, так и указывать в разделе head. В любом случае описание классов происходит совершенно одинаково.

Например, можно указать стиль для заголовка. Тогда вам нужно написать h1 (поскольку стиль будет для заголовка второго уровня), открыть скобки и писать, какие свойства будут в этом элементе. Если вы знаете базовый английский, то проблем быть не должно. Все свойства названы человеческим языком.

использование стилей css

Если хотите указать этот стиль сразу для нескольких элементов, то напишите их через запятую.

использование нескольких стилей css

Результатом будет красный заголовок.

текстовый документ

Вышеуказанные способы подходят для оформления стандартных элементов. Но также можно создавать и свои классы. Их название должно начинаться с точки, затем пишется любое произвольное имя.

классы css

Использовать их нужно вот так.

использование классов css

Обратите внимание: если вы указали настройки стилей для стандартного элемента, не нужно в дальнейшем писать слово class. Стиль будет применяться по умолчанию. В атрибуте class можно указать только те стили, которые у вас начинаются с точки.

загрузка...

Как снизить уровень стресса? 6 советов на каждый день
Психология
20 странных татуировок, о которых люди определенно жалеют
Культура
13 признаков, что у вас самый лучший муж
Брак
Если у вас есть один из этих 11 признаков, тогда вы один из самых редких людей на Земле
Новый век
Наши предки спали не так, как мы. Что мы делаем неправильно?
Сон
Джо Метени – маньяк, который делал со своими жертвами нечто поистине ужасное
Культура