Лабораторная работа
по дисциплине “Информационные технологии в экономике”
ТЕМА: Технология создания сайтов (основы HTML-страницы и применение в ее создании тегов.)
КРАТКОЕ ОЗНАКОМЛЕНИЕ:
Основой каждой странички является HTML (сокращенно от английского – Hypertext Markup Language) – язык разметки гипертекста. Для создания HTML документа используются теги – определенные последовательности символов, заключенные между знаками < и >. Символ < обозначает начало тега, а символ > - конец тега. Теги помогают программе просмотра разобраться, как должны распологаться текст, рисунки и так далее. Текст с тегами называется исходным кодом. Теги бывают парные: открывающие и закрывающие (<b> и </b>) и также непарные (<hr>). Признак закрывающего тега – символ /.
СОВЕТЫ: Текст должен быть:
· Легко читаемым. Идеальный вариант – черный текст на светлом фоне. Разбивайте текст с помощью расстояний между параграфами;
· Коротким, остроумным и деловым. Старайтесь избегать длинных слов;
· Неофициальным. Избегайте холодного официального языка;
· Написанным без орфографических ошибок;
О графике:
- Старайтесь избегать излишне большого количества графических изображений – потеряется текстовый смысл и тратиться много времени на загрузку; Не загромождайте сайт. Сайт без излишеств, с минимальным и гармоничным использованием цвета производит лучшее впечатление. Придерживаетесь двух или трех основных цветов; Не пользуйтесь темным и многоцветным задним фоном – это приводит к трудностям в распознавании текста. Но если вы все же хотите такой фон, используйте контрастный ему цвет текста (белый на черном, золотой на голубом, красный на зеленом) ; Используйте понятный тип шрифта. Самые легкие для чтения:, Arial, Georgia, Helvetica Избегайте шрифтов, насыщенных сложными завитушками и засечками (Times Roman) ; Пользуйтесь шрифтами разного размера. Делаете заголовки, подзаголовки и ключевые фразы шрифтом большего размера по сравнению с основным текстом;
ЗАДАНИЕ: Создать рекламную HTML страницу на тему, указанную преподавателем.
ОСНОВНЫЕ ДЕЙСТВИЯ:
Создайте свою папку, назвав ее своим именем и фамилией (русскими буквами), где будут храниться все ваши HTML-файлы и графические файлы; Откройте текстовый редактор “Блокнот (NotePad)” или “WordPad” через путь: Пускð Стандартные…; Наберите в текстовом редакторе тег <HTML>: с него начинается любой HTML-документ. ВНИМАНИЕ: Можно печатать как прописными (большими), так и строчными (маленькими) буквами – значения не имеет. Но нельзя в одном HTML-документе смешивать эти два написания. Не вводите лишних знаков и печатаете теги без ошибок. После нажатия клавиши Enter переходим на следующую строку; Первая часть любого HTML-документа – заголовок, в котором содержится информация о документе, не выводящаяся на экран, и, который находится между тегами <HEAD> и </HEAD>. Название странички располагается между тегами <TITLE> и </TITLE>.Теперь наберите в текстовом редакторе:<HEAD>
<TITLE>ваша тема</TITLE>
</HEAD>
Вторая часть – тело, которое выводит на экран текст, картинки, видеофрагменты. Тело заключается между тегами <BODY> и </BODY> .Добавим графику. У тега <BODY> есть несколько параметров, влияющих на изменение цвета:
· body bgcolor = “цвет”- цвет фона;
· body background = “file. jpg” – фон-обои;
· body text = “цвет”- цвет текста;
· body link = “цвет”- цвет гипертекстовой связи(ссылки);
· body vlink = “цвет”- цвет гипертекстовой связи, уже посещенной в прошлом;
· body alink = “цвет”- цвет активной гипертекстовой связи;
На месте “цвет” вводим нужный нам цвет на английском языке (black, white, red и т. п.).
Предварительно определитесь: фоном будет чистый цвет или обои? Текст должен легко читаться! Если вы делаете фоном обои, найдите подходящий рисунок (желательно не очень яркий) и скопируете его в вашу папку. Пример графического оформления:
<body background="1.jpg" vlink="blue" text="black" alink="white" link="red">
Введите в текстовом редакторе теги (по примеру), создавая графическое оформление на свой вкус;
6. Делаем заголовок. Он создается с помощью буквы “h”. Цифра, которую ставят после буквы, указывает уровень заголовка (всего их от 1 до 6, и шрифт заголовка уменьшается по возрастанию чисел). Заголовки, как и текст, можно выравнивать по левому, правому полю или по центру. Переносы в заголовках запрещены! Примеры:
· <h1 align=center>Заголовок</h1> -заголовок посередине; шрифт очень крупный;
· <h3 align=left>Заголовок</h3> - заголовок слева; шрифт средний;
· <h6 align=right>Заголовок</h6> - заголовок справа; шрифт мелкий;
Заголовок должен бросаться в глаза. Мы можем задать параметры шрифта с помощью тега <FONT>. Пример:
· <font size=”6” color=”red” face=”Arial”>текст</font>
В данном примере “size” указывает на размер шрифта, “color” – на его цвет, и “face” – на название шрифта.
Теперь научимся вкладывать парные теги друг в друга. Здесь тег, который открылся первым, закрывается последним. Пример:
· <font color="red" face="arial"><h1 align = center>Заголовок </h1></font>
Очень хороший способ выделения логических частей текста или заголовков является горизонтальная линия, которая обозначается тегом <hr>.Можно регулировать цвет (color=” “) и толщину линии (size=” “) . Также тег <br> позволяет перейти на новую строку (можно увеличить расстояние текста от заголовка для его выделения) :
<h1 align=center>Заголовок</h1>
<hr color=”red”>
<br><br>
<h5 align=left>текст</h5>
Теперь по данным примерам создайте заголовок вашей темы;
7. Создаем текст. Для этого можно использовать множество тегов. Например:
· <p>текст</p> - обычный шрифт;
· <b>текст<b> - полужирный шрифт;
· <i>текст</i> - курсив;
· <u>текст</u> -подчеркивание;
Можно и вкладывать теги друг в друга:
· <i><b>текст</b></i> - полужирный шрифт и курсив;
Можно и регулировать расположение текста на странице:
· <p align=left>текст</p>
Также для текста можно использовать теги <H>, <FONT>.
Теперь, используя нужные теги, создайте свой текст (1-2 предложения);
8. Оформляем списки. Списки бывают трех видов: маркированные, нумерованные и вложенные (сочетают в себе элементы двух предыдущих списков). Для каждого вида используются свои теги.
Пример маркированного списка:
· <p>Туристическое агентство предлагает туры по следующим странам:</p>
<ul>
<li>Италия;
<li>Корея;
<li>Австралия;
</ul>
В нумерованном списке вместо тега <ul> вводят тег <ol>.
Необязательным атрибутом тега <ul> является “type”, обозначающий тип маркера:
· <ul type=”circle”> - кружок;
· <ul type=”disk”> - пустой кружок;
· <ul type=”square”> - квадратик;
Необязательные атрибуты тега <ol>:
· <ol start=”n” , где n – номер, с которого начинается нумерация;
· <ol type=” “ – в кавычках пишутся буквы или цифры:
Ø “A” – большие буквы (то есть будет A, B, C…);
Ø “a” – маленькие буквы (a, b, c…);
Ø “I” – римские цифры (I, II, III, IV…);
Ø “1” – арабские цифры (1, 2, 3…);
Теперь создайте список любого оформления, соответствующий вашей теме;
9. Добавим гипертекстовые ссылки (гиперсвязь). На экране ссылка выделяется каким-либо образом на фоне остального текста (подчеркиванием и особым цветом, что устанавливается по умолчанию). Однако, используя графические теги для ссылок (см. пункт №5), вы можете установить свои графические параметры. Для гипертекстовых связей используют парные теги: <A HREF=” “>…</A>
Параметр HREF определяет адрес ссылки, на которую будет совершен переход, если щелкнуть мышью на объекте, обозначенный многоточием. В кавычках заключается путь к другой дополнительной странице (название документа). Ссылка на конкретный документ будет создана позже.
Сохраните ваши данные в папке, названной вашей фамилией, как 1.htm или 1.html через путь: Файлð Сохранить как... Закройте документ 1.htm.
10. Фреймы это окна, с помощью которых экран разделяется на несколько областей, в каждой из которых отображается содержимое отдельной страницы. Перед тем, как создавать фреймы создайте два второстепенных документа.
· Создайте на чистом листе подходящий по смыслу второстепенный документ и сохраните его как файл a.htm. Пример:
<html><head><title>Страничка А</title></head>
<body>
<p> Чай “Lipton” – 20 р. </p
</body></html>
· Создайте второй подходящий по смыслу второстепенный документ и сохраните его как b.htm. Пример:
<html><head><title>Страничка B</title></head>
<body>
<p> Кофе “Nescafe” – 25 р. </p
</body></html>
· Теперь переходим к созданию фреймов. Для их создания используют теги <FRAMESET> и </FRAMESET> , а для их описания – теги <FRAME>. Создайте чистый лист (Файл ð Создать). На этой странице будут созданы фреймы и на нее будет осуществляться переход из файла 1.htm.
· Введите теги по примеру:
<html><head><title>Напитки</title></head>
<frameset cols=”50%, 50%” border=10 bordcolor=”blue”>
<frame src=”a. htm”>
<frame src=”b. htm”>
</frameset>
</html>
Если вы хотите, чтобы на вашей страничке с фреймами было графическое изображение, тот скопируете какую-нибудь картинку формата .jpg или.gif в папку ваших HTML-файлов. Затем измените значение одного тега FRAME так, чтобы он указывал не на страницу, а на рисунок:
<frameset cols=”*, 80 %”>
<frame src=”a. gif”>
<frame src=”b.htm”>
</frameset>
С помощью параметров тега <FRAMESET> указывается, что экран разделяется на колонки;
o COLS=”50%, 50%” - 2 равные колонки (ВЕРТИКАЛЬНЫЕ); создали 2 дополнительных файла);
o cols=”25%, 25%, 25%, 25%” - 4 равные колонки; создали 4 доп. файла;
o cols=”10%, 10%, 10%, *” – 4 колонки: первые 3 –равные, последняя – остаток площади (“*” – данный фрейм занимает всю оставшуюся площадь);
o cols=”60, 60, 60, 60” – 4 равные колонки размером в 60 пикселов;
o cols=”100, *, 2*” – 3 неравные колонки (последняя – самая большая); создали 3 доп. файла;
o ROWS=”50%, 50%” – 2 равные колонки (ГОРИЗОНТАЛЬНЫЕ);
o BORDER=n, где n – размер обрамления (границы) фрейма (10, 20...);
o FRAMESPACING=n, где n – ширина обрамления фрейма 10, 20...);
o FRAMEBORDER=NO – отмена границы фрейма;
o BORDCOLOR=”цвет” – цвет границы фрейма;
Вы можете изменить оформление страницы. Сохраните этот файл в вашей папке, как 2.htm или 2.html.
· Теперь создайте ссылки из файла 1.htm на файл 2.htm. Откройте в текстовом редакторе файл 1.htm через путь: Файлð Открыть… Теперь создайте ссылку по такому примеру:
<p align=center><a href=2.htm>Заголовок</a></p>
11. Вставляем картинки. Найдите любую картинку, соответствующую вашей теме, в формате .jpg или .gif. Вы можете взять ее в Интернете или нарисовать в графическом редакторе. Сохраните вашу картинку в папке ваших HTML-документов (именно с одним из вышеупомянутых форматов). Для размещения картинки на страничке используют тег <IMG SRC=”file.jpg/gif”> , где в кавычках вводят имя картинки. Существуют дополнительные параметры графических изображений. Пример:
<img src=”2.gif” align=left width=300 height=400 hspace=5 vspace=10 alt=”logo”>
· ALIGN=MIDDLE/CENTER – выравнивание картинки по центру;
=LEFT – выравнивание по левому полю;
=RIGHT – выравнивание по правому полю;
=TOP – выравнивание по верхней границе;
=BOTTOM – выравнивание по нижней границе;
· WIDTH=n, где n – число для атрибута ширины картинки в пикселах;
· HEIGHT=n, где n – число для атрибута высоты картинки в пикселах;
· HSPACE=n, где n – число ширины отступа картинки от текста по горизонтали;
· VSPACE=n, где n – число ширины отступа картинки от текста по вертикали;
· ALT= “текст” – выявление введенного текста при подведении курсора на рисунок;
Теперь представьте: как будет выглядеть картинка на вашей страничке. Картинку желательно вставлять на пустой, не занятый текстом участок странички. Создайте картинку по вышеупомянутым примерам;
12. Теперь закройте все еще не закрытые теги: </FONT></BODY></HTML>. Не забывайте закрывать теги. Сохраните ваши данные. Зайдите в вашу личную папку и откройте 1.htm и проверьте: все ли правильно. Ваша страничка должна привлекать внимание графическим оформлением и иметь не слишком сложное и большое текстовое содержание;
Варианты для лабораторной работы
«Создание Web документов»
1. Рекламная HTML страница юридической компании.
2. Рекламная HTML страница аудиторской компании.
3. Рекламная HTML страница компании, продающей косметические товары.
4. Рекламная HTML страница компании, продающей кондитерские изделия.
5. Рекламная HTML страница компании, продающей спортивные товары.
6. Рекламная HTML страница туристической компании.
7. Рекламная HTML страница ресторана.
8. Рекламная HTML страница гостиницы.
9. Рекламная HTML страница компании, продающей автомобили.
10. Рекламная HTML страница компании, продающей часы.
Можно создавать страницу компании, продающей товар или оказывающей услуги, выбрав товар или услуги по усмотрению.
