WEB-программирование Лекция 2 HTML CSS Структура

WEB-программирование Лекция 2 HTML / CSS

Структура HTML • <тег атрибут1="значение" атрибут2="значение">. . . </тег> 1. правильная разметка 2. неправильная разметка

Правила записи • • Атрибуты должны находится в “ ” Теги не чувствительны к регистру Внутри тега допустимы переносы строк Неизвестные теги и атрибуты игнорируются Конкретная иерархия вложенности тегов Последовательность не имеет значения Парные теги должны быть закрыты Порядок атрибутов не имеет значения

Пример HTML-страницы <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 01//EN“ "http: //www. w 3. org/TR/html 4/strict. dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Заголовок документа</title> </head> <body> <p> Текст текст</p> </body> </html>

Теги HTML • Теги верхнего уровня; • Теги заголовка документа; • Блочные элементы; • Встроенные элементы; • Универсальные элементы; • Cписки; • Таблицы;

Верхний уровень <html> <head>. . . </head> <body>. . . </body> </html>

Теги заголовка документа • <base target=“” href=“”/> – target = “_blank|_self|_parent|_top” • <basefont color=“” face=“” size=“”/> • <bgsound/>

Теги заголовка документа <link/> Атрибуты: charset = “кодировка связываемого документа” href = “путь к связываемому файлу” media = “устройство, для которого следует применять стилевое оформление. ” rel = отношения между документом и файлом type = MIME-тип данных подключаемого файла. Пример: <link rel="stylesheet" type="text/css" href=“ind. css“/>

Теги заголовка документа <script></script> Атрибуты: language = “язык программирования” src = “адрес скрипта из внешнего файла” type = “тип содержимого”. Пример: <script type="text/javascript“ src=“ind. js”><script>

Теги заголовка документа <style></style> Атрибуты: media = “устройство для оформления” type = “MIME-тип содержимого”. Пример: <style type="text/css“>…CSS…</style>

Теги заголовка документа • <title></title>

Теги заголовка документа <meta/> Атрибуты: content - устанавливает значение параметра, заданного с помощью name или http-equiv - предназначен для конвертирования метатега в заголовок HTTP. name - имя метатега, также косвенно устанавливает его предназначение.

META-теги Список мета тегов группы NAME: • Мета тег Author • Мета тег Copyright • Мета тег Description • Мета тег Document-state • Мета тег Generator • Мета тег Keywords • Мета тeг Resource-type • Мета тeг Revisit • Мeтa тeг Robots • Мeтa тeг Subject • Мeтa тeг URL

META-теги Список мета тегов группы HTTP-EQUIV: • Мeтa тeг Content-Language • Мeтa тeг Content-Script-Type • Мeтa тeг Content-Style-Type • Мeтa тeг Content-Type • Мeтa тeг Expires • Мeтa тeг PICS-Label • Мeтa тeг Pragma • Мeтa тeг Refresh • Мeтa тeг Set-Cookie • Мeтa тeг Window-target

Пример МЕТА-тегов <meta name=“description" content= ". . . “/> <meta name=“document-state" content =“dynamic“/> <meta name=“robots” content=“index, follow“/> <meta http-equiv="Content-Language" content="ru“/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8“/> • <meta http-equiv="Content-Script-Type" content="text/javascript"> • <meta http-equiv ="Expires" content="Wed, 26 Feb 1999 08: 21: 57 GMT"> • • •

Блочные элементы • <div></div> Тег <div> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств.

Блочные элементы • <h 1>, . . . , <h 6> </h 1>, . . . , </h 6> Заголовки разного уровня, которые показывают относительную важность секции, расположенной после заголовка. • <hr/> • <blockquote></blockquote> Предназначен для выделения длинных цитат внутри документа. • <p></p> Определяет параграф (абзац) текста.

Блочные элементы • <pre></pre> Задает блок предварительно форматированного текста. Следующие теги не должны размещаться внутри контейнера <pre>: <big>, <img>, <small>, <sub> и <sup>.

Встроенные элементы • <a></a> Тег <a> устанавливает ссылку или якорь. <a href=“#second”>Якорь</a> • <b></b> / <strong></strong> Определяет жирное начертание шрифта. • <big></big> / <small></small> Тег <big> увеличивает размер шрифта на единицу по сравнению с обычным текстом.

Встроенные элементы • <br/> • <em></em> Тег <em> предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием. • <i></i> Устанавливает курсивное начертание шрифта.

Встроенные элементы • <img/> Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. • <span></span> Универсальный тег, предназначенный для определения встроенного элемента внутри документа.

Встроенные элементы • <sub></sub> / <sup></sup> Отображает шрифт в виде нижнего/верхнего индекса. Текст при этом располагается ниже/выше базовой линии остальных символов строки и уменьшенного размера — H 2 O.

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

Теги для списков • <ol></ol> Тег <ol> устанавливает нумерованный список • <ul></ul> Устанавливает маркированный список. • <li></li> Тег <li> определяет отдельный элемент списка.

Теги для таблиц • <table> Служит контейнером для элементов, определяющих содержимое таблицы. • <th> Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. • <tr> • Тег <tr> служит контейнером для создания строки таблицы. • <td> • Предназначен для создания одной ячейки таблицы.

Теги для таблиц <table width=“ 100%” height=“ 100%”> <tr><td width=“ 20%”>id 1: 1</td><td>id 1: 2</td></tr> <tr><td width=“ 20%”>id 2: 1</td><td>id 2: 2</td></tr> <tr><td width=“ 20%”>id 3: 1</td><td>id 3: 2</td></tr> … </table>

Атрибуты TABLE • align Задает выравнивание таблицы по краю окна браузера. • bgcolor Устанавливает цвет фона таблицы. • border Устанавливает толщину границ в пикселях

Атрибуты TABLE • cellpadding Определяет расстояние между границей ячейки и ее содержимым. • cellspacing Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет и входит в общее значение. • width Задает ширину таблицы. • height Высота таблицы

Атрибуты TD • colspan Устанавливает число ячеек, которые должны быть объединены по горизонтали. • rowspan Устанавливает число ячеек, которые должны быть объединены по вертикали. • valign Устанавливает вертикальное выравнивание содержимого ячейки

Фрэймы • <frame></frame> Тег <frame> определяет свойства отдельного фрейма, на которые делится окно браузера. • <frameset></frameset> Тег <frameset> заменяет собой элемент <body> на вебстранице и формирует структуру фреймов. • <iframe></iframe> Тег <iframe> создает плавающий фрейм, который находится внутри обычного документа

Формы • <form></form> Тег <form> устанавливает форму на веб-странице. Формы должны быть независимы друг от друга. Основные атрибуты: 1. method 2. action 3. name

Формы • <input></input> type=“radio” – переключатели type=“checkbox” - флажки type=“text” – текстовое поле type=“password” – замаскированное текстовое поле type=“file” – загрузка файлов на сервер type=“button” – кнопка type=“reset” – очистка данных формы type=“hidden” – скрытое текстовое поле type=“submit” – кнопка отправки данных

Формы • <select></select> Раскрывающийся список. multiple – многовариантный список. • <option value=“…”></option> Элемент списка. • <textarea></textarea> Текстовый блок.

Формы <form action="handler. php“ method=“POST”> <input type="radio" name="answer" value="a 1“/>V 1<br/> <input type="radio" name="answer” value="a 2“/>V 2<br/> <input type="radio" name="answer" value="a 3“/>V 3<br/> <input type=“text” name=“person” value=“”/> <input type=“hidden” name=“mod” value=“ 1”/> <textarea name=“wish”></textarea> <input type="submit“ value=“Отправить”/> </form>

Универсальные атрибуты • accesskey Позволяет получить доступ к элементу с помощью заданного сочетания клавиш. • class Определяет имя класса, которое позволяет связать тег со стилевым оформлением. • id Указывает имя стилевого идентификатора. • lang Браузер использует значение параметра для правильного отображения некоторых национальных символов.

