Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

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

Содержание

Общая информацияВиды занятий и контроля по МДК:Длительность МДК – 2 семестраВ текущем семестре:Лекции – 4,5 пар в неделюЛабораторные работы – 2 пары в неделю,Контрольные работы – 2(?)Диф. зачет
Введение в язык разметки HTMLВерсии HTML,Теги HTML: оформление текста, рисунки, гиперссылки, списки Общая информацияВиды занятий и контроля по МДК:Длительность МДК – 2 семестраВ текущем Лабораторные работыИнтерактивные онлайн-курсы на HtmlAcademy.ru 18 бесплатных разделов с заданиями (9 обязательных) Что планируется изучитьHTMLCSSJavaScriptPHPДенвер (Denwer)CMS Joomla Язык разметки HTMLHyperText Markup Language — «язык разметки гипертекста» Документ HTMLФайл с расширением htm или htmlИмя – произвольное, но если это HTMLОсновным форматом представления документов в сети Интернет является язык гипертекстовой разметки HTML Тэги Тэг – это команда языка HTML, которую выполняет браузер:непарные тэгипарные тэги Общее представление о языках разметки HTML, XML, XHTML ЭВОЛЮЦИЯ ЯЗЫКОВ РАЗМЕТКИ.1986ISO-8879SGMLДекабрь 1997HTML Отличия версий HTMLКаждая новая версия включала дополнительные теги и атрибуты, некоторые признавались Выбираем !DOCTYPEКаждый HTML-документ должен начинаться со строки !DOCTYPE. Она говорит браузеру, какую Виды !DOCTYPE — DOCTYPE для стандарта HTML 4.01 Strict — DOCTYPE для Виды !DOCTYPE — DOCTYPE для стандарта HTML 4.01 Transitional — DOCTYPE для Виды !DOCTYPE — DOCTYPE для стандарта HTML 4.01 Frameset (с фреймами); — Виды !DOCTYPE — DOCTYPE для стандарта XHTML 1.1. HTML-код страницы помещается внутрь контейнера … Простейшая Web-страницаМоя первая  Web-страницаПривет! first.htmlМоя первая  Web-страницашапка («голова») Привет!основная часть («тело») Создание файла веб-страницыОткрыть Notepad++ и введите туда следующий текст:  ПО для верстки Редакторы для версткиКонечно, сверстать 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 Рисунки в документе  из той же папки:из другой папки:с другого сервера:image (изображение) source (источник) Атрибуты тега imgwidth, height — ширина или высота задается в пикселахsrc — Аудиоautoplay — проигрывание при загрузке страницыcontrols — панель управления плееромloop — автоповторpreload Видео 	poster – стартовая картинка-заместитель Web-страницы. Язык HTMLГиперссылки Ссылки на другие страницы сайтаТаблицыстраница в той же папкеanchor (якорь) hyper reference Примеры (ссылки из файла rock.html) Ссылки на другие сайтыПочтана главную страницу сайтаindex.htm, index.html, default.asp, …на конкретную страницу Ссылки внутри страницыГлава 1Глава 2Глава 1Это текст главы 1. Это текст главы Запуск почтовой программыНапишите мне!Другие протоколы: ftp://, file: , ... Варианты открытия ссылкия ссылкаатрибут target — имя окна или фрейма, куда браузер Web-страницы. Язык HTMLСписки Списочные элементы - пронумерованный перечень элементов (ordered lists) - маркированный перечень элементов Списочные элементы Web-страницы. Язык HTMLТаблицы Теги для таблицыВ тег включается множество элементов для описания структуры таблицыЭлемент группирует Таблицы Таблицы	…	..			..		..	Подвал таблицы определяется выше содержимого таблицы! Задание HTML таблицы    Состав команды Таблицы. Объединение ячеек Описание структуры страницы с помощью таблицС помощью таблиц можно создать хорошую схему Разметка на основе таблицСделать самим Web-страницы. Язык HTMLФормы Формы HTMLИспользуются для описания частей страницы в которой пользователь может просматривать имеющиеся Формы HTMLФункциональность форм обеспечивается через языки JavaScript и/или PHPФормы в HTML могут Формы HTMLФорма задается парным блочным тегом Тег обычно включает набор элементов управления:Элемент Описание формы в HTMLФорма задается парным блочным тегом Элементы формыМногие элементы формы создаются тегом Пример формы HTML  Пример формы  Это уже наша форма  расширить Флажки и переключателиПереключатель создается тегом с атрибутом type = Скрытый элементИногда при отправке формы на сервер нужно передать некое значение, но Другие варианты тега inputМенее популярные варианты атрибута typt тега :button — позволяет Выпадающие спискиВыпадающий список – тег Строка списка задается тегом Текстовая область Для создания многострочного текстового поля следует использовать парный блочный тег Замечание по обработке HTML формПри нажатии кнопки «submit» данные формы передаются на Тег meta и его видыатрибут name — устанавливает модификатор мета-тега Тег meta и его видыwidth — ширинаmaximum-scale — максимальный масштабinitial-scale — начальный
Слайды презентации

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

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

