1: Тема : Язык разметки гипертекстов HTML Вопрос 1. Назначение и структура языка HTML
2: HTML – Hiper Text Markup Language -это язык описания структуры страниц HTML – Hiper Text Markup Language -это язык описания структуры страниц «тэг» от англ. tag – метка, ярлык, этикетка, бирка Общая схема построения строки html – документа : ТЕКСТ
3: Правила: Правила: Пробелы в тексте игнорируются. Тэги форматирования могут быть написаны строчными и/или прописными буквами. Тэги следует писать парами.
4: Любой html - документ имеет следующую структуру: Любой html - документ имеет следующую структуру: …. . …. .
5: Листинг 1 Листинг 1 СТИХИ Ночь. Улица. Фонарь. Аптека. Бессмысленный и тусклый свет. ПРИМЕР
6: Вопрос 2. Тэги форматирования текста в html - документах - перенос на другую строку, не имеет теговой пары Пример
7: Тэговая пара , Этот текст следует вывести шрифтом Arial КРУПНЫЙ ТЕКСТ МЕЛКИЙ ТЕКСТ
8: Красный шрифт Красный шрифт Зеленый шрифт Синий шрифт Серый шрифт
9: КРУПНЫЙ ЗЕЛЕНЫЙ ШРИФТ ГАРНИТУРЫ ARIAL
10: Тэг начала абзаца , ТЕКСТ, ВЫРАВНЕННЫЙ ПО ЛЕВОМУ ПОЛЮ ТЕКСТ, ВЫРАВНЕННЫЙ ПО ЦЕНТРУ ТЕКСТ, ВЫРАВНЕННЫЙ ПО ПРАВОМУ ПОЛЮ
11: , - делает текст жирным; , - делает текст жирным; , - делает текст наклонным; , - делает текст подчеркнутым; , - делает текст зачеркнутым.
12: Тэги для заголовков Заголовок 1 Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Заголовок 6
13: Тэги , Тэги , - увеличивают размер символов, заключенных между ними, на единицу. Тэги И - уменьшают размер символов на единицу.
14: Тэги формирования списков , - тэги для формирования нумерованных списков; , - тэги для формирования маркированных списков Каждый элемент списка обрамляется тэговой парой , ПРИМЕР
15: Тэги и , -надстрочный индекс. , - подстрочный индекс. ПРИМЕР
16: ПРИМЕР
17: Формирование списка определений - начало/конец списка - определяемый термин - определение термина пример
18: Вопрос 3. Формирование горизонтальных линий ПРИМЕР
19: Вопрос 4. Создание таблиц - НАЧАЛО И КОНЕЦ ТАБЛИЦЫ - НАЧАЛО И КОНЕЦ СТРОКИ - НАЧАЛО И КОНЕЦ СТОЛБЦА
22: Параметры тега
23: Параметры тэга
25: Вопрос 5. Использование графики в HTML - документах
26: GIF (GRAPHIC INTERCHANGE FORMAT) – 256 цветовых оттенков GIF (GRAPHIC INTERCHANGE FORMAT) – 256 цветовых оттенков Свойства – прозрачность и анимация JPEG (JOINT PHOTOGRAPHIC EXPERT GROUP) – объединенная группа экспертов по изображениям, семейство форматов, основано на математических алгоритмах сильного сжатия изображения
27: - использование графики в качестве фона - файл расположен в сети -файл расположен в текущем каталоге
28: Параметр DGPROPERTIESFIXED- фиксирует фон в момент прокрутки - вставка графического изображения в документ
29: Параметры тэга IMG
31: Вопрос 6. Создание гиперссылок Гиперссылка состоит из двух частей: псевдокнопки и адресной части (URL) Любой текст Параметры тэга TARGET – указывает область загрузки ресурса. TARGET BLANK – загружает документ в новое окно пример
32: Вопрос 7. Создание фреймов Пример фреймов
33: Параметры фреймов
34: Параметры тэга
37: Плавающие фреймы Тэги
38: Вопрос 8. Использование форм при создании html – документов
39: Параметры тэга
42: Кнопки с зависимой фиксацией TYPERADIO - для выбора пользователем одного значения из нескольких возможных Например: NAME – указывает наименование поля (кнопки) VALUE – содержит значение поля
43: Кнопка с независимой фиксацией При создании форм часто требуется получить ответ пользователя на вопрос типа «Да/Нет». Для создания таких кнопок используется значение CHECKBOX параметра TYPE. Например: Молилась ли ты на ночь, Дездемона?
44: Кнопка «Выполнить» Создается при помощи тэга с параметром TYPE SUBMIT Значение параметра VALUE задает текст, который появится на кнопке. Действие определяется параметром ACTION тэга FORM
45: Кнопка «Восстановить значение по умолчанию» Создается при помощи тэга с параметром TYPE RESET
46: Использование списков в форме Тэг поддерживает три необязательных атрибута: MULTIPLE - позволяет выбрать более чем одно наименование; NAME - определяет наименование объекта; SIZE - определяет число видимых пользователю пунктов списка -для определения списка пунктов
47: Пример Первый Второй Третий Четвертый
48: Ввод текстового массива позволяет организовать ввод текста из нескольких строк в специальном окне, снабженном полосой прокрутки Пример: Комментарий Введите любую текстовую информацию Пример
49: Вопрос 9. Назначение CSS Вопрос 9. Назначение CSS Каскадные таблицы стилей Cascading Style Sheets (CSS) разработаны консорциумом World Wide Web Consortium (W3C).
50: Практическое значение CSS для Web – инжиниринга (совокупности технологий разработки и сопровождения Web - узлов) заключается в том, что процесс создания узла можно формализовать и представить в виде последовательности действий: Практическое значение CSS для Web – инжиниринга (совокупности технологий разработки и сопровождения Web - узлов) заключается в том, что процесс создания узла можно формализовать и представить в виде последовательности действий: необходимо определиться с номенклатурой страниц, т. е. все страницы проектируемого Web – узла разбить на типы (домашняя страница, навигационные страницы, информационные страницы, коммуникационные страницы и т. п. );
51: для каждого типа страницы разработать определенную логическую структуру (стандартный набор компонентов страницы); для каждого типа страницы разработать определенную логическую структуру (стандартный набор компонентов страницы); следует создать навигационную карту узла и форму ее реализации на страницах; для каждого стандартного компонента разработать стиль его отображения (CSS - описатель); рисовать картинки, создать анимацию, писать программы, вручную вводить текст и графику или генерировать содержимое страниц автоматически при обращении к ним
52: Способы применения CSS Способы применения CSS Создание и использование файлов таблиц стилей; Встраивание таблиц стилей в документы HTML; Встраивание стилей в тэги HTML.
53: Способ 1. Файл таблицы стилей (. css) Способ 1. Файл таблицы стилей (. css) H1 font-size: 24; font-weigt: bold; color: red; margin-left: 10 H2 font-size: 20; font-weigt: bold; color: black; font-family: Courier P. italic font-style: italic P. red color: red
54: Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить тэг . Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить тэг . Пример ……. Команды ………
55: Как пользоваться стилями из файла таблицы стилей? Как пользоваться стилями из файла таблицы стилей? Если в файле определены параметры для тэгов языка HTML, предназначенных для оформления текста (например, для операторов или , как в нашем примере), необходимо просто указать эти операторы без изменений. Пример: Заголовок первого уровня
56: При определении стиля можно не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов. При определении стиля можно не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов. Например, ниже определены классы italic и red для тэга : P. italic font-style: italic P. red color: red
57: Для того чтобы задействовать созданные классы, необходимо указать имя нужного класса в параметре CLASS тэга (или другого оператора форматирования текста). Для того чтобы задействовать созданные классы, необходимо указать имя нужного класса в параметре CLASS тэга (или другого оператора форматирования текста). Пример: Наклонный текст Текст красного цвета
58: Способ 2. Встраивание таблиц стилей в документы HTML Способ 2. Встраивание таблиц стилей в документы HTML Если отдельные документы HTML должны быть оформлены особым образом, отличным от того, который задан в общих таблицах стилей, можно встроить таблицы стилей непосредственно в текст документа HTML. Такие таблицы называются встроенными (embedded) таблицами стилей
59: Пример: Пример: … Встроенная таблица стилей ….
60: Способ 3. Встраивание стилей в операторы HTML Способ 3. Встраивание стилей в операторы HTML Данный способ предполагает встраивание стилей непосредственно в тэги языка HTML и применение стилей для оформления отдельных фрагментов документа HTML.
61: Пример: Пример: …Заголовок первого уровня Заголовок второго уровня Наклонный текст Текст красного цвет . . . . . 1способ2способ 3способ