Лабораторная работа №21. Технологии создания Web-страниц средствами html-конструирования

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

Первое, что нам нужно усвоить: хтмл (html) - это то, что мы сейчас изучаем. Второе, что нам нужно усвоить: html не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на нашей странице). То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (tags или тэги).

Задание 1.

Порядок прежде всего, поэтому перед началом работы создайте в своей папке отдельную папку ПЕРВЫЕ ШАГИ для будущей страницы.

Теперь откройте блокнот (пуск – программы – стандартные – блокнот) и наберите туда следующий текст:

< html >

< head >

< title >Мой первый шаг < /title >

< /head >

< body >Здравствуйте, это моя первая страница.

< br >

Добро пожаловать!:)

< /body >

< /html >

Сохраните этот документ, присвоив ему имя index.html (Файл - Сохранить Как, дальше вводите имя своего документа)

Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы.

< html > Этот тэг должен открывать документ.

< /html > Этот тэг должен закрывать документ

< head > < /head > - голова документа

< body > < /body > - тело документа

Все тэги, расположенные между < head > < /head >, это что-то вроде служебной информации. Например < title >- заголовок.

Все тэги, расположенные между < body > < /body > - непосредственное содержание документа.

Теперь откроем браузер Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в браузере наш документ: Файл - Открыть - кнопка Обзор -Наш документ index.html.

Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем браузере, надо не забывать нажимать в браузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.

Задание 2.

Давайте окрасим слова Добро Пожаловать в красный.

Добавьте к этой строчке команды, как представлено ниже:

<font color="#CC0000"> Добро пожаловать!:) </font>

Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста.

Если цвет текста в <body> не задавать, то весь текст страницы по умолчанию будет черным.

Задание 3.

Давайте сделаем текст синим, кроме текста, для которого мы специально прописали <font></font>. Цвет фона устанавливается в уже знакомом нам тэге <body>. Для наглядности установим черный цвет. Тогда ваша программа будет иметь вид:

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body text="#336699" bgcolor="#000000">

Здравствуйте, это моя первая страница.

<br>

<font color="#CC0000"> Добро пожаловать!</font>:)

</body>

</html>

Обратите внимание: мы одновременно можем прописать в тэге <body> и цвет текста в документе, и цвет фона

Задание 4.

С помощью параграфов мы можем центрировать текст:

<p align="center">текст</p>

С помощью параграфов мы можем выровнять текст по левому краю:

<p align="left">текст</p>

По правому краю документа:

<p align="right">текст</p>

По обоим краям документа (по ширине):

<p align="justify">текст</p>

Теперь введем параграфы в наш документ и дополним текст. Внесите изменения в ваш текст:

<html>

<head>

<title>Мой первый шаг </title>

</head>

<p align="center">

Здравствуйте, это моя первая страница.

<br>

<font color="#CC0000"> Добро пожаловать!</font>:) </p>

<p align="justify">

Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг?:)

</p>

</body>

</html>

Задание 5.

Существуют шесть уровней заголовков:

<H1> текст </H1>

<H2> текст </H2>

<H3> текст </H3>

<H4> текст </H4>

<H5> текст </H5>

<H6> текст </H6>

Итак, h1 – самый важный, h6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице.

Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта:

<font size="+4"> текст </font>

<font size="+3"> текст </font>

<font size="+2"> текст </font>

<font size="+1"> текст </font>

<font size="+0"> текст </font>

<font size="-1"> текст </font>

<font size="-2"> текст </font>

С помощью face мы можем задать тип шрифта. Какие же типы шрифтов являются стандартными, и по идее должны находиться на компьютере каждого пользователя - это: Times; Times New Roman; Arial; Helvetica; Courier; Verdana; Tahoma; Comic Sans; Garamond.

Давайте теперь изменим наш документ.

<html>

<head>

<title>Мой первый шаг </title>

</head>

<H3>

Здравствуйте, это моя первая страница.

<br>

<font color="#CC0000"> Добро пожаловать!</font>:) </p> </H3>

<font size="+3"> еще один виртуальный друг?:) </font>

</p>

<font face="arial"> пример шрифта Arial</font>

</body>

</html>

Задание 6.

