Лабораторные работы № 1-3 по дисциплине «Информационные технологии»
Общее задание для лабораторных работ №1-3: разработать сайт в соответствии с выбранной Вами индивидуальной темой (собственная домашняя страница, сайт какой-либо вымышленной организации, небольшой интернет-магазин и т.д.).
Требования к сайту.
Структура сайта должна предусматривать не менее пяти страниц, из которых одна главная и четыре дочерних, и не менее трех уровней вложенности.
Страницы должны быть выполнены в одном стиле.
Для оформления фона предлагается использовать цвет фона или фоновый рисунок.
При оформлении страниц необходимо продемонстрировать умение размещать на страницах следующие объекты:
-
шрифты различных типов, размеров и начертаний;
-
заголовки;
-
списки: нумерованные и маркированные;
-
внутренние и внешние ссылки;
-
бегущую строку;
-
рисунки (импорт из файла);
-
таблицы;
-
фреймы.
Лабораторная работа №1 Основы html
Порядок выполнения работы.
1. Перед началом работы создать на компьютере отдельную папку для будущей страницы. D:\Family\ 2. В блокноте – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) вставить следующий текст:
<html>
<head>
<title>Моя страница </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать!
</body>
</html>
3. Сохранить документ, присвоив ему имя index.html D:\ Family\index.html Если вы сохраняете документ, через Файл -> Сохранить (File -> Save), то, естественно, что он сохраняется как *.txt. Надо сохранять ваш документ следующим образом: - Файл -> Сохранить Как (File -> Save as) - Дальше вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно). - Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save). 4. Открыть браузер, допустим, Internet Explorer (не закрывая блокнот), и в браузере открыть свой документ. Файл - Открыть - кнопка Обзор - index.html File – Open – Browse – index.html При изменении index.html (в блокноте), для просмотра изменений браузере, надо не забывать нажимать в браузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.
5. При оформлении страниц необходимо продемонстрировать умение размещать на страницах следующие объекты:
-
шрифты различных типов, размеров и начертаний;
-
заголовки;
-
нумерованные и маркированные списки;
-
оформление страницы (фон или фоновое изображение).
Теоретические сведения
HTML (HyperText Markup Language – язык разметки гипертекста) – язык создания Web-страниц.
HTML документ – это обычный текстовый файл, содержащий текстовую и иную информацию, которая должна быть отображена на Web-странице, а также набор команд (тэгов), управляющих отображением этой информации на странице. Этот документ может быть создан в любом текстовом редакторе, сохранен в файле с расширением htm или html, а затем просмотрен с помощью одного из доступных браузеров (чаще всего Internet Explorer или Netscape Navigator).
Web-браузеры используют тэги HTML для того, чтобы понять, какой внешний вид должна иметь Web-страница. С помощью тэгов можно задавать цвета, заголовки, таблицы, изображения и многое другое. Все тэги HTML помещаются в угловые скобки < и >. Код любой Web-страницы должен начинаться тэгом <HTML> и заканчиваться тэгом </HTML> (закрывающий тэг, текст которого начинается косой чертой).
Любая информация, помещенная в угловые скобки и начинающаяся с восклицательного знака, является комментарием.
Web-страница обычно начинается с заголовка, который устанавливается с помощью тэга <HEAD>. Заголовок, как правило, содержит только заглавие страницы, которое устанавливается с помощью тэга <TITLE>. Этот заголовок не отображается в тексте Web-страницы. Он отображается в виде заголовка окна браузера.
Тело Web-страницы создается с помощью тэга <BODY>. В этом тэге можно использовать ряд ключевых слов, называемых атрибутами, для установки различных параметров. Использование атрибутов в различных браузерах различно. Далее будем ориентироваться на Internet Explorer.
Атрибуты тэга <BODY>
|
Атрибут |
Значение |
Описание |
|
ALIGN |
CENTER | LEFT | RIGHT |
выравнивание информации |
|
ALINK |
цвет |
цвет активных гиперссылок |
|
BACKGROUND |
строка |
имя файла фонового изображения |
|
BGCOLOR |
цвет |
цвет фона документа |
|
BGPROPERTIES |
FIXED |
не прокручивать изображение фона |
|
BOTTOMMARGIN |
целое число |
ширина нижнего поля |
|
CLASS |
строка |
имя класса для элемента |
|
ID |
идентификатор |
уникальный идентификатор элемента |
|
LANG |
строка |
информация о языке |
|
LANGUAGE |
JAVASCRIPT | VBSCRIPT |
|
|
LEFTMATGIN |
целое число |
ширина левого поля в пикселах |
|
LINK |
цвет |
цвет гиперссылок |
|
RIGHTMARGIN |
целое число |
ширина правого поля |
|
SCROLL |
YES | NO |
|
|
STYLE |
строка |
|
|
TEXT |
цвет |
цвет текста |
|
TITLE |
строка |
заголовок, используется как подсказка |
|
TOPMARGIN |
целое число |
ширина верхнего поля |
|
VLINK |
цвет |
цвет гиперссылок, которые уже посещались |
|
событие |
сценарий |
|
Цвета устанавливаются путем указания значений красной, зеленой и синей составляющих в шестнадцатиричном формате. Кроме того определено множество цветовых констант, которые можно указывать вместо шестнадцатиричных значений.
Пример.
<BODY TEXT=ffff00 LINK=ff0000 ALINK=ffffff VLINK=ffff00>
Чтобы назначить изображение, которое должно быть использовано в качестве фона Web-страницы, необходимо задать значение атрибута BACKGROUND, либо в новом, либо в существующем тэге <BODY>.
Например,
<BODY BACKGROUND= “gif/back.gif”>
Видимые заголовки в теле Web-страницы создаются с помощью тэгов <H1>, <H2>, … <H6>, и соответствуют шести уровням заголовков. Создаваемый заголовок можно отцентрировать с помощью тэга <CENTER>.
Для вывода текста на страницу его следует просто поместить в тело страницы. текст будет выводиться цветом и шрифтом, заданным тэгом <BODY>. Текст можно оформить в виде отдельного параграфа с помощью тэга <P>. Текст автоматически выровняется по ширине страницы.
Тэг <BR> вставляет символ перевода строки. Для данного тэга не нужен закрывающий тэг.
Горизонтальную линию можно добавить с помощью тэга <HR>. Его атрибуты
ALIGN – выравнивание линии (LEFT | CENTER | RIGHT);
WIDTH – длина линии в пикселах или в процентах;
SIZE – высота линии в пикселах;
COLOR – цвет линии.
С помощью тэга <PRE> можно создать контейнер, текст внутри которого имеет произвольную форму и пустые строки, которые служат для разрыва текста. Данный контейнер часто используется для отображения больших блоков программного кода, которые было бы сложно прочесть, если бы броузер переформатировал их.
Для форматирования текста применяется логическое и физическое форматирование.
Элементы логического форматирования:
<CITE> (цитата) служит для выделения цитаты. Этот элемент можно также использовать для выделения названия книги или статьи (выделение курсивом);
<CODE> (код) предназначен для небольшого количества компьютерного кода (моноширинный шрифт);
<EM> (акцент) используется для выделения фрагмента текста, имеющего большое значение (выделение курсивом);
<KBD> (клавиатура) указывает, что пользователь должен дать ответ, используя клавиатуру (моноширинный шрифт);
<SAMP> (образец) используется для выделения знаков, на которых автор хочет акцентировать внимание (моноширинный шрифт);
<STRONG> (важный) используется для выделения очень важного фрагмента текста (полужирный шрифт);
<VAR> (переменная) служит для выделения имени переменной (курсив);
<DFN> (определение) используется для выделения второстепенного определения в списке определений (курсив).
Все эти элементы являются контейнерами и в них обязательно следует использовать закрывающий тэг.
Для использования в документе длинной цитаты используется контейнер <BLOCKQUOTE>. Этот контейнер является вложенным по отношению к элементу тела документа и может, в свою очередь, содержать любые тэги форматирования или разрыва. Для выделения элемента <BLOCKQUOTE> используется отступ от левого поля.
Элементы физического форматирования.
<B> полужирный;
<I> курсив;
<TT> телетайп (шрифт печатной машинки);
<U> подчеркивание;
<STRIKE> зачеркивание
<BIG> крупный;
<SMALL> мелкий;
<SUB> нижний индекс;
<SUP> верхний индекс.
Для изменения внешнего вида текста, следует использовать тэг <FONT>. Его атрибуты:
|
Атрибут |
Значение |
Описание |
|
CLASS |
строка |
имя класса для элемента |
|
COLOR |
цвет |
цвет текста |
|
FACE |
строка |
название шрифта |
|
ID |
идентификатор |
уникальный идентификатор элемента |
|
LANG |
строка |
информация о языке |
|
LANGUAGE |
JAVASCRIPT | VBSCRIPT |
|
|
SIZE |
строка |
размер текста |
|
STYLE |
строка |
стиль текста |
|
TITLE |
строка |
заголовок, используется как подсказка |
|
событие |
сценарий |
|
Контейнер раздела <DIV> можно использовать для выравнивания целого блока элементов страницы. Этот тэг поддерживает атрибут ALIGN, Также с помощью него можно использовать различные стили строки для определения стиля целого блока в документе. Например:
<DIV ALIGN=CENTER>
<DIV STYLE=”color: blue”>
Создание списков в HTML
Список в HTML состоит из контейнера, идентифицирующего список, и стандартного тэга элементов списка (в HTML все элементы списка используют один тэг - <LI>). Для задания заголовка списков используется тэг <LH>.
Для создания упорядоченных списков используется контейнер <OL>. В нем могут использоваться следующие атрибуты:
TYPE – выбор способа нумерация пунктов:
А – прописные буквы;
а – строчные буквы;
I – прописные римские цифры;
i – строчные римские цифры;
1 – арабские числа
START – установка начального значения пунктов.
Для создания неупорядоченных (маркированных) списков используется контейнер <UL>. Для изменения маркеров используется атрибут TYPE. Он может принимать значения disc, square и circle.
Как тэг <OL> , так и тэг <UL> поддерживают атрибут COMPACT, который указывает броузеру, что список следует отображать в более компактном виде.
Список определений является особым типом списков в HTML. Его формат состоит из определяемого термина и определения, размещенного с отступом. Для этих целей используется контейнер <DL>. В этом контейнере тэгом <DT> отмечается термин, а тэгом <DD> - определение. Оба этих тэга относятся к открывающим. Закрывающие тэги не нужны.
Пример комбинированного списка:
<HTML>
<HEAD>
<TITLE>Пример комбинированного списка</TITLE>
</HEAD>
<BODY>
<OL TYPE=I>
<LH><EM>Планеты Солнечной системы:</EM><BR>
<LI> Меркурий
<UL TYPE=circle>
<LI> Римский бог торговли, путешествий и воровства
<LI> Описание
<DL>
<DT> <B>Меркурий</B>
<DD> Это самая маденькая и самая близкая к Солнцу планета с
сидерическим периодом обращения вокруг Солнца в 88.0
дней и средним расстоянием до Солнца 58,3 миллиона километров
(36,2 миллиона миль). Средний радиус составляет
2414 километров (1500 миль).
</DL>
</UL>
<LI> Венера
<UL TYPE=circle>
<LI> Римская богиня любви и красоты
<LI> Описание
<DL>
<DT><B>Венера</B>
<DD> Вторая планета с радиусом 6052 километров (3760 миль),
массой, составляющей 0,815 массы Земли, сидерическим периодом
обращения вокруг Солнца 224,7 дней и средним расстоянием до
Солнца 108 миллионов километров (672 миллионов миль).
</DL>
</UL>
</OL>
</BODY>
</HTML>
Для вставки специальных символов (знаков) используются соответствующие им заменители. Часть из них приведена в таблице ниже:
|
Заменитель |
Символы |
|
¢, £, ¥ |
¢, £, ¥ |
|
©, ® |
©, ® |
|
° |
º |
|
¼, ½, ¾ |
¼, ½, ¾ |
|
÷ |
÷ |
|
&pi |
π |
|
&le, &ge |
<, > |
|
& |
& |
|
&spades, &clubs, &hearts, &diams |
♠, ♣, ♥, ♦ |