Презентация - HTML

Зачем нужен HTML?
HTML (Hypertext Markup Language) - придуман для создания структуры страницы и структурирования ее контента.
ВАЖНО!
Это не язык программирования!

HTML - теги
<имя_тега> — тег.
Часто используемые теги:

Парные теги
Содержимое тега

Одиночные теги
Альтернативная запись одиночного тега.
- с закрывающим слешем перед закрывающей скобкой. В стандарте HTML5 использование закрывающего слеша в одиночных тегах необязательно.

Атрибуты тегов
Моя собака кушает сосиски!
Логотип
Тег может иметь несколько атрибутов. Некоторые теги имеют обязательные атрибуты.
Атрибуты содержат дополнительную информацию об элементе, которая не будет отображаться на странице.

Атрибут должен всегда иметь следующее:
<имя-тега атрибут-1="значение-1" атрибут-2="значение-2">
Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
Имя атрибута, за которым следует знак равенства.
Значение атрибута, заключенное в кавычки.
На заметку:
Простые значения атрибутов, которые не содержат пробелов или символов " ' ` = < > могут быть без кавычек. Но рекомендуется указывать все значения атрибутов в кавычки. Это делает код более читаемым и понятным.

Вложенные теги
Вы также можете помещать элементы в другие элементы - это называется вложенностью.
Моя собака
часто
ест сосиски!
Моя собака
часто есть сосиски!

Категории тегов по типу содержания
Metadata content - метаданные для браузеров, поисковиков и т. д. теги которые находятся в .
Flowcontent - потоковый контент, теги которые находятся в .
Sectioning content - крупные смысловые разделы документа.
Heading content - заголовки.
Phrasing content - фразовый контент, сам текст документа и мелкие текстовые элементы, которые мельче абзаца.
Embedded content - встраиваемый контент (изображения, видео, аудио и т. д.).
Interactive content - интерактивные элементы, то, с чем взаимодействует пользователь.

С чего начинается HTML страница
Каждый HTML-документ должен начинаться с декларации типа документа или «доктайпа».
Для текущей версии HTML:
Для старой версии HTML 4.01 доктайп задается так:

Базовая структура страницы
Заголовок страницы

Более сложная структура страницы content="Ключевые слова" >
Заголовок страницы
Здесь текст, который будет выведен на экран.

Валидность кода
Markup Validation Service
http://validator.w3.org/nu/
Валидация зависит от того, какой указан тип документа
Частые ошибки:
Не правильная вложенность тегов.
Незакрытые теги.
Отсутствуют обязательные атрибуты.
Блочные элементы внутри строчных и т.д.

Блочные элементы
К блочным элементам относятся теги:
,
,
,
и так далее.
Особенности блочных тегов:
Блочные элементы всегда переносятся на новую строку.
Блочным элементам можно задавать ширину, высоту, внутренние и внешние отступы.
По умолчанию ширина равна ширине окна.
Блочный тег который может использоваться чаще всего это
представляет собой прямоугольник. Может создавать структуру и сетки на странице.

Строчные элементы
К строчным элементам относятся теги:
,
,
,
и так далее.
Особенности строчных тегов:
Строчные элементы всегда идут друг за другом в одной строке.
Строчным элементам можно задавать только отступы слева и справа.
Ширина и высота равна содержимому элемента изменить с помощью стилей нельзя.
Основная задача строчных элементов это оформление текста.

Смысловые разделы
Тег
. Представляет самостоятельную, независимую часть документа, страницы, например комментарий, статья, виджет погоды и т.д. Желателен заголовок внутри.
Тег
. Смысловой раздел документа. В отличие от
его нельзя отделить от страницы. Как правило, но не всегда, разделы имеют заголовок
Тег
определяет отдельную секцию документа, назначение которой обозначение ссылок навигации на другие страницы или другие части страниц.
Тег
представляет собой часть документа, чье содержимое только косвенно связано с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.

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

Теги для работы с текстом
Теги перенос строки и разделитель
Тег
используется для того, чтобы создать горизонтальную линию-разделитель. Линии можно задать стили через css.
Тег
переносит текст на новую строку. Можно использовать при оформлении блока контактов. Плохая практика использовать для разметки абзацев.
Теги индекса
Теги используются для написания единиц измерений и простых формул.
Тег
отображает текст в виде верхнего индекса.
Тег
отображает текст в виде нижнего индекса.

Теги для работы с текстом
Тег преформатированный текст
Браузер удаляет пробелы и переносы строк если не использовать для этого теги или специальные символы.
Тег
оставляет преформатированный текст без изменений.
Тег вставки кода
Тег
необходим для вставки кода в текст. И если вы пишете технические статьи или документацию.

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

Теги для работы с текстом
Тег аббревиатуры
Тег
указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения. При наведении на текст появляется подсказка.
Тег контактной информации
Тег
используется для написания контактной информации. Внутри можно использовать другие теги разметки текста. По умолчанию текст внутри выделен курсивом.
Тег выделения текста
Тег
обычный текст выделяет визуально. Фоновый цвет тега желтый.

Теги для работы с текстом
Заголовки и подзаголовки
В html для выделения заголовков используется ряд тегов от
до
Порядок идет от самого главного до менее значимого заголовка. В реальной работе очень редко используются заголовки ниже третьего уровня.
Заголовок страницы 1 уровня
Заголовок страницы 2 уровня
Заголовок страницы 3 уровня
НА ЗАМЕТКУ!
На странице сайта рекомендуется размещать как минимум один заголовок первого уровня также стоит правильно использовать заголовки на сайте по причине особого внимания к ним со стороны поисковых систем.

