Описание
Тег 'img' предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG.
Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл,
поместив тег 'img' в контейнер 'a'. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут
border="0" в тег 'img'.
Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области,
выступающие в качестве ссылок. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может
быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.
1.1. Элемент h1
Заголовок самого верхнего уровня, на странице рекомендуется использовать только один раз, по возможности частично дублируя заглавие страницы. Элемент h1 должен быть уникальным для каждой страницы сайта.
Рекомендуется прописывать в начале статьи, используя ключевое слово в тексте заголовка. Размер шрифта в браузере равен 2em, верхний и нижний отступ по умолчанию 0.67em.
1.2. Элемент h2
Представляет подзаголовки элемента h1. Размер шрифта в браузере равен 1.5em, верхний и нижний отступ по умолчанию 0.83em.
1.3. Элемент h3
Показывает подзаголовки элемента h2. Размер шрифта в браузере равен 1.17em, верхний и нижний отступ по умолчанию 1em.
1.4. Элементы h4, h5, h6
Обозначают подзаголовки четвёртого, пятого и шестого уровня. Размер шрифта в браузере равен 1em / 0.83em / 0.67em, верхний и нижний отступ по умолчанию 1.33em / 1.67em / 2.33em соответственно.
Для всех элементов доступны глобальные атрибуты
2. Элементы для форматирования текста
2.1. Элемент b
Задаёт полужирное начертания шрифта. Выделяет текст без акцента на его важность.
Для элемента доступны глобальные атрибуты.
2.2. Элемент em
Отображает шрифт курсивом, придавая тексту значимость.
Для элемента доступны глобальные атрибуты.
2.3. Элемент i
Отображает шрифт курсивом.
Для элемента доступны глобальные атрибуты.
2.4. Элемент small
Уменьшает размер шрифта на единицу по отношению к обычному тексту.
Для элемента доступны глобальные атрибуты.
2.5. Элемент strong
Задаёт полужирное начертание шрифта, относится к элементам логической разметки, указывая браузеру на важность текста.
Для элемента доступны глобальные атрибуты.
2.6. Элемент sub
Используется для создания нижних индексов. Сдвигает текст ниже уровня строки, уменьшая его размер.
Для элемента доступны глобальные атрибуты.
2.7. Элемент sup
Используется для создания степеней. Сдвигает текст выше уровня строки, уменьшая его размер.
Для элемента доступны глобальные атрибуты.
2.8. Элемент ins
Выделяет текст в новой версии документа, подчёркивая его.
Для элемента доступны атрибуты cite и datetime
2.9. Элемент del
Перечёркивает текст. Используется для выделения текста, удаленного из документа.
Для элемента доступны атрибуты cite и datetime.
2.10. Элемент mark
Применяется для выделения фрагментов текста в справочных целях, окрашивая блок символов желтым цветом.
Для элемента доступны глобальные атрибуты.
3. Элементы для ввода «компьютерного» текста
3.1. Элемент code
Служит для выделения фрагментов программного кода. Отображает текст моноширинным шрифтом.
Для элемента доступны глобальные атрибуты.
3.2. Элемент kbd
Отмечает фрагмент как вводимый пользователем с клавиатуры. Отображает текст моноширинным шрифтом.
Для элемента доступны глобальные атрибуты.
3.3. Элемент samp
Применяется для выделения результата, полученного в ходе выполнения программы. Отображает текст моноширинным шрифтом.
Для элемента доступны глобальные атрибуты.
3.4. Элемент var
Выделяет имена переменных, отображая текст курсивом.
Для элемента доступны глобальные атрибуты.
3.5. Элемент pre
Позволяет вывести текст на экран, сохранив изначальное форматирование. Пробелы и переносы строк при этом не удаляются.
Для элемента доступны глобальные атрибуты.
4. Элементы для оформления цитат и определений
4.1. Элемент abbr
Применяется для форматирования аббревиатур. Браузером обычно подчеркивается пунктирной линией. Расшифровка сокращения осуществляется с помощью атрибута title, она появляется при наведении курсора мыши на текст.
Для элемента доступны глобальные атрибуты.
4.2. Элемент bdo
Используется для изменения текущего направления текста.
Для элемента доступен атрибут dir.
4.3. Элемент blockquote
Выделяет цитаты внутри документа, выделяя его отступами и переносами строк.
Для элемента доступен атрибут cite.
4.4. Элемент q
Используется для выделения коротких цитат. Браузерами заключается в кавычки.
Для элемента доступен атрибут cite.
4.5. Элемент cite
Применяется для выделения цитат, названий произведений, сносок на другие документы.
Для элемента доступны глобальные атрибуты.
4.6. Элемент dfn
Позволяет выделить текст как определение. Несмотря на наличие данного элемента, рекомендуется выделять текст силами CSS.
Для элемента доступен атрибут title.
5. Абзацы, средства переноса текста
5.1. Элемент p
Разбивает текст на отдельные абзацы, отделяя друг от друга пустой строкой. Браузер автоматически добавляет верхнее и нижнее внешнее поле margin, равное 1em, при этом поля соседних абзацев «схлопываются».
Для элемента доступны глобальные атрибуты
5.2. Элемент br
Переносит текст на следующую строку, создавая разрыв строки.
Для элемента доступны глобальные атрибуты.
5.3. Элемент hr
Ссылки являются основой гипертекстовых документов и позволяют переходить с одной веб-страницы на другую.
Особенность их состоит в том, что сама ссылка может вести не только на HTML-файлы, но и на файл любого типа,
причем этот файл может размещаться совсем на другом сайте. Главное, чтобы к документу, на который делается ссылка,
был доступ. Иными словами, если путь к файлу можно указать в адресной строке браузера, и файл при этом будет открыт,
то на него можно сделать ссылку.Для создания
ссылки необходимо сообщить браузеру, что является ссылкой,
а также указать адрес документа, на который следует сделать ссылку. Оба действия выполняются с помощью тега
a. Общий синтаксис создания ссылок следующий.a href="URLтекст ссылки/aАтрибут href определяет
URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на
который следует перейти, а содержимое контейнера a является ссылкой. Текст, расположенный
между тегами a и /a, по умолчанию становится синего цвета и подчеркивается. В примере 8.1 показано создание нескольких
ссылок на разные веб-страницы.
Что такое таблица ?
Таблица - это структурированный набор данных, состоящий из строк и столбцов (табличных данных). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например - человек и его возраст, или расписание в плавательном бассейне.
Как работает таблица?
Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.
Оформление таблиц
Исходный код HTML (HTML source code) вышеприведённой таблице есть в GitHub; посмотрите его и живой пример (look at the live example)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.
Не питайте ложных иллюзий - чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (CSS). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье Стилизация таблиц.
В этом разделе мы не фокусируемся на CSS, но всё же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти здесь, можно также использовать шаблон HTML, применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.
Когда не надо использовать таблицы HTML?
HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе Вёрстка на Начальном обучающем модуле доступности. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.
Короче говоря, использование таблиц в целях оформления вместо методов CSS является плохой идеей по следующим причинам :
Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением: Скринридеры (Screenreaders (en-US)), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
Таблицы создают путаницу тегов: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
Таблицы не реагируют автоматически на тип устройства: У надлежащих контейнеров например, header, section, article, или div ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.
1. Маркированный список
Маркированный список представляет собой неупорядоченный список (от англ. Unordered List). Создаётся с помощью элемента ul. В качестве маркера элемента списка выступает метка, например, закрашенный кружок.
Каждый элемент списка создаётся с помощью элемента li (от англ. List Item).
Для элемента ul доступны глобальные атрибуты.
2. Нумерованный список
Нумерованный список создаётся с помощью элемента ol. Каждый пункт списка также создаётся с помощью элемента li. Браузер нумерует элементы по порядку автоматически и если удалить один или несколько элементов такого списка, то остальные номера будут автоматически пересчитаны
Блок списка также имеет стили браузера по умолчанию:
Для элемента li доступен атрибут value, который позволяет изменить номер по умолчанию для выбранного элемента списка. Например, если для первого пункта списка задать li value="10", то остальная нумерация будет пересчитана относительно нового значения.
Для элемента ol доступны следующие атрибуты:
3. Список определений
Списки определений создаются с помощью элемента dl. Для добавления термина применяется элемент dt, а для вставки определения — элемент dd.
Блок списка определений имеет следующие стили браузера по умолчанию:
4. Как создать вложенный список
Зачастую возможностей простых списков не хватает, например, при создании оглавления никак не обойтись без вложенных пунктов. Разметка для вложенного списка будет следующей:
5. Многоуровневый нумерованный список
Многоуровневый список используется для отображения элементов списка на разных уровнях с различными отступами. Разметка для многоуровневого нумерованного списка будет следующей:
Такая разметка по умолчанию создаст для каждого вложенного списка новую нумерацию, начинающуюся с единицы. Чтобы сделать вложенную нумерацию, нужно использовать следующие свойства:
counter-reset сбрасывает один или несколько счётчиков, задавая значение для сброса;
counter-increment задаёт значение приращения счётчика, т.е. с каким шагом будет нумероваться каждый последующий пункт;
content — генерируемое содержимое, в данном случае отвечает за вывод номера перед каждым пунктом списка.
На цьому курсі по HTML5, ви вивчите основи програмування.
Гловні теги будуть вакзані зліва.На кусрі ТРЕБА виконувати домашні завдання,
котрі будуть надсилатися на той самий сайт кожну п'ятницю.
Бажаємо Удачі!
По закінченню навчання на курсі будуть видані сертефікати, за допомогю яких можна знайти собі РОБОТУ, у нас діє гарантія, "Якщо по закінченню курсу, ви не знайдете собі місце в IT світі, то ми гарантовано повернемо всі гроші,котрі ви заплатили за курс"
Пара прикладів наших успішних студентів
Линус Торвальдс
Лінус Бенедікт Торвальдс (швед. Linus Benedict Torvalds; народився 28 грудня 1969 у Гельсінкі, Фінляндія) — фінсько-американський програміст, започаткував розробку ядра Linux, є її головним архітектором, а також автор найвідомішої розподіленої системи керування версіями файлів Git. 2012 року за створення Linux нагороджений премією Millennium Technology Prize