- •Міністерство освіти і науки україни
- •Програмування для internet Конспект лекцій
- •Верстка
- •Редакторы для верстки
- •Валидаторы
- •Графические редакторы
- •Другие программы
- •Основные понятия Теги
- •Атрибуты и их значения
- •Семантическая верстка
- •Содержимое тега head
- •Работа с макетом
- •Контейнеры
- •Изображения и ссылки
- •Адреса в Интернете
- •Особенности свойств тегов Свойства: отступ
- •Отступы по умолчанию
- •Свойства: тип тега
- •Свойство visibility
- •Свойства: границы
- •Свойства: размер
- •Свойство: позиционирование
- •Центрирование блока
- •Документы html5
- •Структура документа
- •Структура тела документа
- •Макет страницы
- •Строение тела документа
- •Отображение документа в окне браузера
- •Контрольные вопросы и задания:
- •Задание для самостоятельной работы:
- •Стили css
- •Стили и стуктура
- •Блочные элементы
- •Основы применения стилей
- •Строчные стили
- •Встроенные стили
- •Внешние файлы
- •Ссылка по любому атрибуту
- •Определение ссылок по псевдоклассам
- •Новые селекторы
- •Контрольные вопросы и задания:
- •Блочные модели
- •Традиционная блочная модель
- •Универсальный селектор *
- •Новая иерархия заголовков
- •Объявление новых элементов html5
- •Выравнивание тела документа по центру
- •Создание главного блока
- •Заголовок
- •Навигационная полоса
- •Раздел и боковая врезка
- •Нижний колонтитул
- •Контрольные вопросы и задания:
- •Принцип работы гибкой блочной модели
- •Свойство display
- •Свойство box-orient
- •Свойство box-direction
- •Свойство box-ordinal-group
- •Сойство box-pack
- •Свойство box-flex
- •Свойство box-align
- •Гибкая блочная модель
- •Контрольные вопросы и задания:
- •Свойства css3
- •Свойство border-radius
- •Свойство box-shadow
- •Свойство text-shadow
- •Свойство @font-face
- •Линейный градиент
- •Радиальный градиент
- •Свойство outline
- •Свойство border-image
- •Свойства transform и transition
- •Функция transform: rotate
- •Функция transform: skew
- •Функция transform: translate
- •Одновременное использование всех видов трансформации
- •Динамические трансформации
- •Переходы
- •Внедрение JavaScript
- •Обработчики событий
- •Контрольные вопросы и задания:
- •Воспроизведение видеои аудио с помощью html5
- •Программирование видеопроигрывателя
- •Свойства
- •Выполнение кода
- •Воспроизведение аудио с помощью html5
- •Программирование видеопроигрывателя
- •Контрольные вопросы и задания:
- •Новые элементы, типы ввода и атрибуты, расширяющие функциональность форм
- •Атрибут multiple
- •Атрибут autofocus
- •Атрибут pattern
- •Атрибут form
- •Новые элементы форм
- •Контрольные вопросы и задания:
- •Швець н.В. Програмування для internet Конспект лекцій
- •65039, Одеса, вул. Канатна, 112
Контейнеры
Непосредственно в тег body помещать текст и изображения запрещено правилами последних версий HTML – их нужно размещать внутри парных тегов div, span, списков или таблиц.
Тег div (контейнер)
Это блочный тег, который служит единственной цели – быть контейнером, в котором могут находиться другие теги, изображения или текст.
Если нужно установить фон или границу для отдельного участка веб-страницы – нужно поместить этот участок в div, после чего установить фон и/или границу для этого div.
Необходимо сместить участок веб-страницы относительно самой страницы? Поместите нужный участок в div, после чего задайте ему относительное или абсолютное позиционирование с нужными координатами.
Следует отформатировать какой-либо блок текста? Поместите этот текст в div, и произведите форматирование.
Тег span (контейнер)
Поскольку тег div блочный – он занимает всю ширину веб-страницы, от ее начала и до конца. Поэтому ни слева, ни справа от содержимого тега div ничего не может отбражаться. Элементы слева будут перенесены на строку выше тега div, а элементы справа от тега div – на строку ниже тега div.
Помимо тега div существует еще один контейнер – тег span. Он применяется для тех же целей, что и div, но имеет одно существенное отличие: тег span – строчный, т.е. не требует для себя всей ширины окна браузера. Ему достаточно той ширины, которую физически занимают все элементы, находящиеся в нем.
Благодаря этому тег span может применяться для форматирования отдельных слов абзаца.
Начиная верстку нашего макета, мы создаем отдельные контейнеры для шапки, футера и основного контента.
<!DOCTYPE HTML>
<html>
<head>
<title>Заголовок</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<div>
<div>шапка</div>
<div>основная часть</div>
<div>футер</div>
</div>
</body>
</html>
Возникает вопрос, почему все перечисленные контейнеры находятся внутри родительского контейнера div? Родительский контейнер нужен для того, чтобы центрировать содержимое страницы относительно самой страницы. Ведь, если посмотреть на макет, все содержимое страницы находится в центре страницы, а по бокам от него размещается пустое пространство с фоном. Такая верстка называется фиксированной ( существует еще резиновая верстка или иначе – гибкая).
Вставка текста
Для вставки текста можно использовать теги div, span и p.
<p>
Предназначен для того чтобы создать абзац текста. Это означает, что весь текст, который заключен в тег p, будет начинаться с новой строки. И элементы, которые будут идти после закрывающего тега p, также будут начинаться с новой строки.
Кроме того, по умолчанию перед и после абзаца идет небольшой участок пустого пространства, который позволяет зрительно отделить один абзац от другого.
<br>
Если внутри абзаца нужно перенести текст на тновую строку используют тег br. Одним из выдимых отличий данного тега от <p> является отсутствие отступов после и перед тегом br.
Таким образом, тег br применяется к тексту, расположенному внутри тега p, тегов-контейнеров, списков, таблиц и т.д. Применение тега br не избавляет от необходимости помещать текст в какой-либо контейнер.
Заголовки h1-h6
Не рекомендуется перескакивать между заголовками разных уровней.
Тег <center>
Стандартом последних версий HTML он запрещен – вместо него используется свойство CSS. Но в редких случаях center – единственный способ центрировать что-либо.
Важно помнить, что тег center применяется не к тексту, а к контейнеру и всему его содержимому, будь то контейнер div, абзац p, таблица или просто рисунок.
Тег <pre>
В языке HTML переносы строк, идущие подряд пробелы и табуляции игнорируются. Но, если использовать тег pre, то все , что записано внутри него, будет выводиться как есть – со всеми переносами строк, пробелами и табуляциями.
Следует помнить, что внутри тега pre также следует заменять символы <, >, & и др. на соответствующие конструкции - < > &
Тег pre удобно использовать для вставки в HTML-документ строк кода на любом языке программирования.
Атрибут title
Говоря о тексте, следует вспомнить, что с помощью атрибута title можно добавить всплывающую подсказку к любому элементу веб-страницы – и она будет отбражаться при наведении указателя мыши на данный элемент.