Файл: Статический html-документ.docx

Скачать файл
Заказать решение

ВУЗ: Новосибирский государственный технический университет

Категория: Решение задач

Дисциплина: Программирование

Добавлен: 15.02.2019

Просмотров: 1035

Скачиваний: 41

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

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

ВЫСШЕГО ОБРАЗОВАНИЯ

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


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









ОТЧЕТ

ПО ЛАБОРАТОРНОЙ РАБОТЕ №2

«Статический html-документ»

ПО ДИСЦИПЛИНЕ «WEB-ПРОГРАММИРОВАНИЕ»











Факультет: АВТФ Преподаватель: Новицкая Ю.В.


Группа: АВТ-412


Студенты:

Евтушенко Никита Сергеевич

Лазаревич Михаил Михайлович








Новосибирск 2017г.

Цель работы:

Изучить основы языка разметки гипертекста HTML 4. Вариант 6.

Задание:

1) Выполнить задание по варианту. (Вариант 6)

2)Создать html-документ, в разметке документа использовать:

  • тег для определения кодировки кириллицы <meta>;

  • тег комментария <!-- -->;

  • теги форматирования текста: <p>, <br>, <div>, <span>, <hr>, <h1> <h6>, <b>, <i>, <u>, <sub>, <sup>, <pre>, <tt>, продемонстрировать отличия тегов <p> и <br>, <div> и <span>;

  • тег для разметки изображения <img>;

  • тег для разметки гиперссылок <a>, разметить ссылки на другой документ, в пределах размечаемого документа, на email;

  • с помощью параметров тега <body> изменить цвет фона документа, цвет текста, цвета непосещенных и посещенных ссылок документа, используя цвета из web-безопасной (гарантированной) палитры;

  • теги для разметки списка, таблицы, формы в соответствии с вариантом.

Порядок выполнения лабораторной работы:

  1. Запустить текстовый редактор.

  2. Разметить html-документ в соответствии с заданным вариантом. Для справки о тегах и их атрибутах можно использовать справочник, расположенный по адресу http://htmlbook.ru.

  3. Протестировать созданный документ, по крайней мере, в двух браузерах, отметить различия в отображении документа.

html-разметка созданного документа:

Часть 1:

<!DOCTYPE html>

<html lang="ru">


<head>

<meta charset="utf-8" />

<title>Лаб 2</title>

</head>

<body>

<ul type="circle">

<li>Зима</li>

<li>Весна</li>

<ol type="A" start="24">

<li>Март</li>

<li>Апрель</li>

<li>Май</li>

</ol>

<li>Лето</li>

<li>Осень</li>

</ul>


<table border="1" width="25%" height="100px" cellpadding="5">

<tr>

<th rowspan="3"></th>

<th></th>

<th></th>

<th></th>

<th rowspan="3"></th>

</tr>

<tr>


<th colspan="3"></th>


</tr>

<tr>

<th></th>

<th></th>

<th></th>

</tr>

</table>

<br>


<input type="text" maxlength="25" size="40" value="Новосибирск">


<p><input name="Omsk" type="radio" value="nedzen"> Омск</p>

<p><input name="Nov" type="radio" value="dzen"> Новосибирск</p>

<p><input name="Tom" type="radio" value="pdzen" checked> Томск</p>


<input type="password" maxlength="25" size="40" value="password">


<form enctype="multipart/form-data" method="post">

<p><input type="file" name="f"></p>

<p><input type="submit" value="Отправить">

<input type="reset" value="Сбросить"></p>

</form>

</body>


Часть 2:

<!DOCTYPE html>

<html lang="ru">


<head>

<meta charset="utf-8" />

<title>Пример тегов</title>

</head>

<body bgcolor="grey" link="orange" text="blue" vlink="white">

<a name="top"></a>

<p>Пример тега p</p> <!--Это комментарий-->

<br>

<div>Текст выделяется как блок.Текст выделяется как блок.Текст выделяется как блок.Текст выделяется как блок.Текст выделяется как блок.Текст выделяется как блок.Текст выделяется как блок.Текст выделяется как блок.Текст выделяется как блок.</div>

<span>Выделяется только текст.Выделяется только текст.Выделяется только текст.Выделяется только текст.Выделяется только текст.Выделяется только текст.Выделяется только текст.Выделяется только текст.Выделяется только текст.Выделяется только текст.</span>

<hr>

<h1>Заголовок</h1>

<h2>Заголовок</h2>

<h3>Заголовок</h3>

<h4>Заголовок</h4>

<h5>Заголовок</h5>

<h6>Заголовок</h6>


<b>Это тег b</b>


<i>Это тег i</i>

<u>Это тег u</u>

<sub>Это тег sub</sub>

<sup>Это тег sup</sup>

<pre>Это тег pre ||// ||</pre>

<tt>Это тег tt ||// ||</tt> <br>


<img src="1.jpg"> <br>


<a href="#top">Up</a>

<a href="Web 2.html">Это ссылка на документ</a>

<a href="mailto:volcharrrrrra@yandex.ru">Это почта</a>

</body>

</html>


Скриншоты html-документа для различных браузеров:

Часть 1:




Часть 2:


Выводы по работе:

Были изучены основы языка разметки html, а также его возможности.


Смотрите также файлы