Язык разметки гипертекстов HTML

Сентябрь 2, 2022

Главная
Алгебра
Язык разметки гипертекстов HTML

Содержание

2. HTML – Hiper Text Markup Language -это язык описания структуры страниц «тэг» от англ. tag –
3. Правила: Пробелы в тексте игнорируются. Тэги форматирования могут быть написаны строчными и/или прописными буквами. Тэги следует
4. Любой html - документ имеет следующую структуру: ….. …..
5. Листинг 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. Создание таблиц - НАЧАЛО И КОНЕЦ ТАБЛИЦЫ - НАЧАЛО И КОНЕЦ СТРОКИ - НАЧАЛО
20. Параметры тега TABLE
22. Параметры тега
23. Параметры тэга
24. ТЭГ ЗАГОЛОВКА ТАБЛИЦЫ ПАРАМЕТР ALIGN=TOP ИЛИ ALIGN=BOTTOM ПРИМЕР
25. Вопрос 5. Использование графики в HTML - документах
26. GIF (GRAPHIC INTERCHANGE FORMAT) – 256 цветовых оттенков Свойства – прозрачность и анимация JPEG (JOINT PHOTOGRAPHIC
27. - использование графики в качестве фона - файл расположен в сети -файл расположен в текущем каталоге
28. Параметр DGPROPERTIES=“FIXED”- фиксирует фон в момент прокрутки - вставка графического изображения в документ
29. Параметры тэга IMG
30. Пример
31. Вопрос 6. Создание гиперссылок Гиперссылка состоит из двух частей: псевдокнопки и адресной части (URL) Любой текст
32. Вопрос 7. Создание фреймов Пример фреймов FRAMEBORDER=1 BORDER=1>
33. Параметры фреймов
34. Параметры тэга
36. Пример
37. Плавающие фреймы Тэги
38. Вопрос 8. Использование форм при создании html – документов
39. Параметры тэга
41. Тэг - используется для определения области внутри формы, куда вводятся данные; формирует поле для ввода информации
42. Кнопки с зависимой фиксацией TYPE=RADIO - для выбора пользователем одного значения из нескольких возможных Например: NAME
43. Кнопка с независимой фиксацией При создании форм часто требуется получить ответ пользователя на вопрос типа «Да/Нет».
44. Кнопка «Выполнить» Создается при помощи тэга с параметром TYPE= SUBMIT Значение параметра VALUE задает текст, который
45. Кнопка «Восстановить значение по умолчанию» Создается при помощи тэга с параметром TYPE= RESET
46. Использование списков в форме Тэг поддерживает три необязательных атрибута: MULTIPLE - позволяет выбрать более чем одно
47. Пример Первый Второй Третий Четвертый
48. Ввод текстового массива позволяет организовать ввод текста из нескольких строк в специальном окне, снабженном полосой прокрутки
49. Вопрос 9. Назначение CSS Каскадные таблицы стилей Cascading Style Sheets (CSS) разработаны консорциумом World Wide Web
50. Практическое значение CSS для Web – инжиниринга (совокупности технологий разработки и сопровождения Web - узлов) заключается
51. для каждого типа страницы разработать определенную логическую структуру (стандартный набор компонентов страницы); следует создать навигационную карту
52. Способы применения CSS Создание и использование файлов таблиц стилей; Встраивание таблиц стилей в документы HTML; Встраивание
53. Способ 1. Файл таблицы стилей (*.css) H1 { font-size: 24; font-weigt: bold; color: red; margin-left: 10%
54. Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа
55. Как пользоваться стилями из файла таблицы стилей? Если в файле определены параметры для тэгов языка HTML,
56. При определении стиля можно не только переопределить параметры форматирования операторов, но и создать новые классы для
57. Для того чтобы задействовать созданные классы, необходимо указать имя нужного класса в параметре CLASS тэга (или
58. Способ 2. Встраивание таблиц стилей в документы HTML Если отдельные документы HTML должны быть оформлены особым
59. Пример: … Встроенная таблица стилей H1 { font-size: 24; font-weigt: bold; color: red; margin-left: 10% }
60. Способ 3. Встраивание стилей в операторы HTML Данный способ предполагает встраивание стилей непосредственно в тэги языка
62. Скачать презентацию

Слайд 2

HTML – Hiper Text Markup Language -это язык описания структуры страниц

«тэг» от англ. tag – метка, ярлык, этикетка, бирка
Общая схема построения строки html – документа :
<ИМЯ ТЭГА [АТРИБУТ[=ЗНАЧЕНИЕ АТРИБУТА]…]> ТЕКСТ

Слайд 3

Правила:
Пробелы в тексте игнорируются.
Тэги форматирования могут быть написаны строчными и/или прописными

буквами.
Тэги следует писать парами.

Слайд 4

Любой html - документ имеет следующую структуру:

…..

…..

Слайд 5

Листинг 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. Создание таблиц

- НАЧАЛО И КОНЕЦ ТАБЛИЦЫ

- НАЧАЛО И КОНЕЦ СТРОКИ
- НАЧАЛО И КОНЕЦ СТОЛБЦА

Слайд 20

Параметры тега TABLE

Слайд 21

Слайд 22

Параметры тега

Слайд 23

Параметры тэга

Слайд 24

ТЭГ ЗАГОЛОВКА ТАБЛИЦЫ ПАРАМЕТР ALIGN=TOP ИЛИ ALIGN=BOTTOM ПРИМЕР

Слайд 25

Вопрос 5. Использование графики в HTML - документах

Слайд 26

GIF (GRAPHIC INTERCHANGE FORMAT) – 256 цветовых оттенков
Свойства – прозрачность и

анимация
JPEG (JOINT PHOTOGRAPHIC EXPERT GROUP) – объединенная группа экспертов по изображениям, семейство форматов, основано на математических алгоритмах сильного сжатия изображения

Внедрение графики в html – документ

Слайд 27

- использование графики

в качестве фона - файл расположен в сети -файл расположен в текущем каталоге

Слайд 28

Параметр DGPROPERTIES=“FIXED”- фиксирует фон в момент прокрутки - вставка графического

изображения в документ

Слайд 29

Параметры тэга IMG

Слайд 30

Пример

Слайд 31

Вопрос 6. Создание гиперссылок
Гиперссылка состоит из двух частей: псевдокнопки и

адресной части (URL)
Любой текст
Параметры тэга
TARGET – указывает область загрузки ресурса.
TARGET =BLANK – загружает документ в новое окно
пример

Вопрос 7. Создание фреймов

Пример фреймов

Параметры фреймов

Параметры тэга

Пример

Плавающие фреймы Тэги

Вопрос 8. Использование форм при создании html – документов

Параметры тэга

Тэг - используется для определения области внутри формы, куда вводятся

данные; формирует поле для ввода информации пользователем.
Это может быть текстовое поле, опция, изображение или кнопка
Вид поля ввода определяется значением параметра TYPE

Кнопки с зависимой фиксацией TYPE=RADIO - для выбора пользователем одного значения

из нескольких возможных Например: NAME – указывает наименование поля (кнопки) VALUE – содержит значение поля

Кнопка с независимой фиксацией При создании форм часто требуется получить ответ пользователя

на вопрос типа «Да/Нет». Для создания таких кнопок используется значение CHECKBOX параметра TYPE. Например:
Молилась ли ты на ночь, Дездемона?

Кнопка «Выполнить» Создается при помощи тэга с параметром TYPE= SUBMIT

VALUE=”Выполнить”> Значение параметра VALUE задает текст, который появится на кнопке. Действие определяется параметром ACTION тэга FORM

Кнопка «Восстановить значение по умолчанию» Создается при помощи тэга с

параметром TYPE= RESET

Использование списков в форме Тэг поддерживает три необязательных атрибута: MULTIPLE

- позволяет выбрать более чем одно наименование; NAME - определяет наименование объекта; SIZE - определяет число видимых пользователю пунктов списка

Пример

Ввод текстового массива позволяет организовать ввод текста из нескольких строк в</div></h2><div class="slides-content">специальном окне, снабженном полосой прокрутки Пример: <TEXTAREA NAME=”comm1” ROWS=5 COLS=50> Комментарий Введите любую текстовую информацию Пример

Вопрос 9. Назначение CSS
Каскадные таблицы стилей
Cascading Style Sheets (CSS)
разработаны

консорциумом World Wide Web Consortium (W3C).

Практическое значение CSS для Web – инжиниринга (совокупности технологий разработки и

сопровождения Web - узлов) заключается в том, что процесс создания узла можно формализовать и представить в виде последовательности действий:
необходимо определиться с номенклатурой страниц, т.е. все страницы проектируемого Web – узла разбить на типы (домашняя страница, навигационные страницы, информационные страницы, коммуникационные страницы и т.п.);

для каждого типа страницы разработать определенную логическую структуру (стандартный набор компонентов

страницы);
следует создать навигационную карту узла и форму ее реализации на страницах;
для каждого стандартного компонента разработать стиль его отображения (CSS - описатель);
рисовать картинки, создать анимацию, писать программы, вручную вводить текст и графику или генерировать содержимое страниц автоматически при обращении к ним

Способы применения CSS
Создание и использование файлов таблиц стилей;
Встраивание таблиц стилей в

документы HTML;
Встраивание стилей в тэги HTML.

Способ 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 }

Для того чтобы документ HTML был оформлен с использованием файла таблицы

стилей, в разделе заголовка документа необходимо разместить тэг .
Пример
…….

Команды

………

Как пользоваться стилями из файла таблицы стилей?
Если в файле определены параметры

для тэгов языка HTML, предназначенных для оформления текста (например, для операторов

или

, как в нашем примере), необходимо просто указать эти операторы без изменений.
Пример:

Заголовок первого уровня

При определении стиля можно не только переопределить параметры форматирования операторов, но

и создать новые классы для этих операторов.
Например, ниже определены классы italic и red для тэга

:
P.italic { font-style: italic }
P.red { color: red }

Для того чтобы задействовать созданные классы, необходимо указать имя нужного класса

в параметре CLASS тэга

(или другого оператора форматирования текста).
Пример:

Наклонный текст

Текст красного цвета

Способ 2. Встраивание таблиц стилей в документы HTML
Если отдельные документы HTML

должны быть оформлены особым образом, отличным от того, который задан в общих таблицах стилей, можно встроить таблицы стилей непосредственно в текст документа HTML. Такие таблицы называются встроенными (embedded) таблицами стилей

Пример:
… Встроенная таблица стилей
….

Способ 3. Встраивание стилей в операторы HTML
Данный способ предполагает встраивание стилей

непосредственно в тэги языка HTML и применение стилей для оформления отдельных фрагментов документа HTML.