Лабораторная работа № 23
Тема: МЕТОДЫИ СРЕДСТВА СОЗДАНИЯ И СОПРОВОЖДЕНИЯ САЙТА.
Цель работы: Знакомство с общими положениями создания WEB-страниц и базовыми тегами языка HTML.
1) Ознакомиться Н. Угринович и др. «Практикум по информатике и информационным технологиям», глава 8, п. 8.1, 8.2.
2) Теоретические сведения
HTML — это теговый язык разметки документов. Элементы — это структуры, которые описывают отдельные составляющие HTML-документа. Элемент состоит из трех частей: начального тега, содержимого и конечного тега. Тег — это специальный текст, заключенный в угловые скобки "<" и ">". Конечный тег имеет то же имя, что начальный тег, но начинается с косой черты "/". Атрибуты элемента определяют его свойства. Значение атрибута может быть заключено в одинарные или двойные кавычки. Порядок следования атрибутов в теге не важен. Атрибут действует от открывающего тега, в котором он задан, до закрывающего, или только внутри тега, если тег не имеет парного.
Базисные теги | |||
Тип документа | <HTML></HTML> | Начало и конец файла | атрибуты |
Имя документа | <TITLE></TITLE> | Должно быть в заголовке | |
Заголовок | <HEAD></HEAD> | Описание документа | |
Тело | <BODY></BODY> | Содержимое страницы |
Оформление тела Веб-страницы
Атрибут | Действие | Значения атрибута |
BACKGROUND="URL" | Фоновая картинка | *.jpg, *.gif,.png, графический файл расположен в одной папке с Вашим документом |
BGCOLOR="цвет " | Цвет фона | |
TEXT=”color” | Цвет текста | |
LEFTMARGIN="40" | Определяет ширину левого и правого полей документа | Пикселы |
MARGINWIDTH="40" | Определяет ширину верхнего и нижнего полей документа | Пикселы |
Таблица цветов НТМL
pink | Розовый | blue | синий |
cyan | оттенок бирюзового | teal | ярко-голубой |
orange | Оранжевый | gray | серый |
brown | Коричневый | yellow | желтый |
fuchsia | ярко-фиолетовый | olive | оливковый |
aqua | Бирюзовый | purple | фиолетовый |
silver | светло-серый | red | красный |
black | Черный | green | зеленый |
3) Практическая часть
Задание 1.
1. Создание простейшей Веб-страницы:
Создайте стандартный текстовый файл.
Откройте его редактором "Блокнот".
Сначала напечатайте основные теги:
<HTML>
<HEAD>
<TITLE>Добро пожаловать!!!</TITLE>
</HEAD>
<BODY> Здравствуйте!!!
</BODY>
</HTML>
Сохраните документ с расширением *.htm.
2. Создайте веб-страницу с оформленным фоном и текстом.
HTML-код будет выглядеть следующим образом:
<HTML>
<BODY BACKGROUND="paint1.bmp" BGCOLOR="red" TEXT="cian" LEFTMARGIN="40" MARGINWIDTH="40">
...
Текст документа (5-6 предложений на любую тему).
...
</BODY>
</HTML>
Сохраните документ с расширением *.htm.
3. Самостоятельно создайте две веб-страницы с разными фонами и цветами текстов (5-6 предложений).
Для того, чтобы отформатировать текст, который будет располагаться на вашей веб-странице, необходимо воспользоваться следующими тегами:
Форматирование | ||
Заголовки | <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> |
Задание 2. Форматирование текста.
1. На базе первой простейшей Веб-страницы создайте текстовый документ, имеющий следующее оформление:
Устройства компьютера (заголовок 1)
Внешние ( заголовок 2)
Принтер, сканер, монитор, клавиатура. (размер - 8, цвет синий, шрифт 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. Самостоятельно создайте Веб-страницу, на которой будет изображен текст в следующем виде:
Методика освоения новых программ
Знакомство с примерами, шаблонами и образцами документов.
Для того, чтобы оценить возможности новой программы, лучше всего воспользоваться уже имеющимися образцами документов, созданных с её помощью.
Эксперименты с пробными документами.
Цель эксперимента – проверка действия команд редактирования.
Важнейшую роль в оформлении страницы играют иллюстрации.
Для размещения рисунков в документе служит одиночный тег <IMG>, который должен обязательно содержать атрибут SCR=, значение которого составляет адрес файла изображения.
Изображение переносится на страницу с сохранением размеров. Нужные размеры рисунка можно задать с помощью атрибутов WIDTH= (ширина) и HEIGHT= (высота).
Альтернативный текст – словесное описание изображения задаётся при помощи атрибута ALT=.
Для создания гиперссылки в документе используются теги <A> и </A>. Текст ссылки помещается между этими тегами. Для того, чтобы указать адрес, на который указывает ссылка, необходим атрибут HERF=. Некоторые гиперссылки могут указывать на определённое место внутри страницы (якоря). Для него является обязательным атрибут NAME=. Значением этого атрибута является имя якоря, которое может состоять только из латинских букв и цифр и не должно содержать пробелов.
В качестве гиперссылки можно использовать изображения. Для этого теги разметки изображения должны быть помещены между тегами гиперссылок.
Задание 3.
В своей папке создайте 2 документа в программе Блокнот, на основе которого можно сделать Веб-страницу. (Сделайте заголовок, тело).
В папку скопируйте две картинки (большую для фона и маленькую) и одну анимацию, переименуйте их соответственно paint1.gif, paint2.gif, anim.gif. (Расширения должны быть соответствующими вашим изображениям).
На основе первого документа сделайте страницу, содержащую все скопированные вами изображения. Код для разметки Веб-страницы будет следующим:
<html>
<head>
<title> ИЗОБРАЖЕНИЕ1 </title>
</head >
<body background=paint1.jpg>
<img src=paint2.gif>
<img src=anim.gif>
</body>
</html>
Сохраните этот документ под именем document1.
Второй документ должен содержать ссылку на этот документ, при нажатии на которую появится список. Код тела этой веб-страницы должен иметь вид:
<body>
<A HREF=”document1.htm”>
Ссылка
</A>
</body>
Самостоятельно постройте две Веб-страницы. Первая должна содержать 5-6 предложений, касающихся темы изображений, 3 картинки, 2 анимации и небольшой пояснительный текст. Вторая – гиперссылку на первый документ.