Содержание
Введение ……………………………………………………………………….4
1 Создание Web-сайта с помощью языка HTML……………….6
1.1 Понятие web-сайта. Классификация web-сайтов.……………………..6
1.2 Язык HTML………………………………………………………………7
1.3 Структура HTML-документа……………………………………………8
1.4 Форматирование текста…………………………………………………9
2 HTML-редакторы……………………………………………………….....13
3 СОЗДАНИЕ САЙТА «ВЛАДИМИР ВЫСОЦКИЙ»………………………..19
3.1 Разработка структуры Web-сайта……………………………………..19
3.2 Работа с текстом………………………………………………………..21
3.3 Создание таблиц………………………………………………………..22
3.4 Создание списков………………………………………………………23
3.5 Графика………………………………………………………………….25
ЗАКЛЮЧЕНИЕ ………………………………………………………………....27
СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ ……………………………... 28
ВВЕДЕНИЕ
Широкое применение новых информационных и коммуникационных технологий является необратимой тенденцией мирового развития и научно-технической революции последних десятилетий. Люди все чаще и чаще обращаются по различным причинам к такому источнику информации как Глобальная Компьютерная Сеть (World Wide Web).
World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet.
По прогнозам специалистов вскоре все семьи будут ежедневно пользоваться услугами Интернета. Это будет время, когда любой человек, владеющий компьютером, сможет "скачать" с его помощью статьи, иллюстрации, видео- или аудиоинформацию по любой интересующей его теме. Он сможет получить эту информацию тогда, когда он этого пожелает. Через какое-то время системы искусственного интеллекта – параллельный машинный перевод, а также идентификация и распознавание голоса сломают последние национальные и языковые барьеры и сделают возможным свободный транснациональный обмен информацией.
Уже сейчас каждый человек может участвовать в развитие Internet. Достаточно просто создать свой Web-сайт, состоящий из Web-страниц.
Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.
Разработка Web-сайта, воплощающего все известные на сегодняшний день передовые идеи и технологии, - цель данной курсовой работы.
Для достижения поставленной цели необходимо решить ряд задач, таких как:
· изучить языкHTML;
· ознакомиться с инструментарием для создания Web-сайтов;
· определить тему и структуру своего Web-сайта.
1 СОЗДАНИЕ
WEB
-САЙТА С ПОМОЩЬЮ ЯЗЫКА
HTML
1.1 Понятие web-сайта. Классификация
web-сайтов
Информация, доступная пользователям Internet, располагается на компьютерах (Web-серверах), на которых установлено специальное программное обеспечение. Значительная часть этой информации организована в виде Web-сайтов. Каждый из них имеет свое имя (адрес) в Internet.
Web-сайт – это информация, представленная в определенном виде, которая располагается на Web-сервере и имеет свое имя (адрес). Для просмотра Web-сайтов на компьютере пользователя используются специальные программы, которые называются браузерами. В зависимости от того, какое имя (адрес) сайта мы зададим в строке "Адрес", браузер будет загружать в свое окно соответствующую информацию [2].
Web-сайт состоит из связанных между собой Web-страниц.
Каждая страница Web-сайта также имеет свой Internet адрес, который состоит из адреса сайта и имени файла, соответствующего данной странице. Таким образом, Web-сайт – это информационный ресурс, состоящий из связанных между собой гипертекстовых документов (Web-страниц), размещенный на Web-сервере и имеющий индивидуальный адрес. Посмотреть Web-сайт может любой человек, имеющий компьютер, подключенный к Internet.
В настоящее время во всемирной паутине размещено несколько миллионов Web-сайтов и их число постоянно растет. Это личные страницы, содержащие информацию об авторе, его интересах. Их создают для того, чтобы обрести друзей по интересам, расширить свой кругозор, свой мир.
Информационные сайты.К ним относятся сайты учебных заведений, сообществ по интересам, фирм и др.
Сайты дистанционного обучения и консультирования.
На этих сайтах размещены обучающие программы и тесты, доступные в режиме on-line для студентов и школьников.
Сайты электронной коммерции. В Internetвстречаются виртуальные магазины, которые позволяют делать покупки, сидя за мониторами своих компьютеров.
Информационно-развлекательные сайты.Сайты, наполненные и предоставляющие доступ к различным развлекательным ресурсам: музыка, графика, анекдоты, истории, развлекательные программы и т.д. [4].
1.2 Язык
HTML
Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Web-проекта.
Можно создавать Web-сайт без знания языка HTML, поскольку тексты HTML могут создаваться разными специальными редакторами и конвертерами. Но писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах.
Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими Web-браузерами, как сейчас, так и в будущем [3].
HTML былратифицированWorld Wide Web Consortium. Он поддерживается несколькими широко распространенными браузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.
1.3 Структура HTML-документа
Поскольку HTML-документы записываются в ASCII-формате, то для его создания может использован любой текстовый редактор.
Обычно HTML-документ - это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag - специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Web-документа. Текст самих тегов Web-браузером не отображается [5].
Все теги начинаются символом < и заканчиваются символом >. Обычно имеется пара тегов - стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация. Например, <P>Информация</P>.
Здесь стартовым тегом является тег <
P>
, а завершающим - </
P>
. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках стоит символ слэш. Браузер, читающий HTML-документ, отображает его в окне, используя структуру HTML-тегов. В каждом HTML-документе должны присутствовать три главных части:
1) объявление HTML;
2) заголовочная часть;
3) тело документа.
Объявление HTML. <HTML> и </HTML>. Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег <HTML> (в самом начале документа), а последним - </HTML> (в самом конце документа).
Заголовочная часть. <HEAD> и </HEAD>. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках "Избранное". Специальные программы, спайдеры, поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами <TITLE> и </TITLE> [7].
Тело документа. Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега </HEAD>, а второй - перед тегом </HTML>. Тело HTML-документа - это место, куда автор помещает информацию, отформатированную средствами HTML (рис.1).
Рисунок 1 – Структура HTML-документа
1.4 Форматирование текста
В разделе BODY все символы табуляции и конца строк браузером игнорируются и никак не влияют на отображение страницы. Поэтому перевод строки в исходном тексте HTML-документа не приведет к началу новой строки в отображаемом обозревателем тексте при отсутствии специальных тегов. Это правило очень важно помнить и не забывать ставить разделяющие строки теги, иначе у текста не будет абзацев, и он станет нечитаемым.
Для начала новой строки используется тег <BR>. Этот тег приводит к отображению браузером дальнейшего текста с начала следующей строки. Закрывающий для него тег не используется. Он удобен, если требуется с какого-то места писать с новой строки без начала нового абзаца, например, в стихотворении. Повторное его использование позволяет вставить одну или несколько пустых строк, отодвинув следующий фрагмент страницы вниз.
Сплошной текст без промежутков читается не очень легко, его неудобно просматривать и находить нужные места. Разбитый на абзацы, текст воспринимается гораздо быстрее. Для начала нового абзаца используется тег <P>. Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение <P>, в отличие от <BR>, не приведет к появлению нескольких пустых строк, также останется одна пустая строка [1].
Внутри скобок тега кроме его названия могут размещаться также атрибуты. Они отделяются от названия и между собой пробелами (одним или несколькими). Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег <P> может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выровнен влево ALIGN="left". Возможны также выравнивания вправо ALIGN="right" и по центру ALIGN="center". При использовании атрибутов, после форматируемого текста следует использовать закрывающий тег </P>. Если его нет, то новый тег <P> означает закрытие предыдущего, соответственно вложенные <P> невозможны
Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием (рис.2):
Рисунок 2 – Пример выравнивания абзацев в HTML-документе
Кроме использования этих тегов, для разрыва строк возможно использование символов конца строк и табуляций в самом HTML-документе. Для этих целей существует тег <PRE>. Весь текст, помещенный между тегами <PRE> и </PRE> будет выводиться без изменений, то есть со всеми концами строк и табуляциями [8].
В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии. Они, как и текст, не требуют никаких внешних файлов. Тег <HR> выведет горизонтальную линию единичной толщины вдоль всей ширины страницы. Горизонтальная разделительная линия всегда приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег <HR> может содержать несколько атрибутов. <HR SHADE> и <HR> дают контурную линию с трехмерным эффектом углубления. <HR NOSHADE> дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселах. Атрибут ALIGN может принимать значения, аналогичные его значениям для тега <P>, но выравнивание по умолчанию по центру. Атрибут SIZE задает толщину линии в пикселах от 1 до 175; по умолчанию 1, но если <HR SHADE>, (линия - контурная), то добавляется толщина, необходимая для трехмерного эффекта углубления [5].
Линии, наряду с абзацами, позволяют выделить логические фрагменты текста. Но большое количество горизонтальных линий неприятно для посетителя Web-страницы, поэтому после каждого абзаца их ставить не следует. Они больше подходят для выделения целых разделов.
2
HTML
-РЕДАКТОРЫ
Существует множество специализированных HTML-редакторов: один - для создания новых сайтов с нуля, другой - для текущих работ по их поддержке, третий – для снабжения ваших шедевров какими-то уникальными возможностями.
Функции современных HTML-редакторов очень разнообразны: некоторые из них, например, обеспечивают формирование только отдельных страничек, другие, наоборот, применяются для проектирования целых Web-узлов с последующей загрузкой их на удаленные серверы в Internet. Сегодня трудно провести границу между профессиональными HTML-редакторами и теми, что предназначены для любительского Web-творчества [4].
AOLpress 2.0. Разработчик America Online. С помощью AOLpress можно проектировать не только одиночные страницы, но и весь сайт целиком, создавать активные зоны графических элементов оформления, автоматически проверять английскую орфографию, ссылки, строить карту Web-сервера. Окно редактирования AOLpress одновременно выполняет и функции браузера. Кроме того, приложение имеет неплохие инструменты для работы с таблицами, фреймами, формами, FTP-средства для управления Web-узлом, позволяет использовать апплеты Java, исправлять ошибки в импортированных файлах. В AOLpress 2.0 полностью реализована лишь поддержка спецификаций HTML 3.2. К сожалению, интерфейс программы трудно назвать интуитивно понятным, он, скорее, рассчитан на опытных пользователей, нет в приложении и популярных ныне мастеров, облегчающих жизнь новичкам. К недостаткам следует отнести еще и тот факт, что при установке по умолчанию пакет не поддерживает кириллицу.
HomeSite 5.5. Разработчик Аllaire. Об этом продукте от многих Web-мастеров нередко можно услышать самые лестные отзывы. Действительно, HomeSite обладает целым рядом свойств, которые традиционно нравятся профессионалам: во-первых, приложение имеет простой и удобный интерфейс, не занимает много места на диске; во-вторых, настраивать в нем можно практически все - от панелей инструментов и клавиатурных комбинаций до цветов, которыми будут отображаться теги на экране; в-третьих, редактор создан не с целью избавить вас от необходимости изучать HTML-код, а для того, чтобы ускорить и упростить работу по его использованию. Принцип, которому стараются следовать авторы программы, носит название "Pure HTML" (чистый HTML). Редактор поддерживает все популярные ныне стандарты и технологии Internet: DHTML, SMIL, CSS, JavaScript, ASP, JSP, Perl, CFML, VBScript, XML и XSL. Есть в HomeSite и мастера, и визуальные средства разработки, правда, их присутствие здесь - скорее дань моде, бонус, нежели необходимость (все та же проблема лишнего кода). После их использования можно прибегнуть к услугам инспектора кода, и хотя в его "умственных способностях" никто не сомневается, но все же интеллекта порой ему недостает, может иногда что-нибудь и испортить. HomeSite содержит мощный модуль для редактирования CSS-таблиц; обладает прекрасным механизмом поиска; его встроенный FTP-клиент по своим возможностям ничем не уступает специализированным приложениям (рекомендации по его настройке вы найдете в справочной системе). Этот редактор позволяет проектировать не только отдельные страницы, но и целые Web-узлы, а также автоматически проверять в них правильность ссылок, правда, эти действия все же лучше делать вручную.
CoffeeCup HTML Editor 9.5. РазработчикCoffeeCup Software. Названием своей фирмы авторы, пожалуй, хотели подчеркнуть, что работать с их продуктами так же приятно, как вести беседу в кругу друзей за чашечкой кофе. Действительно, CoffeeCup HTML Editor 9.5 - великолепный редактор с красочным интерфейсом и большими возможностями. Он наверняка придется по душе как новичку, так и профессионалу. В состав CoffeeCup HTML Editor 9.5 входят: довольно простой графический редактор; средства для нарезки изображений; встроенный FTP-клиент; мощные инструменты для работы с таблицами и кадрами. С его помощью вы сможете редактировать ASP-, PHP-, XML-, XSL-файлы, чистить HTML-, XML-, XHTML-код, производить глобальный поиск с заменой по всем связанным страницам, добавлять ваши собственные теги. Приложение снабжено неплохой справочной системой, в нем вы обнаружите огромный набор различных мастеров, готовых форм, таблиц и т. д. Кроме того, к HTML Editor 9.5 можно подключить другие отдельные приложения, разработанные CoffeeCup: редактор каскадных таблиц стилей, мощный GIF-аниматор, редактор графических карт, программное обеспечение для обеспечения Web-телетрансляций в Сети. Но самое приятное, что вместе с лицензионной версией редактора поставляется более 3000 графических элементов для оформления Web-страниц (пиктограмм, фотографий, рисунков и т. д.), около 100 сценариев JavaScripts, 175 анимированных GIF-файлов. И в заключение небольшая ложка дегтя: такой недостаток, как излишний код [6].
HomePage 3.0. Разработчик Claris, ныне принадлежит Filemaker. Этот редактор полностью оправдывает свое название и предназначен для создания
простеньких домашних страничек. В последней версии пакета появились мастера, облегчающие проектирование небольших сайтов и страниц с фреймами, значительно улучшилась справочная система. Кроме того, здесь имеется множество апплетов, Java-скриптов, шаблонов Web-документов, библиотека графических элементов. Возможности HomePage вполне удовлетворяют современным требованиям для такого класса продуктов: в нем существуют средства для пересылки файлов по протоколу FTP и редактирования Web-документов на удаленном сервере; неплохо выполнен поисковый механизм, проверка ссылок, английской орфографии; относительно проста процедура построения таблиц и форм; реализована раскраска кода. Есть и довольно полезная функция, с помощью которой легко оценить время загрузки вашей странички на линиях с разной пропускной способностью. В HomePage можно использовать любые типы растровых файлов - программа автоматически преобразует их в формат GIF. И все же, несмотря на "домашнее" название, пакет рассчитан скорее на опытных пользователей.
HoTMetaLPRO 6.0. Разработчик SoftQuad. Программа позволяет создать отличные сайты любой сложности. Несмотря на то, что этот мощный пакет рассчитан на профессионалов, его можно рекомендовать и начинающим пользователям. Стоит разобраться в интерфейсе и настройках, вы по достоинству оцените все его свойства, на одно перечисление, которых вряд ли хватило бы места в этой статье. И все же следует упомянуть хотя бы основные: здесь есть отличные средства WYSIWYG; развит FTP-клиент; реализована проверка HTML-кода; имеются мощные инструменты для редактирования каскадных таблиц стилей; работе с таблицами, формами, кадрами и проектами в целом - вообще посвящены отдельные меню; поддерживаются Java-апплеты и сценарии ActiveX, а также многое другое. Кроме того, в HoTMetaL PRO отлично развита система Undo/Redo, привлекает возможность записи клавиатурных макросов. При создании графических карт-ссылок для выделения области нужной формы следует выбрать изображение и воспользоваться соответствующими кнопками, расположенными в левой нижней части окна HoTMetaLPRO.
MicrosoftFrontPage2003. Разработчик Microsoft. О таком "явлении", как Microsoft FrontPage, Web-мастера отзываются весьма противоречиво: одни его бесконечно хвалят и прощают излишний код, оправдываясь удобством средств WYSIWYG, другие, наоборот, ругают, поскольку ручное исправление ошибок в нем - задача не для слабонервных. FrontPage, как говорят программисты, "заточен" под Internet Explorer, так что некоторые трюки, свойственные Internet Explorer, другими браузерами могут быть "неправильно истолкованы". Усеченная версия этого редактора поставляется вместе с браузером начиная с версии 4.0. Естественно, и сам FrontPage выполнен в стиле Microsoft: знакомые по Office кнопочки, меню, панели инструментов и т. д.,вдобавок ко всему - "опытные" мастера, готовые последовательно, шаг за шагом провести вас за руку (точнее, "за мышку") по всем этапам создания Web-страницы или целого сайта. Поэтому, если вы - опытный пользователь MicrosoftOffice, освоить данный HTML-редактор вам удастся без особого труда. В состав FrontPage входят три основных продукта: FrontPage Explorer (служит для управления элементами Web-узла), FrontPage Editor (непосредственно сам HTML-редактор) и FrontPage Web (средство, с помощью которого можно проверять правильность использования HTTP-связей). Возможности FrontPage растут из года в год. Если версия, выпущенная в 1998 г., подкупала пользователей, например, наличием компонента WebBot, позволяющего даже новичкам, не имеющим ни малейшего представления о программировании, строить сценарии обработки форм или обеспечивать функционирование форумов, то FrontPage 2003 характеризуется мощными средствами для коллективной работы, дающими возможность согласовывать действия многих профессионалов, задействованных в проекте.
Приложение HAHTsite 5.0 можно смело рекомендовать людям, у которых создание Web-сайтов поставлено на "конвейерную" основу. Несколько часов непринужденного щелканья мышью - и вполне работоспособный продукт. Новичкам придется по душе интуитивно понятный WYSIWYG-интерфейс Adobe PageMill, да и его возможностями они не будут разочарованы: таблицы, формы, фреймы, Java-апплеты - в общем, все как положено, только вот с кириллицей проблемы, все русские и украинские тексты приходится вносить через Clipboard.
Одним из лучших пакетов для профессиональной разработки сайтов считается редактор NetObjects Fusion 11. Стильный, продуманный интерфейс, десятки готовых шаблонов страниц, задание стиля исполнения сайта в целом, все мыслимые и немыслимые свойства профессиональных продуктов: от работы с таблицами, формами и фреймами до широкого использования Java-апплетов и FTP-клиента.
Многие профессионалы считают, что Macromedia Dreamweaver 8.0-
единственный WYSIWYG-редактор, заслуживающий их внимания, поскольку имеет прекрасные механизмы для очистки кода. Сама Macromedia рекламирует его так: "WYSIWYG-редактор для тех, кто думает на HTML". В нем есть все плюс тесная интеграция с Macromedia Flash 8.0 - популярным ныне приложением для создания Web-страниц, основанных на векторной графике.
Web-страницу можно написать и в простом текстовом редакторе Блокнот. Для того, чтобы ваш файл воспринимался как Web-страница, его расширение следует переименовать в .htm или .html. Тогда он будет открываться интернет-браузером. Создатели Web-страниц считают Блокнот достаточно удобным средством для создания файлов HTML. Блокнот предоставляет минимальные средства оформления, поэтому здесь исключена вероятность случайного сохранения специальных атрибутов форматирования в текстовых файлах. Это особенно важно иметь в виду при создании документов HTML для Web -страницы, так как присутствие специальных символов или других атрибутов форматирования на опубликованной Web-странице может оказаться нежелательным или даже вызвать ошибки [8].
3
СОЗДАНИЕ САЙТА «ВЛАДИМИР ВЫСОЦКИЙ»
3.1 Разработка структуры
Web
-сайта
Создавать сайт я решила в текстовом редакторе Блокнот, т.к. в процессе работы я смогу буду напрямую сталкиваться с применением тегов.
Свою работу я начала с определения тематики сайта. Я решила, что сайт будет посвящен Владимиру Высоцкому, т.к. мне нравится его творчество. Далее я стала разрабатывать структуру сайта [5]. Пришли к выводу, что мой сайт будет состоять из таких разделов, как:
· биография;
· творчество;
· дискография;
· жены;
· друзья;
· причина смерти;
· память о поэте.
Раздел «Биография» сообщает пользователю о самых главных этапах в жизни В. Высоцкого.
В разделе «Творчество» обсуждаются песни, стихи. Рассказывается о работе Высоцкого в театре и в кино.
Раздел «Дискография» посвящен информации об основных изданиях пластинок с записями выступлений В. Высоцкого.
В разделах «Жены» и «Друзья» обсуждаются взаимоотношения поэта с его родными и близкими. Дается оценка положения Высоцкого в кругу семьи.
«Причина смерти» - раздел, который раскрывает тайну гибели музыканта.
И, наконец, раздел «Память о поэте» рассказывает пользователю о том, какие награды получил Высоцкий за свою работу, какие достопримечательности разных городов носят его почетное имя.
В соответствии с разработанной структурой была спроектирована главная страница сайта (рис.3). Она содержит все основные структурные элементы, переход по которым осуществляется с помощью гиперссылок.
Рисунок 3 – Главная страница сайта.
Главная страница сайта выполнена через фрейм, то есть страница разделена на 3 части. Фрейм - элемент языка HTML версии 3.0 и выше. Фреймы позволяют разделить Web-страницу на несколько независимых окон и в каждом из них размещать отдельную Web-страницу. При этом допускаются ссылки из одного окна в другое окно. Обычно фреймы применяется для организации меню, постоянно находящихся на экране.
В качестве фона для всего сайта я выбрала песочный цвет. На мой взгляд, он не напрягает глаза пользователя и хорошо сочетается с цветами теста. Результата я добилась при помощи параметра <BGCOLOR> тега-контейнера <BODY> </BODY>.
3.2 Работа с текстом.
Как известно, основное наполнение Web-страниц - это все-таки текст. За редким исключением специальных сайтов-галерей. На самом деле, для того, чтобы в окне просмотра браузера отобразить текстовую строку, никаких тегов применять не требуется: Достаточно просто написать сам текст. Но, когда нужно уже разбить его хотя бы на абзацы, надо пользоваться тегами <Р> </Р>. При этом, тег <Р>, естественно, обладает параметром выравнивания ALIGN, который может принимать значения LEFT, RIGHT, CENTER и JUSTIFY (выравнивание текста по левому краю, по правому, по центру и по ширине).
Теги, использованные для форматирования текста:
· <B> </B> - используется для выделения текста полужирным шрифтом;
· <I> </I> -отображает текст курсивом;
· <U> </U> - позволяют подчеркнуть текст;
· <TT> </TT> - отображает текст, имитирующий стиль печатной машинки.
Для перехода на новую строку без вставки пустой строки существует тег <BR>.
По умолчанию цвет текста в HTML-документе черный. Изменить цвет текста можно с помощью тега <BODY> </BODY>. Для этого в этот тег надо добавить еще один атрибут TEXT. Например, <BODY TEXT ="#FFCC66">.
Задает цвет только отдельным отрезкам текста параметр COLOR тега <FONT>.
Также тег <FONT> обладает параметрами SIZE (размер шрифта) и FACE (тип шрифта). Например, <FONTCOLOR=#8B8682" SIZE="8"> </FONT>.
Применив эти теги, я получила следующее отображение текста в браузере (рис.4):
Рисунок 4 –Отображение текста в окне браузера
По умолчанию цвет текста в HTML-документе черный. Изменить цвет текста можно с помощью тега <BODY></BODY>. Для этого в этот тег надо добавить еще один атрибут TEXT.
Задает цвет только отдельным отрезкам текста параметр COLORтега <FONT>.
Также тег <FONT>.обладает параметрами SIZE (размер шрифта) и FACE (тип шрифта).
3.3 Создание таблиц
Описание таблиц должно располагаться внутри раздела документа <BODY>. Документ может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга. Каждая таблица должна начинаться тэгом <TABLE> и завершаться тэгом </TABLE>. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в каждой из которых задаются данные для отдельных ячеек. Каждая строка начинается тэгом <TR> и завершается тэгом </TR>. Отдельная ячейка в строке обрамляется парой тегов <TD> и </TD> или <TH> и </TH>. Тег <TH> используется обычно для ячеек-заголовков таблицы, а <TD> — для ячеек-данных.
Таблица может иметь заголовок, который заключается в пару тегов <CAPTION> и </CAPTION>.
Представление таблиц на странице моего сайта выглядит так (рис.5):
Рисунок 5 – Таблица на Web-странице
3.4 Создание списков
В языке HTML предусмотрен специальный набор тегов для представления информации в виде списков. Списки являются одним из наиболее часто употребляемых форм представления данных, как в электронных документах, так и в печатных.
В языке HTML предусмотрены следующие основные типы списков: маркированный, нумерованный и список определений.
Для написания своего сайта я использовала маркированный список. Вид маркеров списка определяется браузером, причем при создании вложенных списков браузеры автоматически разнообразят вид маркеров различного уровня вложенности. Для создания маркированного списка необходимо использовать тэг-контейнер <UL> </UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, отделяя, таким образом, список от основного содержимого документа.
Каждый элемент списка должен начинаться тэгом <LI>. Тег <LI> не нуждается в соответствующем закрывающем тэге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки.
<UL> может иметь параметр TYPE, который в свою очередь может принимать значения DISC (маркеры отображаются закрашенными кружочками), CIRCLE (маркеры отображаются незакрашенными кружочками), SQUARE (маркеры отображаются закрашенными квадратиками).
Рисунок 6 – Отображение списка в окне браузера
3.5 Графика
Графика важна для Web-документов. Без иллюстраций документ однообразен, вял и скучен. Графика делает его визуально привлекательнее и передает одну из основных идей документа.
Для встраивания изображений в HTML-документ следует использовать тег <IMG>, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением.
При включении графического изображения в документ можно указывать его расположение относительно текста или других элементов страницы. Способ выравнивания изображения задается значением параметра ALIGN тега <IMG> (рис.7, рис.8).
Рисунок 7 – Выравнивание изображения по левому краю
Рисунок 8 – Выравнивание изображения по правому краю
ЗАКЛЮЧЕНИЕ
В ходе выполнения курсовой работы был получен Web-сайт, удовлетворяющий всем требованиям и готовый к применению. С его помощью пользователи смогут получить необходимую информацию.
Таким образом, мы изучили возможности языка HTMLдля создания Web-страниц, узнали, какие HTML-редакторы лучше использовать в Web-дизайне, каковы преимущества и недостатки тех или иных программных пакетов.
Итак, поняв принцип построения Web-страницы, изучив возможности соединения в ней различных видов информации. Мы можем смело сказать, что Web-страницы, с их потенциалом могут применятся для различных целей.
Web-страница – это лицо той фирмы, того учреждения, того человека, который разместил ее в WWW. Именно поэтому сегодня Web-дизайну уделяется такое огромное внимание, ибо от него напрямую зависит популярность того или иного информационного ресурса Сети. Недаром сейчас профессия Web-дизайнера является одной из самых высокооплачиваемых.
Человек, создающий Web-страницу, соединяет свои знания и навыки со своим творческим потенциалом. Умение творить – вот что отличает настоящего Web-дизайнера. Для того, чтобы создать Web-страницу, которая бы радовала глаз, нужно сочетать в себе качества художника и программиста.
Подводя итог всему выше сказанному, хочется отметить, что HTMLстал тем форматом передачи данных, который наиболее полно и качественно удовлетворяет запросы современного общества. Несомненным фактом является и то, что будущее именно за HTML.
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
1. Гуллексон П. Создание веб-страниц для различных разрешений монитора [Электронный ресурс] / П. Гуллексон. – Режим доступа: http://www.readbox.ru/952.html
2. Дизайнерский портал DeForum.ru [Электронный ресурс]. – Режим доступа: http://www.deforum.ru/
3. Клишин Э. Веб-дизайн для начинающих / Э. Клишин // Игромания. – 2006. – №110. – С. 204-205.
4. Мелников М. Как создать привлекательный web-сайт? [Электронный ресурс] / М. Мелников. – Режим доступа: http://citforum.ru/internet/ webd/article_1.shtml
5. Официальный сайт Фонда В.С.Высоцкого [Электронный ресурс]. – Режим доступа: http://www.kulichki.com/vv/
6. Создание Web-страниц и Web-сайтов: Самоучитель: Учебное пособие / Под ред. В.Б. Комягина, В.Н. Печникова. – М.: ТРИУМФ, 2002. – 496 с.
7. Федорчук А. Как создаются Web-сайты: Краткий курс / А. Федорчук. – СПб.: Питер, 2000. – 420 с.
8. Хоумер А. DynamicHTML: Справочник / А. Хоумер, К. Улмен. – СПб.: Питер, 2000. – 512 с.
9. Шафран Э. Создание Web страниц: Самоучитель. – СПб.: Питер, 2001. – 320 с.
|
