ГОСУДАРСТВЕННОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ
ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ
«ПОВОЛЖСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ СЕРВИСА»
Кафедра: «Социально-культурный сервис»
КУРСОВОЙ ПРОЕКТ
По дисциплине: Современные рекламные технологии
На тему: Использование шрифта, размера и цвета в компьютеризированной рекламе (разработка рекламного сайта средствами языка HTML).
Работу выполнил: Гайнуллина Э.Ф.
студент гр. CКРзК-502
Номер зачетной книжки:К/1106/005
Проверил: асс., Ворожейкина В.П.
Тольятти 2011г.
ГОУ ВПО «Поволжский государственный университет сервиса (ПВГУС)»
Рецензия
на курсовой проект
по дисциплине Современные рекламные технологии
(наименование дисциплины)
Обучающийся __Гайнуллина Э.Ф._________________________________________________группа____CКз-502_
| №
|
Критерии оценки
|
Степень соответствия
требованиям
|
+ /-,
Да/нет
|
Примечания
|
| 1. |
Курсовой проект выполнен в соответствии с заданием и методическими указаниями |
1. Соответствует требованиям |
||
| 2. Соответствует частично |
||||
| 3. Не соответствует |
||||
| 2. |
Структура работы: - общий объем и пропорциональность структурных частей работы |
1. Соответствует требованиям |
||
| 2. Соответствует частично |
||||
| 3. Не соответствует |
||||
| - логическая взаимосвязь структурных частей работы |
1. Соответствует требованиям |
|||
| 2. Соответствует частично |
||||
| 3. Не соответствует |
||||
| 3. |
Содержание работы раскрывает сущность выбранной темы |
1. Раскрывает |
||
| 2. Частично раскрывает |
||||
| 3. Не раскрывает |
||||
| 4. |
Изучение автором необходимого объема литературы: - количество наименований источников в списке литературы |
1. Соответствует требованиям |
||
| 2. Частично соответствует |
||||
| 3. Не соответствует |
||||
| - период издания источников литературы и нормативно-правовой базы |
1. Соответствует требованиям |
|||
| 2. Частично соответствует |
||||
| 3. Не соответствует |
||||
| 5 |
Наличие и авторский анализ статистических данных, практического и теоретического материала |
1. Соответствует требованиям |
||
| 2. Частично соответствует |
||||
| 3. Не соответствует |
||||
| 4. Не представлены |
||||
| 1 |
2 |
3 |
4 |
5 |
| 6 |
Качество оформления работы: - таблицы |
1. Соответствует требованиям |
||
| 2. Частично соответствует |
||||
| 3. Не соответствует |
||||
| - графики |
1. Соответствует требованиям |
|||
| 2. Частично соответствует |
||||
| 3. Не соответствует |
||||
| - расчеты |
1. Соответствует требованиям |
|||
| 2. Частично соответствует |
||||
| 3. Не соответствует |
||||
| 7 |
Наличие выводов и предложений, полученных на основе изучения исследуемой проблемы |
1. Соответствует требованиям |
||
| 2. Частично соответствует |
||||
| 3. Не соответствует |
||||
| 4. Не представлены |
||||
| 8 |
Особые замечания по работе (проекту) |
|||
| Рекомендации |
||||
Рецензент ___________________________ _______________________________________
(подпись) (расшифровка подписи)
«_________»______________201____г.
Содержание
Введение
1. Основные элементы средств рекламы и требования предъявляемые к ним……………………………………………………………………….7
1.2. Компьютеризированная реклама…………………………………13
2. Разработка рекламного сайта средствами языка HTML………….15
2.1 О языке HTML …………………………………………………….15
2.2 Создание WEB сайта……………………………………………...17
2.3 Структура документа……………………………………………..17
2.4 Гипертекстовые ссылки…………………………………………..18
2.5 Добавление стилей в документ…………………………………..24
3. Описание создание сайта……………………………………………..26
3.1 Подготовка…………………………………………………………26
3.2 Создание главной страницы………………………………………28
3.3. Создание второй страницы……………………………………….31
3.4. Создание страницы с рекламой города………………………….32
3.5. Создание страницы с фотографиями…………………………….32
3.6. Создание страницы с программами………………………………33
Заключение
Список используемой литературы
Приложение
Введение
В период совершенствования в нашей стране рыночной экономики, когда многие предприятия были приватизированы и стали независимыми, успешное их функционирование стало практически невозможным без хорошо организованной комплексной маркетинговой деятельности. Многие отрасли народного хозяйства испытывают огромную потребность в информационном взаимодействии с потребителями. (3)
Реклама на сегодняшний день является наиболее распространённым средством коммуникации на рынке товаров и услуг. На предприятиях из маркетинговых отделов выделяются целые подразделения, занимающиеся рекламой, а стоимость рекламных услуг неуклонно растёт. Всё это свидетельствует о том, что изучение вопросов, касающихся рекламной деятельности, совершенно необходимо для построения эффективной системы коммуникации и продажи товаров и услуг. (4)
Цель моего курсового проекта:
- Определение основных элементов рекламы и требований предъявляемых к ним;
- Раскрытие сущности компьютеризированной рекламы.
Исходя из поставленных целей, можно определить следующие задачи:
1. Раскрытие основных элементов рекламного сообщения;
2. Раскрытие понятия «компьютеризированная реклама»;
3. Перспективы применения компьютеризированной рекламы;
4. Преимущества и недостатки компьютеризированной рекламы;
5. Разработка рекламного сайта средствами языка HTML.
1.
Основные элементы средств рекламы и требования предъявляемые к ним
Рекламные средства содержат рекламные сообщения. Основными элементами, определяющими рекламное сообщение, являются текст и изображение. Кроме того, к элементам рекламного средства относятся цвет, свет, звук, шрифт, рисунок, графические элементы, которые придают рекламному сообщению эмоциональную окраску.
В одном рекламном средстве могут присутствовать все указанные элементы, а в другом — только часть их.
Роль одного и того же элемента в разных рекламных средствах не одинакова. Однако, независимо от значимости каждого элемента, он должен отвечать определенным требованиям.
Текст является неотъемлемой частью большинства рекламных средств. Он, как правило, является главным элементом, раскрывающим основное содержание рекламного сообщения.
Важное требование, предъявляемое к рекламным текстам, — максимум информации при минимуме слов. Количество слов в тексте должно быть таким, чтобы покупатель без каких-либо затруднений мог охватить его одним взглядом. Выделяются слова с повышенной рекламной ценностью, большой эмоциональной силой, создающие наглядный, осязаемый образ. Основную смысловую нагрузку в тексте несет заголовок, который дает рекламируемому объекту сжатую, точную характеристику. (1)
Таким образом, ценность рекламного текста определяется его совершенной языковой формой, полностью раскрывающей идею, основной замысел и содержание рекламы. Эффективность рекламы во многом зависит от того, насколько ясное, четкое представление получит читатель о внешнем виде и содержании рекламируемого товара.
Рекламный текст должен быть:
1. Конкретным и целенаправленным. В рекламе не допускается любая отвлеченность. Основная мысль рекламного текста может быть выражена в форме лозунга. В тексте выделяют особенности, которые позволяют отличить рекламируемый объект от других. Покупатель должен понять и запомнить рекламу.
2. Доказательным, логично построенным и доходчивым.
Содержание рекламного текста должно само по себе заинтересовать покупателя, привлечь его внимание к товару и подвести к мысли о необходимости купить предлагаемый товар или воспользоваться услугой. Если же текст ни в чем не убедил покупателя, то бессмысленно призывать его последовать советам рекламы.
Текст, как правило, содержит заголовок, разъяснение и заключение. Заголовок рекламного текста должен привлекать внимание к тексту, сообщать минимум информации, заинтересовать покупателя, помочь понять пользу рекламируемого товара (услуги). Разъяснение включает детали, которые играют роль доказательства и убеждения.
Цель заключительной части текста рекламного сообщения — закрепить главную мысль, рассеять сомнения, убедить потребителя купить товар или воспользоваться услугой.
3. Кратким, лаконичным. Краткий текст лучше воспринимается читателем. Он не должен содержать слова, не несущие смысловой нагрузки.
4. Оригинальным, неповторимым, интересным, занимательным, остроумным.
Совершенно исключено употребление в тексте непонятных, малоизвестных слов, нельзя заставлять прохожего долго думать над текстом, нужно легким и понятным языком доводить до его сознания главную мысль.
Хорошо выполненные тексты украшают рекламные средства, в то время как безвкусные тексты способны все испортить.
Большим успехом пользуются остроумные юмористические тексты. Однако при их составлении нужно быть очень осторожным, чтобы они не выглядели насмешкой.
5. Рекламный текст должен быть грамотно исполненным. Это значит, что специалист в области рекламы должен уметь находить для выражения мысли лаконичные, точные и наиболее оправданные в данном контексте средства. Ошибки и недостатки в рекламе снижают ее информативность и действенность, мешают восприятию, вызывают отрицательную реакцию читателей. (5)
Выделяется несколько типов рекламных объявлений, в которых характер текста зависит от основной цели, выполняемой этим объявлением. В этой связи тексты могут быть информационные, напоминающие, внушающие и убеждающие.
Информационные тексты должны быть предельно просты и лаконичны, напоминающие тексты — краткими, внушающие — содержать многократное повторение названия товара или его свойств, убеждающие тексты акцентируют внимание на достоинствах рекламируемого товара (услуги). Убеждающая реклама должна быть одновременно и эмоциональной. Эмоциональная окрашенность информации, правильное чередование стандартных элементов в тексте способствуют живому и глубокому восприятию рекламы, т. е. повышению ее действенности.
В рекламном тексте не следует прибегать к каким-либо украшениям, разнообразию красок, а также к использованию нескольких видов шрифта.
Составление рекламных текстов — серьезная и трудная работа. Прежде чем приступить к ней, нужно всесторонне ознакомиться с потребительскими качествами рекламируемого товара (услуги), разобраться во всех свойствах. Затем, систематизировав полученные сведения, обратить внимание на характерные качества и сжато, но понятно рассказать об этом потребителю.
Рекламный текст информирует покупателя не только об отдельных товарах (услугах), способах их использования и экономичности, но и дает справки о новых методах торговли и услугах, оказываемых предприятиями торговли и бытового обслуживания. Например, еще не войдя в магазин, покупатель узнает о том, что в нем имеется стол раскроя тканей, что по желанию покупателей товары доставляют на дом и т. д.
Тексты в рекламе могут быть в форме стихов, рассказа, забавной истории или сказки. Если в рекламном сообщении используются стихи, то они должны быть ритмичными, яркими, образными.
Формы рекламных текстов могут представлять собой монолог рекламируемого товара (услуги) или диалог собеседников.
Изображение, занимающее особое место в рекламе, способствует усилению воздействия текста, а иногда вообще заменяет его.
В качестве средств изображения в рекламном сообщении могут использоваться фотоснимки, рисунки, диапозитивы, аудиовизуальное, кино- и телеизображение. Каждое из них выполняет одну или одновременно несколько задач, которые решаются в рекламном процессе.
Для иллюстрации можно использовать сам товар, его упаковку, а также результат его применения. Учитывая, что изображение воздействует на читателя мгновенно, ему отводят значительную площадь в рекламном средстве.
Рисунки могут быть черно-белыми и цветными. В рекламном рисунке часто воспроизводят юмористический образ за счет использования таких приемов, как увеличение какого-либо товара, усиление рисунком игры слов и др.
Если необходимо показать структуру рекламируемого товара, его форму, рисунок материала изготовления, то рекомендуется использовать фотоснимки.
В рекламных средствах чаще всего применяют прямоугольные фотографии. Это тот вид иллюстраций, который наиболее привычен для людей. Учитывая, что фотографии дают наилучшие шансы на хорошее воспроизведение, полезно использовать их всегда, когда это возможно.
Иллюстрация сама по себе может остаться загадкой, но объединенная с текстом, помогает раскрыть весь смысл рекламы. В рекламных средствах лучше использовать одну иллюстрацию, чем несколько. Если при изготовлении представляется возможность упростить фотоснимок до одной сцены, то воздействие рекламного средства сильнее, чем, если бы было несколько сцен.
Важное место в содержании рекламных средств принадлежит цвету. Цвет оказывает существенное влияние на чувства людей, их настроение, повышает эффективность восприятия. Он помогает реалистически изображать рекламируемые предметы, облегчает распознавание товаров по упаковке, вызывает и укрепляет ассоциации, способствует образованию символов.
Применение цвета в рекламных средствах само по себе еще не повышает их рекламной ценности. Важно правильно подобрать сочетание цветов, учесть особенности их взаимодействия.
За основу последовательности цветов принято считать спектральное разделение. В спектре имеется семь цветовых зон, в действительности же глаз различает огромное количество промежуточных оттенков, где каждый цвет переходит в другой плавно и постепенно. Цвета спектра располагаются в следующей последовательности: красный, оранжевый, желтый, зеленый, голубой, синий, фиолетовый. Их делят на теплые и холодные. К теплым цветам относятся те, которые содержат в себе больше желтых или красных, а к холодным — больше синих оттенков. Рассматривая спектр, можно заметить, что вправо по часовой стрелке от синего цвета расположены холодные цвета до середины фиолетовых тонов и теплые — до середины зеленых тонов. Понятие о «теплоте» цвета относительно. Любой цвет по сравнению с еще более теплым может казаться холодным и, наоборот, любой холодный цвет рядом с еще более холодным кажется теплым. Теплые цвета более интенсивные, они отражают больше света, чем холодные. Цвета бывают активные и пассивные. Теплые цвета — активные, холодные — пассивные.
Каждый из спектральных цветов имеет различную силу тона, т. е. светлоту. Например, фиолетовый цвет может иметь массу тонов, от самого светлого до самого темного.
Кроме того, цвет имеет зрительную весомость. Например, светлые тона цвета более легкие, а темные — более тяжелые.
Цвета разделяются также на основные (красный, желтый, синий) и дополнительные (оранжевый, фиолетовый, зеленый). Дополнительные цвета получаются в результате смешения двух основных цветов. Цвета черный, белый и все производные от них серые принято считать нейтральными.
Для того чтобы создать хорошее цветовое сочетание, приятно воспринимающееся глазом человека, необходимо знать, какие цвета с какими лучше сочетаются. Сочетание цветов может быть гармоничным или контрастным. Если расположить цвета в цветовом круге в той же последовательности, что и в спектре, то цвет, расположенный напротив другого, называется контрастным.
Не менее важная роль отводится в рекламных средствах свету. Свет необходим для восприятия самих средств рекламы и рекламируемых товаров, он также помогает выразить идею, заложенную в рекламном средстве.
Поверхности и предметы, окрашенные в различные цвета, имеют разный коэффициент отражения света. Меньше коэффициент отражения света у темных цветов (черный, темно-синий и др.), больше — у светлых (белый, светло-желтый и др.). В связи с этим темные поверхности рекламных средств требуют большей освещенности и, наоборот, светлые — меньшей.
Звук играет особую роль в отдельных видах рекламных средств.
Речевые звуки усиливают смысловое содержание рекламы, а музыкальные звуки и шумы повышают эмоциональное восприятие рекламного средства.
Не последнюю роль в реализации рекламной идеи выполняет шрифт. Используемые в рекламе шрифты отличаются начертанием буквенных знаков, соотношением высоты и ширины букв и толщиной штриха.
Вводить в текст, имеющий одну законченную мысль два — три шрифта не рекомендуется, так как это затрудняет быстрое его восприятие и снижает рекламную ценность. Нужные слова можно выделить либо цветом, либо размером знаков и интервалами между знаками.
Интервалы между буквами в слове нужно делать не меньше толщины штриха, а интервалы между словами в тексте — не меньше ширины буквы. Расстояние между строками должно быть не меньше 3/4 высоты буквы.
Чтобы легче было читать или воспринимать рекламное сообщение, цвета шрифта и фона подбирают всегда контрастные. (2)
1.2 Компьютеризированная реклама
Это – размещение рекламной информации в компьютерных сетях, впервую очередь – в Интернет.
Компьютеризированная реклама— принципиально новое средство распространения рекламы. Кроме того, компьютеризация традиционных средств рекламы внесла много нового в подготовку и проведение рекламных кампаний, существенно повысив их эффективность. (6)
В компьютеризированную рекламу входит:
• компьютерная техника;
• компьютеризированная информация;
• кабельное телевидение;
• видокаталоги;
• телекаталоги. (5)
Во многих странах мира действуют источники компьютеризированной рекламной информации, банки данных специализированных компьютерных систем, куда рекламодатели вносят за плату сведения о своих фирмах и о выпускаемых ими товарах (услугах). Потенциальные потребители, заинтересованные в закупке какой-либо продукции или товаров, могут подключаться к этим банкам данных с помощью телефонов или специальных терминалов и в считанные секунды получать необходимую информацию.
По оценкам зарубежных специалистов, компьютеризированная реклама в самом ближайшем будущем может существенно потеснить все остальные средства рекламы. В нашей стране в настоящее время процесс внедрения компьютеризированной рекламы пока только начинается.
За последние годы в развитых странах все большее развитие получают многие новые средства распространения рекламы, основанные на «обратной связи» с потенциальными покупателями и потребителями. Например, средства рекламы, представляющие собой сочетание источников компьютеризированной информации и кабельного телевидения. На этих принципах основана и успешно развивается, в частности, торговля по видеокаталогам и телекаталогам. (8)
Рекламодатели и рекламные агентства, специализирующиеся в области прямой почтовой рекламы, все чаще вместо традиционных писем, проспектов или листовок начинают рассылать видеокассеты и видеодиски.
Существующий арсенал средств рекламы стремительно развивается и совершенствуется по самым различным направлениям, поэтому приведенная классификация основных средств рекламы и видов рекламных материалов достаточно условна и не является незыблемой догмой. Часто между отдельными средствами и видами рекламы нет четких границ. Так, например, новогодние рекламно-подарочные издания можно отнести не только к печатной рекламе, но в равной степени и к рекламным сувенирам. Крупноформатные рекламные плакаты могут успешно использоваться и как средства наружной рекламы. Создание рекламно-престижных фильмов, их демонстрацию по телевидению можно рассматривать и как составную часть паблик рилейшнз. В подтверждение этого можно привести еще много подобных примеров.
Тем не менее, приведенная классификация дает довольно полную картину существующего в настоящее время арсенала средств рекламного воздействия на потребителей товаров и услуг и отражает разнообразие видов рекламных материалов и мероприятий, использующихся в практике рекламной работы. (7)
Компьютеризированная реклама имеет свои преимущества и свои недостатки.
Преимущества: - огромные потенциальные возможности оперативного- установления прямых деловых контактов с потребителем в случае его заинтересованности, относительно низкая стоимость.Недостатки:- ограниченность художественных приемов подачи рекламных сообщений;- небольшое количество пользователей компьютерных сетей в России;- возможность отключить показ рекламы при помощи специальных программ;- проблемы с безопасностью сделок, заключаемых в сети. (8)
2. Разработка рекламного сайта средствами языка
HTML
2
.1 О языке
HTML
Hyper Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров. Когда документ создан с использованием HTML, WEB-броузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.
Большинство документов имеют стандартные элементы, такие, как заголовок, параграфы или списки. Используя тэги HTML, вы можете обозначать данные элементы, обеспечивая WEB-броузеры минимальной информацией для отображения данных элементов, сохраняя в целом общую структуру и информационную полноту документов. Все что необходимо, чтобы прочитать HTML-документ - это WEB-броузер, который интерпретирует тэги HTML и воспроизводит на экране документ в виде, который ему придает автор.
В большинстве случаев автор документа строго определяет внешний вид документа. В случае HTML читатель, основываясь на возможностях WEB-броузера, может, в определенной степени, управлять внешним видом документа (но не его содержимым). HTML позволяет отметить, где в документе должен быть заголовок или абзац при помощи тэга HTML, а затем предоставляет WEB-броузеру интерпретировать эти тэги. Например, один WEB-броузер может распознавать тэг начала абзаца и представлять документ в нужном виде, а другой не имеет такой возможности и представляет документ в одну строку. Пользователи некоторых WEB-броузеров имеют, также, возможность настраивать размер и вид шрифта, цвет и другие параметры, влияющие на отображение документа.
HTML-тэги могут быть условно разделены на две категории:
1. Тэги, определяющие, как будет отображаться WEB-броузером тело документа в целом.
2. Тэги, описывающие общие свойства документа, такие как заголовок или автор документа.
Запомните, что основное преимущество HTML заключается в том, что ваш документ может быть просмотрен на WEB-броузерах различных типов и на различных платформах.
2.2
Создание
Web сайта
HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров. Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий каждого автора.
Например, HTML редакторы, такие, как "Netscape Navigator Gold" компании Netscape, позволяют создавать документы графически с использованием технологии WYSIWYG (What You See Is What You Get). С другой стороны, большинство традиционных средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.
2.
3 Структура документа
Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-броузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:
<HTML>
...тело документа...
</HTML>
Заголовочная часть документа <HEAD>. Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет собой общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:
<HTML>
<HEAD>
<TITLE>Список сотрудников</TITLE>
</HEAD>
...
Внимание! Технически, стартовые и завершающие тэги ти
Заголовок документа <TITLE>. Большинство WEB-броузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-броузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.
Комментарии. Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются броузером. Синтаксис комментария:
<!--Это комментарий-->
Комментарии могут встречаться в документе где угодно и в любом количестве.
2.4
Гипертекстовые
ссылки
Гипертекстовые ссылки являются ключевым компонентом, делающим WEB привлекательным для пользователей. Добавляя гипертекстовые ссылки (далее - ссылки), вы делаете набор документов связанным и структурированным, что позволяет пользователю получать необходимую ему информацию максимально быстро и удобно.
Ссылки имеют стандартный формат, что позволяет броузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например, запрашивать файл по FTP-протоколу для отображения его броузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов.
Внимание! Вы можете использовать ссылки как для перемещения по документу, так и для перемещения от одного документа к другому. Однако HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдете на предыдущую ссылку, а вернетесь на ту часть документа, которую вы просматривали до этого.
URL. HTML использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа. Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис. Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слэша после двоеточия обозначают имя машины:
method://machine-name/path/foo.html
Следующий пример представляет собой вызов HTML-документа index.html с сервера www.softexpress.com с использованием HTTP протокола:
http://www.softexpress.com/index.html
Uniform Resource Locator имеет следующий формат:
method://servername:port/pathname#anchor
Опишем каждый из компонентов URL:
METHOD. Имя операции, которая будет выполняться при интерпретации данного URL. Наиболее часто используемые методы:
file:
чтение файла с локального диска. Имя файла интерпретируется для локальной машины пользователя. Данный метод используется для отображения какого-либо файла, находящегося на машине пользователя. Например: file:/home/alex/index.html - отображает файл index.html из каталога /home/alex на пользовательской машине
http:
доступ к WEB-странице в сети с использованием HTTP-протокола. (Это наиболее часто используемый метод доступа к какому-либо HTML-документу в сети). Например: http://www.softexpress.com/ - доступ к Home-странице компании SoftExpress
ftp:
запрос файла с анонимного FTP-сервера. Например: ftp://hostname/directory/filename
mailto:
активизирует почтовую сессию с указанным пользователем и хостом. Например: mailto:info@softexpress.com - активизирует сессию посылки сообщения пользователю info на машине softexpress.com, если броузер поддерживает запуск электронной почты. Заметьте, что метод mailto: не требует указание слешей после двоеточия (как правило, после двоеточия сразу идет электронный адрес абонента)
telnet:
обращение к службе telnet
news:
вызов службы новостей, если браузер ее поддерживает. Например: news:relcom.www.support
SERVERNAME. Необязательный параметр, описывающий полное сетевое имя машины. Например: www.softexpress.com - полное сетевое имя сервера фирмы СофтСервис.
Если имя сервера не указано, то ссылка считается локальной, и полный путь, указанный далее в URL вычисляется на той машине, с которой взят HTML-документ, содержащий данную ссылку. Вместо символьного имени машины может быть использован IP-адрес, однако это не рекомендуется из-за возможного пересечения с фиксированными локальными адресами внутренней сети.
PORT. Номер порта TCP на котором функционирует WEB-сервер. Если порт не указан, то "по умолчанию" используется порт 80. Данный параметр (port) не используется в подавляющем большинстве URL.
PATHNAME. Частичный или полный путь к документу, который должен вызваться в результате интерпретации URL. Различные WEB-сервера сконфигурированы по разному для интерпретации пути доступа к документу. Например, при использовании CGI скриптов (исполняемых программ), они обычно собираются в одном или нескольких выделенных каталогах, путь к которым записан в специальных параметрах WEB-сервера. Для данных каталогов WEB-сервером выделяется специальный логический путь, который и используется в URL. Если WEB-сервер видит данный путь, то запрашиваемый файл интерпретируется как исполняемый модуль. В противном случае, запрашиваемый файл интерпретируется просто как файл данных, даже если он является исполняемым модулем. Например: http://www.softexpress.com/cgi-win/handle.exe
В данном примере HTTP-сервер должен вызвать CGI-скрипт с именем handle.exe, который находится на машине с сетевым именем www.softexpress.com. Путь к данному скрипту - /cgi-win/ - в действительности является виртуальным путем (выделенным сервером для исполняемых модулей). Заметьте, что при описании пути используется UNIX-подобный синтаксис, где, в отличии от DOS и Windows используются прямые слеши вместо обратных. Если после сетевого имени машины сразу идет имя документа, то он должен находиться в корневом каталоге на удаленной машине или (что чаще) в каталоге, выделенном WEB-сервером в качестве корневого. Если же URL заканчивается сетевым именем машины, то в качестве документа запрашивается документ из корневого каталога удаленной машины с именем, установленным в настройках WEB-сервера (как правило, это index.html).
#ANCHOR. Данный элемент является ссылкой на строку (точку) внутри HTML-документа. Большинство броузеров, встречая после имени документа данный элемент, размещают документ на экране таким образом, что указанная строка документа помещается в верхнюю строку рабочего окна браузера. Точки, на которые ссылается #anchor, указываются в документе при помощи тэга NAME, как это будет описано далее.
Структура ссылок в HTML-документе. Пока что мы рассмотрели только внешний вид URL. Для того, чтобы браузер отобразил ссылку на URL, необходимо отметить URL специальными тэгами в HTML-документе. Синтаксис HTML, позволяющий это сделать - следующий:
<A HREF="URL"> текст-который-будет-подсвечен-как-ссылка </A>
Тэг <A HREF="URL">открывает описание ссылки, а тэг </A> - закрывает его. Любой текст, находящийся между данными двумя тэгами подсвечивается специальным образом Web-браузером. Обычно этот текст отображается подчеркнутым и выделен синим (или другим заданным пользователем) цветом. Текст, обозначающий URL, не отображается браузером, а используется только для выполнения предписанных им действий при активизации ссылки (обычно при щелчке мыши на подсвеченном или подчеркнутом тексте). Вот пример сегмента HTML-документа:
Для получения примера смотри <A HREF="http:/www.ruswebmasters.com/index.htm>страницу </A>
Данная строка будет выглядеть на экране следующим образом:
Для получения примера смотри страницу
Ссылки на точки внутри документа. Вы можете делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя прокрутку экрана. Как только вы щелкнете на ссылке, браузер переместит вас на указанный раздел документа, а строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена на первой строке окна браузера (если данная строка не присутствует уже на экране браузера).
Для создания такой ссылки необходимо выполнить следующие шаги:
1. Создайте маркер раздела. Синтаксис данного маркера следующий:
<A NAME="named_anchor"> Текст-который-отобразится-в-первой-строке-броузера </A>
2. Создайте ссылку на данный маркер:
<A HREF="#named_anchor"> Текст </A>
Например:
<p><b>Список разделов</b></p> <ul> <li><a href="#ex1">Раздел 1</a></li> <li><a href="#ex2">Раздел 2</a></li> </ul> <p><a name="ex1"></a>Раздел 1</p> <ul> <p>Текст раздела 1</p> </ul> <p><a name="ex2"></a>Раздел 2</p> <ul> <p>Текст раздела 2 <br></p>
Список разделов
o Раздел 1
o Раздел 2
Раздел 1
Текст раздела 1
Раздел 2
Текст раздела 2
Символы "#ex1" сообщает вашему браузеру, что необходимо найти в данном HTML-документе маркер с именем "ex1".
Когда пользователь щелкнет мышью на строке "Раздел 1", браузер перейдет сразу к разделу 1.
Внимание! Как ранее было показано в синтаксисе URL, маркер раздела может быть поставлен как в том же документе, который просматривается в текущий момент, так и в другом документе. Во втором случае браузер осуществит подгрузку другого документа и перейдет к указанному для него разделу.
2.5
Добавление
стилей
в
документ
HTML позволяет использовать различные стили шрифтов для выделения текстовой информации в ваших документах. Вот короткий список стилей, поддерживаемых большинством браузеров:
bold (жирный)
italic (наклонный)
mono spaced (type writer - с использованием фиксированных шрифтов)
Вы можете комбинировать различные виды стилей, например жирный и наклонный.
Таблица №2: Основные стили текста
| Стиль |
Элемент или тэг |
Результат |
| Bold |
<B> Этот текст жирный </B> |
Этот текст жирный |
| Italic |
<I> Этот текст наклонный </I> |
Этот текст наклонный
|
| Mono spaced |
<TT> Этот текст с непроп. шрифтом </TT> |
Этот текст с непроп. шрифтом |
Комбинирование стилей позволяет вам отображать в одной строке несколько элементов различными стилями, например:
<b>Жизнь</b> - <i>это <b>песня!</b></i>
Жизнь - это песня!
Внимание! Добавление большого количества стилей и их комбинаций приводит к затруднению чтения текста!
Дополнительные стили:
· big (большой)
· small (маленький)
· sub (подстрочник)
· sup (надстрочник)
· Таблица №3: Дополнительные стили текста
| Стиль |
Элемент или тэг |
Результат |
| Big |
Этот текст <BIG> большой </BIG> |
Этот текст большой |
| Small |
Этот текст <SMALL> маленький </SMALL> |
Этот текст маленький |
| Sub |
Этот текст <SUB> подстрочник </SUB> |
Этот текст подстрочник
|
| Sup |
Этот текст <SUP> надстрочник </SUP> |
Этот текст надстрочник
|
Размер шрифта <FONT SIZE>. Вы можете изменять размер шрифта при помощи тэга:
<FONT SIZE=+|- n>
Шрифт может иметь размер от 1 до 7. Вы можете прямо указать размер шрифта цифрой, или указать смещение относительно базового значения (по умолчанию - 3) в положительную или отрицательную сторону. Базовое значение можно изменить при помощи тэга:
<BASEFONT SIZE=n>
Например:
<p>и <font SIZE=+1>з</font><font SIZE=+2>м</font> <font SIZE=+3>е</font><font SIZE=+4>н</font> <font SIZE=+3>е</font><font SIZE=+2>н</font> <font SIZE=+1>и</font> е</p>
изменение
Цвет шрифта <FONT SIZE>. Вы можете изменить цвет шрифта при помощи тэга:
<FONT COLOR="#xxxxxx>
Цвет указывается в RGB-формате (Red-Green-Blue) посредством указания размерности каждой компоненты цвета в шестнадцатиричном формате. Например, белый цвет обозначается "000000", черный - "FFFFFF", синий - "0000FF" и т.п.
<FONT COLOR="#FF0000"> Красный </FONT> <FONT COLOR="#00FF00"> Зеленый </FONT> <FONT COLOR="#0000FF"> Синий </FONT>
Красный Зеленый Синий
3.Описание создания сайта
3.1 Подготовка
Итак, в самом начале мне были нужны 2 главные вещи – хороший учебник по HTML и не менее хороший HTML-редактор. Учебник мне был необходим, так как знаний, почерпнутых на уроках, было недостаточно, а редактор намного упрощает создание Web-страниц. Использовать для этого стандартный блокнот Windows очень неудобно, главные его неудобства – это короткая история отмены (отменить можно не более одного действия) и необходимость постоянно сохранять документ, переходить в браузер, обновлять страницу для просмотра изменений. А HTML-редактор позволяет просмотреть изменения, внесённые в Web-страницу в своём внутреннем браузере одним нажатием кнопки. Конечно же, в нём неограниченна история отмены, а также имеется множество других плюсов по сравнению с блокнотом.
Немного побродив по просторам Интернета, я нашла несколько электронных учебников по HTML, лучшим из которых оказался самоучитель Алленовой Натальи, так как написан очень доступно даже для “чайников” в создании Web-страниц, каким я, по сути, и была. Там нашлось всё, что я хотела узнать.
Затем я занялась поиском простого, удобного, а главное, бесплатного редактора Web-страниц. Прочтя описания программ, я выбрала несколько редакторов, лучшим из которых оказался редактор Arachnophilia. В этой программе есть практически всё для создания сайта. Например, создать таблицу так же просто, как программе Microsoft Word – просто указать количество строк и столбцов. После нажатия кнопки “Ok” все соответствующие теги будут внесены в HTML-код создаваемой страницы. Так же легко осуществить и другие действия, одним словом, огромное спасибо создателю!
3.2
Создание главной страницы
Итак, создание первой страницы, со стандартным именем index.htm. При создании новой страницы Arachnophilia выдаёт окошко с предложением указать цвета фона, текста и ссылок, а также даёт возможность указать заголовок. Я указала только цвет фона – травянисто-зелёный, и заголовок, всё остальное осталось по умолчанию, так как цвет текста и ссылок необходимо было подбирать на уже имеющемся фоне, для хорошей смотрибельности.
После нажатия “Ok”, в моей первой странице уже были прописаны необходимые теги. Первый просмотр! Передо мной предстало пустое зеленое поле с заголовком вверху. Ну что же, подумаем над шапкой. Сначала я хотела разместить там просто текст приветствия, но, подумав, решила поместить фото нашего города – всё-таки сайт решила сделать о городе.
И тут я вовремя вспомнила о разрешениях. У половины пользователей стоит экранное разрешение 800*600, у второй половины 1024*768, другие разрешения используются очень редко. Сайт должен хорошо смотреться при обоих разрешениях. Я видела сайты, сделанные для просмотра при 1024*768, при разрешении 800*600 создаётся необходимость горизонтальной прокрутки, что очень мешает просмотру сайта. А если создать сайт при разрешении 800*600, и выровнять все объекты по центру, то при просмотре на 1024*768 он смотрится даже лучше. Так я и сделала.
Итак, рисунок. Если сделать его шириной 800 пикселей, то при разрешении 800*600 он будет занимать по ширине весь экран – не очень красиво. Значит, нужно сделать его немного поуже по ширине. Посмотрев фотографии, я нашёл подходящую, шириной 752 пикселя, с изображением акимата. Я уже собирался вставить её в страницу, и тут заметил её объём – 120 Кб. При обычном модеме, качающем не более 4 Кб в секунду, только рисунок открывался бы полминуты. Ни один пользователь, подумала я, не выдержит подобной пытки, и покинет сайт ещё до его загрузки. Нужно было как-то уменьшить объём рисунка. Имелось два способа – обрезать его по высоте и понизить качество. Я решила использовать оба, так как чем меньше объём, тем лучше. Для этого я выбрала лучшую программу для обработки изображений – всеми признанный Adobe Photoshop. После нескольких щелчков мышью, высота рисунка изменилась с 500 на 156 пикселей. Осталось понизить качество. При сильном понижении (1-3) объём очень сильно уменьшается, но смотрится рисунок так, что продолжать работу с моим сайтом не стал бы никто. При небольшом понижении (8-10) рисунок смотрится отлично, но объём слишком большой – ещё хуже. Выбор пал на середину (6), неплохое качество и объём 31 Кб, значит, загрузка рисунка осуществится менее чем за 8 секунд – это ещё можно вытерпеть. В итоге получилась фотография 752*156 пикселей объёмом 31 Кб.
Поместив её в папку с сайтом, я открыла HTML-редактор, и после нажатия нескольких кнопок рисунок расположился вверху страницы, с выравниванием по центру. Неплохо, но чего-то не хватает. Я решила, что было бы неплохо наложить на рисунок надписи, содержащие краткое описание моего сайта – например, название и то, что он содержит.
Снова открыв рисунок в Фотошопе, я написала в верхнем левом углу рисунка “kinel-city.kn”, а в правом нижнем краткое содержание сайта – “сведения, фото, программы”. С помощью таких эффектов, как внутренний свет, рельеф и др., я добилась того, чтобы надписи красиво смотрелись на фотографии. Сохранив рисунок с тем же именем, я обновил страницу. Вот это уже лучше! На этом работа с шапкой была закончена.
Текст. После изготовления шапки страницы, самое время было взяться за текст, выбрать размер, стиль шрифта и содержание страниц. Я решила, что всего на сайте будет 6 страниц. Первая страница будет приветственной, вторая будет содержать описание создания города, третья страница будет отображать сегодняшний Кинель, четвёртая будет содержать фотографии города, пятая – программы, имеющие отношение к Кинелю, а шестая – благодарности.
После небольших раздумий я набросала приветственный текст следующего содержания: “ЗДРАВСТВУЙТЕ! Добро пожаловать на сайт о Кинеле! Здесь Вы найдёте большое количество информации об этом городе, как о его создании, так и последние сведения о нём. Здесь Вы можете просмотреть и скачать фотографии города. Также на сайте доступны различные программы и файлы, имеющие отношение к Кинелю и Самаре, например телефонный справочник города, подробные карты и т.д. Благодарим за посещение сайта и до встречи!”.
Затем я долго выбирала подходящий шрифт. Мне нравился шрифт Georgia, но он присутствует не во всех операционных системах. Times New Roman, Courier и Verdana используются почти на всех сайтах. Поэтому я выбрала Comic Sans MS, немного напоминающий рукописный текст.
Размер шрифта я оставила по умолчанию, потому что более крупный или мелкий не смотрится как основной текст.
Затем я долго подбирала цвет текста, многие цвета неплохо смотрелись на зелёном фоне, но остановился я на красно-коричневом.
Кнопки и таблицы. Итак, настало время взяться за кнопки. Простые прямоугольники смотрелись далеко не очень красиво, а создать кнопки с непрямыми углами проще всего было в Macromedia Flash. За пару часов я изготовила 5 отличных кнопочек, загорающихся при наведении на них указателя мыши. Кнопкой, ведущей на первую страницу, я решила сделать шапку страницы, так как она не менялась во всех страницах моего сайта.
На этом создание кнопок было завершено, осталось красиво расположить их относительно текста. Лучше всего смотрелась страница при расположении кнопок в столбик слева от текста приветствия. Очень долго я билась над выравниванием кнопок и текста, пока не расположила их в таблицы, кнопки в одну, а текст – в другую, а таблицы – рядом друг с другом. Всё сразу встало на свои места и стало выглядеть намного лучше. Конечно же, рамки таблиц пришлось убрать, так как с ними страница выглядела хуже.
Всё было хорошо, но как же сделать, чтобы это всё не выглядело хуже при смене разрешения? И я решила поместить таблицу с кнопками и таблицу с текстом в одну большую таблицу с шириной 752 пикселя, под верхний рисунок, и расположить её по центру. Теперь ничего никуда не съезжало при смене разрешения. Эту же структуру я сохранила и при создании остальных страниц моего сайта.
Баннеры и авторство. Чего же ещё не хватает, думала я, смотря на получившуюся страничку и вспоминая страницы, виденные мною в Интернете? Конечно же, баннеров. Зайдя на сайт о Кинеле - www.kinelgorod.ru, а также на сайт кинельской газеты “Кинельская жизнь”, я скопировала их баннеры, уменьшила их в Фотошопе и поместила в таблицу, а таблицу расположила под основной с выравниванием по центру. Для более чёткого отделения баннеров от текста приветствия я расположила над ними горизонтальную черту.
Осталось расположить в самом низу страницы имя автора и ссылку на почтовый ящик, как на большинстве сайтов. Маленьким шрифтом по центру я прописала своё имя и фамилию, а ещё ниже вставила рисунок почты, и сделала его ссылкой на свой почтовый ящик с помощью функции mailto:.
На этом создание основной страницы было окончено, и такая структура сохранялась на всех страницах, менялся лишь текст содержания, но неизменно над ним был рисунок-шапка, слева от него – кнопки, а под ним баннеры и ссылка на почту автора.
3.3 Создание второй страницы
При создании второй страницы, содержащей историю создания города, я просто скопировала HTML-код главной страницы, затем удалила текст приветствия и вставила на его место краткое описание страницы. Далее я вставила ещё одну горизонтальную черту. В итоге получилась копия первой страницы, только с другим текстом приветствия и двумя горизонтальными чертами над баннерами. А между этими чертами я расположила основной текст страницы, содержащий саму историю создания города. И, конечно же, я изменила заголовок страницы.
После набора 17 страниц книги "КИНЕЛЬ: ВЧЕРА, СЕГОДНЯ, ЗАВТРА", содержащих нужный материал, страница с историей была готова.
3.4 Создание страницы с рекламой города
Работа над третьей страницей заняла у меня больше времени, чем над всеми остальными, так как содержала больше всего материала. Набор десяти разделов по несколько страниц текста, в большом количестве содержащего кавычки, скобки, примеры и цифровые показатели – это дело не пары дней. К тому же, для лучшей навигации по странице я решила внедрить в неё якоря – ссылки внутри страницы. Под первой горизонтальной чертой я расположила в столбик названия всех разделов, сделав каждое ссылкой на начало соответствующего раздела. А в конце каждого раздела я расположила одинаковые ссылки, ведущие на начало списка якорей. Таким образом, просмотр страницы намного ускорялся. Также в конце каждого раздела, под ссылкой, я вставила горизонтальную черту, для более чёткого отделения разделов друг от друга.
На этом и третья страница была готова.
3.5 Создание страницы с фотографиями
В четвёртой странице сохранилась та же структура, что и в первых трёх, просто вместо основного текста необходимо было выложить фотографии города. Объём каждой фотографии составлял, в среднем, 70 Кб. Если на одной странице выложить их все, то её загрузка заняла бы огромное время, а создавать несколько страниц было нельзя. Для решения проблемы я с помощью Фотошопа сделала уменьшённые копии каждой фотографии и вставил их в таблицу. Под каждой маленькой фотографией я сделала ссылку, ведущую на её увеличенную копию. Всего на странице представлено 39 фотографий, объём каждой уменьшенной фотографии составил не более 4 Кб, поэтому страница должна загружаться меньше, чем за минуту. А если пользователь захочет скачать все фотографии, то нет необходимости закачивать их по одной – имеется возможность скачки ZIP-архива, содержащего все фотографии.
Таким образом, была завершена работа над четвёртой страницей моего сайта.
3.6 Создание страницы с программами
На пятой странице должны были помещаться программы, имеющие отношение к Кинелю, статьи и гимн Кинеля. Припомнив структуру сайтов, содержащих софт, я решила сделать скриншоты каждой программы и дать краткие описания. Таким образом, страница выглядела так – под текстом, содержащим описание страницы, располагалась горизонтальная черта, ниже название программы, затем скриншот, описание и ссылка для закачивания. Позже я сделала и скриншоты статей. Каждую программу или статью разделяла горизонтальная черта, для четкого отделения их друг от друга. Также я выложила для скачки гимн Кинеля в формате mp3, и программу-архиватор WinRAR. На этом пятая страница была завершена.
Заключение
Этот курсовой проект посвящен языку HTML. С помощью этого языка создаются файлы с расширением *.htm и *.html, являющиеся Web-страницами. Из них состоят сайты сети Интернет.
К курсовому проекту прикреплён сайт, как пример того, что можно создать при помощи языка HTML.
После прочтения этого проекта любой человек, даже совсем незнакомый с программированием, сможет понять основы программирования на HTML. А знающие, возможно, найдут что-нибудь новое для себя.
Список используемой литературы
1. Adobe Dreamweaver CS4: офиц. учебный курс. – М.: Эксмо, 2009. - 304 с.
2. Александров, А.В. Создание web-страниц и web-сайтов / А.В. Александров, Г.Г. Сергеев, С.П. Костин. - М.: Триумф, 2008. – 288 с.
3. Дронов, В.А. Adobe Dreamweaver CS4 (+ CD-ROM) / В.А. Дронов. – М.: BHV, 2009. - 832 с.
4. Кисленко, Н.П. HTML. Самое необходимое (+ CD-ROM) / Н.П. Кисленко. - СПб: БХВ-Петербург, 2008. - 352 с.
5. Коэн, И.Л., Коэн, И.Д. Полный справочник по HTML, CSS и JavaScript: [пер. с англ.] / И.Л. Коэн, И.Д. Коэн. - М.: ЭКОМ, 2007. - 1168 с.
6. Мейер, Э. CSS - каскадные таблицы стилей: подробное руководство / Э. Мейер. – М.: Символ-Плюс, 2008. - 576 с.
7. Хольцшлаг, М. Языки HTML и CSS для создания Web-сайтов: официальный учебный курс: [пер. с англ.] / М. Хольцшлаг. – М.: Триумф, 2007. - 304 с.
8. http://pro.net.ru/ - Записки web-мастера.
9. Бурсов, М.В. Основы работы с HTML-редактором Dreamweaver: учеб.-метод. Пособие / М.В. Бурсов, В.М. Домненко, Д.А. Гаврилин, Д.Г. Николаев. – СПб: ГИТМО (ТУ), 2002. – 104 с.
10. Дригалкин, В.В. HTML в примерах. Как создать свой Web-сайт: самоучитель / В.В. Дригалкин. – М.: Диалектика, 2003. – 192 с.
11. Кузнецов, М.В. PHP 5. Практика разработки Web-сайтов / М.В. Кузнецов, И.В. Симдянов, С.В. Голышев. - СПб.: БХВ-Петербург, 2005. - 960с. ил.
12. Пауэрс, Д. Adobe Dreamweaver, CSS, Ajax и PHP / Д. Пауэрс. - СПб: BHV-CПб, 2009. – 1056 с.
13. Ташков, П. Веб-мастеринг на 100%. HTML, CSS, JavaScript, PHP, CMS, графика, раскрутка / П. Ташков. – СПб.: Питер, 2009. - 512 с.
14. Экслер, А. Создание и раскрутка сайтов в Интернете / А. Экслер. – М.: Пресс, 2007. – 288 с.
Размещено
Приложение А:
Приложение Б: