Презентация HTML - Hyper Text Markup Language язык гипертекстовой разметки онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему HTML - Hyper Text Markup Language язык гипертекстовой разметки абсолютно бесплатно. Урок-презентация на эту тему содержит всего 196 слайдов. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:196 слайдов
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:5.75 MB
- Просмотров:120
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда:
№2 слайд
Содержание слайда: HTML
HTML - Hyper Text Markup Language
язык гипертекстовой разметки
№3 слайд
Содержание слайда: Первый в мире веб-сайт
http://info.cern.ch
№4 слайд
Содержание слайда: World Wide Web Consortium, W3C
http://www.w3schools.com/html/default.asp
№5 слайд
Содержание слайда: Простейший HTML документ
№6 слайд
Содержание слайда: Основные правила синтаксиса
HTML-документы могут быть созданы в любом текстовом редакторе .
Расширение файлов *.htm или *.html.
Тег состоит из знаков < и >, между которыми содержится ключевое слово.
<тег>Содержимое (текст, картинки)</тег>
<p>Мой первый абзац.</p>
Пустой тег
<br> vs <br/>
№7 слайд
Содержание слайда:
№8 слайд
Содержание слайда: Структура документа
№9 слайд
Содержание слайда: <!DOCTYPE>
Приемлемы оба представления
№10 слайд
Содержание слайда: HTML Версии
№11 слайд
Содержание слайда: Информация об используемой версии языка HTML
№12 слайд
Содержание слайда: Основные правила синтаксиса
HTML теги могут вкладываться друг в друга
№13 слайд
Содержание слайда: Правило вложенности тегов
теги должны закрываться в порядке, обратном тому, в котором они открывались.
Неправильно:
<tag1><tag2><tag3> </tag2></tag1></tag3>
Правильно:
<tag1><tag2><tag3> </tag3></tag2></tag1>
№14 слайд
Содержание слайда: Иерархия вложенности тегов
Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения.
Если несколько тегов вложены друг в друга, то порядок закрытия тегов должен быть обратным к порядку их открытия. Например,
<P>
<FONT size="+2">
Пример <EM>вложенности</EM>тегов
</FONT>
</P>
№15 слайд
Содержание слайда: Используйте нижний регистр
<p>В HTML можно так</p>
или
<P>можно и так</P>
<p>В XHTML возможен только нижний регистр для написания тегов</p>
№16 слайд
Содержание слайда: HTML Атрибуты
Атрибуты предоставляют дополнительную информацию о HTML-элементах.
Все HTML - элементы могут иметь атрибуты
Атрибуты содержат дополнительную информацию об элементе
Атрибуты всегда определяются в начальном теге
Атрибуты обычно имеют вид: имя = "значение«
Если атрибутов несколько, то они перечисляются через пробел
№17 слайд
Содержание слайда: Основные правила синтаксиса
Порядок перечисления параметров не влияет на результат отображения элемента.
HTML не чувствителен к регистру.
Большинство тегов являются парными, т. е. имеют открывающий и закрывающий теги. Закрывающий тег начинается с прямого слэша /.
Внутри тега между его параметрами допустимо ставить перенос строк.
<FONT face="Arial, Helvetica, sans-serif"
size="5"
color="blue">
Text
</FONT >
HTML любая последовательность подряд стоящих пробелов, символов табуляции и пустых строк эквивалентна одному пробелу (за исключением текста, заключенного в теги <PRE>)
№18 слайд
Содержание слайда: Основные правила синтаксиса
В именах атрибутов нельзя использовать пробелы, кавычки, знак больше (>), слэш (/) и равно (=), а также любые символы не определенные в Юникоде.
В значениях атрибутов допустимо писать текст и спецсимволы за исключением амперсанда (&), который должен заменяться на &.
№19 слайд
Содержание слайда: Все ли атрибуты, которые есть у тега, могут свободно использоваться?
Почему мы изучаем запрещенные атрибуты?
Все ли атрибуты, которые есть у тега, могут свободно использоваться?
Нет! Многие из них запрещены к использованию или противоречат спецификации.
Почему мы изучаем запрещенные атрибуты?
Мы можем встретить их в старой верстке, которую нас попросят поддерживать.
№20 слайд
Содержание слайда: Универсальные атрибуты
Универсальные атрибуты применяются практически ко всем тегам.
№21 слайд
Содержание слайда: accesskey
Позволяет получить доступ к элементу с помощью сочетания клавиш с заданной в атрибуте латинской буквой или цифрой (0-9). Браузеры при этом используют различные комбинации клавиш.
Internet Explorer: Alt + S
Chrome: Alt + S
Opera: Shift + Esc, S
Safari: Alt + S
Firefox: Shift + Alt + S
При использовании комбинации клавиш элемент получает фокус, но конкретное действие зависит от применяемого тега. К примеру, для <a> произойдет переход по ссылке.
Синтаксис
<a accesskey="c">...</a>
№22 слайд
Содержание слайда: Accesskey
пример
№23 слайд
Содержание слайда: lang
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут lang</title>
<style>
q:lang(de) {
quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */
}
q:lang(en) {
quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */
}
q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */
quotes: "\00AB" "\00BB";
}
</style>
</head>
<body>
<p>Цитата на французском языке: <q lang="fr">Ce que femme veut, Dieu le veut</q>.</p>
<p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
<p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>
<p>Цитата на беларусском: <q lang="be">Хто без навукі, той як бязрукі</q>.</p>
</body>
</html>
№24 слайд
Содержание слайда: lang
№25 слайд
Содержание слайда: title
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут title</title>
</head>
<body>
<p title="Это из кинофильма Золотой телёнок">Пилите, Шура, пилите, она золотая!</p>
</body>
</html>
№26 слайд
Содержание слайда: class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут class</title>
<style>
p.attantion { /* Абзац с классом cite */
color: red; /* Синий цвет текста */
margin-left: 20px; /* Отступ слева */
border-left: 4px solid black; /* Граница слева от текста */
padding-left: 15px; /* Расстояние от линии до текста */
}
</style>
</head>
<body>
<p>Александр Сергеевич Пушкин появился на свет 6 июня (26 мая по ст. ст.) 1799 г. в Москве.</p>
<p class="attantion">Александр Сергеевич Пушкин - величайший русский поэт, прозаик, драматург, создатель современного русского литературного языка, гордость национальной литературы</p>
<p>Александр Пушкин был продолжателем дворянского нетитулованного рода Пушкиных; его отец Сергей Львович увлекался поэзией, сам сочинял стихи, слыл в обществе острословом. Мать, Надежда Осиповна, была внучкой А.П. Ганнибала - африканца, воспитанника императора Петра I, ставшего впоследствии военным инженером и генералом.</p>
</body>
</html>
№27 слайд
Содержание слайда: contenteditable
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>contenteditable</title>
</head>
<body>
<h1 contenteditable="true">Белки сломали зубы об орехи! Если Вам не нравится наша новость, впишите свою!</h1>
<p contenteditable="true">Знаменитая пушкинская белка песенки поет
да орешки все грызет. А орешки не простые, всё скорлупки золотые, ядра - чистый изумруд. Современные белки ломают зубы даже на лещиной. Вот что значит кариес!</p>
</body>
</html>
№28 слайд
Содержание слайда: dir
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут dir</title>
</head>
<body>
<p dir="rtl">Директору ОАО "Рога и копыта" О.И. Бендеру</p>
<p>Прошу зачислить меня на работу.</p>
</body>
</html>
№29 слайд
Содержание слайда: hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hidden</title>
<style>
#link {
cursor: pointer;
color: blue;
text-decoration: underline;
}
</style>
<script>
function showForm() {
document.getElementById("auth").hidden = false;
document.getElementById("link").hidden = true;
}
</script>
</head>
<body>
<p id="link" onclick="showForm()">Авторизация на сайте</p>
<form id="auth" hidden>
<p><label>Логин: <input name="user" required></label></p>
<p><label>Пароль: <input name="pass" type="password" required></label></p>
<p><input type="submit" value="Войти"></p>
</form>
</body>
</html>
№30 слайд
Содержание слайда: id
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hidden</title>
<style>
#link {
cursor: pointer;
color: blue;
text-decoration: underline;
}
</style>
<script>
function showForm() {
document.getElementById("auth").hidden = false;
document.getElementById("link").hidden = true;
}
</script>
</head>
<body>
<p id="link" onclick="showForm()">Авторизация на сайте</p>
<form id="auth" hidden>
<p><label>Логин: <input name="user" required></label></p>
<p><label>Пароль: <input name="pass" type="password" required></label></p>
<p><input type="submit" value="Войти"></p>
</form>
</body>
</html>
№31 слайд
Содержание слайда: style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>style</title>
<style>
#pig{ /* Цвет фона */
background: red;
}
</style>
</head>
<body>
<div id="pig"> Наф-наф – мой герой. </div>
</body>
</html>
№32 слайд
Содержание слайда: tabindex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут tabindex</title>
</head>
<body>
<p>Нажмите кнопку Tab для перехода между элементами</p>
<p><button>Шестой</button></p>
<p><button>Седьмой</button></p>
<p><button tabindex="5">Пятый</button></p>
<p><button tabindex="1">Первый</button></p>
<p><button tabindex="3">Третий</button></p>
<p><button tabindex="2">Второй</button></p>
<p><button tabindex="4">Четвертый</button></p>
</body>
</html>
№33 слайд
Содержание слайда: Кавычки
<p title=“О вреде курения">
Значения параметров могут быть заключены в двойные или одинарные кавычки.
<FONT face='Arial, Helvetica, sans-serif' size='5' color='blue'>В тексте установлен тип шрифта, размер шрифта и его цвет</FONT >
Типы открывающих и закрывающих кавычек должны совпадать. Если значение атрибута состоит из одного слова, то кавычки можно опускать.
<FONT size=5 color=blue> В тексте установлен размер шрифта и его цвет
</FONT>
Если значение атрибута такое же, как его имя, может быть использован минимальный синтаксис атрибута. То есть <ul compact="compact"> можно сократить до <ul compact>.
№34 слайд
Содержание слайда: alt
Задает альтернативный текст для изображения, когда изображение не может быть отображено. Значение атрибута может быть прочитано браузерами для людей с ограниченными возможностями, таким образом, например, слепой человек, может "слышать" элемент.
№35 слайд
Содержание слайда: Упражнение 1
Добавить к абзацу подсказку с текстом «Не забудьте взять зонт»
<!DOCTYPE html>
<html>
<body>
<p>Сегодня обещают дождь.</p>
</body>
</html>
№36 слайд
Содержание слайда: Упражнение 2
Добавить возможность перехода по ссылке в Chrome с помощью сочетания клавиш Alt + g
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Атрибут accesskey</title>
</head>
<body>
<p><a href="https://www.google.by/">Мой любимый поисковик</a></p>
</body>
</html>
№37 слайд
Содержание слайда: Упражнение 3
Внесите изменения в код таким образом, чтобы при нажатии клавиши Tab в фокус попадало сначала поле для ввода логина, затем поле для ввода пароля, затем кнопка «Войти» и только после этого ссылка новости.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hidden</title>
<body>
<p>Если Вы не хотите авторизоваться, то можете просмотреть <a href="http://www.tut.by/">новости</a></p>
<p>Авторизация на сайте</p>
<form>
<p><label>Логин: <input name="user" required></label></p>
<p><label>Пароль: <input name="pass" type="password" required></label></p>
<p><input type="submit" value="Войти"></p>
</form>
</body>
</html>
№38 слайд
Содержание слайда: Упражнение 4
Изображение ниже не существует. Укажите альтернативный текст «Первое сетнтября на ММФ» для изображения
<!DOCTYPE html>
<html>
<body>
<img src="images/sept.jpg" width="135" height="50">
</body>
</html>
№39 слайд
Содержание слайда: Заголовки <h1-<h6>
№40 слайд
Содержание слайда: Упражнение
Замените теги параграфов, где это нужно на теги заголовков, таким образом, чтобы текст стал наиболее понятен как для пользователей, так и для поисковых машин.
<!DOCTYPE html>
<html>
<body>
<p>ТЕСТЫ И КОНКУРСЫ</p>
<p>Конкурс KP.BY: Пришли рецепт c фото своего любимого блюда - и выиграй микроволновку или пылесос!</p>
<p>Хотите порадовать себя или своих близких новенькой бытовой техникой? Участвуйте в нашем конкурсе и выигрывайте приятные призы!</p>
<p>Конкурс на kp.by: «Тайная жизнь моего питомца»</p>
<p>Присылайте снимки ваших любимцев - котиков, собачек, кроликов, хомячков, морских свинкок… Да хоть игуан! И выигрывайте приз: упаковку корма, билеты в кино и игрушечных героев «Тайной жизни домашних животных»</p>
</body>
</html>
№41 слайд
Содержание слайда: Упражнение
Проанализировать структуру заголовков на сайте факультета.
№42 слайд
Содержание слайда: <HR>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Заголовок первого уровня</h1>
<p>Некоторый текст</p>
<hr>
<h2>Заголовок второго уровня</h2>
<p>Еще текст</p>
<hr>
<h2>Заголовок второго уровня</h2>
<p>Еще текст</p>
</body>
</html>
№43 слайд
Содержание слайда: Атрибуты тега <HR>
align
Определяет тип горизонтального выравнивания относительно содержимого HTML-документа. Может принимать следующие три значения: left (выравнивание по левой границе документа), center (выравнивание по центру документа), right (выравнивание по правой границе документа). Этот параметр имеет смысл применять только совместно с параметром width, когда горизонтальная линия не занимает всю строку по ширине текста.
noshade
Рисует линию сплошной, без трехмерного эффекта, по умолчанию линия отображается в виде желоба.
size
Задает толщину (высоту) линии.
width
Задает длину (ширину) линии.
№44 слайд
Содержание слайда: <HR align="center" width="100" size="5">
№45 слайд
Содержание слайда: Упражнение
Вставьте тег горизонтальной линии, где это уместно для улучшения восприятия материала.
<!DOCTYPE html>
<html>
<body>
<h1>ТЕСТЫ И КОНКУРСЫ</h1>
<h2>Конкурс KP.BY: Пришли рецепт c фото своего любимого блюда - и выиграй микроволновку или пылесос!</h2>
<p>Хотите порадовать себя или своих близких новенькой бытовой техникой? Участвуйте в нашем конкурсе и выигрывайте приятные призы!</p>
<h2>Конкурс на kp.by: «Тайная жизнь моего питомца»</h2>
<p>Присылайте снимки ваших любимцев - котиков, собачек, кроликов, хомячков, морских свинкок… Да хоть игуан! И выигрывайте приз: упаковку корма, билеты в кино и игрушечных героев «Тайной жизни домашних животных»</p>
</body>
</html>
№46 слайд
Содержание слайда: <HEAD>
Внутри допускается помещать:
<base>,
<basefont> (устарел),
<link>,
<meta>,
<script>,
<style>,
<title>
№47 слайд
Содержание слайда: <base>
href
Если <base href="http://www.mysite.by/fuculty/">
то <img src="images/1september.png">
Полный путь =http://www.mysite.by/fuculty/ images/1september.png
№48 слайд
Содержание слайда: <base>
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta charset="utf-8">
</head>
<body>
<a href="Examples for presentation html5 1 base1.htm">Новый документ</a>
</body>
</html>
№49 слайд
Содержание слайда: Упражнение
Удалите часть кода так, чтобы при переходе по ссылке страница загружалась в том же окне.
<!DOCTYPE html>
<html>
<head>
<base target="_blank">
<meta charset="utf-8">
</head>
<body>
<a href="Examples for presentation html5 1 base1.htm">Новый документ</a>
</body>
</html>
№50 слайд
Содержание слайда: <basefont>
устаревший тег
<body>
<basefont color="#FF0000" >Красный <font size="+3">большой</font> шрифт</basefont>
<basefont size="+1">Более мелкий <font color="blue">синий</font> шрифт</basefont>
</body>
</basefont>
№51 слайд
Содержание слайда: <LINK>
charset
href
media
rel
sizes
type
<link rel="stylesheet" href="ie.css">
<link rel="shortcut icon" href="http://mysite.by/apple.ico">
№52 слайд
Содержание слайда: Упражнение
Подключить иконку к странице
№53 слайд
Содержание слайда: <META>
charset
content
http-equiv
name
<meta name="Author" content="Ivanov, Иванов Иван">
< meta name="copyright" content="© 2001 MySoft Corp.">
№54 слайд
Содержание слайда: <META>
<meta name="date" content="2009-01-09T10:30:28+00.00">
< meta name="description" content="The best homepage">
< meta name="keywords" content="META, HTML, WWW, Web, паутина, поиск, определение, рекомендации, примеры использования, учебник, руководство, информация, справка, Microsoft Internet Explorer">
№55 слайд
Содержание слайда: <META>
<meta name="robots" content="index, nofollow">
noindex – не допускает индексирование документа;
nofollow – не допускает посещение ссылок, имеющихся в документе;
index – разрешает индексирование документа;
follow – разрешает посещение ссылок, имеющихся в документе;
all – равносильно заданию index и follow;
none – равносильно заданию noindex и nofollow.
№56 слайд
Содержание слайда: <META>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<meta http-equiv="expires"
content="Mon, 07 Sep 2017 00:02:01 GMT">
№57 слайд
Содержание слайда: <META>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<meta http-equiv="expires"
content="Mon, 07 Sep 2017 00:02:01 GMT">
№58 слайд
Содержание слайда: <META>
<meta http-equiv="cache-control" content="no-cache">
атрибут content может принимать следующие значения:
no-cache – запретить кэширование;
private – запретить кэширование proxy-сервером;
no-store ‑разрешить кэширование proxy-сервером и запретить кэширование браузером;
public – разрешить любое кэширование.
№59 слайд
Содержание слайда: <META>
<meta http-equiv="refresh" content="7">
<meta http-equiv="refresh" content="7";
url="http://www.bsu.by>«
<meta scheme="Month-Day-Year" name="date" content="03-07-2009>
<meta name="keywords" lang="en-us" content="META, HTML, WWW, Web, Microsoft Internet Explorer">
<meta name="keywords" lang="ru" content="META, HTML, WWW, Web, паутина, поиск, определение, рекомендации, примеры использования, учебник, руководство, информация, справка, Microsoft Internet Explorer">
№60 слайд
Содержание слайда: <META>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
№61 слайд
Содержание слайда: <script>
<script type="text/javascript">.
document.write(“Hello!")
</script>
<script>
alert("Hello!!!")
</script>
<script type="text/javascript" src="http://mysite.by/"></script>
№62 слайд
Содержание слайда: <script> в теге <body>
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
</html>
№63 слайд
Содержание слайда: Атрибуты <script>
defer
Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Не работает без src!!!!
src
Адрес скрипта из внешнего файла для импорта в текущий документ.
№64 слайд
Содержание слайда: HTML-файл
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег SCRIPT, атрибут defer</title>
<script defer src="script1.js"></script>
</head>
<body>
<form action="handler.php">
<p>Введите ваш возраст</p>
<p><input type="text" name="textField"></p>
</form>
</body>
</html>
№65 слайд
Содержание слайда: Атрибуты <script>
async
Загружает скрипт асинхронно. Не работает без src!!!!
№66 слайд
Содержание слайда: Атрибуты <script>
language
Устанавливает язык программирования на котором написан скрипт.
<script language="JavaScript | JScript | VBS | VBScript">...</script>
type
Определяет тип содержимого тега <script>.
text/javascript для языка программирования JavaScript.
ext/vbscript для языка VBScript.
<script type="text/javascript"> document.write(“Hello!")
</script>
№67 слайд
Содержание слайда: Упражнение
JavaScript может изменить стили HTML. Например,
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
Используя javaScript измените стиль абзаца «demo» (Цвет шрифта и его размер).
№68 слайд
Содержание слайда: <title >
<title>Документ без названия</title>
определяет заголовок в панели инструментов браузера
предоставляет заголовок страницы при добавлении в избранное
отображает заголовок страницы в результатах поисковых систем
№69 слайд
Содержание слайда: <title >
сайты продвигаются по фразе
«Документ без названия»
№70 слайд
Содержание слайда: <body>
Background НЕ поддерживается HTML5!!!
< body background="lis1.gif">Изображение котенка не самый лучший фон для текста.
</ body >
№71 слайд
Содержание слайда: <body>
НЕ поддерживается HTML5!!!
bgcolor
text
<BODY bgcolor="blue" text="white"> </BODY>
№72 слайд
Содержание слайда: <body>
НЕ поддерживается HTML5!!!
link
vlink
alink
<body alink="#66FF00" link="#669900" vlink="#FF33FF">
text
</body>
№73 слайд
Содержание слайда: <body>
НЕ поддерживается HTML5!!!
bgproperties
<BODY background="lis1.gif" bgproperties="fixed"> ….. </BODY >
№74 слайд
Содержание слайда: <body>
НЕ поддерживается HTML5!!!
bottommargin
leftmargin
topmargin
rightmargin
<BODY bgcolor="blue" text="white" leftmargin="100">
В этом документе установлен синий цвет фона, белый цвет текста.
</BODY>
№75 слайд
Содержание слайда: <body>
НЕ поддерживается HTML5!!!
scroll
Атрибут scroll определяет, отображать полосы прокрутки или нет. Может принимать значения yes или no.
№76 слайд
Содержание слайда: <body>
Поддерживает все глобальные атрибуты
accesskey задает сочетание клавиш для активации / фокуса элемента (уже рассматривали)
class задает стилевой класс, который позволяет связать определенный тег со стилевым оформлением (уже рассматривали)
contenteditable позволяет редактировать элемент пользователю (уже рассматривали)
dir задает направление и отображение текста — слева направо или справа налево
№77 слайд
Содержание слайда: глобальные атрибуты
hidden скрывает содержимое элемента от просмотра (уже рассматривали)
id указывает имя стилевого идентификатора (уже рассматривали)
lang браузер использует значение параметра для правильного отображения некоторых национальных символов (уже рассматривали)
style применяется для определения стиля элемента с помощью правил CSS (уже рассматривали)
№78 слайд
Содержание слайда: глобальные атрибуты
tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab (уже рассматривали)
title jписывает содержимое элемента в виде всплывающей подсказки при наведении указателя мыши на элемент (уже рассматривали)
№79 слайд
Содержание слайда: Глобальный атрибут contextmenu
<element contextmenu="menu_id">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>contextmenu</title>
<style>
.rotateleft {
transform: rotate(-90deg);
}
.rotateright {
transform: rotate(90deg);
}
</style>
<script>
function rotateLeft() {
document.querySelector("img").classList.toggle("rotateleft");
}
function rotateRight() {
document.querySelector("img").classList.toggle("rotateright");
}
</script>
</head>
<body>
<img src="images/kats.jpg" alt="" contextmenu="edit">
<menu type="context" id="edit">
<menuitem icon="images/object-rotate-right.png"
onclick="rotateRight()">Повернуть на 90º ПЧС</menuitem>
<menuitem icon="images/object-rotate-left.png"
onclick="rotateLeft()">Повернуть на 90º ПрЧС</menuitem>
</menu>
</body>
</html>
№80 слайд
Содержание слайда: Глобальный атрибут data-*
используется для встраивания пользовательских данных
Атрибут data- * состоит из двух частей:
имя атрибута не должен содержать заглавные буквы, и может быть длиной по крайней мере один символ после префикса " data-"
значение атрибута может быть любой строкой
№81 слайд
Содержание слайда: <!DOCTYPE HTML>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>data-* Attributes</title>
<script>
function showDetails(image) {
var animalType = image.getAttribute("data-image-type");
alert(image.getAttribute("id") + " нравится мне потому, что " + animalType + ".");
}
</script>
</head>
<body>
<h1>Мои любимые катринки</h1>
<p>Нажми на картинку, чтобы узнать, за что мне она нравится</p>
<ul>
<li onclick="showDetails(this)" id="Песик" data-image-type="милый"><img src="images/pes.gif" height="120"></li>
<li onclick="showDetails(this)" id="Кот" data-image-type="обиженный и злой"><img src="images/zloj_kot.jpg" height="120"></li>
<li onclick="showDetails(this)" id="Лягушка" data-image-type="голодная"><img src="images/frog.gif" height="120"></li>
</ul>
</body>
</html>
№82 слайд
Содержание слайда:
№83 слайд
Содержание слайда: Глобальный атрибут draggable
Определяет, является ли элемент перетаскиваемыми или нет
< element draggable="true|false|auto">
№84 слайд
Содержание слайда: <!DOCTYPE HTML>
<!DOCTYPE HTML>
<html><head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();<!--отмена действия по умолчанию-->
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);<!--dataTransfer.setData(format, data): добавляет данные в нужном формате.-->
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");<!--data = dataTransfer.getData(format): возвращает данные.-->
ev.target.appendChild(document.getElementById(data));<!--Добавить новый элемент к детям существующего элемента можно методом appendChild-->
ev.preventDefault();<!--отмена действия по умолчанию-->
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<p id="drag1" draggable="true" ondragstart="drag(event)">This is a draggable paragraph. Drag this element into the rectangle.</p>
</body>
</html>
№85 слайд
Содержание слайда:
№86 слайд
Содержание слайда: Упражнение
Создать страницу составления заказа в кафе. Пользователи должны иметь возможность перетаскивать все элементы понравившегося меню в заказ.
№87 слайд
Содержание слайда: Глобальный атрибут dropzone
Атрибут указывает, следует ли копировать перемещаемые данные.
<div dropzone="copy"></div>
Пока не поддерживается ни одним браузером
№88 слайд
Содержание слайда: Глобальный атрибут spellcheck
Указывает браузеру проверять или нет правописание и грамматику в тексте. Хотя атрибут можно устанавливать практически для всех элементов, результат будет заметен только для полей форм (<input>, <textarea>), а также редактируемых элементов (у них установлен атрибут contenteditable).
spellcheck="true | false"
№89 слайд
Содержание слайда: <!DOCTYPE html>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>spellcheck</title>
</head>
<body>
<p contenteditable="true" spellcheck="true">This is a praggagraph. It is editable. Try to change the text.</p>
First name: <input type="text" name="fname" spellcheck="true">
<p><strong>Note:</strong> The spellcheck attribute is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
№90 слайд
Содержание слайда: Упражнение
Сделайте страничку для написания диктантов с возможностью проверить ошибки и выставлять оценку.
№91 слайд
Содержание слайда: Глобальный атрибут translate
Атрибут указывает, следует ли переводить содержимое элемента или нет.
<element translate="yes|no">
Пока не поддерживается ни одним браузером
№92 слайд
Содержание слайда: <style>
<style>
</style>
№93 слайд
Содержание слайда: <style>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
div {
background-color:yellow;
color:blue;
border-style:dotted;
border:4;
border-color:red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is div.</div>
</body>
</html>
№94 слайд
Содержание слайда: <!--…-->
<HTML><!--Начало документа-->
<HEAD><META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<TITLE>Пример использования комментариев</TITLE>
<!--Заголовок-->
</HEAD>
<BODY><!--Начало тела документа-->
<!--Внутри тега комментарий поместить нельзя-->
<!--А собственно текста в документе нет-->
</BODY><!--Конец тела документа-->
</HTML><!--Конец документа-->
№95 слайд
Содержание слайда: Microsoft отказалась от поддержки условных комментариев в IE с 10 версии
Условные комментарии это главное средство для исправления ошибок Internet Explorer.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!--[if lte IE 7]><link href="ie.css"
rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
<p>Текст красного цвета только в IE7 и последующх его версиях (до 10) </p>
</body>
</html>
№96 слайд
Содержание слайда: <br>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>ЗИМНИЙ ВЕЧЕР<br>
Буря мглою небо кроет,<br>
Вихри снежные крутя;<br>
То, как зверь, она завоет,<br>
То заплачет, как дитя...
</body>
</html>
№97 слайд
Содержание слайда: <P>
<!DOCTYPE html>
<html>
<body>
<p>This is the first paragraph. This is the first paragraph.This is the first paragraph.</p>
<p>This is the second paragraph. This is the second paragraph. This is the second paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
№98 слайд
Содержание слайда: <p>
По умолчанию большинство браузеров поддерживают следующий
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
} стиль для <p>
№99 слайд
Содержание слайда: <P>
aling не рекомендуется использовать в HTML5!
Атрибут aling отвечает за выравнивание текста и может принимать одно из четырех значений:
left – выравнивание блока текста по левому краю, значение по умолчанию;
right – выравнивание блока текста по правому краю;
center – выравнивание блока текста по центру;
justify – выравнивание блока текста по ширине окна браузера.
№100 слайд
Содержание слайда:
№101 слайд
Содержание слайда: <pre>
<pre>
Текст
отображается
так,
как
набирался
в
редакторе.
</pre>
№102 слайд
Содержание слайда: <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<style>
pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}
</style>
</head>
<body>
<p>A pre element is displayed like this:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
№103 слайд
Содержание слайда: Теги для форматирование текста
<!DOCTYPE html>
<html>
<body>
<p><b>Полужирный текст</b></p>
<p><i>Курсивный текст</i></p>
<p>Это<sub> нижний индекс</sub> и <sup>верхний индекс</sup></p>
</body>
</html>
№104 слайд
Содержание слайда: <b> и <strong>
<i> и <em>
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<p><strong>This text is strong.</strong></p>
<p><i>This text is italic.</i></p>
<p><em>This text is emphasized.</em></p>
</body>
</html>
№105 слайд
Содержание слайда: <small>
<!DOCTYPE html>
<html>
<head>
<style>
small {
font-size: smaller;
}
</style>
<meta charset="utf-8">
</head>
<body>
Авторские права <small>© ООО "Рога и копыта"</small>
<!--<p>Если присоединить правило CSS, эффект будет таким же</p>-->
</body>
</html>
<big> признан устаревшим!!!
№106 слайд
Содержание слайда: <mark>
<mark>текст</mark>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>тег mark</title>
</head>
<p>Не забыть <mark>покомить</mark> хомяка и <mark>позвонить</mark> бабушке.</p>
<body>
</body>
</html>
По умолчанию
mark {
background-color: yellow;
color: black;
}
№107 слайд
Содержание слайда: <ins> и <del>
<ins> cite, datetime
<del> cite, datetime
<ins cite="file:///D/Лекции HTML.doc" datetime="2009-09-09T09:15:30Z">Это я вставлю, </ins>
<del title="Это личные правки автора">а это было лишним.</del>
№108 слайд
Содержание слайда: <sub> и <sup>
H<sub>2</sub>O<br>
a x<sup>2</sup>+b x+c=0
№109 слайд
Содержание слайда: <q>, <blockquote>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>кавычки</title>
</head>
<body>
<q cite="http://pushkin.niv.ru/pushkin/stihi/stih-640.htm">Мороз и солнце; день чудесный!</q> А.С. Пушкин<br>
<blockquote cite="http://pushkin.niv.ru/pushkin/stihi/stih-640.htm">Мороз и солнце; день чудесный!<br>
Еще ты дремлешь, друг прелестный -<br>
Пора, красавица, проснись:<br>
Открой сомкнуты негой взоры<br>
Навстречу северной Авроры,<br>
Звездою севера явись!
</blockquote> А.С. Пушкин<br>
</body>
</html>
№110 слайд
Содержание слайда: <cite>
<p>Тег <cite> определяет название произведения.</p>
<p>Браузеры обычно отображают этот тег курсивом.</p>
<img src="images/12-sunflowers.jpg" height="277" alt="The Scream">
<p><cite>Ваза с двенадцатью подсолнухами</cite> Ван Гога. Написана в 1889.</p>
№111 слайд
Содержание слайда: <abbr>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
№112 слайд
Содержание слайда: <address>
<!DOCTYPE html>
<html>
<body>
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
№113 слайд
Содержание слайда: <bdo>
dir
ltr ‑ слева направо;
rtl ‑ справа налево.
<BDO dir="ltr">первый второй третий</BDO><BR>
<BDO dir="rtl">первый второй третий</BDO><BR>
№114 слайд
Содержание слайда: Компьютерный код
<code>, <kbd> и <samp>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>кавычки</title>
</head>
<body>
Simple text<br>
<code>A piece of computer code</code><br>
<samp>Sample output from a computer program</samp><br>
<kbd>Keyboard input</kbd><br>
<var>Variable </var><var>E</var> = <var>m</var><var>c</var><sup>2</sup>
</body>
</html>
</body>
</html>
№115 слайд
Содержание слайда: URL (Uniform Resource Locator)
Примеры: http://www.w3schools.com/ или 192.68.20.50
scheme://login:parol@prefix.domain:port/path/filename
<схема>://<логин>:<пароль>@<хост>:<порт>/<URL‐путь>?<параметры>#<якорь>
http://myserver:8080/cite1/pages/page3.htm
ftp://ftp.byfly.by/
№116 слайд
Содержание слайда: кодирование
№117 слайд
Содержание слайда: Сокращенные ссылки
URI (User Resourse Identifier) — унифицированный идентификатор ресурса
URL — это URI, который, помимо идентификации ресурса, предоставляет ещё и информацию о местонахождении этого ресурса. А URN (Uniform Resource Name) — это URI, который только идентифицирует ресурс в определённом пространстве имён (и, соответственно, в определённом контексте), но не указывает его.
№118 слайд
Содержание слайда: Абсолютные ссылки
Абсолютные ссылки задают путь к необходимому файлу относительно корневой папки сайта. Они начинаются с обязательного символа / (слэш), который указывает web-серверу, что путь будет отсчитываться относительно корневой папки сайта. Например, адрес
/article5.htm
указывает на файл artile5.htm, хранящийся в корневой папке сайта, а адрес
/pages2/article21.htm
указывает на файл article21.htm, хранящийся в папке pages2, вложенной в корневую папку сайта.
№119 слайд
Содержание слайда: Относительные ссылки
Относительные ссылки задают путь к необходимому файлу относительно текущей страницы сайта. Они не содержат в начале символа / (слэш). Например, адрес
Article7.htm
указывает на файл article7.htm, хранящийся в той же папке сайта, в которой хранится и файл текущего документа. Адрес
pages2/article21.htm
указывает на файл article21.htm, хранящийся в папке pages2, вложенной в папку, в которой хранится текущий документ, а адрес
../article4.htm
указывает на файл article4.htm, хранящийся в папке, в которую вложена папка, в которой хранится текущий документ. Две точки в начале адреса обозначает папку предыдущего уровня вложенности.
Если в коде HTML-документа присутствует тег <BASE> с инициализированным атрибутом href, то полный адрес вызываемого по ссылке сетевого ресурса будет строиться на основе сокращенного адреса, исчисляемого от значения этого атрибута.
№120 слайд
Содержание слайда: Ссылки. <A>
<a href=" url "> link text </a>
href
Атрибут href задает адрес web-ресурса, на который должен перейти пользователь, щелкнув по ссылке.
<!DOCTYPE html>
<html>
<body>
<p>An absolute URL: <a href="http://www.w3schools.com">W3Schools</a></p>
<p>A relative URL: <a href="tag_a.asp">The a tag</a></p>
</body>
</html>
№121 слайд
Содержание слайда: Возможные значения href
Абсолютый адрес, например, другого сайта
href="http://www.example.com/default.htm"
Относительный адрес, например, внутренняя страница этого же сайта
href="default.htm"
Закладка на странице
href="#top"
Другой протокол
https://, ftp://, mailto:, file:, и т.д.
Скрипт
href="javascript:alert('Hello');")
№122 слайд
Содержание слайда: Якоря
1) создать закладку с атрибутом ID:
<h1 id=“urn">Относительные адреса </h>
2) добавить ссылку на закладку ( " Относительные адреса "), в рамках той же странице:
Информация об <a href="#urn">относительных ссылках</a>
№123 слайд
Содержание слайда: Упражнение
В нижней части документа вставьте ссылку на начало страницы
№124 слайд
Содержание слайда: Картинки в качестве ссылок
Рамку убирают
<a href="http://vangogh-world.ru/vangogh-sunflowers.php">
<img src="images/12-sunflowers.jpg" alt="sunflowers" style="border:0;">
</a>
№125 слайд
Содержание слайда: Ссылки на адрес электронной почты
№126 слайд
Содержание слайда: Ссылка сразу на несколько электронных адресов со встроенным сообщением
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a>
</p>
№127 слайд
Содержание слайда: Ссылки на JavaScript
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
№128 слайд
Содержание слайда: упражнения
Вставьте ссылку на сайт факультета.
Вставьте ссылку на электронную почту на два адреса с темой сообщения и текстом сообщения.
Сделайте страницу с историей факультета и при помощи якорей сделайте навигацию по страницу.
Сделайте ссылки на странице относительными.
Вставьте на страницу ссылку, которая будет открываться в новой вкладке.
Измените стиль ссылки так, чтобы она не была подчеркнута.
Сделайте картинку ссылкой.
№129 слайд
Содержание слайда: Оформление ссылок
При перемещении мыши над ссылкой, как правило:
курсор мыши принимает вид руки с указательным пальцем;
ссылки выделены цветом.
По умолчанию, ссылка будет выглядеть следующим образом (во всех браузерах):
Не посещённая ссылка выделена как подчеркнутая и имеет синий цвет
Уже посещенная ссылка - подчеркнутая и фиолетовый
Активная ссылка - подчеркнутая и красный
Можно изменить цвета по умолчанию, с помощью стилей:
Пример;
<style>
a:link {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover {color:red; background-color:transparent; text-decoration:underline}
a:active {color:yellow; background-color:transparent; text-decoration:underline}
</style>
№130 слайд
Содержание слайда: download
<p>Щелкни по картинке, чтобы загрузить ее:<p>
<a href="images/Vesna.jpg" download="cat">
<img border="0" src="images/Vesna.jpg" alt="Кот на подоконнике" height="150">
</a>
<p>Имя загружаемого файла будет cat.jpg вместо Vesna.jpg</p>
№131 слайд
Содержание слайда: hreflang
<a hreflang=" language_code" >
<p><a hreflang="en" href="http://www.w3schools.com">W3Schools.com</a></p>
№132 слайд
Содержание слайда: media
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">Open media attribute page for print</a>
</p>
Значения см. http://www.w3schools.com/tags/att_a_media.asp
№133 слайд
Содержание слайда: rel
alternate ссылка на альтернативное представление документа (т.е. печать страницы, переведенная страница или зеркало)
author ссылка на автора документа
bookmark Постоянная ссылка на раздел или запись
external document Указывает, что внешний ссылочный документ не является частью одного и того же сайта, что и текущий документ
help Ссылка на документ со справкой
license Ссылка на страницу с лицензионным соглашением или авторскими правами
next Ссылка на следующую страницу или раздел
nofollow Используется Google, чтобы указать, что поисковый бот Google не должны следовать по этой ссылке
noreferr Не передавать по ссылке HTTP-заголовки
noopener Requires that any browsing context created by following the hyperlink must not have an opener browsing context
prev Ссылка на предыдущую страницу или раздел
search Ссылка на поиск
tag Указывает, что метка (тег) имеет отношение к текущему документу
Пример
<p><a href="http://htmlbook.ru" rel="sidebar">Добавить в избранное</a></p>
№134 слайд
Содержание слайда: target
Целевой атрибут определяет, где открыть связанный документ
<a target="_blank|_self|_parent|_top| framename ">
_blank Открывает документ в новом окне или вкладке
_self Открывает документ в том же окне
_parent Открывает документ в родительском окне
_top Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то этот параметр работает как _self.
framename Открывает связанный документ в указанном фрейме
<p>Open link in a new window or tab: <a href="http://www.w3schools.com" target="_blank">Visit W3Schools!</a></p>
№135 слайд
Содержание слайда: type
<a type=" media_type" >
<a href="http://www.w3schools.com" type="text/html">W3Schools</a>
<p><a href="video/snowman.mp4" type="video/mp4">Ссылка на видеоролик</a></p>
№136 слайд
Содержание слайда: <img>
<img src=" url " alt=" some_text " style="width: width ;height: height ;">
<body>
<body>
<img src="pes.gif" width="138" height="175" alt="Щенок">
<img src="images/Злюка.jpg" width="166" height="185" alt="Кот"><br>
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQJKBYYroxSU30zpj6RKh6SQDfDZfqtURqZwlk8bCs-jeMoZ7hd" width=“287" height=“175" alt="Логотип">
<img src="images/html and css.png" width=“287" height=“175" alt="Логотип">
</body>
№137 слайд
Содержание слайда: alt
<img src="images/html and css1111.png" width="100" height="100" alt="Логотип">Такой картинки в папке нет, поэтому пользователь увидит альтернативный текст.
№138 слайд
Содержание слайда: width, height
<img src="images/Злюка.jpg" width="219" height="230" alt="Кот">
<img src="images/Злюка.jpg" style="width:219px;height:230px;" alt="Кот">
<img src="images/Злюка.jpg" alt="Кот">
<img src="images/Злюка.jpg" style="width:50%;" alt="Кот">
№139 слайд
Содержание слайда: Align
Атрибут устарел!
Это просто замечательная злюка. <img src="images/Злюка.jpg" width="100" alt="Кот">Это просто замечательная злюка…. злюка. <br><br>
Это просто замечательная злюка. <img src="images/Злюка.jpg" width="100" align="right" alt="Кот">Это просто замечательная злюка... злюка. <br><br>
Это просто замечательная злюка. <img src="images/Злюка.jpg" width="100" align="right" alt="Кот" style="float:left;">Это просто замечательная злюка. … злюка.
№140 слайд
Содержание слайда: border
Атрибут устарел!
<img src="pes.gif" width="138" height="175" alt="Щенок" border="4">
<img src="pes.gif" width="138" height="175" alt="Щенок" style="border:4px solid black">
№141 слайд
Содержание слайда: Картинка может быть ссылкой
Я пользуюсь:<br>
<a href="https://www.google.by/"><img src="images/googlechrome.jpg" width="30" style="border:0;">Google</a> и
<a href="https://www.yandex.by/"><img src="images/Яндекс.png" width="50">Yandex.</a>
№142 слайд
Содержание слайда: hspace, vspace
Атрибут устарел!
<p>Это просто замечательная злюка. <img src="images/Злюка.jpg" width="100" align="right" alt="Кот" style="float:left;">Это просто замечательная … злюка. </p>
<p style="clear:both;">Это просто замечательная злюка. <img src="images/Злюка.jpg" width="100" align="right" alt="Кот" style="float:left;" hspace="10" vspace="5">Это … злюка. </p>
<p style="clear:both;">Это просто замечательная злюка. <img src="images/Злюка.jpg" width="100" align="right" alt="Кот" style="float:left;margin:5px 10px;">Это… злюка. </p>
№143 слайд
Содержание слайда: longdesc
<!-- Описание на той же странице, что и изображение -->
<img src="pes.gif" alt="Песик" width="100" longdesc="#dog">
<!-- Описание на другой странице сайта -->
<img src="pes.gif" alt="Песик" width="100" longdesc="dog.txt">
<!-- Описание на странице другого сайта-->
<img src="pes.gif" alt="Песик" width="100" longdesc="https://ru.wikipedia.org/wiki/%D0%A1%D0%BE%D0%B1%D0%B0%D0%BA%D0%B0">
<!-- Описание включено в тег -->
<img src="pes.gif" alt="Песик" width="100" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20Logo%3C/title%3E%3C/head%3E%3Cbody%3E%3Cp%3ESome%20description%20goes%20here%3C/body%3E%3C/html%3E">
<p id="dog">Мой песик....(описание).</p>
№144 слайд
Содержание слайда: longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20Logo%3C/title%3E%3C/head%3E%3Cbody%3E%3Cp%3ESome%20description%20goes%20here%3C/body%3E%3C/html%3E«
longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20Logo%3C/title%3E%3C/head%3E%3Cbody%3E%3Cp%3ESome%20description%20goes%20here%3C/body%3E%3C/html%3E«
data:text/html;charset=utf-8;,<!DOCTYPE html><html><head><title>Description of my dog</title></head><body><p>Some description goes here</body></html>
http://www.7is7.com/software/chars.html (Коды символов HTML)
№145 слайд
Содержание слайда: ismap
<a href="http://www.w3schools.com/tags/form_action.asp">
<img src="http://www.w3schools.com/tags/w3html.gif" alt="W3Schools.com" width="100" height="132" ismap>
</a>
<p>Кликните по картинке и координаты щелчка будут отправлены на сервер в строке запроса.</p>
№146 слайд
Содержание слайда: ismap
№147 слайд
Содержание слайда: usemap
usemap
Указывает на наличие навигационной карты, создаваемой тегом <MAP>.
<img usemap=" #mapname ">
№148 слайд
Содержание слайда: Упражнения
Поместите на страницу несколько изображений. Часть из них загрузите с диска, а часть из Интернета.
Вставьте анимированное изображение.
Вставьте изображение. Уменьшите его размер в два раза.
Сделайте изображение ссылкой.
Вставьте изображение и текст. Сделайте так, чтобы текст абзаца обтекал текст картинки справа. Увеличьте размер чистого поля слева и справа от изображения до окружающего его контента.
В теге <img> укажите адрес документа, где содержится аннотация к картинке.
Вставьте альтернативный текст, который будет отображаться в случае, если картинка не загрузится.
№149 слайд
Содержание слайда: Графические навигационные карты. <MAP>, <AREA>
Карты изображений, или графические навигационные карты, создаются для обработки щелчка в определенных областях изображения на компьютере клиента.
Для создания карт изображений предусмотрен тег <MAP>. Тег <MAP> можно рассматривать как контейнер для тегов <AREA>, которые, собственно, описывают области и управляют ими. В теге <MAP> имеется один атрибут name – уникальное имя карты. Значение этого атрибута с предшествующим ему символом решетки (#) записывается в качестве значения атрибута usemap тега <IMG >. Внутри тега <MAP> перечисляются теги <AREA>.
№150 слайд
Содержание слайда: Атрибуты тега <AREA>
href
Хранит адрес сетевого ресурса, куда переходит пользователь после щелчка на области.
nohref
Означает, что данная область не связана ни с каким сетевым ресурсом. HTML5 не поддерживает!
alt
Содержит описание (подсказку), которая появляется при наведении мыши на контролируемую область.
shape
Определяет форму контролируемой области: rect (прямоугольник), circle (окружность) или poly (многоугольник).
coords
Содержит координаты, необходимые для описания фигуры, тип которой задан в shape.
Для rect: coords="x1,y1,x2,y2", где (x1,y1), (x2,y2) ‑ координаты левого верхнего и правого нижнего угла прямоугольника, соответственно.
Для circle: coords="x1,y1,R", где (x1,y1) ‑ координаты центра окружности, R – радиус.
Для poly: coords="x1,y1,x2,y2, …,xn,yn", где (x1,y1), (x2,y2), …, (xn,yn) – координаты n точек, задающих n-угольник.
Если области перекрываются, то подключается определение той области, чье определение в теге <MAP> стоит раньше.
№151 слайд
Содержание слайда: Атрибуты тега <AREA>
download указывает, что цель будет загружена, когда пользователь нажимает на гиперссылку. Этот атрибут используется только если HREF атрибут установлен. Значением атрибута является имя загруженного файла. Нет никаких ограничений на допустимые значения, и браузер автоматически определит правильное расширение файла и добавить его в файл (.img, .pdf, .txt, .html, и т.д.). Если значение не указано, используется исходное имя файла. Появился в HTML5! <area shape="rect" coords="0,0,82,126" alt="Sun" href="info_about_the_sun.htm"download="sun">
hreflang определяет язык целевого URL в этой области. Появился в HTML5! <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" hreflang="en">
media используется для указания того, что URL-адрес предназначен для специальных устройств (например, iPhone), речи или печатных средств массовой информации. Появился в HTML5! <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" media="screen and (min-color-index:256)">
rel определяет отношение между текущим документом и связанным документом. Появился в HTML5! <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" rel="alternate">
type определяет MIME-тип целевого URL. <area shape="rect" coords="0,0,82,126" alt="Sun"
href="/images/sun.gif" type="image/gif">
№152 слайд
Содержание слайда: Сначала вставляем картинку и, используя атрибут usemap,
Сначала вставляем картинку и, используя атрибут usemap,
указываем на наличие навигационной карты, которая будет создана при помощи тега <MAP>.
№153 слайд
Содержание слайда: Затем, выбираем внизу «Многоугольная активная область» и мышкой отмечаем первый узел области. Появляется напоминание о заполнении поля alt в карте.
№154 слайд
Содержание слайда:
№155 слайд
Содержание слайда:
№156 слайд
Содержание слайда:
№157 слайд
Содержание слайда:
№158 слайд
Содержание слайда: Упражнение
Создать навигационную карту. В нее должны входить прямоугольные области, области типа многоугольник и круг. Области должны иметь пересечения.
№159 слайд
Содержание слайда: Таблицы
<table>, <tr>, <th>, <td>
<TABLE> В этом теге устанавливаются общие свойства таблицы, такие как ширина, цвет фона, выравнивание и т. д. Перед таблицей и после нее происходит переход на следующую строку.
<TR> Строка таблицы.
Собственно данные таблицы хранятся в тегах <TH> и <TD>.
№160 слайд
Содержание слайда: Пример
<table>
<tr>
<th> ФИО </th>
<th> алг. </th>
<th> геом. </th>
<th> мат.ан. </th>
<th>прогр.</th>
</tr>
<tr>
<td> Иванов И. И.</td>
<td> 8 </td>
<td> 7 </td>
<td> 9 </td>
<td> 8 </td>
</tr>
<tr>
<td> Петров П. П.</td>
<td> 5 </td>
<td> 9 </td>
<td> 6 </td>
<td> 5 </td>
</tr>
<tr>
<td> Сидоров С. С.</td>
<td> не явился </td>
<td> 4 </td>
<td> 4 </td>
<td> 7 </td>
</tr>
</table>
№161 слайд
Содержание слайда: HTML таблица состоит из элемента <table> и одного или более <tr> , <th> и <td> элементов.
<tr> определяет строку таблицы, <th> определяет заголовок таблицы, а <td> определяет ячейку таблицы.
Более сложная HTML таблица может также включать в себя <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody>.
№162 слайд
Содержание слайда: Атрибуты тега <TABLE>
align
Определяет горизонтальное позиционирование таблицы относительно окна браузера. Возможные значения: center, left, right. Считается устаревшим. HTML5 не поддерживает!
bgcolor
Устанавливает цвет фона таблицы. Причем для разных браузеров по-разному, например для Internet Explorer определяет и фон ячеек, и цвет пространства между ними, а для Mozilla – только фон ячеек. HTML5 не поддерживает!
background
Задает фоновый рисунок в таблице. HTML5 не поддерживает!
№163 слайд
Содержание слайда: Атрибуты тега <TABLE>
width
Устанавливает ширину таблицы в пикселах (абсолютные размеры) или в процентах (относительные размеры) . HTML5 не поддерживает!
border
Атрибут граница определяет, будет ли граница отображаться вокруг ячеек таблицы или нет. Значения 0 или 1.
bordercolor
Устанавливает цвет рамки. HTML5 не поддерживает!
№164 слайд
Содержание слайда: Атрибуты тега <TABLE>
cellspacing
Задает расстояние между ячейками таблицы. HTML5 не поддерживает!
cellpadding
Определяет величину отступа содержимого ячейки от рамки. HTML5 не поддерживает!
№165 слайд
Содержание слайда: Атрибуты тега <TABLE>
frame HTML5 не поддерживает!
Устанавливает, какая часть внешней рамки таблицы будет отображена. Возможные значения:
void – внешняя рамка не отображается;
above – отображается только верхняя часть внешней рамки;
below – отображается только нижняя часть внешней рамки;
hsides – отображаются только верхняя и нижняя части внешней рамки;
vsides – отображаются только левая и правая части внешней рамки;
lhs – отображается только левая часть внешней рамки;
rhs – отображается только правая часть внешней рамки;
box – отображается вся рамка;
border – отображается вся рамка.
№166 слайд
Содержание слайда: Атрибуты тега <TABLE>
rules HTML5 не поддерживает!
Описывает, какие линии будут отображаться между ячейками и частями таблицы. Вывод зависит от браузера. Может принимать следующие значения:
none – рамки ячеек не отображаются (значение по умолчанию);
groups – отображаются только линии между группами рядов (<THEAD>, <TFOOT> и <TBODY>) и группами столбцов (<COLGROUP> и <COL>);
rows ‑ отображаются только линии между строками;
cols‑ отображаются только линии между столбцами;
all ‑ отображаются линии между всеми рядами и столбцами.
№167 слайд
Содержание слайда: Атрибуты тега <TABLE>
summary HTML5 не поддерживает!
Содержит краткое описание таблицы для удобства людей, использующих браузеры для слабовидящих и речевой вывод.
№168 слайд
Содержание слайда: Пример
<table align="left" bgcolor="#FFFF99" width="90%" border="1" bordercolor="#006633" cellspacing="7" cellpadding="5" height="200" frame="hsides" >
<tr>
…
</tr>
</table>
№169 слайд
Содержание слайда: Атрибуты тегов <TD> и <TH>
colspan Объединяет горизонтальные ячейки
rowspan Объединяет вертикальные ячейки.
headers
Определяет список заголовочных ячеек, предоставляющих заголовочную информацию для текущей ячейки данных. Значением этого атрибута является список разделённых пробелами имён ячеек. Эти ячейки должны быть именованы путём установки их атрибутов id. Используется для голосовых браузеров для слабовидящих.
№170 слайд
Содержание слайда: Атрибуты тегов <TD> и <TH>
row ‑ текущая ячейка предоставляет заголовочную информацию для оставшейся части ряда, содержащего её;
col ‑ текущая ячейка предоставляет заголовочную информацию для оставшейся части столбца, содержащего её;
rowgroup ‑ заголовочная ячейка предоставляет заголовочную информацию для оставшейся части группы рядов, содержащих её;
colgroup ‑ заголовочная ячейка предоставляет заголовочную информацию для оставшейся части группы столбцов, содержащих её.
№171 слайд
Содержание слайда: <style>
<style>
.second tr th,.second tr td
{
padding:5px;
border:#006633 solid 1px;
}
.third, .third tr th, .third tr td {
border: 1px solid black;
}
</style>
<table class="third">
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
<th id="phone">Phone</th>
<th id="addr">Address</th>
</tr>
<tr>
<td headers="name">John Doe</td>
<td headers="email">someone@example.com</td>
<td headers="phone">+45342323</td>
<td headers="addr">Rosevn 56,4300 Sandnes,Norway</td>
</tr>
</table>
№172 слайд
Содержание слайда: <TABLE border="5">
<TABLE border="5">
<TR bgcolor="#CC9933">
<TH rowspan="2">№ п/п</TH>
<TH rowspan="2">Название товара</TH>
<TH colspan="3">I квартал</TH>
<TH rowspan="2" bgcolor="#FF99FF">Итого</TH>
</TR>
<TR>
<TH bgcolor="#FFFF33">Январь</TH>
<TH bgcolor="#FFFF33">Февраль</TH>
<TH bgcolor="#FFFF33">Март</TH>
</TR>
<TR>
<TD>1</TD>
<TD>Молоко</TD>
<TD>1000</TD>
<TD>1206</TD>
<TD>500</TD>
<TD bgcolor="#33FFFF">2706</TD>
</TR>
<TR>
<TD>2</TD>
<TD>Творог</TD>
<TD>0</TD>
<TD>5000</TD>
<TD>0</TD>
<TD bgcolor="#33FFFF">5000</TD>
</TR>
<TR>
<TD>3</TD>
<TD>Кефир</TD>
<TD>200</TD>
<TD>200</TD>
<TD>400</TD>
<TD bgcolor="#33FFFF">800</TD>
</TR>
</TABLE>
</BODY>
</HTML>
№173 слайд
Содержание слайда: <CAPTION>
align HTML5 не поддерживает!
Определяет положение заголовка относительно таблицы. Возможные значения атрибута:
top ‑ заголовок располагается сверху над таблицей. Это значение по умолчанию;
bottom ‑ заголовок располагается снизу под таблицей;
left ‑ заголовок располагается слева от таблицы;
right ‑ заголовок располагается справа от таблицы.
valign
Устанавливает расположение заголовка до или после таблицы.
№174 слайд
Содержание слайда: <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td {
border:1px solid black;
}
caption {
display: table-caption;
text-align: center;
}
</style>
</head>
<body>
<p>A caption element is displayed like this:</p>
<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
<p>Change the default CSS settings to see the effect.</p>
</body>
</html>
№175 слайд
Содержание слайда: Упражнение
№176 слайд
Содержание слайда: Создание групп строк в таблице. <THEAD>, <TFOOT>, <TBODY>
Атрибуты тегов <THEAD>, <TFOOT> и <TBODY>
HTML5 не поддерживает!
№177 слайд
Содержание слайда: <TABLE bordercolor="#330099">
<TABLE bordercolor="#330099">
<CAPTION align="right">Продажи продукции за полугодие</CAPTION>
<TBODY bgcolor="#66FFFF">
<TR><TD>Хлеб</TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
<TR><TD>Батон</TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
<TR><TD>Пончики</TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD> </TR>
</TBODY>
<THEAD bgcolor="#FF6600">
<TH rowspan="2">Продукция</TH><TH colspan="3">I квартал</TH><TH colspan="3">II квартал</TH></TR><TR><TH> Январь </TH><TH> Февраль </TH><TH> Март </TH><TH> Апрель </TH><TH> Май </TH> <TH> Июнь </TH>
</TR>
</THEAD>
<TFOOT bgcolor="#FF99FF">
<TR> <TH>Итого</TH><TD> </TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD><TD> </TD></TR>
</TFOOT>
</TABLE>
№178 слайд
Содержание слайда: Не упорядоченные списки <ul>, <li>
disc - черный кружок (по умолчанию)
circle – не закрашенная окружность
square - квадрат
none – маркеры отсутствуют
<h2>Неупорядоченный HTML список</h2>
<ul>
<li>Кофе</li>
<li>Чай</li>
<li>Какао</li>
<li>Молоко</li>
</ul>
<ul style="list-style-type:circle">
<li>Кофе</li>
<li>Чай</li>
<li>Какао</li>
<li>Молоко</li>
</ul>
№179 слайд
Содержание слайда: Свой маркер списка
<ul style="list-style-image: url(images/star.png);">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
</ul>
№180 слайд
Содержание слайда: Упорядоченные списки. <ol>, <li>
type указывает тип значка, маркирующего пункты. Может принимать значения: 1, а, А, i, I.
start содержит стартовое значение первого пункта при нумерации.
reversed имеет булевское значение, указывает на прямой или обратный порядок списка.
compact представляет собой флажок, уменьшающий расстояние между пунктами (не поддерживается в HTML5).
№181 слайд
Содержание слайда: <ol type="a" start="d" reversed>
<li>Кофе</li>
<li>Чай</li>
<li>Какао</li>
<li>Молоко</li>
</ol>
№182 слайд
Содержание слайда: Вложенные списки
<h1>Вложенные списки</h1>
<ul>
<li>Кофе</li>
<li>Чай
<ol type="i">
<li>Черный</li>
<li>Зеленый
<ul style="list-style-type:square">
<li>С молоком</li>
<li>С фруктовыми добавками</li>
</ul>
</li>
</ol>
</li>
<li>Какао</li>
<li>Молоко</li>
</ul>
№183 слайд
Содержание слайда: Список определений.
<dl>, <dt>, <dd>
<dl>
<dt>Термин 1</dt>
<dd>Определение термина 1</dd>
<dt>Термин 2</dt>
<dd>Определение термина 2</dd>
</dl>
<dl>
<dt>Апельсиновый сок</dt>
<dd>- свежеотжатый</dd>
<dt>Вишневый сок</dt>
<dd>- консервированный</dd>
</dl>
№184 слайд
Содержание слайда: <style>
<style>
ul{
list-style-type:none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;}
li {
float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;}
li a:hover { background-color: #111111;}
</style>
<ul class="mnu">
<li><a href="#home">Главная</a></li>
<li><a href="#catalog">Каталог</a></li>
<li><a href="#contact">Контакты</a></li>
<li><a href="#about">О нас</a></li>
</ul>
№185 слайд
Содержание слайда: Упражнения
Создать не упорядоченный список маркированный квадратиками.
Создать упорядоченный список, нумерованный от 20 до 15.
Создать список. В качестве маркеров вставить свою иконку.
Создавать меню.
№186 слайд
Содержание слайда: <font>
HTML5 не поддерживает!
face
<font face="arial">текст</font>
serif
sans-serif
cursive
fantasy
monospace
Size Размер шрифта можно указывать как абсолютной величиной, например, size="4", так и относительной, например, size="+1", size="-1"
color
№187 слайд
Содержание слайда: Эквивалент CSS
<p style="color:#cc00ff; font-family:'Courier New', Courier, monospace; font-size:large">а это
<span style="color:#ff0000; font-family:Georgia, 'Times New Roman', Times, serif; font-size:xx-large;">отформатированный
</span> текст
</p>
<p>
<font color="#cc00ff" face="courier new, courier, monospace" size="4">а это
<span>
<font face="georgia, times new roman, times, serif" color="#ff0000" size="6" >отформатированный
</font> текст
</span>
</font>
</p>
№188 слайд
Содержание слайда: <div>, <span>
aling HTML5 не поддерживает!
<body>
Text before
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<London is the capital city of England. It is the <span style="color:#FF0">most populous city</span> in the United … inhabitants.</p>
<p>Standing … Londinium.</p>
</div>
Text after
</body>
№189 слайд
Содержание слайда: Блочная верстка
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
div.container { width: 100%; border: 1px solid gray; background:#eee;}
header, footer { padding: 1em; color: white; background-color: black; clear: left; text-align: center;}
header { background-color: black;}
footer {background: #aaa;}
nav {float: left; margin: 0; padding: 0;}
nav ul {list-style-type: none; padding: 0; margin:0; width:150px; margin: 0; overflow: hidden; background-color: #666;}
nav ul a { text-decoration: none; display: block; color: #0FF; text-align: center; padding: 2px; text-decoration: none; height:30px; padding-top:14px; }
article { margin-left: 150px; border-left: 1px solid gray; padding: 1em; overflow: hidden; border: 1px solid gray; background:white; }
li a:hover { background-color: #999; }
</style></head><body>
<div class="container">
<header>
<img src="images/рога и копыта.png" alt="логотип" width="184" height="82" style="float:left;"><h1>Рога и копыта</h1>
</header>
<nav>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Каталог</a></li>
<li><a href="#">О нас</a></li>
</ul>
</nav>
<article>
<h1 id="home">Контора "Рога и копыта" заботится о Вас каждый день</h1>
<p>Мы … рога!</p>
</article>
<footer>Copyright © Бендер Остап Ибрагимович</footer>
</div>
</body>
№190 слайд
Содержание слайда:
№191 слайд
Содержание слайда: <iframe>
<body>
<iframe src="https://www.tut.by/" height="400" width="400" style="border:2px solid grey;" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
</body>
№192 слайд
Содержание слайда: ( )
Символ неразрывного пробела ( )
Мир<br>
опять
<br>
цветами оброс,<br>
у мира<br>
весенний вид.
№193 слайд
Содержание слайда: Специальные символы
№194 слайд
Содержание слайда: Диакритические знаки
№195 слайд
Содержание слайда: Вопросы?
№196 слайд
Содержание слайда: Спасибо за внимание
Скачать все slide презентации HTML - Hyper Text Markup Language язык гипертекстовой разметки одним архивом:
