Создание HTML-страницы

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ

УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ

«КАЛИНИНГРАДСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНИЧЕКИЙ УНИВЕРСИТЕТ»

Кафедра систем управления и вычислительной техники

 

 

 

 

 

 

 

 

 

 

Лабораторная работа № 1

Дисциплина: «Сетевые информационные технологии и программирование»

Тема: «Создание HTML-страницы»

 

 

 

 

 

 

 

 

 

Работу проверил:   к.т.н., доцент Петрикин В. А. Дата: _______________ Подпись: ____________

Работу выполнила:   студентка группы 12-ВИЭ-1 Исаева А. С.   Дата: _______________ Подпись: ____________

 

 

 

 

 

 

 

 

Калининград

2014

 

 

Задание на лабораторную работу.

Создать HTML-страницу «Резюме», содержащую гиперссылку на изображение.

HTML – это теговый язык разметки документов. Чтобы браузер понимал, что имеет дело не с простым текстом, а с особым элементом, который задает его форматирование, применяются теги . 

Наша страница «Резюме» в режиме отображения HTML выглядит так:

<table border="0" cellpadding="0" cellspacing="0" style="color: rgb(26, 26, 26); font-family: Arial, sans-serif; line-height: normal;" width="100%">

<tbody>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Имя:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;"><b>Анжела</b></p>

</td>

</tr>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Контакты:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">89520582309</p>

</td>

</tr>

<tr>

<td colspan="2">&nbsp;

<h2 style="padding: 10px 0px 5px; margin: 0px; font-size: 18px; color: rgb(255, 102, 0); letter-spacing: -1px;">Общая информация</h2>

 

<hr style="color: rgb(212, 228, 228); border-style: none; height: 1px; background-color: rgb(212, 228, 228);" /></td>

</tr>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Проживание:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;"><b>Калининград, Гурьевский р-н, п. Низовье</b></p>

</td>

</tr>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Место работы:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Калининград</p>

</td>

</tr>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Заработная плата:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;"><strong>По договоренности</strong></p>

</td>

</tr>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Занятость:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Сменный график</p>

</td>

</tr>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Образование:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Среднее специальное</p>

</td>

</tr>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Опыт работы:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">3 года</p>

</td>

</tr>

<tr>

<td>&nbsp;

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Гражданство:</p>

</td>

<td>&nbsp;

<p style="padding: 5px 0px; margin: 0px;">Россия</p>

 </td>

</tr>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Пол:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Женский</p>

</td>

</tr>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Возраст:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">22&nbsp;год &nbsp;&nbsp;</p>

</td>

</tr>

<tr>

<td width="27%">

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Семейное положение:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Состою в браке, детей нет</p>

</td>

</tr>

<tr>

<td colspan="2">&nbsp;

<h2 style="padding: 10px 0px 5px; margin: 0px; font-size: 18px; color: rgb(255, 102, 0); letter-spacing: -1px;">Образование</h2>

 

<hr style="color: rgb(212, 228, 228); border-style: none; height: 1px; background-color: rgb(212, 228, 228);" /></td>

</tr>

<tr>

<td valign="top">

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Образование:</p>

 </td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Среднее специальное</p>

 </td>

</tr>

<tr>

<td valign="top">

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Окончание:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">2012 год</p>

 </td>

</tr>

<tr>

<td valign="top">

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Учебное заведение:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">БИТ</p>

 </td>

</tr>

<tr>

<td valign="top">

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Факультет:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Технический</p>

 </td>

</tr>

<tr>

<td valign="top">

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Специальность:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Информационная безопасность</p>

</td>

</tr>

<tr>

<td colspan="2">&nbsp;

<h2 style="padding: 10px 0px 5px; margin: 0px; font-size: 18px; color: rgb(255, 102, 0); letter-spacing: -1px;">Дополнительная информация</h2>

 

<hr style="color: rgb(212, 228, 228); border-style: none; height: 1px; background-color: rgb(212, 228, 228);" /></td>

</tr>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Иностранные языки:</p>

 </td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Английский (Технический)</p>

</td>

</tr>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Водительские права:</p>

 </td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Категории B</p>

 </td>

</tr>

<tr>

<td>

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Владение компьютером:</p>

</td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Продвинутый пользователь</p>

 </td>

</tr>

<tr>

<td nowrap="nowrap" style="padding-right: 20px;">

 <p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Возможность командировок:</p>

 </td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Есть</p>

</td>

</tr>

<tr>

<td valign="top">

<p class="graytext" style="color: rgb(119, 153, 153); padding: 5px 0px; margin: 0px;">Навыки и умения:</p>

 </td>

<td>

<p style="padding: 5px 0px; margin: 0px;">Обслуживание и ремонт ПК, установка программного обеспечения, операционных систем, настройка сети интернет, администрирование сайтов.<br />

 Большое желание к обучению.<br />

 Имею опыт работы в продажах.</p>

 </td>

</tr>

<a href="E:\1.jpg" style="color: rgb(0, 179, 194); font-family: Verdana, Arial, sans-serif; font-size: 13px; font-weight: bold; background-color: rgb(255, 255, 255);">фото</a></p>

 </tbody>

</table> 

Отображение страницы  в браузере:

 

 

 

 

Гиперссылка на изображение:

 

<a href="E:\1.jpg" style="color: rgb(0, 179, 194); font-family: Verdana, Arial, sans-serif; font-size: 13px; font-weight: bold; background-color: rgb(255, 255, 255);">фото</a></p>