Теги для работы с текстом
Неупорядоченный или маркированный список
Список данного типа создается с помощью тега
и может содержать в себе элементы списка
.
Молоко
Хлеб
Также у тега
есть атрибут type который задает вид маркера.
...
...
...

Теги для работы с текстом
Упорядоченный или нумерованный список
Список данного типа создается с помощью тега
и может содержать в себе элементы списка
.
Первый пункт
Второй пункт
У тега
есть атрибут start задающий число с которого начинается нумерация.
...

Теги для работы с текстом
Многоуровневый список
Списки можно вкладывать друг в друга и уровень вложенности не ограничен. В многоуровневом списке можно использовать как упорядоченные, так и неупорядоченные списки.
Мото
Автомобили
Легковые
Грузовые
Водный транспорт

Теги для работы с текстом
Список определений
Для создания списка определений необходимо использовать три тега
...
- открывает и закрывает список
...
- содержит название термина
...
- содержит определение термина
Например:
Сингулярность
Этот термин довольно многолик
Нейронная сеть
Совокупность нейронов головного и спинного мозга

Тег ссылка
Для добавления ссылки на странице используют тег
...
Найди меня!
У ссылки есть обязательный атрибут href в котором задается адрес ссылки.
Виды адресов:
Абсолютные.
Относительные.
Указывающие на страницу.
На файл.
Изображение.
Содержащие якорь.

Тег ссылка
Дополнительные атрибуты
Атрибут title - добавляет ссылке подсказку которая показывается при наведении на ссылку.
Найди меня!
Атрибут target - управляет открытием документа или страницы. Чаще всего используется со значением _blank если открывать страницу нужно в новом окне.
Найди меня!
Менее популярные значения атрибута: _self, _parent, _top

Тег изображение
Для вставки изображения на страницу необходимо использовать тег
с атрибутом src в котором нужно указать адрес картинки.
Дополнительные атрибуты изображения
alt - альтернативный текст для изображения
width - ширина изображения. Может быть px и процентах
height - высота изображения. Может быть px и процентах

Теги таблиц
Для создания таблицы необходимо использовать три тега
...
- открывает и закрывает таблицу
... - добавляет строку в таблицу
... - добавляет ячейку в строку таблицы
В каждой строке должно быть одинаковое количество ячеек.
Например:
Ячейка 1
Ячейка 2

Теги таблиц
В таблице мы можем добавлять заголовки столбцам или строкам. Для обозначения заголовка используется тег он располагается внутри и аналогичен . Текст внутри выравнивается по центру и показывается жирным.
Магазин
Количество товара
Пятерочка
345

Теги таблиц
В таблицам также можно задавать заголовки используя тег .... Заголовок отображается сверху таблицы и выравнивается по центру. Позицию и выравнивание можно изменить стилями.
Учет по магазинам
Магазин
Количество товара
Пятерочка
345

Теги таблиц
Кроме всего мы можем объединять строки и столбцы у таблиц. Это делается с помощью добавления атрибутов тегам и .
colspan - объединяет столбцы
rowspan - объединяет строки
Ячейка на два столбца
Ячейка на 1 столбец
Ячейка на 1 столбец

Теги формы
Для добавления формы на страницу используется тег ... у этого тега есть два важных атрибута action и method.
action - задает адрес куда отправлять данные формы.
method - задает метод передачи данных. Обычно это get или post. По умолчанию get.

Теги формы
Большая часть полей в форме задаются с помощью тега
у тега есть два обязательных атрибута type и name.
type - задает тип поля и влияет на то как поле отображается в браузере. По умолчанию тип text.
name - необходим для того чтобы считать информацию с поля на сервере.
Дополнительные атрибуты
id - уникальный идентификатор поля. Используется для связи поля и подписи также для удобного выбора поля в коде JavaScript.
value - в этом атрибуте хранится значение поля.

Теги формы
Для создания подписи к полю существует тег
используется с атрибутом for который связывает подпись и поле.
Имя
Имя

Теги формы
Значения атрибута type у тега
password - значение поля с данным атрибутом будет отображаться звездочками
checkbox - создает поле галочку.
radio - переключатель. Тип поля для выбора варианта. Обычно это группа полей которая связана именем. У поля переключатель всегда должен быть атрибут value
Есть машина
Нет машины

Теги формы
file - добавляет поле для загрузки файлов. При вставке поля в форму требует обязательно наличие у формы атрибута enctype со значением multipart/form-data.
hidden - делает поле скрытым от пользователя. При этом данные с этого поля передаются на сервер.
button - создает кнопку для отправки формы. В обычных случаях не требует атрибута name.
Можно заменить тегом кнопки.
Отправить!

Теги формы
Раскрывающийся список или селект
Селект
...
так же как и переключатель используется для выбора варианта.
Чтобы задать варианты нужно внутрь вставить теги
...
.
Красный
Зеленый
На сервер отправляется значение в атрибуте value если такой не задан, то отправится текст в
.

Теги формы
Селект с множественным выбором
В отличии от радиокнопок в селектах можно выбирать несколько вариантов из списка. Для этого тегу нужно добавить атрибут multiple.
Lada
BMW
Lexus