4 HTML Hypertext Markup Language HTML image s

4 Что такое веб-страница? HTML = Hypertext Markup Language (язык разметки гипертекста) ! HTML

9 Как создать веб-страницу? Любой текстовый редактор (Блокнот и т. п. ) 2×ЛКМ Текстовые

26 Как записать гиперссылки от show. htm? main index. htm goods. htm food. htm

28 Куда переход? <a href="example. html">. . . </a> <a href=". . /example. html">.

32 Оформление текстов программ i. Min : = 1; for i: =2 to n

36 Подключение стилевого файла qq. html Multipurpose Internet Mail Extension <html> тип данных MIME

39 Стили: размеры, выравнивание: left center right justify 20 px цвет фона p {

40 Рамка, поля, отступы рамка отступы снаружи отступы внутри 40 px 5 px solid

41 Рамка, поля и отступы border-top margin-top padding-top border-right border-left margin-left Lorem ipsum dolor

45 Фоновый рисунок p. hallo { background: white url(images/grad. jpg); } <p class="hallo"> Привет,

46 Фоновый рисунок без повторения qq@mail. ru p. email { background: url(letter. gif) no-repeat;

51 Форматы рисунков SVG (Scalable Vector Graphics, масштабируемые векторные изображения) <svg> <rect width="135" height="30"

53 Выравнивание <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="flag. jpg" align="left"> left top right bottom (по умолчанию) middle

54 Отступы <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="net. jpg" align="left"> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="net. jpg" align="left" hspace="10" vspace="10"> vspace (vertical

58 Фоновый рисунок body { background: url(grad. jpg); } если рисунка нет… body {

64 HTML 5 – тэг audio имя файла <audio src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="nature. ogg" autostart="false" показывать элементы

65 HTML 5 – тэг video <video src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="sail. ogv" controls="controls" autostart="false" width="425" height="350"> Ваш

72 Вложенные таблицы <table border="0" cellspacing=10> <tr><td> <table border="1"> <tr><td>Вася</td><td>Петя</td></tr> <tr><td>Маша</td><td>Даша</td></tr> </table> </td> <table

74 Размеры (через CSS) всей таблицы: table. spec { width: 60%; height: 300; }

75 Выравнивание всей таблицы: <table align="center">. . . </table> информации в ячейках: left, center,

76 Выравнивание (через CSS) <table class="ex" border="1"> <tr class="centop"> <td>По центру, по верхней границе</td>

77 Фон и цвет текста (через CSS) <table border="1" class="qq"> <tr class="spec"> <td>Привет!</td> <td

78 Отступы интервал между ячейками отступ внутри ячеек <table cellspacing = "10" cellpadding =

79 Отступы (через CSS) идентификатор – уникальное имя <table id="qq"> <tr> <td> 1 </td>

81 Что такое блок (div)? <div>. . . </div> <p> <table> <a> <img>. .

82 Рамка, поля и отступы border-top margin-top padding-top border-right border-left margin-left Lorem ipsum dolor

83 Стили для блоков <div class="info" id="result"> Ответ: 45. идентификатор </div> (уникальный!). info {

84 «Плавающий» блок <div class="picture"> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="dog. jpg" width="100" height="66"> <p>На природе</p> </div> div

87 «Живой» рисунок box_closed. gif box_opened. gif <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="box_closed. gif" on. Mouse. Over="this. src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src='box_opened.

90 Подключение Javascript-файла тип файла <head> <script type="text/javascript" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="test. js"></script>. . . </head> имя

92 HTML-файл <html> <head> <title>Скрытый блок</title> <script type="text/javascript" src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src="test. js"></script> <link rel="stylesheet" type="text/css «

94 Формы <form name="calc"> <input name="answer"> <input type="button" value="Готово" on. Click="check(); "> </form> Обработка

Slides: 110

Download presentation

4 Что такое веб-страница? HTML = Hypertext Markup Language (язык разметки гипертекста) ! HTML – это не язык программирования! запрос на каждый файл! image s sunset. jpg tree. jpg index. html Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis scelerisque metus, non hendrerit neque convallis placerat. Phasellus consequat convallis nisl, a volutpat quam posuere sed. Maecenas laoreet congue nibh, et euismod lectus varius sit amet. In tristique mattis leo, eget commodo ante egestas eget. Sed id purus quis ligula scelerisque fringilla. Suspendisse scelerisque, sapien id scelerisque imperdiet, tellus odio consequat nunc, eu fermentum diam lacus non urna. Praesent faucibus massa in risus sagittis a luctus justo aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent metus dolor, semper ut fermentum vel, imperdiet in risus. Nam a lectus lorem, dictum semper nulla. In eget ipsum non arcu aliquet lacinia. Morbi iaculis sodales metus, vel posuere orci vulputate vel. Nulla non felis sem, sagittis porttitor mi. Curabitur in tortor in nisi egestas cursus quis at sapien. Proin pulvinar, odio id lacinia suscipit, sem justo aliquam risus, nec suscipit enim felis at justo. Donec at nulla orci, suscipit auctor arcu. Donec tortor quis justo scelerisque cursus id et magna. media laugh. wav movie. flv

9 Как создать веб-страницу? Любой текстовый редактор (Блокнот и т. п. ) 2×ЛКМ Текстовые редакторы с подсветкой HTML-тэгов: Sublime Text (sublimetext. com) бесплатно! Note. Pad++ (notepad-plus. org) Bluefish (bluefish. openoffice. nl) HEFS (kpolyakov. spb. ru/prog/hefs. htm) Редакторы WYSIWYG = What You See Is What You Get Tiny. MCE (www. tinymce. com) бесплатно! Kompozer (kompozer. net) CKEditor (ckeditor. com) open. WYSIWYG (www. openwebware. com) Blue. Griffon (bluegriffon. org)

26 Как записать гиперссылки от show. htm? main index. htm goods. htm food. htm show. htm history hist. htm before. htm

28 Куда переход? <a href="example. html">. . . </a> <a href=". . /example. html">. . . </a> <a href=". . /new/old/example. html">. . . </a> <a href="example. html#resume">. . . </a> <a href="download/example. zip">. . . </a> <a href="mailto: john@yahoo. com">. . . </a>

32 Оформление текстов программ i. Min : = 1; for i: =2 to n do if a[i] < a[i. Min] then i. Min : = i; preformatted (уже отформатированный) <pre> i. Min : = 1; for i: =2 to n do if a[i] < a[i. Min] then i. Min : = i; </pre>

36 Подключение стилевого файла qq. html Multipurpose Internet Mail Extension <html> тип данных MIME таблица стилей <head> <title>Страница с файлом стилей</title> <link rel="stylesheet" type="text/css" href="test. css"> </head> <body> Привет, Вася! </body> </html> test. css body { color: white; background: #0000 E 0; }

39 Стили: размеры, выравнивание: left center right justify 20 px цвет фона p { background: #E 6 E 6 FF; ширина width: 80%; height: 100 px; высота text-align: left; text-indent: 20 px; абзацный } отступ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. 80% 100 px

40 Рамка, поля, отступы рамка отступы снаружи отступы внутри 40 px 5 px solid – сплошная dashed - штриховая dotted – точечная толщина p { background: #ccffcc; цвет border: 1 px solid green; margin: 0 40 px 20 px 40 px; padding: 5 px; сверху, справа, } снизу, слева со всех сторон Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. 20 px 40 px

41 Рамка, поля и отступы border-top margin-top padding-top border-right border-left margin-left Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc padding-left libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. padding-right padding-bottom margin-bottom border-bottom margin-right

45 Фоновый рисунок p. hallo { background: white url(images/grad. jpg); } <p class="hallo"> Привет, Вася! </p> Привет, Вася! p. hallo { background: url(grad. jpg) repeat-y; } Привет, Вася!

46 Фоновый рисунок без повторения qq@mail. ru p. email { background: url(letter. gif) no-repeat; padding-left: 20 px; } <p class="email"> <a href="mailto: qq@mail. ru">qq@mail. ru</a> </p> qq@mail. ru 20 px

51 Форматы рисунков SVG (Scalable Vector Graphics, масштабируемые векторные изображения) <svg> <rect width="135" height="30" x="0" y="10" stroke-width="1" stroke="rgb(0, 0, 0)" fill="rgb(255, 255)"/> <rect width="135" height="30" x="0" y="40" stroke-width="1" stroke="rgb(0, 0, 0)" fill="rgb(0, 0, 255)"/> <rect width="135" height="30" x="0" y="70" stroke-width="1" stroke="rgb(0, 0, 0)" fill="rgb(255, 0, 0)"/> </svg>

53 Выравнивание <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="flag. jpg" align="left"> left top right bottom (по умолчанию) middle

53 Выравнивание <img src="flag. jpg" align="left"> left top right bottom (по умолчанию) middle

54 Отступы <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="net. jpg" align="left"> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="net. jpg" align="left" hspace="10" vspace="10"> vspace (vertical

54 Отступы <img src="net. jpg" align="left"> <img src="net. jpg" align="left" hspace="10" vspace="10"> vspace (vertical space) hspace (horizontal space)

58 Фоновый рисунок body { background: url(grad. jpg); } если рисунка нет… body { background: url(grad. jpg) #EEE; } 'images/grad. jpg' '. . /images/grad. jpg‘ 'http: //www. vasya. ru/images/grad. jpg'

64 HTML 5 – тэг audio имя файла <audio src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="nature. ogg" autostart="false" показывать элементы

64 HTML 5 – тэг audio имя файла <audio src="nature. ogg" autostart="false" показывать элементы управления controls="controls" width="425" height="350"> размеры </audio>

65 HTML 5 – тэг video <video src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="sail. ogv" controls="controls" autostart="false" width="425" height="350"> Ваш

65 HTML 5 – тэг video <video src="sail. ogv" controls="controls" autostart="false" width="425" height="350"> Ваш браузер не поддерживает элемент video. </video> <video width="425" height="350" controls="controls"> <source src="start. mp 4" type='video/mp 4; codecs="avc 1. 42 E 01 E, mp 4 a. 40. 2"'> </video> <video width="425" height="350" controls="controls"> <source src="finish. webm" type='video/webm; codecs="vp 8, vorbis"'> </video>

72 Вложенные таблицы <table border="0" cellspacing=10> <tr><td> <table border="1"> <tr><td>Вася</td><td>Петя</td></tr> <tr><td>Маша</td><td>Даша</td></tr> </table> </td> <table border="1"> <tr><td>1</td><td>22</td></tr> <tr><td>333</td><td>4444</td></tr> </table>

74 Размеры (через CSS) всей таблицы: table. spec { width: 60%; height: 300; } строки: ячейки: <table class="spec">. . . </table> table. spec tr { height: 50 px; } table. spec td. qq { width: 25%; height: 50 px; }

75 Выравнивание всей таблицы: <table align="center">. . . </table> информации в ячейках: left, center, right <table border="1"> <tr align="center" valign="top"> <td width="120">по центру, по верхней границе</td> <td align="right" valign="middle" width="200">по правой границе, по середине</td> </tr> </table> top, middle, bottom

76 Выравнивание (через CSS) <table class="ex" border="1"> <tr class="centop"> <td>По центру, по верхней границе</td> <td class="rmid">По правой границе, по середине</td> </tr> table. ex tr. centop { </table> text-align: center; vertical-align: top; height: 100 px; } table. ex td. rmid { text-align: right; vertical-align: middle; width: 200 px; } left, center, right top, middle, bottom

77 Фон и цвет текста (через CSS) <table border="1" class="qq"> <tr class="spec"> <td>Привет!</td> <td class="r"></td> table. qq td { </tr> background: green; <tr> } цвет фона <td class="pic"> table. qq tr. spec td { Таблица background: blue; из двух строк</td> color: white; <td>и двух столбцов</td> } </tr> table. qq tr. spec td. r { </table> background: red; рисунок } table. qq td. pic { background: url("web. jpg"); }

78 Отступы интервал между ячейками отступ внутри ячеек <table cellspacing = "10" cellpadding = "10" bgcolor = blue> <tr bgcolor = white> <td width = "100">1</td> <td width = "100">2</td> </tr> </table> cellpadding cellspacing

79 Отступы (через CSS) идентификатор – уникальное имя <table id="qq"> <tr> <td> 1 </td> <td> 2 </td> </tr> </table> padding table#qq { background: blue; border-collapse: separate; border-spacing: 10 px; padding: 10 px; кроме IE 6 } #qq tr { background: white; } border-spacing

81 Что такое блок (div)? <div>. . . </div> <p> <table> <a> <img>. . . свойства блока: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. padding border margin

82 Рамка, поля и отступы border-top margin-top padding-top border-right border-left margin-left Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc padding-left libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. padding-right padding-bottom margin-bottom border-bottom margin-right

83 Стили для блоков <div class="info" id="result"> Ответ: 45. идентификатор </div> (уникальный!). info { margin: 5 px 10 px 20 px; padding: 3 px; } #result { background: #CCCCFF; border: 1 px solid blue; }

84 «Плавающий» блок <div class="picture"> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="dog. jpg" width="100" height="66"> <p>На природе</p> </div> div

84 «Плавающий» блок <div class="picture"> <img src="dog. jpg" width="100" height="66"> <p>На природе</p> </div> div . picture { float: left; margin: 5 px; }. picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; }

87 «Живой» рисунок box_closed. gif box_opened. gif <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src="box_closed. gif" on. Mouse. Over="this. src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20415%20289%22%3E%3C/svg%3E' data-src='box_opened.

87 «Живой» рисунок box_closed. gif box_opened. gif <img src="box_closed. gif" on. Mouse. Over="this. src='box_opened. gif'" on. Mouse. Out="this. src='box_closed. gif'"> свойство src этого объекта обработчик события (Javascript) this. src='box_opened. gif' вложенные кавычки

90 Подключение Javascript-файла тип файла <head> <script type="text/javascript" src="test. js"></script>. . . </head> имя файла

92 HTML-файл <html> <head> <title>Скрытый блок</title> <script type="text/javascript" src="test. js"></script> <link rel="stylesheet" type="text/css « href="test. css"> </head> <body> <a href=# on. Click="show('details'); return false; "> Показать детали</a> <div id="details" class="hidden"> Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др. </div> </body> </html> ? Как сделать два скрытых блока?

94 Формы <form name="calc"> <input name="answer"> <input type="button" value="Готово" on. Click="check(); "> </form> Обработка события «щелчок мышью» : function check() введённый текст { if ( calc. answer. value == "4" ) alert("Правильно!"); else alert("Неправильно!"); } В файл calc. js