Задание и порядок выполнения работы

Теоретические сведения

Web-страница - текстовый документ, содержащий описание страницы на языке HTML – (Hyper Text Mark –Up Language - язык разметки гипертекста).

HTML (от английского Hyper Text Markup Language) - это язык разметки, предназначенный для создания документов web. Файлы документов, подготовленные с помощью HTML, имеют расширение .htm или.html.

Команды языка HTML задаются между специальными символами <... >, и называются тегами.

Теги позволяют управлять представлением информации на экране при отображении HTML-документов специальными программами - браузерами. (Например, Microsoft Internet Explorer или Netscape Navigator)

Тег - это инструкция браузеру, указывающая способ отображения текста.

Структура HTML-страницы:

<HTML>

<HEAD>

описание заголовка

</HEAD>

<BODY>

текст документа

</BODY>

</HTML>

Основные тэги HTML

Назначение	Формат
Структура Web-страницы
Начало и конец страницы	<HTML> </HTML>
Описание страницы, в том числе ее имя	<HEAD> </HEAD>
Имя страницы	<TITLE> </TITLE>
Содержание страницы	<BODY> </BODY>
Форматирование текста
Заголовок (уровни от 1 до 6)	<H?> </H?>
Абзац	<P> </P>
Абзац с выравниванием	<H? ALIGN=”left”> </H?> <H? ALIGN=”center”> </H?> <H? ALIGN=”right”> </H?>
Перевод строки	<BR>
Горизонтальный разделитель	<HR>
Выравнивание по центру	<CENTER> </CENTER>
Нумерованный список	<OL> <LI></LI> </OL>
Ненумерованный список	<UL> <LI></LI> </UL>
Вставка гиперссылки
ссылка на другую страницу	<A HREF=”*”></A>
Вставка рисунка
вставка изображения	<IMG SRC=”*”>

Форматирование шрифта
Жирный	<B> </B>
Курсив	<I> </I>
Подчеркнутый	<U> </U>
Верхний индекс	<SUB> </SUB>
Нижний индекс	<SUP> </SUP>
Размер шрифта (от 1 до 7)	<FONT SIZE=?> </FONT>
Цвет шрифта (задается названием цвета или его 16-ричным кодом)	<FONT COLOR=”#RRGGBB”> </FONT>
Гарнитура шрифта	<FONT FACE=”Arial”> </FONT>
Работа с таблицей
вставить таблицу	<TABLE></TABLE>
ширина таблицы	<TABLE </TABLE>
заглавие таблицы	<CAPTION></CAPTION>
строка таблицы	<TR></TR>
заголовки столбцов таблицы	<TH></TH>
ячейка таблицы	<TD></TD>
Работа со списком
<dl></dl>	Создает список определений.
<dt>	Определяет каждый из терминов списка
<dd>	Описывает каждое определение

Таблица задается командой <TABLE>…</TABLE>. Внутри этих тегов задаются строки командами <TR>…</TR>, внутри строк задаются ячейки командами <TD>…</TD>. Таким образом, по строкам задается вся структура таблицы:

<TABLE>
<TR>	<TD> </TD>	<TD> </TD>	</TR>
<TR>	<TD> </TD>	<TD> </TD>	</TR>
<TR>	<TD> </TD>	<TD> </TD>	</TR>
</TABLE>

Атрибуты для тегов <TABLE>, <TR>, <TD>:
border=число - толщина линии
bordercolor= цвет - цвет линии
bgcolor=цвет - цвет заливки фона
Атрибут (или %) – ширина таблицы или ячейки в пикселях

Гипертекст – документ, содержащий ссылки на другие документы.

Гиперссылка – это выделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. Гипертекст связывает множество документов с помощью гиперссылок.

Гиперссылка с одного файла на другой.

Для того, чтобы браузер загрузил в свое окно новый html-документ (файл), нужно записать ссылку при помощи тега <A> с атрибутом href=имя_файла:

<A href=имя_файла>текст или рисунок</A> Задание перехода к

новому документу.

Рисунок как гиперссылка:

Текст как гиперссылка:

<A href=имя_файла>текст</A>

Задание и порядок выполнения работы

С помощью текстового редактора Блокнот и языка HTML создать сайт «Компьютер».

Сайт кроме титульной страницы «Компьютер» должен содержать:

· страницу «Программы», содержащую классификацию программного обеспечения;

· страницу «Словарь», содержащую словарь компьютерных терминов;

· страницу «Об авторе», содержащую информацию о создателе сайта.

Для этого:

1. Открыть окно текстового редактора Блокнот.

2. Создать титульную Web-страницу «Компьютер», прописав теги:

<HTML>

<HEAD>

<ТIТLЕ>Компьютер</ТIТLЕ>

</HEAD>

<BODY>

Все о компьютере

</BODY>

</HTML>

3. Сохранить файл под именем index.htm в папке сайта на своем сетевом диске.

4. Загрузить этот файл в окно браузера для просмотра, щелкнув на нем дважды левой кнопкой мыши.

5. В окне приложения Блокнот в контейнер <BODY> вставить последовательность тегов и просмотреть результат в браузере:

<BODY>

Все о компьютере

Все о компьютере

</Н1>

</FONT>

<HR>

<P ALIGN="left"> Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</Р>

Терминологический словарь познакомит Вас с компьютерными терминами.

</P>

</BODY>

6. «Скачать» изображение компьютера из Интернета и сохранить его в файле с именем computer в папке сайта.