Введение в язык разметки HTML

Июль 25, 2022

Главная
Информатика
Введение в язык разметки HTML

Содержание

2. Общая информация Виды занятий и контроля по МДК: Длительность МДК – 2 семестра В текущем семестре:
3. Лабораторные работы Интерактивные онлайн-курсы на HtmlAcademy.ru 18 бесплатных разделов с заданиями (9 обязательных)
4. Что планируется изучить HTML CSS JavaScript PHP Денвер (Denwer) CMS Joomla
5. Язык разметки HTML HyperText Markup Language — «язык разметки гипертекста»
6. Документ HTML Файл с расширением htm или html Имя – произвольное, но если это стартовая страница
7. HTML Основным форматом представления документов в сети Интернет является язык гипертекстовой разметки HTML (стандартный язык разметки
8. Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги (контейнеры) вставить
9. Общее представление о языках разметки HTML, XML, XHTML ЭВОЛЮЦИЯ ЯЗЫКОВ РАЗМЕТКИ. 1986 ISO-8879 SGML Декабрь 1997
10. Отличия версий HTML Каждая новая версия включала дополнительные теги и атрибуты, некоторые признавались устаревшими Но основная
11. Выбираем !DOCTYPE Каждый HTML-документ должен начинаться со строки !DOCTYPE. Она говорит браузеру, какую версию HTML использовали
12. Виды !DOCTYPE — DOCTYPE для стандарта HTML 4.01 Strict — DOCTYPE для стандарта XHTML 1.0 Strict;
13. Виды !DOCTYPE — DOCTYPE для стандарта HTML 4.01 Transitional — DOCTYPE для стандарта XHTML 1.0 Transitional
14. Виды !DOCTYPE — DOCTYPE для стандарта HTML 4.01 Frameset (с фреймами); — DOCTYPE для стандарта XHTML
15. Виды !DOCTYPE — DOCTYPE для стандарта XHTML 1.1.
16. HTML-код страницы помещается внутрь контейнера … Заголовок Web-страницы заключается в контейнер … Основное содержание страницы помещается
17. Простейшая Web-страница Моя первая Web-страница Привет! first.html Моя первая Web-страница шапка («голова») Привет! основная часть («тело»)
18. Создание файла веб-страницы Открыть Notepad++ и введите туда следующий текст: Моя первая веб-страничка content="text/html; charset=utf-8" />
19. ПО для верстки
20. Редакторы для верстки Конечно, сверстать HTML-документ можно и в Блокноте… Раньше это считалось верхом профессионализма. Сейчас
21. Редакторы для верстки Notepad++ phpDesignerPro Adobe Dreamweaver Hotdog HTML Pad Edit Plus …
22. Валидаторы Валидаторы — сервисы Интернета, проверяющие HTML-документ на ошибки и следование правилам выбранного DOCTYPE Как правило,
23. Теги HTML
24. Теги В языке HTML все, что вводится в HTML-документе, будет выводиться на экран браузера сплошным текстом,
25. Типы тегов (на основе назначения тега либо его поведения) Теги верхнего уровня — теги, из которых
26. Типы тегов Блочные элементы — в данный тип входят все теги, которые занимают всю доступную ширину
27. Типы тегов Встроенные (строчные) элементы — в отличие от блочных, теги данного типа занимают лишь ту
28. Типы тегов Списки — в данную группу тегов входят все теги, которые применяются для создания нумерованных
29. Блочные и строчные теги
30. Атрибуты и их значения Внутри одинарного или открывающего тега могут находиться атрибуты и их значения: атрибут2="значение2">
31. Атрибуты и их значения В XHTML каждый атрибут обязан иметь значение Значения атрибута - либо определенные
32. Типы значений атрибутов Задающие цвет: специальное ключевое слово: black, blue и т. д. шестнадцатеричный код цвета:
33. Типы значений атрибутов Задающие адрес в Интернете: абсолютный адрес — http://microsoft.com, http://mail.ru/content.html относительный адрес — /content.html,
34. Основной синтаксис XHTML HTML-документ обязательно должен начинаться с DOCTYPE Все теги и атрибуты должны записываться строчными
35. Основной синтаксис XHTML Каждый тег должен быть корректно вложен в другой Сокращенные атрибуты (без значения) запрещены;
36. Web-страницы. Язык HTML Оформление текста
37. Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки Заголовки: h1 … h6 Теги
38. Абзацы переход на новую строку абзац (с отступами) И вечный бой! Покой нам только снится Сквозь
39. Физическая разметка
40. Оформление текста Вывод «как есть» Комментарии И вечный бой! Покой нам только снится Сквозь кровь и
41. Контейнеры Тег div Блочный тег, который служит для единственной цели — быть контейнером, в котором могут
42. Атрибут title Позволяет добавить описание к любому элементу веб-страницы, в виде всплывающей подсказки Это необязательный атрибут
43. Специальные символы https://html5book.ru/specsimvoly-html/#part1
44. Web-страницы. Язык HTML Рисунки, видео, аудио
45. Форматы рисунков GIF (Graphic Interchange Format) сжатие без потерь прозрачные области анимация только с палитрой (2…256
46. Тег img
47. Рисунки в документе из той же папки: из другой папки: с другого сервера: image (изображение) source
48. Атрибуты тега img src="/cat.png" alt="котик"> width, height — ширина или высота задается в пикселах src —
49. Аудио autoplay — проигрывание при загрузке страницы controls — панель управления плеером loop — автоповтор preload
50. Видео poster – стартовая картинка-заместитель
51. Web-страницы. Язык HTML Гиперссылки
52. Ссылки на другие страницы сайта Таблицы страница в той же папке anchor (якорь) hyper reference (гиперссылка)
53. Примеры (ссылки из файла rock.html)
54. Ссылки на другие сайты Почта на главную страницу сайта index.htm, index.html, default.asp, … на конкретную страницу
55. Ссылки внутри страницы Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы
56. Запуск почтовой программы Напишите мне! Другие протоколы: ftp://, file: , ...
57. Варианты открытия ссылки я ссылка атрибут target — имя окна или фрейма, куда браузер будет загружать
58. Web-страницы. Язык HTML Списки
59. Списочные элементы - пронумерованный перечень элементов (ordered lists) - маркированный перечень элементов (bulleted lists) - отдельный
60. Списочные элементы
61. Web-страницы. Язык HTML Таблицы
62. Теги для таблицы В тег включается множество элементов для описания структуры таблицы Элемент группирует строки таблицы
63. Таблицы
64. Таблицы … .. .. .. Подвал таблицы определяется выше содержимого таблицы!
65. Задание HTML таблицы Состав команды ФИО Должность Иванов А.П. программист Петров В.А. проектировщик Заголовок таблицы
66. Таблицы. Объединение ячеек
67. Описание структуры страницы с помощью таблиц С помощью таблиц можно создать хорошую схему (планировку таблицы) (4
68. Разметка на основе таблиц Сделать самим
69. Web-страницы. Язык HTML Формы
70. Формы HTML Используются для описания частей страницы в которой пользователь может просматривать имеющиеся данные, корректировать и
71. Формы HTML Функциональность форм обеспечивается через языки JavaScript и/или PHP Формы в HTML могут состоять из:
72. Формы HTML Форма задается парным блочным тегом Тег обычно включает набор элементов управления: Элемент для ввода
73. Описание формы в HTML Форма задается парным блочным тегом Элементы_формы_и_другие_элементы_HTML method - метод посылки запроса с
74. Элементы формы Многие элементы формы создаются тегом Типы управляющих элементов Кнопки «Передать» (type=“submit”) Кнопки «Очистить» (type=“reset”)
75. Пример формы HTML Пример формы Это уже наша форма расширить
76. Флажки и переключатели Переключатель создается тегом с атрибутом type = "checkbox" Флажок создается тегом с атрибутом
77. Скрытый элемент Иногда при отправке формы на сервер нужно передать некое значение, но посетителю его видеть
78. Другие варианты тега input Менее популярные варианты атрибута typt тега : button — позволяет создать кнопку
79. Выпадающие списки Выпадающий список – тег Строка списка задается тегом Первый Второй Третий
80. Текстовая область Для создания многострочного текстового поля следует использовать парный блочный тег Пример формы Это уже
81. Замечание по обработке HTML форм При нажатии кнопки «submit» данные формы передаются на сервер – по
82. Тег meta и его виды атрибут name — устанавливает модификатор мета-тега
84. Скачать презентацию

Слайд 2

Общая информация
Виды занятий и контроля по МДК:
Длительность МДК – 2 семестра
В

текущем семестре:
Лекции – 4,5 пар в неделю
Лабораторные работы – 2 пары в неделю,
Контрольные работы – 2(?)
Диф. зачет

Слайд 3

Лабораторные работы
Интерактивные онлайн-курсы на
HtmlAcademy.ru
18 бесплатных разделов с заданиями (9

обязательных)

Слайд 4

Что планируется изучить
HTML
CSS
JavaScript
PHP
Денвер (Denwer)
CMS Joomla

Слайд 5

Язык разметки HTML
HyperText Markup Language —
«язык разметки гипертекста»

Слайд 6

Документ HTML
Файл с расширением htm или html
Имя – произвольное, но если

это стартовая страница сайта (раздела сайта), то – index.html или main.html
(пример)

Слайд 7

HTML
Основным форматом представления документов в сети Интернет является язык гипертекстовой разметки

HTML (стандартный язык разметки документов во Всемирной паутине) .
HTML – это определенная совокупность правил (тегов), по которым оформляется документ. Теги показывают Интернет-браузеру, как следует отображать текст на Web-страничке.
Структура тега (пары тегов) всегда такова:
<название тега> …
Теги могут содержать атрибуты, характеризующие отображение информации внутри тега.

Слайд 8

Тэги
Тэг – это команда языка HTML, которую выполняет браузер:
непарные тэги
парные

тэги (контейнеры)

вставить рисунок

...

открывающий

закрывающий

область действия тэга: описание таблицы

Слайд 9

Общее представление о языках разметки HTML, XML, XHTML
ЭВОЛЮЦИЯ ЯЗЫКОВ

РАЗМЕТКИ.

1986
ISO-8879
SGML

Декабрь 1997
HTML 4.0 + CSS 2.0

Январь 1997
HTML 3.2

Март 1995
HTML 3 + CSS

1994
HTML 2.0

1991
CERN HTML

24 декабря 1999
HTML 4.01

2000
XHTML 1.0

2014
HTML 5 + CSS 3

Слайд 10

Отличия версий HTML
Каждая новая версия включала дополнительные теги и атрибуты, некоторые

признавались устаревшими
Но основная тенденция развития языка HTML заключалась в стандартизации синтаксиса и верстки HTML-документа.
Из-за многочисленных условностей при верстке допускалось большое количество ошибок.
Было принято решение бороться с этим. В результате синтаксис языка HTML стал более строгим.
HTML5 отличается от XHTML 1.0 только наличием новых тегов

Слайд 11

Выбираем !DOCTYPE
Каждый HTML-документ должен начинаться со строки !DOCTYPE. Она говорит браузеру,

какую версию HTML использовали при создании HTML-страницы.
Если не указать – разные браузеры будут вести себя по разному
Для HTML 5:

Слайд 12

Виды !DOCTYPE
— DOCTYPE для

стандарта HTML 4.01 Strict
— DOCTYPE для стандарта XHTML 1.0 Strict;
Разновидность Strict (строгий) используется в том случае, если код документа полностью соответствует выбранной версии HTML. В Strict оформление и содержание полностью разделены между HTML и CSS.

Слайд 13

Виды !DOCTYPE
— DOCTYPE

для стандарта HTML 4.01 Transitional
— DOCTYPE для стандарта XHTML 1.0 Transitional
Transitional - является переходный вариант от прошлой версии языка HTML к новой.
Если в новой версии HTML какие-то теги были признаны устаревшими, то в стандарте Transitional они по-прежнему остаются рекомендуемыми для применения.

Слайд 14

Виды !DOCTYPE
—

DOCTYPE для стандарта HTML 4.01 Frameset (с фреймами);
— DOCTYPE для стандарта XHTML 1.0 Frameset (с фреймами);
Разновидность Frameset аналогична Transitional, кроме того, в Frameset также разрешено применять теги для создания фреймов.

Слайд 15

Виды !DOCTYPE
— DOCTYPE

для стандарта XHTML 1.1.

Слайд 16

HTML-код страницы помещается внутрь контейнера …
Заголовок Web-страницы заключается

в контейнер …
Основное содержание страницы помещается в контейнер …
Название Web-страницы содержится в контейнере … и выводится в строке заголовка браузера.

Структура Web-страницы

Слайд 17

Простейшая Web-страница

Моя первая <br> Web-страница

Привет!

first.html

Моя первая <br> Web-страница

шапка («голова»)

Привет!

основная

часть («тело»)

Слайд 18

Создание файла веб-страницы
Открыть Notepad++ и введите туда следующий текст: Моя</div></h2><div class="slides-content">первая веб-страничка
content="text/html; charset=utf-8" />
Здравствуйте, это моя первая страница.
Добро пожаловать! :) Сохраним этот документ, присвоив ему имя *.html

Слайд 19

ПО для верстки

Слайд 20

Редакторы для верстки
Конечно, сверстать HTML-документ можно и в Блокноте… Раньше это

считалось верхом профессионализма. Сейчас же это считается верхом глупости
Основное достоинство таких редакторов - подсветка HTML- кода, что позволяет сразу определить, где в коде находится ошибка
Это позволяет минимизировать количество ошибок в HTML-документе и упростить его создание

Слайд 21

Редакторы для верстки
Notepad++
phpDesignerPro
Adobe Dreamweaver
Hotdog
HTML Pad
Edit Plus
…

Слайд 22

Валидаторы
Валидаторы — сервисы Интернета, проверяющие HTML-документ на ошибки и следование правилам

выбранного DOCTYPE
Как правило, большинство ошибок в HTML-документе не сказываются на его отображении в браузерах.
Валидатор предназначен прежде всего для разработчиков сайтов
Наиболее популярным валидатором является сервис http://validator.w3.org
Программа Tidy - ее можно скачать с сайта http://tidy.sourceforge.net

Слайд 23

Теги HTML

Слайд 24

Теги
В языке HTML все, что вводится в HTML-документе, будет выводиться на

экран браузера сплошным текстом, то есть:
переводы строк игнорируются и не влияют на отображение текста браузером
несколько идущих подряд пробелов заменяются одним
если браузер встретит какой-либо неизвестный ему тег, то проигнорирует его

Слайд 25

Типы тегов
(на основе назначения тега либо его поведения)
Теги верхнего уровня —

теги, из которых состоит базовая структура документа — его каркас, то есть определяющие раздел заголовка и тела документа: html, head, body
Теги заголовка документа — к данной группе относятся все теги, которые указываются внутри тега head: title, meta, link

Слайд 26

Типы тегов
Блочные элементы — в данный тип входят все теги, которые

занимают всю доступную ширину экрана, независимо от того, сколько текста и других элементов находится внутри тега: blockquote, div, h1, h2, h3, h4, h5, h6, hr, p, pre
Любой тег, идущий за блочным тегом, будет отображаться с новой строки

Слайд 27

Типы тегов
Встроенные (строчные) элементы — в отличие от блочных, теги данного

типа занимают лишь ту ширину экрана, которая им реально нужна; при этом следующий за ними встроенный элемент на новую строку не переносится: a, b, big, em, i, img, small, span, strong, sub, sup
Универсальные элементы — теги данного типа могут быть как блочными, так и строчными: del, ins

Слайд 28

Типы тегов
Списки — в данную группу тегов входят все теги, которые

применяются для создания нумерованных либо ненумерованных списков: ul, ol, li, dd, dt, dl
Таблицы — в данную группу входят теги, предназначенные для создания таблиц: table, thead, tbody, td, th, tr
Фреймы — все теги, предназначенные для создания фреймов (области внутри HTML-документа, в которые загружается другой HTML-документ): frame, frameset, iframe

Слайд 29

Блочные и строчные теги

Слайд 30

Атрибуты и их значения
Внутри одинарного или открывающего тега могут находиться атрибуты

и их значения:
<тег атрибут1="значение1"
атрибут2="значение2"> текст
Атрибуты уточняют функциональность тега
Порядок расположения атрибутов в теге ни на что не влияет

Слайд 31

Атрибуты и их значения
В XHTML каждый атрибут обязан иметь значение
Значения атрибута

- либо определенные ключевые слова, либо любой пользовательский текст
Значение атрибута указывается в кавычках ' (одинарных) или " (двойных). В других кавычках ( `, ‘, “, «, ») - нельзя

Пример текста

Слайд 32

Типы значений атрибутов
Задающие цвет:
специальное ключевое слово: black, blue и т. д.
шестнадцатеричный

код цвета: #ff0000 (красный), #000000 (черный) и т. Д
Задающие размер:
просто целое число (размер в пикселах)
целое число от 1 до 100 в процентах, определяющее размер элемента относительно размера родительского элемента либо окна браузера

Слайд 33

Типы значений атрибутов
Задающие адрес в Интернете:
абсолютный адрес — http://microsoft.com, http://mail.ru/content.html
относительный адрес

— /content.html, ../css/style.css
Различные ключевые слова (selected, none и т.д.)

Слайд 34

Основной синтаксис XHTML
HTML-документ обязательно должен начинаться с DOCTYPE
Все теги и атрибуты

должны записываться строчными буквами (в нижнем регистре), так как язык XHTML регистрозависим
Любые значения атрибутов необходимо заключать в кавычки
Все парные теги должны иметь закрывающий тег
Все одинарные теги должны завершаться слешем перед закрывающей скобкой:

, , ,

Слайд 35

Основной синтаксис XHTML
Каждый тег должен быть корректно вложен в другой
Сокращенные атрибуты

(без значения) запрещены; для них в качестве значения обязательно нужно указывать название атрибута: checked="checked", compact="compact", disabled="disabled"
Непосредственно внутри тега body не должно быть ни текста, ни изображений. Они должны находиться внутри парных тегов span, div, списков или таблиц

Слайд 36

Web-страницы. Язык HTML
Оформление текста

Слайд 37

Заголовок документа

Заголовок раздела

Заголовок подраздела

Заголовок параграфа

Комментарий

Авторские пометки

Заголовки: h1 … h6
Теги h1- h6

являются парными и блочными

Слайд 38

Абзацы
переход на новую строку
абзац (с отступами)
И вечный бой! Покой
нам только

снится

Сквозь кровь и пыль...

Летит, летит степная
кобылица

И мнет ковыль...

Одно физическое тело захотело поменять три своих старых варежки
на что-нибудь хорошее.

До самого вечера тело с варежками ...

Слайд 39

Физическая разметка

Слайд 40

Оформление текста

Вывод «как есть»
Комментарии


И вечный бой! Покой 
	нам только снится
Сквозь кровь

и пыль...
Летит, летит степная кобылица
И мнет ковыль...

Одно физическое тело захотело поменять три своих старых варежки
на что-нибудь хорошее.

Слайд 41

Контейнеры
Тег div
Блочный тег, который служит для единственной цели — быть контейнером,

в котором могут находиться другие теги, изображения или текст.
Вам нужно установить фон или границу для отдельного участка веб-страницы?
Поместите нужный участок в тег div, после чего установите фон и/или границу для этого div.
Тег span
То же что и тег div, но является строчным, т. е. не требует для себя всей ширины окна браузера. Ему
достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в нем.

Слайд 42

Атрибут title
Позволяет добавить описание к любому элементу веб-страницы, в виде всплывающей

подсказки
Это необязательный атрибут
Атрибут title можно использовать практически для любого тега, который может быть вложен внутрь тега body

Слайд 43

Специальные символы
https://html5book.ru/specsimvoly-html/#part1

Слайд 44

Web-страницы. Язык HTML
Рисунки, видео, аудио

Слайд 45

Форматы рисунков
GIF (Graphic Interchange Format)
сжатие без потерь
прозрачные области
анимация
только с палитрой (2…256

цветов)
рисунки с четкими границами, мелкие рисунки

JPEG (Joint Photographer Expert Group)
сжатие с потерями
только True Color (16,7 млн. цветов)
нет анимации и прозрачности
рисунки с размытыми границами, фото

PNG (Portable Network Graphic)
сжатие без потерь
с палитрой (PNG-8) и True Color (PNG-24)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки

Слайд 46

Тег img
Слайд 47
Рисунки в документе

src="http://www.vasya.ru/img/flag.jpg"/>
из той же папки:
из другой папки:
с другого сервера:
image (изображение)
source (источник)
Слайд 48
Атрибуты тега img
src="/cat.png" alt="котик">
width, height — ширина или
высота задается в пикселах
src — url картинки
alt — альтернативный текст, который выводится, если изображение не загрузилось
Слайд 49
Аудио

autoplay — проигрывание при загрузке страницы
controls — панель управления плеером
loop
— автоповтор
preload — загрузка файла вместе с загрузкой страницы
src — путь до трека
Слайд 50
Видео

poster – стартовая картинка-заместитель
Слайд 51
Web-страницы. Язык HTML
Гиперссылки
Слайд 52
Ссылки на другие страницы сайта
Таблицы
страница в той же папке
anchor (якорь)

hyper reference (гиперссылка)
страница во вложенной папке
Пример
страница в соседней папке
Текст
выйти из текущей папки
Слайд 53
Примеры (ссылки из файла rock.html)
Слайд 54
Ссылки на другие сайты
Почта
на главную страницу сайта
index.htm, index.html, default.asp, …
на
конкретную страницу сайта (URL)

Васин текст
на файл для скачивания

Скачать
Слайд 55
Ссылки внутри страницы

Глава 1
Глава 2

Глава 1

Это текст
главы 1. Это текст главы 1.
Это текст главы 1. Это текст главы 1.
Наверх

Глава 2

Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.
Наверх
метка (якорь)
переход на метку
Слайд 56
Запуск почтовой программы

Напишите мне!

Другие протоколы: ftp://, file: , ...
Слайд 57
Варианты открытия ссылки
я ссылка
атрибут target — имя окна или
фрейма, куда браузер будет загружать документ
_blank – в новой вкладке/окне
_self – в том же окне, что и ссылка
_parent – (с фреймами) в родительском фрейме
_top - (с фреймами) в текущем окне, заменяя собой все фреймы
Слайд 58
Web-страницы. Язык HTML
Списки
Слайд 59
Списочные элементы
- пронумерованный перечень элементов (ordered lists)
- маркированный перечень
элементов (bulleted lists)
- отдельный пункт списка
Слайд 60
Списочные элементы
Слайд 61
Web-страницы. Язык HTML
Таблицы
Слайд 62
Теги для таблицы
В тег
включается множество элементов для описания структуры
таблицы
Элемент
группирует строки таблицы
Тег для описания конкретной строки
Каждый тег содержит элементы и )
Слайд 63
Таблицы
и для описания заголовков ячеек данных и самих данных ячейки, соответственно
Другие не обязательные элементы позволяют описывать название таблицы
, а также начальные (header) и конечные (footer) строки (

Слайд 64
Таблицы

…

..

..

..

Подвал таблицы определяется выше содержимого таблицы!
Слайд 65
Задание HTML таблицы

Состав команды
ФИО Должность

Иванов А.П. программист

Петров В.А. проектировщик

Заголовок таблицы
Слайд 66
Таблицы. Объединение ячеек

Слайд 67
Описание структуры страницы с помощью таблиц
С помощью таблиц можно создать хорошую
схему (планировку таблицы) (4 слайд 44)
Не обязательно рисовать саму таблицу (толщина линии может быть = 0). Но таблицы позволяет задавать взаимное расположение элементов страницы относительно друг друга (что находится слева, справа и снизу, сверху).
Однако, таблицы имеют следующие недостатки:
Таблицы требуют добавления большого количества кода.
Таблицы трудно удалить или изменить.
Слайд 68
Разметка на основе таблиц
Сделать самим
Слайд 69
Web-страницы. Язык HTML
Формы
Слайд 70
Формы HTML
Используются для описания частей страницы в которой пользователь может просматривать
имеющиеся данные, корректировать и вводить новые данные
С помощью форм выполняется сбор данных, вводимых пользователем для взаимодействия c Web-приложением
Типичные примеры форм:
поиск по сайту
отправки сообщения админу
регистрации на сайте
опросы
Слайд 71
Формы HTML
Функциональность форм обеспечивается через языки JavaScript и/или PHP
Формы в HTML
могут состоять из:
Текстовых полей
Текстовых областей
Раскрывающихся списков
Кнопок
Флажков
Переключателей
Слайд 72
Формы HTML
Форма задается парным блочным тегом

Тег обычно включает набор элементов
управления:
Элемент для ввода пользователем данных
Элемент для ввода многострочного текста<br></div></div></div><div class="slides-wrapper"><div id="slide73" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 73</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-72.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Описание формы в HTML Форма задается парным блочным тегом Элементы_формы_и_другие_элементы_HTML method" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/483210/slide-72.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/483210/slide-72.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/483210/slide-72.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-72.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Описание формы в HTML<br><p>Форма задается парным блочным тегом <form><br> <form method="get" action="URL"></div></h2><div class="slides-content"><br> Элементы_формы_и_другие_элементы_HTML <br> </form><br>method - метод посылки запроса с данными из формы:<br>get: данные из формы добавляются в конец URL<br>post: данные из формы добавляется в заголовок запроса<br>action - описывает URL, который будет вызываться для обработки данных формы<br></div></div></div><div class="slides-wrapper"><div id="slide74" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 74</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-73.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Элементы формы Многие элементы формы создаются тегом Типы управляющих элементов Кнопки" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/483210/slide-73.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/483210/slide-73.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/483210/slide-73.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-73.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Элементы формы<br><p>Многие элементы формы создаются тегом <input><br><input type="тип" name=“имя" value="значение"/><br>Типы управляющих</div></h2><div class="slides-content">элементов <input><br>Кнопки «Передать» (type=“submit”)<br>Кнопки «Очистить» (type=“reset”)<br>Кнопки (type=“button”)<br>Кнопки-картинки (type=“image”) <br>Поля ввода (type=“text”)<br>Пароли (type=“password”)<br>Переключатели (type=“radio”)<br>Флажки (type=“checkbox”)<br>Скрытый (type=“hidden”)<br></div></div></div><div class="slides-wrapper"><div id="slide75" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 75</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-74.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Пример формы HTML Пример формы Это уже наша форма расширить" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/483210/slide-74.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/483210/slide-74.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/483210/slide-74.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-74.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Пример формы HTML<br><p><form method="get" action=""><br> <h3>Пример формы</h3><br> <div>Это уже наша форма</div><br></div></h2><div class="slides-content"><input type="submit" value="Отправить" name="" /><br></form><br><p>расширить<br></div></div></div><div class="slides-wrapper"><div id="slide76" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 76</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-75.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Флажки и переключатели Переключатель создается тегом с атрибутом type = "checkbox"" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/483210/slide-75.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/483210/slide-75.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/483210/slide-75.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-75.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Флажки и переключатели<br><p>Переключатель создается тегом <input> с атрибутом type = "checkbox"<br><input</div></h2><div class="slides-content">type="checkbox" name=“ch" value="1"/><br>Флажок создается тегом <input> с атрибутом type = "radio"<br><input type="radio" name="radio" value="1" /><br></div></div></div><div class="slides-wrapper"><div id="slide77" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 77</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-76.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Скрытый элемент Иногда при отправке формы на сервер нужно передать некое" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/483210/slide-76.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/483210/slide-76.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/483210/slide-76.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-76.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Скрытый элемент<br><p>Иногда при отправке формы на сервер нужно передать некое значение,</div></h2><div class="slides-content">но посетителю его видеть не надо<br>Так могут передаваться значения, которые посетитель указал на предыдущих шагах мастера. Или какой-то секретный ключ, который применяется формой для проверки легитимности полученных данных<br>Для этих целей в HTML используется тег <input> с атрибутом type="hidden"<br><input type="hidden" value="1234" name="userid" /><br></div></div></div><div class="slides-wrapper"><div id="slide78" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 78</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-77.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Другие варианты тега input Менее популярные варианты атрибута typt тега :" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/483210/slide-77.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/483210/slide-77.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/483210/slide-77.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-77.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Другие варианты тега input<br><p>Менее популярные варианты атрибута typt тега <input>:<br>button —</div></h2><div class="slides-content">позволяет создать кнопку<br>file — используется для создания кнопки выбора файла на локальном компьютере, который будет загружен на сервер<br>image — аналог значения submit (создает кнопку отправки формы), но также позволяет указать картинку, которая будет отображаться вместо стандартной кнопки<br>reset — создает кнопку для сброса всех значений, которые пользователь внес в форму, к значениям по умолчанию<br></div></div></div><div class="slides-wrapper"><div id="slide79" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 79</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-78.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Выпадающие списки Выпадающий список – тег Строка списка задается тегом Первый Второй Третий" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/483210/slide-78.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/483210/slide-78.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/483210/slide-78.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-78.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Выпадающие списки<br><p>Выпадающий список – тег <select><br>Строка списка задается тегом <option><br><select name="form_sel"</div></h2><div class="slides-content">size=“2"><br> <option value="1">Первый</option><br> <option value="2">Второй</option><br> <option value="3" selected>Третий</option><br></select><br></div></div></div><div class="slides-wrapper"><div id="slide80" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 80</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-79.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Текстовая область Для создания многострочного текстового поля следует использовать парный блочный" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/483210/slide-79.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/483210/slide-79.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/483210/slide-79.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/483210/slide-79.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Текстовая область<br><p> Для создания многострочного текстового поля следует использовать парный блочный</div></h2><div class="slides-content">тег <textarea><br><form method="get" action=""><br> <h3>Пример формы</h3><br> <div>Это уже наша форма</div><br> Имя: <input type="text" name="txt" value="ваше имя" /><br> Пароль: <input type="password" name="psw" value="“ /><br> <textarea name="bigtext" rows="3">просто <br>какой-то<br>текст

Слайд 81
Замечание по обработке HTML форм
При нажатии кнопки «submit» данные формы передаются на
сервер – по адресу указанному в атрибуте action="URL"; если атрибута нет или он пустой, то передаются той же странице, в которой записана форма
На серверной стороне сайта необходимо создать способ сохранения и обработки данных передаваемых на сервер
Слайд 82
Тег meta и его виды

content="Хабрахабр — самое крупное в Рунете.."/>
атрибут name — устанавливает модификатор мета-тега

ФИО	Должность
Иванов А.П.	программист
Петров В.А.	проектировщик

Введение в язык разметки HTML

Содержание

Общая информацияВиды занятий и контроля по МДК:Длительность МДК – 2 семестраВ

Лабораторные работыИнтерактивные онлайн-курсы на HtmlAcademy.ru 18 бесплатных разделов с заданиями (9

Что планируется изучитьHTMLCSSJavaScriptPHPДенвер (Denwer)CMS Joomla

Язык разметки HTMLHyperText Markup Language — «язык разметки гипертекста»

Документ HTMLФайл с расширением htm или htmlИмя – произвольное, но если

HTMLОсновным форматом представления документов в сети Интернет является язык гипертекстовой разметки

Тэги Тэг – это команда языка HTML, которую выполняет браузер:непарные тэгипарные

Общее представление о языках разметки HTML, XML, XHTML ЭВОЛЮЦИЯ ЯЗЫКОВ

Отличия версий HTMLКаждая новая версия включала дополнительные теги и атрибуты, некоторые

Выбираем !DOCTYPEКаждый HTML-документ должен начинаться со строки !DOCTYPE. Она говорит браузеру,

Виды !DOCTYPE — DOCTYPE для

Виды !DOCTYPE — DOCTYPE

Виды !DOCTYPE —

Виды !DOCTYPE — DOCTYPE

HTML-код страницы помещается внутрь контейнера … Заголовок Web-страницы заключается

Простейшая Web-страницаМоя первая <br> Web-страницаПривет! first.htmlМоя первая <br> Web-страницашапка («голова») Привет!основная

ПО для верстки

Редакторы для версткиКонечно, сверстать HTML-документ можно и в Блокноте… Раньше это

Редакторы для версткиNotepad++phpDesignerProAdobe DreamweaverHotdogHTML PadEdit Plus…

ВалидаторыВалидаторы — сервисы Интернета, проверяющие HTML-документ на ошибки и следование правилам

Теги HTML

ТегиВ языке HTML все, что вводится в HTML-документе, будет выводиться на

Типы тегов(на основе назначения тега либо его поведения)Теги верхнего уровня —

Типы теговБлочные элементы — в данный тип входят все теги, которые

Типы теговВстроенные (строчные) элементы — в отличие от блочных, теги данного

Типы теговСписки — в данную группу тегов входят все теги, которые

Блочные и строчные теги

Атрибуты и их значенияВнутри одинарного или открывающего тега могут находиться атрибуты

Атрибуты и их значенияВ XHTML каждый атрибут обязан иметь значениеЗначения атрибута

Типы значений атрибутовЗадающие цвет:специальное ключевое слово: black, blue и т. д.шестнадцатеричный

Типы значений атрибутовЗадающие адрес в Интернете:абсолютный адрес — http://microsoft.com, http://mail.ru/content.htmlотносительный адрес

Основной синтаксис XHTMLHTML-документ обязательно должен начинаться с DOCTYPEВсе теги и атрибуты

Основной синтаксис XHTMLКаждый тег должен быть корректно вложен в другойСокращенные атрибуты

Web-страницы. Язык HTMLОформление текста

Заголовок документаЗаголовок разделаЗаголовок подразделаЗаголовок параграфаКомментарийАвторские пометкиЗаголовки: h1 … h6Теги h1- h6

Заголовок документа

Заголовок раздела

Заголовок подраздела

Заголовок параграфа

Комментарий

Авторские пометки

Абзацыпереход на новую строкуабзац (с отступами)И вечный бой! Покой нам только

Физическая разметка

Оформление текстаВывод «как есть»КомментарииИ вечный бой! Покой нам только снитсяСквозь кровь

КонтейнерыТег divБлочный тег, который служит для единственной цели — быть контейнером,

Атрибут titleПозволяет добавить описание к любому элементу веб-страницы, в виде всплывающей

Специальные символыhttps://html5book.ru/specsimvoly-html/#part1

Web-страницы. Язык HTMLРисунки, видео, аудио

Форматы рисунковGIF (Graphic Interchange Format)сжатие без потерьпрозрачные областианимациятолько с палитрой (2…256

Рисунки в документе

Атрибуты тега img src="/cat.png" alt="котик">width, height — ширина или

Аудиоautoplay — проигрывание при загрузке страницыcontrols — панель управления плееромloop

Видео poster – стартовая картинка-заместитель

Web-страницы. Язык HTMLГиперссылки

Ссылки на другие страницы сайтаТаблицыстраница в той же папкеanchor (якорь)

Примеры (ссылки из файла rock.html)

Ссылки на другие сайтыПочтана главную страницу сайтаindex.htm, index.html, default.asp, …на

Ссылки внутри страницыГлава 1Глава 2Глава 1Это текст

Глава 1

Глава 2

Запуск почтовой программыНапишите мне!Другие протоколы: ftp://, file: , ...

Варианты открытия ссылкия ссылкаатрибут target — имя окна или

Web-страницы. Язык HTMLСписки

Списочные элементы - пронумерованный перечень элементов (ordered lists) - маркированный перечень

Списочные элементы

Web-страницы. Язык HTMLТаблицы

Таблицы

Таблицы … .. .. .. Подвал таблицы определяется выше содержимого таблицы!

Задание HTML таблицы Состав команды ФИО Должность Иванов А.П. программист Петров В.А. проектировщик Заголовок таблицы

Таблицы. Объединение ячеек

Описание структуры страницы с помощью таблицС помощью таблиц можно создать хорошую

Разметка на основе таблицСделать самим

Web-страницы. Язык HTMLФормы

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

Формы HTMLФункциональность форм обеспечивается через языки JavaScript и/или PHPФормы в HTML

Общая информация
Виды занятий и контроля по МДК:
Длительность МДК – 2 семестра
В

Лабораторные работы
Интерактивные онлайн-курсы на
HtmlAcademy.ru
18 бесплатных разделов с заданиями (9

Что планируется изучить
HTML
CSS
JavaScript
PHP
Денвер (Denwer)
CMS Joomla

Язык разметки HTML
HyperText Markup Language —
«язык разметки гипертекста»

Документ HTML
Файл с расширением htm или html
Имя – произвольное, но если

HTML
Основным форматом представления документов в сети Интернет является язык гипертекстовой разметки

Тэги
Тэг – это команда языка HTML, которую выполняет браузер:
непарные тэги
парные

Общее представление о языках разметки HTML, XML, XHTML
ЭВОЛЮЦИЯ ЯЗЫКОВ

Отличия версий HTML
Каждая новая версия включала дополнительные теги и атрибуты, некоторые

Выбираем !DOCTYPE
Каждый HTML-документ должен начинаться со строки !DOCTYPE. Она говорит браузеру,

Виды !DOCTYPE
— DOCTYPE для

Виды !DOCTYPE
— DOCTYPE

Виды !DOCTYPE
—

Виды !DOCTYPE
— DOCTYPE

HTML-код страницы помещается внутрь контейнера …
Заголовок Web-страницы заключается

Простейшая Web-страница

Моя первая <br> Web-страница

Привет!

first.html

Моя первая <br> Web-страница

шапка («голова»)

Привет!

основная

Редакторы для верстки
Конечно, сверстать HTML-документ можно и в Блокноте… Раньше это

Редакторы для верстки
Notepad++
phpDesignerPro
Adobe Dreamweaver
Hotdog
HTML Pad
Edit Plus
…

Валидаторы
Валидаторы — сервисы Интернета, проверяющие HTML-документ на ошибки и следование правилам

Теги
В языке HTML все, что вводится в HTML-документе, будет выводиться на

Типы тегов
(на основе назначения тега либо его поведения)
Теги верхнего уровня —

Типы тегов
Блочные элементы — в данный тип входят все теги, которые

Типы тегов
Встроенные (строчные) элементы — в отличие от блочных, теги данного

Типы тегов
Списки — в данную группу тегов входят все теги, которые

Атрибуты и их значения
Внутри одинарного или открывающего тега могут находиться атрибуты

Атрибуты и их значения
В XHTML каждый атрибут обязан иметь значение
Значения атрибута

Типы значений атрибутов
Задающие цвет:
специальное ключевое слово: black, blue и т. д.
шестнадцатеричный

Типы значений атрибутов
Задающие адрес в Интернете:
абсолютный адрес — http://microsoft.com, http://mail.ru/content.html
относительный адрес

Основной синтаксис XHTML
HTML-документ обязательно должен начинаться с DOCTYPE
Все теги и атрибуты

Основной синтаксис XHTML
Каждый тег должен быть корректно вложен в другой
Сокращенные атрибуты

Web-страницы. Язык HTML
Оформление текста

Заголовок документа

Заголовок раздела

Заголовок подраздела

Заголовок параграфа

Комментарий

Авторские пометки

Заголовки: h1 … h6
Теги h1- h6

Абзацы
переход на новую строку
абзац (с отступами)
И вечный бой! Покой
нам только

Оформление текста
Вывод «как есть»
Комментарии

И вечный бой! Покой
нам только снится
Сквозь кровь

Контейнеры
Тег div
Блочный тег, который служит для единственной цели — быть контейнером,

Атрибут title
Позволяет добавить описание к любому элементу веб-страницы, в виде всплывающей

Специальные символы
https://html5book.ru/specsimvoly-html/#part1

Web-страницы. Язык HTML
Рисунки, видео, аудио

Форматы рисунков
GIF (Graphic Interchange Format)
сжатие без потерь
прозрачные области
анимация
только с палитрой (2…256

Атрибуты тега img
src="/cat.png" alt="котик">
width, height — ширина или

Аудио

autoplay — проигрывание при загрузке страницы
controls — панель управления плеером
loop

Видео

poster – стартовая картинка-заместитель

Web-страницы. Язык HTML
Гиперссылки

Ссылки на другие страницы сайта
Таблицы
страница в той же папке
anchor (якорь)

Ссылки на другие сайты
Почта
на главную страницу сайта
index.htm, index.html, default.asp, …
на

Ссылки внутри страницы

Глава 1
Глава 2

Глава 1

Это текст

Запуск почтовой программы

Напишите мне!

Другие протоколы: ftp://, file: , ...

Варианты открытия ссылки
я ссылка
атрибут target — имя окна или

Web-страницы. Язык HTML
Списки

Списочные элементы
- пронумерованный перечень элементов (ordered lists)
- маркированный перечень

Web-страницы. Язык HTML
Таблицы

Таблицы

…

..

..

..

Подвал таблицы определяется выше содержимого таблицы!

Задание HTML таблицы

Состав команды
ФИО Должность

Иванов А.П. программист

Петров В.А. проектировщик

Заголовок таблицы

Описание структуры страницы с помощью таблиц
С помощью таблиц можно создать хорошую

Разметка на основе таблиц
Сделать самим

Web-страницы. Язык HTML
Формы

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

Формы HTML
Функциональность форм обеспечивается через языки JavaScript и/или PHP
Формы в HTML