4 HTML Hypertext Markup Language HTML image s
- Slides: 110
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="flag. jpg" align="left"> left top right bottom (по умолчанию) middle
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="nature. ogg" autostart="false" показывать элементы управления controls="controls" width="425" height="350"> размеры </audio>
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="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="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