Практическая работа №6. Создание простейшей веб-страницы

Теоретическая часть:

HTML — это теговый язык разметки документов. Элементы — это структуры, которые описывают отдельные составляющие HTML-документа. Элемент состоит из трех частей: начального тега, содержимого и конечного тега. Тег — это специальный текст, заключенный в угловые скобки "<" и ">". Конечный тег имеет то же имя, что начальный тег, но начинается с косой черты "/". Атрибуты элемента определяют его свойства. Значение атрибута может быть заключено в одинарные или двойные кавычки. Порядок следования атрибутов в теге не важен. Атрибут действует от открывающего тега, в котором он задан, до закрывающего, или только внутри тега, если тег не имеет парного.

Базисные теги

Тип документа <HTML></HTML> Начало и конец файла

Имя документа <TITLE></TITLE> Должно быть в заголовке

Заголовок <HEAD></HEAD> Описание документа

Тело <BODY></BODY> Содержимое страницы

Оформление тела Веб-страницы

Атрибут	Действие	Значения атрибута
BACKGROUND="URL"	Фоновая картинка	.jpg, .gif, .png. графический файл расположен в одной папке с Вашим документом
BGCOLOR="цвет "	Цвет фона
TEXT=”color”	Цвет текста
LEFTMARGIN="40"	Определяет ширину левого и правого полей документа	Пикселы
MARGINWIDTH="40"	Определяет ширину верхнего и нижнего полей документа	Пикселы

Таблица цветов НТМL

pink	Розовый	fuchsia	ярко-фиолетовый
blue	синий	olive	оливковый
cyan	оттенок бирюзового	aqua	Бирюзовый
teal	ярко-голубой	purple	фиолетовый
orange	Оранжевый	silver	светло-серый
gray	серый	red	красный
brown	Коричневый	black	Черный
yellow	желтый	green	зеленый

Практическая часть

Создание простейшей Веб-страницы:

1. Создайте стандартный текстовый файл.

2. Откройте его редактором "Блокнот".

3. Сначала напечатайте основные теги:

<HTML>

<HEAD>

<TITLE>Добро пожаловать !!!</TITLE>

</HEAD>

<BODY> Здравствуйте!!!

</BODY>

</HTML>

4. Сохраните документ с расширением *.htm.

5. Создайте веб-страницу с оформленным фоном и текстом.

HTML-код будет выглядеть следующим образом:

<HTML>

...

Текст документа (5-6 предложений на любую тему).

...

</BODY>

</HTML>

6. Сохраните документ с расширением *.htm.

7. Самостоятельно создайте две веб-страницы с разными фонами и цветами текстов (5-6 предложений).

Практическая работа №7. Форматирование текста на Веб-странице.

Теоретическая часть:

Для того, чтобы отформатировать текст, который будет располагаться на вашей веб-странице, необходимо воспользоваться следующими тегами:

Заголовки <H*></H*>

* - от 1 до 6 - Стандарт определяет 6 уровней заголовков

Конец строки <TR>

Начало абзаца <P>

Выравнивание <H* > </H*>

*-ALIGN=LEFT|CENTER|RIGHT - По левому краю, по правому, по центру

Цитата <BLOCKQUOTE></BLOCKQUOTE> - Обычно выделяется отступом

Шрифт Жирный <B></B>

Курсив <I></I>

Размер шрифта <FONT SIZE=?></FONT> От 1 до 7

Цвет шрифта <FONT COLOR="#$$$$$$"></FONT>

Практическая часть

1. На базе первой простейшей Веб-страницы создайте текстовый документ, имеющий следующее оформление:

Устройства компьютера (заголовок 1)

Внешние (заголовок 2)

Принтер, сканер, монитор, клавиатура. (размер -2, цвет синий, шрифт Arial)

Внутренние (заголовок 2)

Винчестер, материнская плата, видеокарта.

<body>

<h1> Устройство компьютера </h1>

<h2> Внешние </h2>

<P> <font size = 2 face=”arial” color=blue> Принтер, сканер, монитор, клавиатура </font>

<h2> Внутренние </h2>

<p> <b> винчестер </b> <i> материнская плата </i> <U> видеокарта </U>

</body>

2. Самостоятельно создайте Веб-страницу, на которой будет изображен текст в следующем виде: