2017-11-01
538
«Создание Web – страницы»
Цель работы: Научиться создавать Web-страницы.
Задачи работы:
1. Познакомиться с языком HTML.
2. Овладеть техникой создания 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-страницу, в которой должны присутствовать цветной текст, список, рисунок, таблица, используя стандартную программу Блокнот, используя примеры приведенной ниже таблицы.
Запустите браузер.
Откройте созданный файл.
| Теги и примеры их оформления | Пояснения | ||||||||
| <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 HREF=”first.htm”> Ссылка. </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
|
3.Сохранить файл как lab1.txt в блокноте и как lab1.html для просмотра в браузере.
|
|
|
