HTML

Содержание

Слайд 2

Содержание

Элемент
Атрибуты
Структура HTML документа
Применение цвета к HTML-элементам с помощью CSS
Стилизация HTML-элементов
Что внутри

Содержание Элемент Атрибуты Структура HTML документа Применение цвета к HTML-элементам с помощью
"head"? Метаданные в HTML

Слайд 3

HyperText Markup Language - язык гипертекстовой разметки

HTML  не является языком программирования; это язык

HyperText Markup Language - язык гипертекстовой разметки HTML не является языком программирования;
разметки, используемый для определения структуры веб-страниц, посещаемых пользователями.
Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика.
HTML состоит из ряда элементов, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом.
Встроенные тэги могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее.

Слайд 4

Элемент: 

открывающий тег + закрывающий тег + содержимое = элемент.

Вы также можете вкладывать

Элемент: открывающий тег + закрывающий тег + содержимое = элемент. Вы также
элементы внутрь других элементов — это называется вложенностью.
Если мы хотим подчеркнуть, что наш кот очень сердитый, мы можем заключить слово "очень" в элемент  , который означает, что это слово крайне важно в данном контексте:

Мой кот очень сердитый.


Слайд 5

 Элементы блочного уровня и Строчные элементы.

Существует две важных категории элементов в HTML,— элементы блочного

Элементы блочного уровня и Строчные элементы. Существует две важных категории элементов в
уровня и строчные элементы.
Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шёл до них, и любой контент после них также окажется на новой строке.
Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, футеры, или подвалы, и т. п.
Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.
Пример

четвёртый

пятый

шестой


четвёртый
пятый
шестой

Слайд 6

Строчные элементы

— это те, которые содержатся в элементах блочного уровня и окружают только

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

Слайд 7

Пустые элементы

Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег.

Пустые элементы Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий

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

Пустые элементы иногда называют void-элементами.

Слайд 8

Атрибуты

У элементов также могут быть атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию

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

Слайд 9

Атрибут должен иметь:

Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если

Атрибут должен иметь: Пробел между атрибутом и именем элемента (или предыдущим атрибутом,
у элемента уже есть один или несколько атрибутов).
Имя атрибута и следующий за ним знак равенства.
Значение атрибута, заключённое в кавычки.
 Элемент HTML   определяет гиперссылку для перехода на определённое место на странице или на другую страницу в Интернете.
Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.
MDN
href: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете.
title: Атрибут title описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, title="The Mozilla homepage". Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.
target: Атрибут target определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, target="_blank" отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.

Слайд 10

Булевые атрибуты

Иногда вы будете видеть атрибуты, написанные без значения — это совершенно

Булевые атрибуты Иногда вы будете видеть атрибуты, написанные без значения — это
допустимо.  
Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем.
В качестве примера возьмём атрибут disabled, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.

Для краткости совершенно допустимо записывать их следующим образом:


Слайд 11

Опускание кавычек вокруг значений атрибутов

Это допустимо при определённых условиях, но разрушит вашу

Опускание кавычек вокруг значений атрибутов Это допустимо при определённых условиях, но разрушит
разметку при других.
 Например, с гиперссылкой, мы можем написать основной вариант только с атрибутом href так:
любимый веб-сайт
Однако, как только мы добавим атрибут title в таком же стиле, мы поступим неверно:
favorite website
В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут title — это на самом деле три разных атрибута — атрибут title со значением "The" и два булевых атрибута: Mozilla и homepage.
Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода.

Слайд 12

Одинарные или двойные кавычки?

Это исключительно дело вкуса, и вы можете свободно

Одинарные или двойные кавычки? Это исключительно дело вкуса, и вы можете свободно
выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:
Ссылка к моему примеру.
Ссылка к моему примеру.
Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!
A link to my example.

Слайд 13

Структура HTML документа

Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по

Структура HTML документа Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами
себе не очень полезны.
Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:




Тестовая страница


Это — моя страница





Слайд 14

Пробелы в HTML

Cледующие два примера эквивалентны:

Некто говорит, что лжет.


Некто говорит,
что

Пробелы в HTML Cледующие два примера эквивалентны: Некто говорит, что лжет. Некто
лжет.


Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк): браузер при анализе кода сократит всё пустое место до одного пробела.
Зачем использовать много пробелов? Ответ: это доступность для понимания — гораздо легче разобраться, что происходит в вашем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке.
В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.

Слайд 15

Ссылки на сущности: Включение специальных символов в HTML

В HTML символы <, >, ", ' и & являются специальными. Они

Ссылки на сущности: Включение специальных символов в HTML В HTML символы ,
являются частью самого синтаксиса HTML.
Так как же включить в текст один из этих специальных символов?
Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.
Мы должны использовать ссылки-мнемоники  — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях.
Каждая ссылка-мнемоник начинается с амперсанда (&) и завершается точкой с запятой (;).

Слайд 16

ссылки-мнемоники 

ссылки-мнемоники

Слайд 17

HTML комментарии

В HTML, как и в большинстве языков программирования, есть возможность писать

HTML комментарии В HTML, как и в большинстве языков программирования, есть возможность
комментарии в коде.
Комментарии игнорируются обозревателем и не видны пользователю, их добавляют для того, чтобы пояснить, как работает написанный код, что делают отдельные его части и т. д.
Такая практика полезна, если вы возвращаетесь к коду, который давно не видели или когда хотите передать его кому-то другому.
Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры 
,
например:

Меня нет в комментариях



Слайд 18

Применение цвета к HTML-элементам с помощью CSS

С помощью CSS, существует множество способов

Применение цвета к HTML-элементам с помощью CSS С помощью CSS, существует множество
присвоить цвет HTML элементам, чтобы придать им желаемый вид.
К счастью, присвоить цвет к HTML-элементу очень просто, и это можно сделать практически со всеми элементами.
На уровне элементов HTML, всему можно присвоить цвет. С точки зрения отдельных составляющих элементов, таких как текст, границы и т.д., существует ряд свойств CSS, с помощью которых можно присвоить цвет. 
На фундаментальном уровне, свойство color (en-US) определяет цвет текста HTML-элемента, а свойство background-color - цвет фона элемента.
Они работают практически для всех элементов.

Слайд 19

Текст

Эти свойства используются для определения цвета текста, его фона и любого оформления

Текст Эти свойства используются для определения цвета текста, его фона и любого
текста:
color (en-US)Свойство color применяется к тексту и любому оформлению текста, например: подчёркивание, линии на текстом, перечёркивание и т.д.
background-colorЦвет фона текста.
text-shadowДобавляет и устанавливает параметры тени для текста. Один из параметров тени - это основной цвет, который размывается и смешивается с цветом фона на основе других параметров. 
text-decoration-color (en-US)По умолчанию, элементы оформление текста (подчёркивание, перечёркивание) используют цвет свойства color. Но вы можете присвоить другой цвет с помощью свойства text-decoration-color.
text-emphasis-color (en-US)Цвет, который используется для выделения диакритических знаков, прилегающих к каждому текстовому символу. Это свойство используется преимущественно для восточноазиатских языков.
caret-color (en-US)Цвет, который используется для каретки (caret (en-US)) (курсора ввода текста). Применимо только к редактируемым элементам, таким как  и