– 2 семестра
В текущем семестре:
Лекции – 4,5 пар в
неделюЛабораторные работы – 2 пары в неделю,
Контрольные работы – 2(?)
Диф. зачет
- Главная
- Разное
- Бизнес и предпринимательство
- Образование
- Развлечения
- Государство
- Спорт
- Графика
- Культурология
- Еда и кулинария
- Лингвистика
- Религиоведение
- Черчение
- Физкультура
- ИЗО
- Психология
- Социология
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Маркетинг
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Что такое findslide.org?
FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.
Обратная связь
Email: Нажмите что бы посмотреть
Презентация на тему Введение в язык разметки HTML
Содержание
- 2. Общая информацияВиды занятий и контроля по МДК:Длительность
- 3. Лабораторные работыИнтерактивные онлайн-курсы на HtmlAcademy.ru 18 бесплатных разделов с заданиями (9 обязательных)
- 4. Что планируется изучитьHTMLCSSJavaScriptPHPДенвер (Denwer)CMS Joomla
- 5. Язык разметки HTMLHyperText Markup Language — «язык разметки гипертекста»
- 6. Документ HTMLФайл с расширением htm или htmlИмя
- 7. HTMLОсновным форматом представления документов в сети Интернет
- 8. Тэги Тэг – это команда языка HTML,
- 9. Общее представление о языках разметки HTML, XML,
- 10. Отличия версий HTMLКаждая новая версия включала дополнительные
- 11. Выбираем !DOCTYPEКаждый HTML-документ должен начинаться со строки
- 12. Виды !DOCTYPE — DOCTYPE для стандарта HTML
- 13. Виды !DOCTYPE — DOCTYPE для стандарта HTML
- 14. Виды !DOCTYPE — DOCTYPE для стандарта HTML
- 15. Виды !DOCTYPE — DOCTYPE для стандарта XHTML 1.1.
- 16. HTML-код страницы помещается внутрь
- 17. Простейшая Web-страницаМоя первая Web-страницаПривет! first.htmlМоя первая Web-страницашапка («голова») Привет!основная часть («тело»)
- 18. Создание файла веб-страницыОткрыть Notepad++ и введите туда
- 19. ПО для верстки
- 20. Редакторы для версткиКонечно, сверстать HTML-документ можно и
- 21. Редакторы для версткиNotepad++phpDesignerProAdobe DreamweaverHotdogHTML PadEdit Plus…
- 22. ВалидаторыВалидаторы — сервисы Интернета, проверяющие HTML-документ на
- 23. Теги HTML
- 24. ТегиВ языке HTML все, что вводится в
- 25. Типы тегов(на основе назначения тега либо его
- 26. Типы теговБлочные элементы — в данный тип
- 27. Типы теговВстроенные (строчные) элементы — в отличие
- 28. Типы теговСписки — в данную группу тегов
- 29. Блочные и строчные теги
- 30. Атрибуты и их значенияВнутри одинарного или открывающего
- 31. Атрибуты и их значенияВ XHTML каждый атрибут
- 32. Типы значений атрибутовЗадающие цвет:специальное ключевое слово: black,
- 33. Типы значений атрибутовЗадающие адрес в Интернете:абсолютный адрес
- 34. Основной синтаксис XHTMLHTML-документ обязательно должен начинаться с
- 35. Основной синтаксис XHTMLКаждый тег должен быть корректно
- 36. Web-страницы. Язык HTMLОформление текста
- 37. Заголовок документаЗаголовок разделаЗаголовок подразделаЗаголовок параграфаКомментарийАвторские пометкиЗаголовки: h1 … h6Теги h1- h6 являются парными и блочными
- 38. Абзацыпереход на новую строкуабзац (с отступами)И вечный
- 39. Физическая разметка
- 40. Оформление текстаВывод «как есть»КомментарииИ вечный бой! Покой
- 41. КонтейнерыТег divБлочный тег, который служит для единственной
- 42. Атрибут titleПозволяет добавить описание к любому элементу
- 43. Специальные символыhttps://html5book.ru/specsimvoly-html/#part1
- 44. Web-страницы. Язык HTMLРисунки, видео, аудио
- 45. Форматы рисунковGIF (Graphic Interchange Format)сжатие без потерьпрозрачные
- 46. Тег img
- 47. Рисунки в документе из той же папки:из другой папки:с другого сервера:image (изображение) source (источник)
- 48. Атрибуты тега imgwidth, height — ширина или
- 49. Аудиоautoplay — проигрывание при загрузке страницыcontrols —
- 50. Видео poster – стартовая картинка-заместитель
- 51. Web-страницы. Язык HTMLГиперссылки
- 52. Ссылки на другие страницы сайтаТаблицыстраница в той
- 53. Примеры (ссылки из файла rock.html)
- 54. Ссылки на другие сайтыПочтана главную страницу сайтаindex.htm,
- 55. Ссылки внутри страницыГлава 1Глава 2Глава 1Это текст
- 56. Запуск почтовой программыНапишите мне!Другие протоколы: ftp://, file: , ...
- 57. Варианты открытия ссылкия ссылкаатрибут target — имя
- 58. Web-страницы. Язык HTMLСписки
- 59. Списочные элементы - пронумерованный перечень элементов (ordered
- 60. Списочные элементы
- 61. Web-страницы. Язык HTMLТаблицы
- 62. Теги для таблицыВ тег включается множество элементов
- 63. Таблицы
- 64. Таблицы … .. .. .. Подвал таблицы определяется выше содержимого таблицы!
- 65. Задание HTML таблицы Состав
- 66. Таблицы. Объединение ячеек
- 67. Описание структуры страницы с помощью таблицС помощью
- 68. Разметка на основе таблицСделать самим
- 69. Web-страницы. Язык HTMLФормы
- 70. Формы HTMLИспользуются для описания частей страницы в
- 71. Формы HTMLФункциональность форм обеспечивается через языки JavaScript
- 72. Формы HTMLФорма задается парным блочным тегом Тег
- 73. Описание формы в HTMLФорма задается парным блочным
- 74. Элементы формыМногие элементы формы создаются тегом
- 75. Пример формы HTML Пример формы Это уже наша форма расширить
- 76. Флажки и переключателиПереключатель создается тегом с атрибутом type = "checkbox"
- 77. Скрытый элементИногда при отправке формы на сервер
- 78. Другие варианты тега inputМенее популярные варианты атрибута
- 79. Выпадающие спискиВыпадающий список – тег Строка списка задается тегом
- 80. Текстовая область Для создания многострочного текстового поля
- 81. Замечание по обработке HTML формПри нажатии кнопки
- 82. Тег meta и его видыатрибут name — устанавливает модификатор мета-тега
- 83. Скачать презентацию
- 84. Похожие презентации
Общая информацияВиды занятий и контроля по МДК:Длительность МДК – 2 семестраВ текущем семестре:Лекции – 4,5 пар в неделюЛабораторные работы – 2 пары в неделю,Контрольные работы – 2(?)Диф. зачет
Слайд 2
Общая информация
Виды занятий и контроля по МДК:
Длительность МДК
– 2 семестра
неделюЛабораторные работы – 2 пары в неделю,
Контрольные работы – 2(?)
Диф. зачет
Слайд 3
Лабораторные работы
Интерактивные онлайн-курсы на
HtmlAcademy.ru
18 бесплатных разделов
с заданиями (9 обязательных)
Слайд 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
Январь
1997HTML 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
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-strict.dtd"> — DOCTYPE для стандарта XHTML 1.0 Strict;Разновидность Strict (строгий) используется в том случае, если код документа полностью соответствует выбранной версии HTML. В Strict оформление и содержание полностью разделены между HTML и CSS.
Слайд 13
Виды !DOCTYPE
"http://www.w3.org/TR/html4/loose.dtd"> — DOCTYPE для стандарта HTML 4.01 Transitional
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> — DOCTYPE для стандарта XHTML 1.0 TransitionalTransitional - является переходный вариант от прошлой версии языка HTML к новой.
Если в новой версии HTML какие-то теги были признаны устаревшими, то в стандарте Transitional они по-прежнему остаются рекомендуемыми для применения.
Слайд 14
Виды !DOCTYPE
"http://www.w3.org/TR/html4/ frameset.dtd"> — DOCTYPE для стандарта HTML 4.01 Frameset
(с фреймами);— DOCTYPE для стандарта XHTML 1.0 Frameset (с фреймами);
Разновидность Frameset аналогична Transitional, кроме того, в Frameset также разрешено применять теги для создания фреймов.
Слайд 16
HTML-код страницы помещается внутрь контейнера
…
Заголовок Web-страницы заключается в контейнер
…
Основное содержание страницы помещается в контейнер …
Название Web-страницы содержится в контейнере
Структура Web-страницы
Слайд 17
Простейшая Web-страница
Моя первая
Web-страница
Привет!
first.html
Моя первая
Web-страница
шапка («голова»)
Привет!
основная часть («тело»)
Слайд 18
Создание файла веб-страницы
Открыть Notepad++ и введите туда следующий
текст:
Моя первая веб-страничка
/>Здравствуйте, это моя первая страница.
Добро пожаловать! :) Сохраним этот документ, присвоив ему имя *.html
Слайд 20
Редакторы для верстки
Конечно, сверстать HTML-документ можно и в
Блокноте… Раньше это считалось верхом профессионализма. Сейчас же это
считается верхом глупостиОсновное достоинство таких редакторов - подсветка HTML- кода, что позволяет сразу определить, где в коде находится ошибка
Это позволяет минимизировать количество ошибок в HTML-документе и упростить его создание
Слайд 22
Валидаторы
Валидаторы — сервисы Интернета, проверяющие HTML-документ на ошибки
и следование правилам выбранного DOCTYPE
Как правило, большинство ошибок в
HTML-документе не сказываются на его отображении в браузерах.Валидатор предназначен прежде всего для разработчиков сайтов
Наиболее популярным валидатором является сервис http://validator.w3.org
Программа Tidy - ее можно скачать с сайта http://tidy.sourceforge.net
Слайд 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
Слайд 30
Атрибуты и их значения
Внутри одинарного или открывающего тега
могут находиться атрибуты и их значения:
атрибут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, списков или таблиц
Слайд 37
Заголовок документа
Заголовок раздела
Заголовок подраздела
Заголовок параграфа
Комментарий
Авторские пометки
Заголовки: h1 …
h6
Теги h1- h6 являются парными и блочными
Слайд 38
Абзацы
переход на новую строку
абзац (с отступами)
И вечный бой!
Покой
нам только снится
Сквозь кровь и пыль...
Летит, летит степная
кобылица
И мнет ковыль...
Одно физическое тело захотело
поменять три своих старых варежки
на что-нибудь хорошее.
До самого вечера тело с варежками ...
Слайд 40
Оформление текста
Вывод «как есть»
Комментарии
И вечный бой! Покой
нам
только снится
Сквозь кровь и пыль...
Летит, летит степная кобылица
И мнет
ковыль...
Одно физическое тело захотело
поменять три своих старых варежки
на что-нибудь хорошее.
Слайд 41
Контейнеры
Тег div
Блочный тег, который служит для единственной цели
— быть контейнером, в котором могут находиться другие теги,
изображения или текст.Вам нужно установить фон или границу для отдельного участка веб-страницы?
Поместите нужный участок в тег div, после чего установите фон и/или границу для этого div.
Тег span
То же что и тег div, но является строчным, т. е. не требует для себя всей ширины окна браузера. Ему
достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в нем.
Слайд 42
Атрибут title
Позволяет добавить описание к любому элементу веб-страницы,
в виде всплывающей подсказки
Это необязательный атрибут
Атрибут title можно использовать
практически для любого тега, который может быть вложен внутрь тега body
Слайд 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)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки
Слайд 47
Рисунки в документе
src="../images/flag.jpg" />
из той же папки:
из другой
папки:с другого сервера:
image
(изображение)
source
(источник)
Слайд 48
Атрибуты тега img
width, height
— ширина или высота задается в пикселах
src — url
картинкиalt — альтернативный текст, который выводится, если изображение не загрузилось
Слайд 49
Аудио
autoplay — проигрывание при загрузке страницы
controls —
панель управления плеером
loop — автоповтор
preload — загрузка файла вместе
с загрузкой страницыsrc — путь до трека
Слайд 52
Ссылки на другие страницы сайта
Таблицы
страница в той
же папке
anchor (якорь)
hyper reference (гиперссылка)
страница во вложенной
папкестраница в соседней папке
выйти из текущей папки
Слайд 54
Ссылки на другие сайты
Почта
на главную страницу сайта
index.htm,
index.html, default.asp, …
на конкретную страницу сайта (URL)
Васин текст
на
файл для скачивания
Слайд 55
Ссылки внутри страницы
Глава 1
Глава 2
id="chap1">
Глава 1
Это текст главы 1. Это текст главы 1.
Это
текст главы 1. Это текст главы 1.Наверх
Глава 2
Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.
Наверх
метка (якорь)
переход на метку
Слайд 57
Варианты открытия ссылки
я ссылка
атрибут target —
имя окна или фрейма, куда браузер будет загружать документ
_blank
– в новой вкладке/окне_self – в том же окне, что и ссылка
_parent – (с фреймами) в родительском фрейме
_top - (с фреймами) в текущем окне, заменяя собой все фреймы
Слайд 59
Списочные элементы
- пронумерованный перечень элементов (ordered lists)
- маркированный перечень элементов (bulleted lists)
- отдельный пункт
списка
Слайд 62
Теги для таблицы
В тег включается множество элементов
для описания структуры таблицы
Элемент группирует строки таблицы
Тег
для описания конкретной строкиКаждый тег содержит элементы и для описания заголовков ячеек данных и самих данных ячейки, соответственно
Другие не обязательные элементы позволяют описывать название таблицы , а также начальные (header) и конечные (footer) строки ( и )
Слайд 65
Задание HTML таблицы
Состав команды
ФИО Должность
Иванов А.П.
программист
Петров В.А.
проектировщик
Заголовок таблицы
Слайд 67
Описание структуры страницы с помощью таблиц
С помощью таблиц
можно создать хорошую схему (планировку таблицы) (4 слайд 44)
Не
обязательно рисовать саму таблицу (толщина линии может быть = 0). Но таблицы позволяет задавать взаимное расположение элементов страницы относительно друг друга (что находится слева, справа и снизу, сверху).Однако, таблицы имеют следующие недостатки:
Таблицы требуют добавления большого количества кода.
Таблицы трудно удалить или изменить.
Слайд 70
Формы HTML
Используются для описания частей страницы в которой
пользователь может просматривать имеющиеся данные, корректировать и вводить новые
данныеС помощью форм выполняется сбор данных, вводимых пользователем для взаимодействия c Web-приложением
Типичные примеры форм:
поиск по сайту
отправки сообщения админу
регистрации на сайте
опросы
Слайд 71
Формы HTML
Функциональность форм обеспечивается через языки JavaScript и/или
PHP
Формы в HTML могут состоять из:
Текстовых полей
Текстовых областей
Раскрывающихся
списковКнопок
Флажков
Переключателей
Слайд 72
Формы HTML
Форма задается парным блочным тегом
Тег обычно
включает набор элементов управления:
Элемент для ввода пользователем данных
Элемент
Слайд 81
Замечание по обработке
HTML форм
При нажатии кнопки «submit» данные
формы передаются на сервер – по адресу указанному в
атрибуте action="URL"; если атрибута нет или он пустой, то передаются той же странице, в которой записана формаНа серверной стороне сайта необходимо создать способ сохранения и обработки данных передаваемых на сервер
