HTML - Hyper Text Markup Language язык гипертекстовой разметки - презентация, доклад, проект скачать

Нажмите для полного просмотра!

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №1

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №2

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №3

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №4

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №5

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №6

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №7

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №8

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №9

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №10

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №11

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №12

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №13

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №14

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №15

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №16

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №17

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №18

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №19

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №20

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №21

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №22

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №23

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №24

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №25

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №26

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №27

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №28

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №29

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №30

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №31

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №32

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №33

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №34

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №35

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №36

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №37

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №38

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №39

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №40

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №41

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №42

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №43

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №44

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №45

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №46

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №47

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №48

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №49

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №50

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №51

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №52

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №53

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №54

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №55

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №56

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №57

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №58

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №59

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №60

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №61

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №62

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №63

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №64

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №65

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №66

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №67

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №68

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №69

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №70

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №71

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №72

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №73

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №74

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №75

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №76

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №77

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №78

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №79

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №80

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №81

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №82

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №83

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №84

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №85

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №86

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №87

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №88

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №89

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №90

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №91

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №92

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №93

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №94

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №95

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №96

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №97

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №98

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №99

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №100

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №101

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №102

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №103

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №104

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №105

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №106

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №107

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №108

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №109

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №110

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №111

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №112

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №113

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №114

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №115

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №116

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №117

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №118

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №119

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №120

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №121

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №122

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №123

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №124

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №125

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №126

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №127

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №128

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №129

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №130

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №131

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №132

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №133

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №134

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №135

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №136

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №137

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №138

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №139

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №140

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №141

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №142

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №143

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №144

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №145

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №146

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №147

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №148

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №149

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №150

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №151

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №152

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №153

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №154

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №155

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №156

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №157

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №158

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №159

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №160

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №161

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №162

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №163

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №164

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №165

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №166

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №167

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №168

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №169

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №170

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №171

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №172

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №173

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №174

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №175

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №176

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №177

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №178

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №179

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №180

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №181

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №182

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №183

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №184

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №185

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №186

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №187

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №188

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №189

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №190

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №191

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №192

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №193

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №194

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №195

HTML - Hyper Text Markup Language язык гипертекстовой разметки, слайд №196

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему HTML - Hyper Text Markup Language язык гипертекстовой разметки. Доклад-сообщение содержит 196 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 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>$

Описание слайда:

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

Описание слайда:

Слайд 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="&copy 2001 MySoft Corp.">

Слайд 54

Описание слайда:

Слайд 55

Описание слайда:

<META> <meta name="robots" content="index, nofollow"> noindex – не допускает индексирование документа; nofollow – не допускает посещение ссылок, имеющихся в документе; index – разрешает индексирование документа; follow – разрешает посещение ссылок, имеющихся в документе; all – равносильно заданию index и follow; none – равносильно заданию noindex и nofollow.

Слайд 56

Описание слайда:

Слайд 57

Описание слайда:

Слайд 58

Описание слайда:

<META> <meta http-equiv="cache-control" content="no-cache"> атрибут content может принимать следующие значения: no-cache – запретить кэширование; private – запретить кэширование proxy-сервером; no-store ‑разрешить кэширование proxy-сервером и запретить кэширование браузером; public – разрешить любое кэширование.

Слайд 59

Описание слайда:

Слайд 60

Описание слайда:

Слайд 61

Описание слайда:

Слайд 62

Описание слайда:

Слайд 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>$

Описание слайда:

Глобальный атрибут 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>$

Описание слайда:

<!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); } function drop(ev) { var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); 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

Описание слайда:

Слайд 93

Описание слайда:

Слайд 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">  </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>  </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

Описание слайда:

Слайд 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

Описание слайда:

Слайд 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

Описание слайда:

Слайд 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>