Практические работы по информатике Димитровой О.И - HTML

ПРАКТИЧЕСКАЯ РАБОТА №1

Цель работы: Научиться создавать Web-страницы.

Задачи работы:

Познакомиться с языком HTML.
Овладеть техникой создания Web-страниц.

Обеспечивающие средства: Сборник описаний практических работ; операционная система Windows XP, программа Internet Explorer; программа «Блокнот», персональный компьютер.

Требования к отчету: Итоги практической работы представить в виде файла lab1.html на диске.

Технология работы:

1.Создайте папку «Сайт» в папке «Мои документы». Откройте программу «Блокнот» в качестве простого инструмента для создания веб-страниц. Блокнот — это несложный текстовый редактор, используемый для создания простых документов. Наиболее часто программа «Блокнот» используется для просмотра и редактирования текстовых (TXT) файлов, для создания файлов веб-страниц (HTML). Программа «Блокнот» поддерживает только основное форматирование, поэтому случайное сохранение специального форматирования в документах, в которых должен остаться чистый текст, исключено. Это особенно полезно при создании HTML-документов для веб-страниц, так как особые знаки или другое форматирование могут не отображаться на опубликованных веб-страницах. Все документы HTML имеют одну и ту же структуру, определяемую фиксированным набором тегов структуры.

Документ HTML всегда начинается с тега <HTML> и заканчивается закрывающим тегом </HTML>.

Внутри документа выделяются два основных раздела: раздел заголовков и тело документа, идущие друг за другом.

Основное содержание размещается в теле документа, которое ограничивается парным тегом <BODY>. Простейший правильный документ HTML, содержащий все теги, определяющие структуру, имеет вид:

<HTML>

<HEAD> <TITLE> Заголовок документа </TITLE ></HEAD>

<BODY>

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

</BODY>

</HTML>

Задание:

2.Создайте Web-страницу, в которой должны присутствовать цветной текст, список, рисунок, таблица, используя стандартную программу Блокнот, используя примеры приведенной ниже таблицы.

Запустите Internet Explorer.

Откройте созданный файл.

Теги и примеры их оформления

Пояснения

<HTML>

<HEAD><TITLE>Курсовая работа</TITLE></HEAD>

<BODY>

Раздел заголовков содержит информацию, описывающую документ в целом, и ограничивается тегами <HEAD>

</HEAD>. Раздел заголовков должен содержать общий заголовок документа, ограниченный парным тегом <TITLE>

<P><FONT SIZE=”14”FACE=”ARIAL”COLOR=”RED”> Содержание </FONT>

Обычный абзац начинается с тега <P>

Тег <FONT> управляет параметрами шрифта, содержит атрибуты COLOR= цвет текста (например, “GREEN”, “RED”, и т.д.), FACE= гарнитура шрифта или имя шрифта (например, ARIAL и т.д.), SIZE= размер шрифта.

<H1> Введение </H1>

<H1> 1. Использование информационных технологий при решении экономических задач

</H1> 1.1 Классификация ИТ

<H2>

Язык HTML поддерживает 6 уровней заголовков от <H1> до <H6>

Текст до ссылки.

Ссылка. </A>

Гипертекстовая ссылка определяется парным тегом <A>. Обязательным является HREF= (знак равенства показывает, что необходимо задать значение этого атрибута, т.е. адрес документа, на который указывается ссылка)

<IMG SRC= “picture.gif”

ALINE=”MIDDLE”>.

Вставка графического элемента (используется только два формата –GIF, JPEG). Для подготовки изображения можно использовать PAINT. Для вставки рисунка используется текстовый элемент, задаваемый непарным тегом <IMG> с обязательным атрибутом SRC=, задающим адрес файла с изображением. Атрибут ALINE= режим взаимодействия изображения с текстом (BOT-TOM – рисунок выше текста, MIDDLE – рисунок в середине текста,LEFT – левее, а RIGHT – правее текста).

</BODY>

</HTML>

<HTML>

<HEAD> <TITLE> Заголовок документа </TITLE></HEAD>

<BODY>

<P> Содержание

<UL>

<LI> <A HREF= “vvedenie.htm”> Введение

</A>

<OL>

<LI>Использование информационных технологий при решении экономических задач

<LI>Решение конкретной экономической задачи с использованием Excel

</OL>

Списки

Упорядоченные (нумерованные) списки создаются при помощи парных тегов <OL>, маркированные списки при помощи <UL>.

Эти списки могут содержать только элементы списка, определяемые парным тегом <LI>. Закрывающий тег </LI> можно опускать. Например, Содержание документа можно оформлять списком и использовать гиперссылки.

<LI><A HREF=”conclusion.htm”> Заключение</A>

</UL>

<BODY>

</HTML>

Содержание

Введение

1. Использование информационных технологий при решении экономических задач

2. Решение конкретной экономической задачи с использованием Excel

Заключение

<HTML>

<HEAD><TITLE> Заголовок документа

</TITLE></HEAD>

<BODY>

<TABLE>

<CAPTION>Таблица №1 </CAPTION>

<TH> Ф.И.О.<TH> Адрес

<TR><TD> Панова И.И.

<TD>Мира 6-21

<TR><TD> Мишина В.П.

<TD>Победы 47-154

<TR><TD> Новикова Е.Н.

<TD>Московская 23-4

</TABLE>

</BODY>

</HTML>

Таблица в языке HTML задается парным тегом <TABLE>. Заголовок таблицы определяется парным тегом <CAPTION>, строки таблицы задаются при помощи тегов <TR>. Ячейки в заголовках столбцов -парным тегом <TH>. Обычные ячейки - <TD>. Закрывающиеся теги можно опускать.

Таблица №1

Ф.И.О.	Адрес
Панова И.И.	Мира 6,21
Мишина В.П.	Победы 47,154
Новикова Е.Н.	Московская 23-4

3.Сохранить файл как lab1.txt в блокноте и как lab1.html для просмотра в браузере.