Листинг 4. Листинг Text.Htm
StudBilet.htm
Рис. 5. Скриншот StudBilet.htm
Данный документ выполнен по стандарту HTML 5 и без применения таблиц.
<html>
<head>
<title>Студенческий</title>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
background-color: #ffffff;
}
.title {
border-bottom: 1px #000 solid;
color: #00f;
position: relative;
width: 400px;
text-align: center;
}
.st {
font-weight: bold;
font-size: 16px;
text-align: center;
margin-left: -120px;
}
.num {
border-bottom: 1px #000 solid;
font-style: italic;
font-weight: normal;
}
.name {
margin-left: 120px;
font-size: 14px;
}
.photo {
position: relative;
float: left;
}
</style>
</head>
<body>
<div style="width: 500px">
<p class="title">
Московский государственный
</p>
<p class="title">
институт радиотехники
</p>
<p class="title">
электроники и автоматики
</p>
<p class="st">Студенческий билет №<span class="num">061220</span></p>
<div class="photo"><img src="photo.jpg" width=150 height=200></div>
<p class="name">Фамилия <span class="num">Соловьёв</span></p>
<p class="name">Имя <span class="num">Алексей</span></p>
<p class="name">Отчество <span class="num">Николаевич</span></p>
<p class="name">Факультет <span class="num">ИТ</span></p>
<p class="name">Дата выдачи билета <span class="num">28.08.2006</span></p>
</div>
</body>
</html>
Листинг 5. Листинг StudBilet.Htm
ZachKnizhka.htm
Рис. 6. Скриншот ZachKnizhka.htm
<HTML>
<HEAD>
<TITLE> МОЯ ЗАЧЕТНАЯ КНИЖКА </title></head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.title {
border-bottom: 1px #000 solid;
color: #00f;
position: relative;
width: 400px;
text-align: center;
}
</style>
<BODY>
<A href="A:\ЛабРаб1_2.htm">Возврат</a>
<A name="top"></a>
<CENTER>
<FONT size=14 color="Red"> <U><B>МОЯ ЗАЧЕТНАЯ КНИЖКА</b></u></font>
</center>
<HR color="silver" SIZE=15 ALIGN=left>
<p class="title">Московский государственный</p>
<p class="title">институт радиотехники</p>
<p class="title">электроники и автоматики</p>
<table>
<tr><td><B>Фамилия, имя, отчество</b></td><td>Соловьёв Алексей Николаевич</td></tr>
<tr><td><B>Факультет</b></td><td> ИТ</td></tr>
<tr><td><B>Специальность</b></td><td>230201</td></tr>
<tr><td colspan=2><B>Поступил</b>________,<B>переведен</b>_____ <B>на</b>1<B>курс из</b>_____</td></tr>
<tr><td colspan=2>пр.№1253 от 12.08.2006</td></tr>
<tr><td><B>Проректор по учебной и научной работе</b></td><td>_________</td></tr>
<tr><td><B>Декан факультета</b></td><td>__________</td></tr>
<tr><td><B>Дата выдачи зачетной книжки</b></td><td> __<u>28.08.2006</u>__.</td></tr>
</table>
</body>
</HTML>
Листинг 6. Листинг ZachKnizhka.Htm
Style.htm
Рис. 7. Скриншот Style.htm
<HTML>
<HEAD>
<TITLE>Использование стилей</title>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
H1 {border-width: 16; border: groove; text-align: center; color: #4142e9}
H2 {color: #864cd5; font-style: italic}
CODE {font-family: Tahoma, Helvetica; background-color: #f9cf38}
P {text-indent: 10; color: # 9c0bb; font-size: 11pt}
P CODE {font-weight: bold; color: #c4a0cc; font-size: 10pt}
</style>
</head>
<BODY bgcolor="FFFF00">
<A href="A:\ЛабРаб1_2.htm">Возврат</a>
<P> </p>
<H1>Исользование стилей</h1>
<H2>Соловьёв Алексей Николаевич, г. Обнинск, ул. Энгельса, д. 1, кв. 82, (48439)5-27-93</h2>
<H3>МРНЦ Минздравсоцразвития РФ инженер (48439)9-71-57</h3>
<HR>
Текст, не отформатированный никаким стилем (т.е. формат по умолчанию).<BR>
<P style="text-indent: 0;font-size: 14pt; font-style: italic; color: #32522e"> Для этого
абзаца использован собственный (inline) стиль.</p>
<P>Это стиль, назначенный в элементе STYLE, для абзацев P всей страницы. В частности,
выбран отступ первой строки.</p>
<CODE background="red"> Свойства элемента CODE можно переопределить, например, задать фон</code>
<P>
<P><CODE> А этот стиль действует, если элемент CODE вложен в элемент P </code></p>
<HR>
</body>
</html>