HTML и CSS — языки, с помощью которых верстают страницы в интернете. Овладеть основами этих языков совсем нетрудно — это первый шаг к профессии веб-разработчика. Вначале вы узнаете, как работать со шрифтами и текстом, а в конце концов научитесь верстать несложные страницы с анимацией и без. Авторы курса — разработчики из Яндекса. У курса есть продолжение.
Анатомия HTML
Loading...
Из курса от партнера Moscow Institute of Physics and Technology
Основы HTML и CSS
114 оценки
Moscow Institute of Physics and Technology
114 оценки
Курс 2 из 5 — Specialization Разработка интерфейсов: вёрстка и JavaScript
Из урока
Введение в HTML
Первая неделя курса посвящена знакомству с HTML. Вы узнаете, откуда взялся этот язык разметки, как он развивается сегодня, из чего состоят HTML-элементы и как разметить ими обычный текст.
Познакомьтесь с преподавателями
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
Привет!
В этом видео я расскажу вам о том, из чего состоят HTML-элементы,
какие атрибуты существуют и что такое универсальные атрибуты.
Итак, типичный HTML-документ выглядит следующим образом.
И состоит он из открывающего тега — как правило, это знак «меньше» и название
самого элемента, закрывающего тега — его признаком является
слеш перед названием, и ставится он после открывающего.
Внутри самого тега указываются атрибуты,
которые позволяют задавать свойства элементу.
И между закрывающим и открывающим находится содержимое этого элемента.
В данном случае это просто текст.
На самом деле не все элементы имеют закрывающий тег.
К примеру, элемент <img> не имеет содержимого, соответственно,
не имеет закрывающего тега.
И если мы откроем этот код в браузере, то увидим, что элемент заменился на картинку.
Есть и другие виды элементов.
Например, элементы, которые внутри себя могут содержать только лишь текст.
К таким элементам относится элемент <title>,
внутрь которого можно писать только лишь текст.
Ну и, конечно, есть обычные элементы,
внутрь которых могут вкладываться другие элементы.
К ним относится элемент <p>.
Стандарт HTML5 позволяет не закрывать некоторые элементы, и когда браузер
встретит новый открывающийся тег, то он закроет предыдущий.
Так, например, с элементом <li>.
Как только браузер встречает новый открывающийся элемент,
он закрывает предыдущий.
И в браузере всё выглядит нормально.
На самом деле этот список очень большой.
То есть не каждый элемент можно не закрывать.
Конечно, браузер в любом случае попробует обработать эту ситуацию,
но я не рекомендую вам так делать, поскольку когда придёт новый программист и
увидит этот код, он может не понять, где должен закрыться тот или иной элемент.
Атрибуты позволяют задавать дополнительные свойства элементу.
Атрибут состоит из имени и значения.
Имя и значение разделяются знаком «равно».
У элементов можно указывать несколько атрибутов, как, например,
с элементом <input>, где мы указываем два атрибута: type и value.
Кавычки можно не указывать,
но в этом случае нельзя указывать знак пробела в значении атрибута.
Иначе после пробела будет считаться, что это уже новый атрибут.
Бывают и одиночные атрибуты.
Они работают как булевые значения: либо true, либо false.
То есть если есть атрибут, он работает, как true, если нет, то false.
И это то же самое будет, что если мы напишем атрибут и укажем ему
какое-то значение, например, какой-то текст.
И данный код в браузере выглядит так, то есть отображаются две кнопки,
одна заблокирована, другая не заблокирована.
Заблокирована — значит, на неё нельзя нажать.
Атрибут, который можно установить практически любому HTML-элементу
на странице, называется универсальным.
К таким атрибутам относится id.
Он задаёт уникальный идентификатор элемента.
Важно заметить — уникальный.
То есть его значение не должно повторяться на странице.
Например, у нас есть элемент <input>, и мы задаём ему атрибут id.
И при помощи CSS-стилей мы можем обратиться к этому элементу по id.
Следующий универсальный атрибут называется class.
Он задаёт класс элементов, позволяя группировать их.
Например, у нас есть список, и некоторые элементы принадлежат одному классу,
а некоторые другому.
И мы можем задавать им атрибут class, задавая одинаковые значения.
Например, продуктам мы задаём, что это food, а элементам,
которые обозначают автомобили, мы задаём класс car.
И при помощи CSS-стилей мы можем обратиться к этим элементам,
добавив им определённые стили.
И в браузере это выглядит вот так.
То есть один класс одного цвета, другой класс другого цвета.
Атрибут style также является универсальным.
Он позволяет добавлять стили оформления к элементу.
Например, мы хотим к заголовку добавить некоторые стили.
Указываем атрибут style и в качестве значения пишем CSS-стили.
О том, как писать CSS-стили, вы узнаете в последующих видео.
Если мы откроем это в браузере, то увидим зелёный текст с зелёной рамкой.
Атрибут title позволяет добавлять пояснение к содержимому элемента,
которое появляется при наведении.
Очень часто это используется при расшифровке аббревиатур.
К примеру, у нас есть элемент <abbr>, обозначающий аббревиатуру, в качестве
содержимого пишем www и в значении атрибута title указываем расшифровку.
При наведении на этот текст у нас появится маленькое окошечко с расшифровкой.
Точнее, с содержимым, которое находится в атрибуте title.
Посмотрим пример.
Вот у нас есть есть две аббревиатуры: www и API.
При наведении на www мы увидим расшифровку и аналогично при наведении на слово API.
Как и в любом языке программирования, в HTML тоже есть комментарии.
Для того чтобы написать комментарий,
нужно открыть блок с комментариями и закрыть его.
Внутри пишется, собственно, сам комментарий.
Для того чтобы написать многострочный комментарий,
достаточно просто установить переносы.
Есть ещё такие комментарии, которые называются условными.
Их, как правило, используют для старых браузеров,
таких как Internet Explorer 8, 7 и так далее.
Они выглядят следующим образом, и они выполняют элемент,
который находится внутри, только при соблюдении условий.
В данном случае элемент <link> будет работать для Internet Explorer 8.
Далеко не каждый символ можно вставить с клавиатуры.
Для этого используются специальные коды символов.
Называются они HTML Entity, или символы-мнемоники.
Эта ссылка заключается в знак амперсанда и точку с запятой,
и внутри — именованная ссылка на этот символ.
К примеру, для того чтобы вставить знак копирайта,
достаточно в коде написать ©.
Важно заметить, что амперсанд и точка с запятой обязательны.
Мы можем вставлять как именованную ссылку, как я уже говорил,
со знаком копирайта, так и числовую.
Можно указывать код, например,
в шестнадцатеричной системе или в десятеричной системе.
Если значение начинается на 0, то его можно опустить.
Например, знак суммы с именованной ссылкой выглядит следующим образом: ∑.
Или в шестнадцатеричной записи или в десятеричной выглядит следующим образом.
Вы можете увидеть это на слайде.
HTML-разметку можно разбить на два типа.
Первый тип называется «описательная», она определяет метаинформацию документа,
то есть та информация, которая описывает саму страницу.
Как правило, эти элементы находятся в элементе head,
но об этом элементе чуть позже.
Второй тип — это «структурная», то есть та самая визуальная часть,
которую видит пользователь.
То есть это сама разметка документа.
И в браузере этот код выглядит вот так.
То есть описательную часть обычный пользователь не видит.
Как правило, эту информацию используют поисковики или браузеры.
Могут этой информацией пользоваться также сторонние сервисы.
Например, социальные сети.
В этом видео я рассказал вам,
из чего состоят HTML-элементы и какие бывают универсальные атрибуты.
В следующем видео я начну рассказывать вам про основные HTML-элементы.
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