Универсальные атрибуты • style Применяется для определения стиля элемента с помощью правил CSS. • tabindex Устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab. • title Описывает содержимое элемента в виде всплывающей подсказки.

События • onblur Потеря фокуса. • onchange Изменение значения элемента формы. • onclick Щелчок левой кнопкой мыши на элементе. • ondblclick Двойной щелчок левой кнопкой мыши на элементе. • onfocus Получение фокуса

События • onkeydown Клавиша нажата, но не отпущена. • onkeypress Клавиша нажата и отпущена. • onkeyup Клавиша отпущена. • onload Документ загружен. • onmousedown Нажата левая кнопка мыши.

События • onmousemove Перемещение курсора мыши. • onmouseout Курсор покидает элемент. • onmouseover Курсор наводится на элемент. • onmouseup Левая кнопка мыши отпущена. • onreset Форма очищена.

События • onselect Выделен текст в поле формы. • onsubmit Форма отправлена • onunload Закрытие окна.

Особенности текста • Любое количество идущих подряд пробелов считается за один • Нет расстановки переносов в тексте • Текст занимает ширину родительского элемента

HTML и XHTML • Все элементы должны быть закрыты. • Булевы атрибуты записываются в развёрнутой форме. • Имена тегов и атрибутов должны быть записаны строчными буквами. • XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться < и & соответственно. • Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859 -1).

CSS • Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Типы стилей: • Стиль браузера • Стиль автора • Стиль пользователя

Преимущества стилей Разграничение кода и оформления Расширенные по сравнению с HTML способы оформления элементов • Ускорение загрузки сайта (кеширование CSS) • Единое стилевое оформление множества документов • •

Способы подключения • • • <link> <style> @import url("style/header. css"); @import "/style/main. css" screen; /* Стиль для вывода результата на монитор */ @import "/style/smart. css" print, handheld; /* Стиль для печати и смартфона */

Способы подключения @media тип носителя 1 { Описание стиля для типа носителя 1 } @media тип носителя 2 { Описание стиля для типа носителя 2 }

Типы носителей • all - Все типы. • aural - Речевые синтезаторы и браузеры • braille - Устройства, основанные на системе Брайля, которые предназначены для слепых людей. • handheld - Наладонные компьютеры и аналогичные им аппараты. • print - Печатающие устройства вроде принтера. • projection - Проектор. • screen - Экран монитора. • Tv - Телевизор.

Базовый синтаксис CSS Селектор { свойство 1: значение; свойство 2: значение; }

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

Размеры • • • em - Размер шрифта текущего элемента ex - Высота символа x px - Пиксел % - Процент in - Дюйм (1 дюйм равен 2, 54 см) сm - Сантиметр mm - Миллиметр pt - Пункт (1 пункт равен 1/72 дюйма) pc - Пика (1 пика равна 12 пунктам)

Цвета • RGB(249, 201, 16); • По названию • 16 ричное значение BODY { background-color: #3366 CC; } H 1 { background-color: RGB(249, 201, 16); } P { background-color: gray; color: white; }

Адреса • body { background: url('http: //site. ru/imgs/1. png') } • div { background: url(images/warning. png) no-repeat; padding-left: 140 px; }

Селекторы • • Теги Классы Идентификаторы Контекстные селекторы <Тег 1> <Тег 2>. . . </Тег 2> </Тег 1> • Соседние селекторы Селектор 1 + Селектор 2 { Описание правил стиля } • Дочерние селекторы Селектор 1 > Селектор 2 { Описание правил стиля }

Селекторы • Селектор атрибута Селектор[атрибут] { Описание правил стиля } A[title] { color: red; } • Атрибут со значением • Атрибут начинается со значения [ ^= ] • Атрибут заканчивается значением [ $= ] • Содержит указанный текст [ *= ] • Одно из нескольких значений [ ~= ] • Дефис в значении атрибута [ |= ] • Универсальный селектор