Содержание

Введение
- Что такое блочный и строковый элемент
Элементы
- Различия <тег></тег> и <тег/>
Атрибуты
Классы, имена, идентификаторы
Описание тегов
Шаблон для HTML5

Введение

HTML — язык разметки. То есть скелет страницы, задает примерное РАСПОЛОЖЕНИЕ элементов на ней. Внеший вид можно задать как в самом HTML-файле (не следует использовать, так как слишком сильно загромождает код), так и в файле с таблицей стилей CSS.

Что такое блочный и строковый элемент

Блочные элементы используются для построения страницы по вертикали. Выглядеть это будет примерно так (за основу возьмем <div>):

Какие-то тексты, картинки и т.п.

Тоже что-то тут есть, но другое

Строковые элементы используются для построения страницы по горизонтали. А тут используется тег <span>:

Текст, но не только

И тут текст

Некоторые браузеры добавляют пробел между строчными элементами. Привет, Firefox!

Элементы

Основным элементом языка разметки HTML является тег. Он выглядит так (пример тега div):

<div>Привет, мир!</div>

или так (как пример, тег br):

Привет<br/>
мир<br/>
!

Различия <тег></тег> и <тег/>

Первый случай <тег></тег> используется, если внутри него подразумевается наличие элементов или тесктовых данных.

Второй <тег/> применяется в тех случаях, если данные внутри тега не обязательны, либо вообще не используются (к примеру тег <br/>).

На самом деле такой вид написания не принципиален, просто сокращает написание кода.

Атрибуты

Для каждого элемента в HTML есть атрибуты. Существуют как универсальные (к примеру, style=""), так и специфические для определенного. Пример:

<div атрибут1="строковое значение" атрибут2=число>...</div>

Универсальные для видимых тегов:

style="таблица CSS" - применяет таблицу стилей внутри значения атрибута к элементу
title="строка" - текст всплывающей подсказки при наведении на элемент

Классы, имена, идентификаторы

Указываются как атрибуты, внутри элемента.

Классы

Классы представляют собой группу элементов. К примеру, нам требуется указать для определенных тегов <span> цвет текста. Мы можем использовать как атрибут style внутри каждого нужного тега (подходит, если только нужно поменять в паре элементов), так и указать класс элемента и вывести настройку стиля в файл CSS (что гораздо удобнее для нас будет в дальнейшем). Неограничен в количестве вызовов в разных тегах.

<!-- index.html -->
<head>
    ...
    <!-- Подключаем таблицу стилей из файла -->
    <link rel="stylesheet" type="text/css" href="style.css" />
    ...
</head>
<body>
    ...
    Обычный текст <span class="red-text">Красный текст</span>
    ...
</body>

/* style.css */
.red-text {
    /* Цвет в шестнадцатеричном формате #rgb или #rrggbb или #rrrgggbbb
     *
     * где:
     * r - значение красного цвета от 0 до F (от 0 до 15)
     * g - значение зеленого цвета
     * b - значение синего цвета
     */
 
    color: #ff0000;
}

Имена

Имена можно использовать для формирования и идентификации данных в формах отправки данных (тег <form>). Для того, чтобы дать элементу какое-либо имя, требуется вписать аргумент в нужный тег:

<input name="firstname" value="Имя" />

Идентификаторы

Идентификаторы используются для пометки элемента своим НЕПОВТОРЯЮЩИМСЯ именем. Нельзя задать один и тот же ID для двух элементов. Вот нельзя и всё. Распространенный вариант использования - статус подключения к сайту или идентификатор статьи на сайте.

<img src="pic.png" id="usr46_img" />
...
<a href="#usr46_img">User</a>

Описание тегов

Каждый тег играет свою роль в построении макета страницы и выглядит это так:

Служебные

Служебные теги имеют в начале себя знак ! и указывают обработчику (парсеру) как обрабатывать внутреннюю информацию и весь файл.

