чернобай т., гайдай ю.

<!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> Семантичні теги HTML5.0
<header>
<h1>Персональный сайт </h1>
</header>
<article>
<h2>Добро пожаловать!</h2>
<p>Рады приветствовать вас на своем
сайте.</p>
</article>
<footer>
Copyright 4курс "Информатики"
</footer>
</body>
</html>

<!DOCTYPE HTML>
<html> Використання тегу dialog
<body>
<dialog>
<dt>Прохожий</dt>
<dd>— Доброе утро!</dd>
<dt>Пассажир</dt>
<dd>— Доброе...</dd>
<dt>Прохожий</dt>
<dd>— Как ваши дела?</dd>
<dt>Пассажир</dt>
<dd>— Простите, а вы
кто?</dd>
</dialog>
</body>
</html>

Виділення фрагменту тексту тегом 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>
</tr>
</table>
</head>
</html>

<html>
<head>
<title>Подключение CSS к HTML</title>
<link rel="stylesheet" type="text/css" Підключення CSS до HTML
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>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>


<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>
<title>Тег BASE</title>
<base target="_blank">
</head>
<body>
<p><a
href="http://informatica.pdpu.edu.ua/file.ph
p?file=/114/html5/Burtseva/xTXSaGIXP8w.jp
g">Ссылка</a></p>
</body>
</html>

<!DOCTYPE html>
<html> Тег <nav>
<head>
<title>nav</title>
</head>
<body>
<header>
<h1>Чебурашка и крокодил Гена</h1>
</header>
<nav>
<a
href="http://informatica.pdpu.edu.ua/file.php?file=/114/html5/Burtseva/che
burashka.jpg">Чебурашка</a>
| <a
href="http://informatica.pdpu.edu.ua/file.php?file=/114/html5/Burtseva/gen
a.jpg">Гена</a> |
<a
href="http://informatica.pdpu.edu.ua/file.php?file=/114/html5/Burtseva/sha
pokljak.jpg">Шапокляк</a>
| <a
href="http://informatica.pdpu.edu.ua/file.php?file=/114/html5/Burtseva/laris
ka.jpg">Лариска</a></nav>
<article>
<h2>Добро пожаловать!</h2>
</article>
</body>
</html>

<!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; }
#leftNav
ul { list-style: none; } #leftNav
ul 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>  </section>
</body>
</html>

Элемент article

<!DOCTYPE HTML>
<html>
<body>
<article>
Заходится, значится, Медвед у дворец,
и гаварит: "Хто крайний за каровами?".
</article>

</body>
</html>

<!DOCTYPE HTML>
<footer>
<html>
Место для
<body>
меню, ссылок, посылок, надчылок, всылок,
<article>
изсылок, засылок, усылок, ксылок и разных
<header>
сылок.
Место для Имен, Ников, Псевдонимов,
а еще тут можно написать когда это всё
Самолюбования и Саморекламы.
было сотворено.
</header>
</footer>
<p>
</article>
Здесь обычно пишут мудрые мысли
</body>
для всеобщего обозрения и восхищения
</html>
автором.
</p>

<!DOCTYPE HTML>
<html>
<body>
<article>
<header>
Фима не мог долго дозвониться тете Соне
<time pubdate datetime="2012-12-10T08:38+03:00"></time>
</header>
Пример использования элемента article
<p>
Буду в Одессе, не зайду в гости к тете Соне.
для отображения сообщений блога и
</p> комментариев
<footer>
<a href="#">Дать Ответ в Ответ</a>
</footer>
</article>
<article>
<header>
Фима
</header>
<p>
Обидно, очень обидно!!!
</p>
<footer>
</footer>
<article>
<header>
Тетя Соня
</header>
<p>
Фима! Фима!
Стыдно должно быть, очень стыдно.
</p>
<footer>
</footer>
</article>
</article>
</body>
</html>

Примеры использования элемента aside
<!DOCTYPE HTML>
<html>
<body>
<aside>
Левая панель
</aside>
<article>
Содержимое
</article>
<aside>
Правая панель
</aside>
</body>
</html>

Примеры использования элемента aside №2

<!DOCTYPE HTML>
<html>
<body>
<article>

<h3>Четверостишья про котенка</h3>
<p>Мама шторы в квартире завесила… </p>
<p>Но не страшно мне здесь одному.. </p>
<p>Я играю с котенком - мне весело - </p>
<p>Я - Герасим, котенок - Муму…</p>

<aside>
<p>Ремарка: Герасим и Муму - герои рассказа
Ивана Сергеевича Тургенева «Муму».</p>
</aside>

</article>

</body>
</html>

<html>
<body>
<form action='html5.php'>
Введите email: <input name='email' type='email'
value='Не email' /> Поле для ввода e-mail
<input type='submit' value='Отправить' />
</form>
</body>
</html>

<html>
<body>
Выберите дату: <input type='date' /><br />
Выберите время: <input type='time' /><br /> Календарь на HTML 5
Выберите глобальное время и дату: <input
type='datetime' /><br />
Выберите местное время и дату: <input
type='datetime-local' /><br />
Выберите месяц: <input type='month' /><br
/>
Выберите неделю: <input type='week' />
</form>
</body>
</html>

<html>
<body>
Выбор цвета
Выберите цвет: <input name='color'
type='color' />
</form>
</body>
</html>

<html>
<body>
Введите url: <input name='url' type='url'
value='Не url' /> Поле для ввода веб-адреса
</form>
</body>
</html>

<!doctype html> Рисование прямоугольников с помощью
<html>
элемента Canvas.
<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> <p><h3> Координаты</h3></p>
<table> <p> x1 <input type='text' id='mytext5' /></p>
<tr> <p> y1 <input type='text' id='mytext6' /></p>
<td> <p> x2 <input type='text' id='mytext7' /></p>
<p> y2 <input type='text' id='mytext8' /></p>
<p><h3> Установка цвета</h3></p> </td>
<p>R <input type='text' id='mytext1' /></p> </tr>
<p>G <input type='text' id='mytext2' /></p> </table>
<p>B <input type='text' id='mytext3' /></p>
<p>A <input type='text' id='mytext4' /></p> <p><input type="button" value="Нарисовать"
</td> onclick="loader()"></p>
<td> </form>
</td>
<td> </body>
</html>

чернобай т., гайдай ю.

чернобай т., гайдай ю.

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (14)

Destaque

Destaque (8)

Semelhante a чернобай т., гайдай ю.

Semelhante a чернобай т., гайдай ю. (20)

чернобай т., гайдай ю.