- •Лабораторная работа №4 Разработка информационно-рекламного сайта
- •Краткая теория:
- •Шаг 1. Создание рабочего пространства.
- •Основные теги:
- •Изображения в html-документе
- •Добавляем изображение:
- •Работа со шрифтом.
- •Маркированные списки
- •Связь между документами
- •Обратная связь:
- •Создание таблиц в нтмl.
- •Бегущая строка
Лабораторная работа №4 Разработка информационно-рекламного сайта
Цель работы: овладеть навыками разработки информационного сайта, используя средства MS Office.
Краткая теория:
В маркетинговой деятельности для продвижения товара на рынке особое внимание уделяется его рекламе. Ведение рекламы в Internet требует наличия сайта: создание и его регистрация в сети.
С а й т - это совокупность Web- страниц, связанных между собой гиперссылками. Для создания сайта используются тэги – это управляющие конструкции языка НТМL. Все тэги вставляются в текст документа и заключаются в угловые скобки.
- <html>... </html> - начало и завершение документа;
- <head>...</head> - начало и завершение заголовочной части документа;
- <title>... </title> - ограничители текста заголовка окна браузера
<meta charset=....> - определение кодировки страницы (приведен пример для текста Windows);
- <body>...</body>- начало и конец текста страницы;
- приставка bgсо1 задает цвет фона страницы.
Состоит из трех двузначных шестнадцатеричных чисел, соответствующим схеме RGB. Например: сочетание FFFFFF означает белый цвет.
приставка text задает цвет символов;
приставка link задает цвет гиперссылки;
- <center>... </center> - выравнивание текста по центру страницы;
- <hl>...</hl> - определение стиля текста "Заголовок №1" Возможны заголовки с 1 по 8 (1 самый крупный);
- <р>...</р>- начало и конец абзаца;
- <Ьг> - перевод строки;
- <а hгеf="раgе_а.html">...<а> - ссылка на указанный объект (текст или рисунок).
- <img src="imagel.gif"height=200 width=200> - вставка рисунка с указанным именем и размерами 200 на 200 точек;
- <Ь>.. .</b> - выделение жирным шрифтом;
- <i>... </i> - выделение курсивом;
- <font face="Courier New Cyr" size=24>.. .</font> - выделение текста указанным шрифтом указанного размера. На чужом компьютере может не быть указанного шрифта. Вместо него автоматически будет подставлен наиболее похожий размер шрифта;
- <li> - отметка элемента ненумерованного списка.
Порядок выполнения работы
Прежде чем приступить непосредственно к разработке, нужно иметь представление о том, с чем придется работать, а именно что такое HTML,
HTML (HyperText Markup Language) – в переводе на русский означает «язык разметки гипертекста».
Гипертекстовый документ – это документ, представляющий собой обычный текстовый файл, содержащий текст и специальные коды (теги) для его разметки и др. файлы.
О
Блок
заголовка
«Тело»
документа
Так выглядит страница «изнутри».
Шаг 1. Создание рабочего пространства.
Алгоритм создания гипертекстового документа:
Создаем папку «сайт», которая впоследствии будет содержать все файлы созданного нами сайта
Открываем эту папку.
Создаем текстовый документ, в котором впоследствии будем вводить теги
Сохраняем документ в расширении указываем вместо .ТХТ расширение .HTM(илиHTML).
Закрываем текстовый редактор.
В рабочую область папки «сайт» должен появиться значок обозревателя.
Запускаем его.
Если все сделано правильно - перед нами должна загрузиться страница сайта, пока еще пустая.
Теперь кликом правой кнопки мыши вызываем контекстное меню и просмотр html-кода.
При желании/необходимости можно внести и сохранить изменения в структуру документа и закрыть блокнот.
Итак. Перед нами пустой файл. Теперь необходимо наполнить его информацией.
Открываем наш файл с помощью блокнота. И производим его разметку:
1) сначала нужно обозначить, что данный файл является гипертекстовым документом, делается это с помощью тегов