Тег <!DOCTYPE [версия]> - указывает версию языка разметки.
- При значении версии html браузер использует 5 версию. Желательно использовать этот вариант.
- Остальные значения: Википедия.
Тег <!– Какой-то текст –> - комментарий. Может быть как однострочным, так и многострочным.

Заголовочные элементы HTML

Заголовочные элементы, которые прописываются внутри элемента <head>, несут в себе информацию о странице, указывают как ее обрабатывать, какие она имеет подключения файлов и др. Ничего общего с заголовками HTTP не имеют.

<title> - заголовок страницы, выводится как название вкладки;
<meta/> - метаданные;
<link/> - подключение сторонних файлов (к примеру, таблица стилей), имеет следующие атрибуты:
- rel - атрибут, который показывает браузеру, что делать с подключаемым файлом;
  - stylesheet - подключается таблица стилей (CSS);
  - alternate - альтернативный вид данных (данные на странице в XML формате);
  - shortcut icon - иконка сайта (favicon.ico);
- type - MIME-тип файла;
- href - адрес подключаемого файла;
<style> - таблица стилей внутри HTML файла;
<script> - подключение скриптов (обычно JavaScript);

Элементы структуры и содержания страницы

Элементы, которые формируют вид и расположение данных, а также содержат данные, находятся в <body>.

Элементы, на которых основаны другие

¹⁾

<div> - блочный, то есть теги и текст внутри него будут переносится с каждым новым блоком на новую строку. Используется для изменения вида внутреннего содержимого.
<span> - строковый. Внутри него размещают текст, который не будет переносится и должен иметь свой внешний вид.

Элементы, пришедшие с HTML5

Данные элементы по своей сути являются <div> или <span>, и используются поисковыми движками для выделения информации при обработке.

<header> - заголовок сайта. На нем, как правило, размещается название сайта, быстрые ссылки, строка поиска по сайту.
<aside> - боковая часть, на ней размещают карту (все ссылки) сайта, либо актуальные ссылки, рекламу и т.д.
<article> - основная часть страницы.
<footer> - нижняя часть (подвал) сайта. Тут размещают полную карту сайта, контакты и прочую информацию.

Элементы для текстового содержания

<h1>-<h6> - текстовые заголовки. Обычно используются для создания статей, где нужны заголовки с разным размером заголовков.
<p> - абзац. Переносит текст на новую строку, имеет отступ.
<i> - делает текст курсивным²⁾.
<b> или <strong> - жирное начертание текста.
<br/> - перенос строки. Если требуется перенести текст внутри блока.
<hr/> - горизонтальный разделитель. Отображается как линия, занимающая всю ширину элемента.

Вспомогательные элементы

<a> - ссылка на элемент внутри страницы, внутри сайта или папки, на внешний сайт. Её атрибуты:
- href - адрес, по которому пользователь перейдет при нажатии;
<img/> - изображение рядом с текстом (больше подходит для формирования статей). Его атрибуты:
- src - адрес, по которому находится изображение в сети;
- width и height - размеры изображения в пикселях;
- alt - текст, если изображение не загрузится;
<input/> - поле для ввода пользователем информации. Его атрибуты:
- type - тип поля. Их много, вот часть из них:
  - text - ,
  - submit - ,
  - check - ,
  - radio - ,
  - button - ;
- value - предустановленное значение поля.

Шаблон для HTML5

<!DOCTYPE html>
<html>
    <head>
        <!-- Данные, которые будут скрыты со страницы, обычно сюда
        добавляют заголовок, указывают кодировку текста (потому что
        некоторые браузеры используют кодировку, которая отображает
        не все символы, либо отображает вместо них неправильные),
        подключают таблицы стилей и скрипты. -->
    </head>
    <body>
        <!-- А здесь находятся данные, которые отображаются на
        странице (кроме комментариев). -->
    </body>
</html>

¹⁾

по своей сути, элементы через таблицу стилей CSS берут свое строение от свойства display

²⁾

наклонным