close

Вход

Забыли?

вход по аккаунту

?

lab 5 (1)

код для вставкиСкачать
 Лабораторная работа №5
HTML5.
Задание 1.
Создать документ, в котором с помощью элемента div и css сформировать документа "Благодарственная грамота".
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Лабораторная 5.</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="logo"><img src="logotip.jpg" width="200px" height="200px" alt="logotip"></div>
<div class="orgName" align="left">ФЭТ АСОИУ</div>
<div class="wrap"></div>
<div class="letterHead" align="center">Благодарственное письмо</div>
<div class="letterText">Натюрморт (фр. nature morte - "мёртвая природа") - изображение неодушевлённых предметов в изобразительном искусстве, в отличие от портретной, жанровой, исторической и пейзажной тематики.</div>
<div class="date" align="right">Дата _________________</div>
<div class="sign" align="right">Руководитель _____________________________________________________ Фамилия И.О.</div>
</body>
</html>
На рисунке 1 изображен web-документ, получившийся в результате выполнения задания.
Рисунок 1 - Получившийся web-документ "Благодарственная грамота".
Задание 2.
Создать документ аналогичный документу в задании 1, но с использованием элементов структурирования языка HTML5.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Лабораторная 5.</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<figure class="logo"><img src="logotip.jpg" width="200px" height="200px" alt="logotip"></figure>
<header class="orgName" align="left">ФЭТ АСОИУ</header>
<div class="wrap"></div>
<div class="letterHead" align="center">Благодарственное письмо</div>
<article class="letterText">Натюрморт (фр. nature morte - "мёртвая природа") - изображение неодушевлённых предметов в изобразительном искусстве, в отличие от портретной, жанровой, исторической и пейзажной тематики.</article>
<footer align="right">
<p><time>Дата _________________</time></p>
<p>Руководитель _____________________________________________________ Фамилия И.О.</p>
</footer>
</body>
</html>
На рисунке 2 изображен web-документ с использованием элементов структурирования HTML5.
Рисунок 2 - Web-документ "Благодарственная грамота", созданный с использованием элементов структурирования HTML5.
Файл CSS:
.logo
{
width: 200px;
height: 200px;
float: left;
}
.orgName
{
font: normal small-caps 20px/20px fantasy;
margin-left: 300px;
}
.wrap
{
clear: both;
width: 100%;
}
.letterHead
{
margin: 40px 0px 20px 200px;
font: normal 80px/80px fantasy;
}
.letterText
{
margin: 20px 0px 100px 20px;
font: normal 20px/20px fantasy;
}
footer
{
margin: 20px 100px 20px 0%;
font: normal 20px/20px fantasy;
}
div
{
background-color: #fff;
} Задание 3.
Создать группу страниц связанных между собой и использующих элементы структурирования HTML5.
Код основной страницы.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Лабораторная 5.</title>
<link rel="stylesheet" type="text/css" href="style_z3.css" />
</head>
<body>
<header>
<h1>Художники</h1>
</header>
<nav>
<hr />
<a href="lab5_3.html">Домой</a> <hr />
<a href="lab5_3_dali.html">Сальвадор Дали</a> <hr />
<a href="lab5_3_santi.html">Рафаэль Санти</a> <hr />
<a href="lab5_3_davinchi.html">Леонардо Да Винчи</a>
<hr />
</nav>
<section>
<p>Сальвадор Дали - испанский живописец, график, скульптор, режиссёр, писатель. Один из самых известных представителей сюрреализма.</p>
<p>Рафаэль Санти - великий итальянский живописец, график и архитектор, представитель умбрийской школы.</p>
<p>Леонардо Да Винчи - итальянский художник (живописец, скульптор, архитектор) и учёный (анатом, естествоиспытатель), изобретатель, писатель, один из крупнейших представителей искусства Высокого Возрождения, яркий пример "универсального человека" (лат. homo universalis).</p>
</section>
<footer>
<time>17.12.2012</time>
</footer>
</body>
</html>
Коды страниц с подробным описанием. <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Лабораторная 5.</title>
<link rel="stylesheet" type="text/css" href="style_z3.css" />
</head>
<body>
<header>
<hgroup>
<h1>Художники</h1>
<h2>Сальвадор Дали</h2>
<hgroup>
</header>
<nav>
<hr />
<a href="lab5_3.html">Главная</a> <hr />
<a href="lab5_3_dali.html">Сальвадор Дали</a>
<hr />
<a href="lab5_3_santi.html">Рафаэль Санти</a> <hr />
<a href="lab5_3_davinchi.html">Леонардо Да Винчи</a>
<hr />
</nav>
<figure>
<img src="dali.jpg" alt="Сальвадор Дали">
<figcaption>Сальвадор Дали</figcaption>
</figure>
<section>
<p>Сальвадор Дали родился 11 мая 1904 года в городе Фигерасе, провинция Жирона, в семье зажиточного нотариуса. По национальности был каталонцем, воспринимал себя в этом качестве и настаивал на этой своей особенности. Имел сестру и старшего брата (12 октября 1901 - 1 августа 1903), который умер от менингита. Позднее в возрасте 5 лет, на его могиле, родители сказали Сальвадору, что он - реинкарнация своего старшего брата.</p>
<p>Обучаться изобразительному искусству начал в муниципальной художественной школе. С 1914 по 1918 год воспитывался в Академии братьев ордена маристов в Фигерасе. Одним из друзей детства был будущий футболист ФК "Барселона" Хосеп Самитьер. В 1916 году, с семьей Рамона Пишо, отправился на каникулы в город Кадакес, где познакомился с современным искусством.</p>
</section>
<aside>
<p>После смерти жены Дали переживает глубокую депрессию. Сами его картины упрощаются, и на них долгое время преобладает мотив скорби (вариации на тему "Пьета"). Болезнь Паркинсона также мешает Дали рисовать. Его самые последние работы ("Петушиные бои") представляют собой простые закорючки, в которых угадываются тела персонажей - последние попытки самовыражения несчастного больного человека.</p>
</aside>
<footer>
<time>17.12.2012</time>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Лабораторная 5.</title>
<link rel="stylesheet" type="text/css" href="style_z3.css" />
</head>
<body>
<header>
<hgroup>
<h1>Художники</h1>
<h2>Леонардо Да Винчи</h2>
<hgroup>
</header>
<nav>
<hr />
<a href="lab5_3.html">Главная</a> <hr />
<a href="lab5_3_dali.html">Сальвадор Дали</a> <hr />
<a href="lab5_3_santi.html">Рафаэль Санти</a> <hr />
<a href="lab5_3_davinchi.html">Леонардо Да Винчи</a>
<hr />
</nav>
<figure>
<img src="davinchi.jpg" alt="Леонардо Да Винчи">
<figcaption>Леонардо Да Винчи</figcaption>
</figure>
<section>
<p>Леонардо да Винчи родился 15 апреля 1452 года в селении Анкиано близ Винчи: недалеко от Флоренции в "три часа ночи" то есть в 22:30 по современному отсчёту времени. Отмечено в дневнике деда Леонардо, Антонио да Винчи (1372--1468) (дословный перевод): "В субботу, в три часа ночи 15 апреля родился мой внук, сын моего сына Пьеро.</p>
<p>Мальчика назвали Леонардо. Его крестил отец Пьеро ди Бартоломео". Его родителями были 25-летний нотариус Пьеро (1427--1504) и его возлюбленная, крестьянка Катерина. Первые годы жизни Леонардо провёл вместе с матерью. Его отец вскоре женился на богатой и знатной девушке, но этот брак оказался бездетным, и Пьеро забрал своего трёхлетнего сына на воспитание. Разлученный с матерью Леонардо всю жизнь пытался воссоздать её образ в своих шедеврах.</p>
</section>
<aside>
<p>Леонардо не имел фамилии в современном смысле; "да Винчи" означает просто "(родом) из городка Винчи". Полное его имя - итал. Leonardo di ser Piero da Vinci, то есть "Леонардо, сын господина Пьеро из Винчи".</p>
</aside>
<footer>
<time>17.12.2012</time>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Лабораторная 5.</title>
<link rel="stylesheet" type="text/css" href="style_z3.css" />
</head>
<body>
<header>
<hgroup>
<h1>Художники</h1>
<h2>Рафаэль Санти</h2>
<hgroup>
</header>
<nav>
<hr />
<a href="lab5_3.html">Главная</a> <hr />
<a href="lab5_3_dali.html">Сальвадор Дали</a> <hr />
<a href="lab5_3_santi.html">Рафаэль Санти</a> <hr />
<a href="lab5_3_davinchi.html">Леонардо Да Винчи</a>
<hr />
</nav>
<figure>
<img src="santi.jpg" alt="Рафаэль Санти">
<figcaption>Рафаэль Санти</figcaption>
</figure>
<section>
<p>Сын живописца Джованни Санти прошёл первоначальную художественную выучку в Урбино у своего отца Джованни Санти, но уже в юном возрасте оказался в мастерской выдающегося художника Пьетро Перуджино. Именно художественный язык и образность картин Перуджино с их тяготением к симметричной уравновешенной композиции, ясностью пространственного решения и мягкостью в решении колорита и освещения оказали первостепенное влияние на манеру молодого Рафаэля.</p>
<p>Ранние произведения ("Мадонна Конестабиле", ок. 1502-1503) проникнуты изяществом, мягким лиризмом. Земное бытие человека, гармонию духовных и физических сил прославил в росписях станц (комнат) Ватикана (1509-1517 года), достигнув безупречного чувства меры, ритма, пропорций, благозвучия колорита, единства фигур и величественных архитектурных фонов.</p>
</section>
<aside>
<p>После смерти Рафаэля, его современник Бембо написал следующую эпитафию: "Здесь лежит Рафаэль, кем опасалась Природа стать побеждённой навек и умереть вместе с ним..."</p>
</aside>
<footer>
<time>17.12.2012</time>
</footer>
</body>
</html>
На рисунках 3 и 4 изображены основная страница и страница с подробным описанием, соответственно.
Рисунок 3 - Web-документ, представляющий собой основную страницу группы страниц.
Рисунок 4 - Web-документ, представляющий собой страницу с подробным описанием.
Файл CSS:
nav
{
text-align: center;
border-bottom: solid 2px;
padding: 0 0 20px 0;
}
header
{
text-align: center;
}
footer
{
clear: both;
border-top: solid 2px;
text-align: right;
font: 14px serif;
padding: 20px 50px 20px 0;
}
figure
{
display: block;
float: left;
}
aside
{
font-size:14px;
font-style: italic;
}
Задание 4.
Создать автономный ресурс с описанием и примерами новых элементов форм.
Код одной из страниц с описанием нового элемента форм в HTML5.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Лабораторная 5.</title>
<link rel="stylesheet" type="text/css" href="style_z3.css" />
</head>
<body>
<header>
<hgroup>
<h1>Новые элементы форм в HTML 5</h1>
<hgroup>
</header>
<section>
<hr />
<p> &ltinput type="number"&gt Создаёт специальный тип поля для ввода числа, в большинстве поддерживаемых браузеров оно появляется как текстовое поле с счетчиком который позвозяет увеличивать и уменьшать его значение:</p>
<p> <input type="number"> </p>
<hr />
<p> &ltinput type="range"&gt Элемент управления ползунок, позволяющий выбирать значения из диапазона значений:</p>
<p> <input type="range" min="0" max="10"></p>
<hr />
<p> &ltinput type="date"&gt и &ltinput type="time"&gt Поля для выбора даты и времени:</p>
<p><input type="date"></p>
<p><input type="time"></p>
<hr />
<p>&ltinput type="color&gt" Этот тип элемента ввода представляет элемент выбора текста:</p>
<p><input type="color"></p>
<hr />
<p>&ltinput type="search"&gt Этот тип элемента ввода является полем для поиска:</p>
<p><input type="search"></p>
<hr />
<p>&ltinput type="text" list="mydata"&gt Элемент выбора из исписка значений:</p>
<p><input type="text" list="mylist">
<datalist id="mylist">
<option> Сальвадор Дали</option>
<option> Рафаэль Санти </option>
<option> Леонардо Да Винчи </option>
</datalist></p>
<hr />
<p>&ltinput type="tel"&gt Элемент ввода телефона:</p>
<p><input type="tel"></p>
<hr />
<p>&ltinput type="e-mail"&gt Элемент ввода адреса электронной почты:</p>
<p><input type=e-mail"></p>
<hr />
<p>&ltinput type="url"&gt Элемент ввода URL:
<p><input type="url"></p>
<hr />
</section>
<aside>
<p>Поля ввода телефона, адреса электронной почты и адреса URL отображаются браузерами как обычные поля ввода. Но явное указание типа играет важную роль в проверке формы на стороне клиента.</p>
</aside>
</body>
</html>
На рисунке 5 изображен получившийся web-документ Рисунок 5 - Web-документ с примером нового элемента форм.
Документ
Категория
Рефераты
Просмотров
46
Размер файла
652 Кб
Теги
lab
1/--страниц
Пожаловаться на содержимое документа