Создание сайта "Владимир Высоцкий"

Содержание 

Введение ……………………………………………………………………….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].