– 2 семестра
В текущем семестре:
Лекции – 4,5 пар в

неделю
Лабораторные работы – 2 пары в неделю,
Контрольные работы – 2(?)
Диф. зачет

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

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

с заданиями (9 обязательных)


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


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

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

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

Слайд 6 Документ HTML
Файл с расширением htm или html
Имя –

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

произвольное, но если это стартовая страница сайта (раздела сайта),

то – index.html или main.html
(пример)


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

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

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

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

Слайд 8 Тэги
Тэг – это команда языка HTML, которую

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

выполняет браузер:
непарные тэги


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

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



...

открывающий

закрывающий

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


Слайд 9 Общее представление о языках разметки HTML, XML, XHTML

Общее представление о языках разметки HTML, XML, XHTML ЭВОЛЮЦИЯ ЯЗЫКОВ РАЗМЕТКИ.1986ISO-8879SGMLДекабрь


ЭВОЛЮЦИЯ ЯЗЫКОВ РАЗМЕТКИ.
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-документа.
Из-за многочисленных условностей при верстке допускалось большое количество ошибок.
Было принято решение бороться с этим. В результате синтаксис языка HTML стал более строгим.
HTML5 отличается от XHTML 1.0 только наличием новых тегов

Слайд 11 Выбираем !DOCTYPE
Каждый HTML-документ должен начинаться со строки !DOCTYPE.

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

Она говорит браузеру, какую версию HTML использовали при создании

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

Слайд 12 Виды !DOCTYPE

Виды !DOCTYPE — DOCTYPE для стандарта HTML 4.01 Strict — 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

Виды !DOCTYPE — DOCTYPE для стандарта HTML 4.01 Transitional — 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 Transitional
Transitional - является переходный вариант от прошлой версии языка HTML к новой.
Если в новой версии HTML какие-то теги были признаны устаревшими, то в стандарте Transitional они по-прежнему остаются рекомендуемыми для применения.

Слайд 14 Виды !DOCTYPE

Виды !DOCTYPE — DOCTYPE для стандарта HTML 4.01 Frameset (с фреймами);

"http://www.w3.org/TR/html4/ frameset.dtd"> — DOCTYPE для стандарта HTML 4.01 Frameset

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

Слайд 15 Виды !DOCTYPE

Виды !DOCTYPE — DOCTYPE для стандарта XHTML 1.1.

xhtml11/DTD/xhtml11.dtd"> — DOCTYPE для стандарта XHTML 1.1.



Слайд 16
HTML-код страницы помещается внутрь контейнера

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


Заголовок Web-страницы заключается в контейнер


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

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


Слайд 17 Простейшая Web-страница



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


Привет!



first.html

Моя первая

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

Web-страница

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

Привет!

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



Слайд 18 Создание файла веб-страницы
Открыть Notepad++ и введите туда следующий

Создание файла веб-страницыОткрыть Notepad++ и введите туда следующий текст: 

текст:  Моя первая веб-страничка

/>
Здравствуйте, это моя первая страница.
Добро пожаловать! :) Сохраним этот документ, присвоив ему имя *.html 

Слайд 19 ПО для верстки

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

Слайд 20 Редакторы для верстки
Конечно, сверстать HTML-документ можно и в

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

Блокноте… Раньше это считалось верхом профессионализма. Сейчас же это

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

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


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

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

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

и следование правилам выбранного DOCTYPE
Как правило, большинство ошибок в

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


Слайд 23 Теги HTML

Теги HTML

Слайд 24 Теги
В языке HTML все, что вводится в HTML-документе,

ТегиВ языке 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 Атрибуты и их значения
Внутри одинарного или открывающего тега

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

могут находиться атрибуты и их значения:


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

Слайд 31 Атрибуты и их значения
В XHTML каждый атрибут обязан

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

иметь значение
Значения атрибута - либо определенные ключевые слова, либо

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

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

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

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

и т. д.
шестнадцатеричный код цвета: #ff0000 (красный), #000000 (черный)

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

Слайд 33 Типы значений атрибутов
Задающие адрес в Интернете:
абсолютный адрес —

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

http://microsoft.com, http://mail.ru/content.html
относительный адрес — /content.html, ../css/style.css
Различные ключевые слова (selected,

none и т.д.)

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

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

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

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

, , ,
,

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

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

в другой
Сокращенные атрибуты (без значения) запрещены; для них в

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

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

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

Слайд 37

Заголовок документа
Заголовок раздела
Заголовок подраздела
Заголовок параграфа
Комментарий
Авторские пометки

Заголовки: h1 …

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

h6
Теги h1- h6 являются парными и блочными


Слайд 38 Абзацы
переход на новую строку




абзац (с отступами)
И вечный бой!

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

Покой
нам только снится

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

Летит, летит степная


кобылица

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


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


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



Слайд 39 Физическая разметка

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

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




Комментарии

И вечный бой! Покой
нам

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

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

ковыль...



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