Чтобы вставлять картинки в документ необходимо добавить:

Для вашего удобства скопируйте картинки (из папки указанной преподавателем) в ту же папку, что и документ.

Задание 7.

Измените текст нашей программы и вставьте 2 картинки.

<html>

<head>

<title>Мой первый шаг </title>

</head>

<H3>

Здравствуйте, это моя первая страница.

<br>

<img src="черепаха.gif">

<br>

<font color="#CC0000"> Добро пожаловать!</font>:) </p></H3>

<font size="+3"> еще один виртуальный друг?:)</font>

</p>

<img src="машина.jpg">

<br>

<font face="arial"> пример шрифта Arial</font>

</body>

</html>

Задание 8.

Сохраните документ (теперь достаточно просто Файл – Сохранить). Просмотрите его в браузере (если он был открыт, то достаточно просто нажать кнопку ОБНОВИТЬ).

Наша страничка может состоять из нескольких документов. Один из них главный (index.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете. При помощи ссылок мы связываем эти документы. Так с главной страницы по ссылкам мы можем перейти на страницу с фотографиями, с этой страницы мы можем перейти обратно на главную страницу, или, допустим, на страницу с нашими стихотворениями, и т.д.

Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка.

Задание 9.

Для начала создадим ссылку на пока не существующий документ:

……………

<br>

<font face="arial"> пример шрифта Arial</font>

<br>

<a href="primer.html">посмотреть далее</a>

</body>

</html>

Сохраните документ (теперь достаточно просто Файл – Сохранить).

Задание 10.

Создадим новый документ (Файл - Создать). Сохраним его primer.html (Файл – Сохранить как…) в той же папке, где находится наш главный документ index.html.

В этом документе мы создадим таблицу.

Таблица задается тэгом: <table></table>

Таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще указать и их.

<tr></tr> - строчка таблицы

<td></td> - столбец (ячейка) таблицы

Итак, теперь нам надо задать свою таблицу:

<html>

<head>

<title>Мой второй шаг </title>

</head>

<body>

<table>

<tr>

<td>1x1</td>

<td>1x2</td>

<td>1x3</td>

</tr>

<tr>

<td>2x1</td>

<td>2x2</td>

<td>2x3</td>

</tr>

</table>

</body>

</html>

Задание 11.

Фон задается атрибутом bgcolor ="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для ячейки (в пределе одного ряда). В нашем случае мы задаем фон для каждой ячейки. Измените соответствующие строки:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

Сохраните документ (теперь достаточно просто Файл – Сохранить). Просмотрите его в браузере.

Задание 12.

Самостоятельно измените цвета ячеек. Коды находятся в файле Таблица цветов.htm

Задание 13.

Вы можете задать высоту и ширину для всей таблицы, атрибутами height и width.

Зададим в нашем примере не только высоту и ширину, но и сразу выровняем содержимое ячеек по центру.

……………….

<table>

<tr>

</tr>

<tr>

</tr>

</table>

………………..

Задание 14.

Линия задается тэгом < Hr > и не требует закрывающего тэга:

(1) <Hr align="right"> (center или left)

(2) <Hr width="30%"> (ширина линии в процентах/пикселях)

(3) <Hr size="6"> (толщина линии)

(4) <Hr NoShade> (отмена объемности)

(5) <Hr color="cc0000"> (цвет линии)

Добавьте после таблицы линию:

…………

</table>

<Hr align="left" width="30%" size="6" color="cc0000">

</body>

………….

Задание 15.

HTML допускает задание в документах списков двух типов:

Маркированный список

Каждый элемент этого списка браузер предваряет меткой в начале строки, а сами строки смещает вправо.

Нумерованный список

В нумерованных списках каждый элемент снабжен номером, вид и начальное значение которого настраивается специальным атрибутом.

Нумерованный список задается при помощи команды <OL>.

После линии добавьте следующие строки:

<UL>

<LI>Какой он, этот Слонопотам?</LI>

<LI>Неужели очень злой?</LI>

<LI>И как он их любит?</LI>

</UL>

<OL>

<LI>Хамите.</LI>

<LI>Хо-хо!</LI>

<LI>Жуть.</LI>

</OL>

Задание 16.

В таких документах можно задавать не только статический текст, но и бегущую строку или картинку.

Ниже списков добавьте следующие строки:

…………

<br>

<marquee height="10" width="270" bgcolor="#99CCFF">

Побежали

</marquee>

……………..

Задание 17.

Сохраните документ (теперь достаточно просто Файл – Сохранить).

Закройте все блокнотовские документы и запустите наш первый файл index.html в браузере. Проверьте нашу ссылку (она должна переходить на наш второй документ).

Рекомендуемая литература

Основная

1. Захарова, И. Г. Информационные технологии в образовании [Текст]: учеб. пособие для студентов пед. вузов / И. Г. Захарова. -5-е изд., стер. - М.: Академия, 2008.

2. Ибрагимов, И. М. Информационные технологии и средства дистанционного обучения [Текст]: учеб. пособие для студентов вузов по спец. "Информ. системы и технологии" /И. М. Ибрагимов. - 2-е изд., стер. - М.: Академия, 2007.

3. Логинов, В. Н. Информационные технологии управления [Текст]: учеб. пособие по спец. "Гос. и муницип. упр." / В. Н. Логинов. - М.: Кнорус, 2008.

4. Мельников, В. П. Информационные технологии [Текст]: учеб. для студентов вузов по спец. "Автоматизир. системы обраб. информ. и упр.", "Информ. системы и технологии" / В. П. Мельников. - М.: Академия, 2008.

5. Могилев, А. В. Информатика [Текст]: учеб. пособие для студ. пед. вузов / А. В. Могилев, Н. И. Пак, Е. К. Хеннер; под ред. А. В. Могилева. – 2-е изд. - М: Академия, 2008.

6. Могилев, А. В Практикум по информатике [Текст] / А. В. Могилев. – М.: Академия, 2006.

7. Советов, Б. Я. Информационные технологии [Текст]: учеб. для вузов / Б. Я. Советов, В. В. Цехановский. – 2-е изд., стер. – М.: Высш. шк., 2005.

Дополнительная

1. Галатенко, В. А. Стандарты информационной безопасности [Текст]: курс лекций: учеб. пособие для студентов вузов по спец. 351400 "Прикл. информатика" / В. А. Галатенко; под ред. В. Б. Бетелина. - М.:Интернет-Ун-т информ технологий, 2004.

2. Гринберг, А. С. Информационные технологии управления [Текст]: учеб. пособие для студентов по спец.351400 "Приклад. информатика", 061100 "Менеджмент орг.", 061000 "Гос. и муницип. упр." / А. С. Гринберг, Н. Н. Горбачев, А. С. Бондпренко. - М.: ЮНИТИ-ДАНА, 2004.

3. Делопроизводство [Текст]: учеб. для студентов вузов по спец. 350800 "Документоведение и док. обеспечение упр." / Т. А. Быкова, Л. М. Вялова, Г. Ю. Максимович, Л. В. Санкина; под общ. ред. Т. В. Кузнецовой. - М.: МЦФЭР, 2004.

4. Информатика. Базовый курс [Текст]: учеб. пособие для студентов высш. техн. учеб. заведений / под ред. С. В. Симоновича. - 2-е изд. - СПб.: Питер, 2009.

5. Рожина, И. В. Информатика [Текст]: курс лекций / И. В. Рожина; Урал. гос. пед. ун-т. – Екатеринбург: [б. и.], 2008.

6. Сакулина, Ю. В. Microsoft Office. [Текст]: метод. разработка / Ю. В. Саккулина; Урал. гос. пед. ун-т. – Екатеринбург: [б. и.], 2009.

7. Хроленко, А. Т. Современные информационные технологии для гуманитария [Текст]: практ. рук. / А. Т. Хроленко, А. В. Денисов. - М.: Флинта: Наука, 2007.

Сакулина Юлия Валерьевна

Рожина Ирина Венокентьевна

ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ

Учебно-методическая разработка

УТВЕРЖДЕНО

на заседании кафедры № ____ от ______________

Подписано в печать Тираж экз.

Формат 60х90 1/16 Усл. п. л. Заказ №

Уральский государственный педагогический университет

620219 Екатеринбург, ГСП 135, просп. Космонавтов, 26