чернобай т., гайдай ю
TRANSCRIPT
<!DOCTYPE html><HTML><HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"><TITLE>Пример Web-страницы</TITLE></HEAD><BODY><H1>Справочник по HTML</H1><P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном!Здесь вы сможете найти информацию обо всех интернет-технологиях,применяемых при создании Web-страниц. В частности, о языке<STRONG>HTML</STRONG>.</P></BODY></HTML>
Структура документу
<!DOCTYPE html><html><head><meta charset="utf-8"><title>footer</title></head><body><header><h1>Персональный сайт </h1></header><article><h2>Добро пожаловать!</h2><p>Рады приветствовать вас на своем сайте.</p></article><footer>Copyright 4курс "Информатики"</footer></body></html>
Семантичні теги HTML5.0
<!DOCTYPE HTML><html><body><dialog>
<dt>Прохожий</dt><dd>— Доброе утро!</dd>
<dt>Пассажир</dt><dd>— Доброе...</dd>
<dt>Прохожий</dt><dd>— Как ваши дела?</dd>
<dt>Пассажир</dt><dd>— Простите, а вы
кто?</dd></dialog></body></html>
Використання тегу dialog
Виділення фрагменту тексту тегом mark
<html><body><p>В <b>HTML 5</b> введены <mark>новые теги</mark>.</p></body></html>
<html><head> <title>Таблица</title><table><tr><td>1 - ячейка </td><td>2 - ячейка</td></tr><tr><td>3 - ячейка</td><td>4 - ячейка</td></tr></table></head></html>
Структура таблиці
Підключення CSS до HTML
<html><head>
<title>Подключение CSS к HTML</title><link rel="stylesheet" type="text/css"
href="style.css"></head><body>
<h1>Это заголовок первого уровня</h1>Здесь просто текст<h2>Это заголовок второго уровня</h2>Здесь просто текст
</body></html>
<html><head>
<title>Подключение CSS к HTML</title><style type="text/css">h1{
color:red}</style>
</head><body>
<h1>Этот заголовок будет красного цвета</h1>
<h1>Этот заголовок будет красного цвета</h1>
<h1>Этот заголовок будет красного цвета</h1>
</body></html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег А</title>
</head>
<body>
<p><a href="http://informatica.pdpu.edu.ua/file.php?file=/114/html5/Burtseva/xTXSaGIXP8w.jpg">Посмотрите на мою фотографию!</a></p>
<p><a href="http://www.avazun.ru/photoeditor/">Как сделать такое же фото?</a></p>
</body>
</html>
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"><title>Тег BASE</title><base target="_blank"></head><body><p><a href="http://informatica.pdpu.edu.ua/file.php?file=/114/html5/Burtseva/xTXSaGIXP8w.jpg">Ссылка</a></p></body></html>
Атрибуты
<!DOCTYPE html><html> <head> <meta charset="utf-8"><title>nav</title></head><body><header><h1>Чебурашка и крокодил Гена</h1></header><nav><a href="http://informatica.pdpu.edu.ua/file.php?file=/114/html5/Burtseva/cheburashka.jpg">Чебурашка</a>| <a href="http://informatica.pdpu.edu.ua/file.php?file=/114/html5/Burtseva/gena.jpg">Гена</a> |<a href="http://informatica.pdpu.edu.ua/file.php?file=/114/html5/Burtseva/shapokljak.jpg">Шапокляк</a>| <a href="http://informatica.pdpu.edu.ua/file.php?file=/114/html5/Burtseva/lariska.jpg">Лариска</a></nav><article><h2>Добро пожаловать!</h2></article></body></html>
Тег <nav>
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Traditional Left Nav</title><style> #leftNav { border-right: 1px grey dashed; width: 9.5em; margin-left: -2em; } #leftNavul { list-style: none; } #leftNavul ul li { margin-left: -1.5em; } </style> </head> <body> <nav id="leftNav"> <ul id="outerUL"> <li id="home"><a href="home.html">Home</a></li> <li id="portfolio"><a href="portfolio.html">Portfolio</a> <ul id="portfolioUL"> <li id="thumbnails"><a href="thumbnails.html">Thumbnails</a></li> <li id="slideShow"><a href="slideShow.html">Slide Show</a></li> </ul> </li> <li id="tagCloud"><a href="tagCloud.html">Tag Cloud</a></li> </ul> </nav> <section> <!-- Page content here. --> </section> </body> </html>
Элемент article
<!DOCTYPE HTML><html><body><article>Заходится, значится, Медвед у дворец,и гаварит: "Хто крайний за каровами?".</article>
</body></html>
<!DOCTYPE HTML><html><body><article><header>Место для Имен, Ников, Псевдонимов,Самолюбования и Саморекламы.</header><p>Здесь обычно пишут мудрые мыслидля всеобщего обозрения и восхищения автором.</p>
<footer>Место для меню, ссылок, посылок, надчылок, всылок,изсылок, засылок, усылок, ксылок и разных сылок.а еще тут можно написать когда это всё было сотворено.</footer></article></body></html>
<!DOCTYPE HTML><html><body><article><header>Фима не мог долго дозвониться тете Соне<time pubdate datetime="2012-12-10T08:38+03:00"></time></header><p>Буду в Одессе, не зайду в гости к тете Соне.</p><footer><a href="#">Дать Ответ в Ответ</a></footer></article><article><header>Фима<time pubdate datetime="2012-12-10T07:55+03:00"></time></header><p>Обидно, очень обидно!!!</p><footer><a href="#">Дать Ответ в Ответ</a></footer><article><header>Тетя Соня<time pubdate datetime="2012-12-12T13:02+01:00"></time></header><p>Фима! Фима!Стыдно должно быть, очень стыдно.</p><footer><a href="#">Дать Ответ в Ответ</a></footer></article></article></body></html>
Пример использования элемента articleдля отображения сообщений блога и комментариев
Примеры использования элемента aside
<!DOCTYPE HTML><html><body><aside>Левая панель</aside><article>Содержимое</article><aside>Правая панель</aside></body></html>
<!DOCTYPE HTML><html><body><article>
<h3>Четверостишья про котенка</h3><p>Мама шторы в квартире завесила… </p><p>Но не страшно мне здесь одному.. </p><p>Я играю с котенком - мне весело - </p><p>Я - Герасим, котенок - Муму…</p>
<aside><p>Ремарка: Герасим и Муму - герои рассказа Ивана Сергеевича Тургенева «Муму».</p></aside>
</article>
</body></html>
Примеры использования элемента aside №2
<html><body><form action='html5.php'>Введите email: <input name='email' type='email' value='Не email' /><input type='submit' value='Отправить' /></form></body></html>
Поле для ввода e-mail
Подсказки в формах
<html><body><form action='html5.php'><input name="s" placeholder=" Искать в Google"><input type="submit" value=" Искать "> </form></body></html>
Календарь на HTML 5
<html><body><form action='html5.php'>Выберите дату: <input type='date' /><br />Выберите время: <input type='time' /><br />Выберите глобальное время и дату: <input type='datetime' /><br />Выберите местное время и дату: <input type='datetime-local' /><br />Выберите месяц: <input type='month' /><br/>Выберите неделю: <input type='week' /></form></body></html>
Выбор цвета
<html><body><form action='html5.php'>Выберите цвет: <input name='color' type='color' /><input type='submit' value='Отправить' /></form></body></html>
Поле для ввода веб-адреса
<html><body><form action='html5.php'>Введите url: <input name='url' type='url' value='Не url' /><input type='submit' value='Отправить' /></form></body></html>
Поле для ввода чисел
<html><body><form action='html5.php'><input type="number"min="1982"max="1994"step="1"value="1982"></form></body></html>
Рисование прямоугольников с помощью элемента Canvas.
<!doctype html><html><head><meta charset=win1251><title>Canvas</title><script type="text/javascript">
function loader(){var canvas = document.getElementById ('canvas');var canvas1=canvas.getContext('2d');var r=document.getElementById("mytext1");var g=document.getElementById("mytext2");var b=document.getElementById("mytext3");var a=document.getElementById("mytext4");canvas1.fillStyle = "rgba("+ r.value + ","+ g.value + "," + b.value + "," + a.value + ")";
var x1=document.getElementById("mytext5");var y1=document.getElementById("mytext6");var x2=document.getElementById("mytext7");var y2=document.getElementById("mytext8");
x1=parseInt(x1.value);y1=parseInt(y1.value);x2=parseInt(x2.value);y2=parseInt(y2.value);
canvas1.fillRect (x1, y1, x2, y2);}
</script></head><body ><h1> Пример применения элемента управления Canvas </h1><canvas id="canvas" width="300"height="200">
</canvas><form><table><tr><td>
<p><h3> Установка цвета</h3></p><p>R <input type='text' id='mytext1' /></p><p>G <input type='text' id='mytext2' /></p><p>B <input type='text' id='mytext3' /></p><p>A <input type='text' id='mytext4' /></p></td><td></td><td>
<p><h3> Координаты</h3></p><p> x1 <input type='text' id='mytext5' /></p><p> y1 <input type='text' id='mytext6' /></p><p> x2 <input type='text' id='mytext7' /></p><p> y2 <input type='text' id='mytext8' /></p></td></tr></table>
<p><input type="button" value="Нарисовать" onclick="loader()"></p></form>
</body></html>