Слайд 41 Контейнеры
Тег div
Блочный тег, который служит для единственной цели

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

— быть контейнером, в котором могут находиться другие теги,

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


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

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

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

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

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

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

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

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

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

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

с палитрой (2…256 цветов)
рисунки с четкими границами, мелкие рисунки
JPEG

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

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


Слайд 46 Тег img

Тег img

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


Рисунки в документе  из той же папки:из другой папки:с другого сервера:image (изображение) source (источник)

src="../images/flag.jpg" />

из той же папки:
из другой

папки:

с другого сервера:

image (изображение)

source (источник)


Слайд 48 Атрибуты тега img

width, height

Атрибуты тега imgwidth, height — ширина или высота задается в пикселахsrc

— ширина или высота задается в пикселах
src — url

картинки
alt — альтернативный текст, который выводится, если изображение не загрузилось

Слайд 49 Аудио

autoplay — проигрывание при загрузке страницы
controls —

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

панель управления плеером
loop — автоповтор
preload — загрузка файла вместе

с загрузкой страницы
src — путь до трека


Слайд 50 Видео



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


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

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

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

Слайд 52 Ссылки на другие страницы сайта
Таблицы
страница в той

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

же папке
anchor (якорь)
hyper reference (гиперссылка)
страница во вложенной

папке

Пример

страница в соседней папке

Текст

выйти из текущей папки


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



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

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

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

index.html, default.asp, …
на конкретную страницу сайта (URL)

Васин текст
на

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


Скачать


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

Глава 1

Глава 2

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

id="chap1">
Глава 1
Это текст главы 1. Это текст главы 1.
Это

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

Наверх

Глава 2


Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.

Наверх





метка (якорь)

переход на метку


Слайд 56 Запуск почтовой программы

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


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

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

, ...


Слайд 57 Варианты открытия ссылки
я ссылка
атрибут target —

Варианты открытия ссылкия ссылкаатрибут target — имя окна или фрейма, куда

имя окна или фрейма, куда браузер будет загружать документ

_blank

– в новой вкладке/окне
_self – в том же окне, что и ссылка
_parent – (с фреймами) в родительском фрейме
_top - (с фреймами) в текущем окне, заменяя собой все фреймы

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

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

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

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

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

списка


Слайд 60 Списочные элементы

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

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

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

Слайд 62 Теги для таблицы
В тег включается множество элементов

Теги для таблицыВ тег включается множество элементов для описания структуры таблицыЭлемент

для описания структуры таблицы
Элемент группирует строки таблицы
Тег

для описания конкретной строки
Каждый тег содержит элементы и для описания заголовков ячеек данных и самих данных ячейки, соответственно
Другие не обязательные элементы позволяют описывать название таблицы , а также начальные (header) и конечные (footer) строки ( и )


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







Таблицы

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


..

..
..



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

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

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

Задание HTML таблицы  Состав команды     ФИО

Состав команды

ФИО
Должность


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


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


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


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







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

Слайд 67 Описание структуры страницы с помощью таблиц
С помощью таблиц

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

можно создать хорошую схему (планировку таблицы) (4 слайд 44)
Не

обязательно рисовать саму таблицу (толщина линии может быть = 0). Но таблицы позволяет задавать взаимное расположение элементов страницы относительно друг друга (что находится слева, справа и снизу, сверху).
Однако, таблицы имеют следующие недостатки:
Таблицы требуют добавления большого количества кода.
Таблицы трудно удалить или изменить.


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

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

Слайд 69 Web-страницы. Язык HTML
Формы

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

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

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

пользователь может просматривать имеющиеся данные, корректировать и вводить новые

данные
С помощью форм выполняется сбор данных, вводимых пользователем для взаимодействия c Web-приложением
Типичные примеры форм:
поиск по сайту
отправки сообщения админу
регистрации на сайте
опросы

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

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

PHP

Формы в HTML могут состоять из:
Текстовых полей
Текстовых областей
Раскрывающихся

списков
Кнопок
Флажков
Переключателей

Слайд 72 Формы HTML
Форма задается парным блочным тегом
Тег обычно

Формы HTMLФорма задается парным блочным тегом Тег обычно включает набор элементов

включает набор элементов управления:
Элемент для ввода пользователем данных
Элемент





Слайд 81 Замечание по обработке HTML форм
При нажатии кнопки «submit» данные

Замечание по обработке HTML формПри нажатии кнопки «submit» данные формы передаются

формы передаются на сервер – по адресу указанному в

атрибуте action="URL"; если атрибута нет или он пустой, то передаются той же странице, в которой записана форма
На серверной стороне сайта необходимо создать способ сохранения и обработки данных передаваемых на сервер



Слайд 82 Тег meta и его виды

Тег meta и его видыатрибут name — устанавливает модификатор мета-тега

новости, форумы"/>

атрибут

name — устанавливает модификатор мета-тега


  • Имя файла: vvedenie-v-yazyk-razmetki-html.pptx
  • Количество просмотров: 134
  • Количество скачиваний: 0