86139

Технология создания Web-страниц

Курсовая

Информатика, кибернетика и программирование

Цель данной курсовой работы определить, что необходимо знать и уметь для создания Web-страницы, какое программное обеспечение может являться инструментарием для создания Web-страниц. Также в данной курсовой работе рассмотрены основы языка программирования Web-страниц – HTML, который является...

Русский

2015-04-03

502 KB

9 чел.

PAGE  2

Федеральное агентство по образованию

Омский государственный институт сервис

Кафедра высшей математики и информатики

К защите допущен (а)                                                          Защищено с оценкой                                                           

«___» ___________2007г                                                     «________________»

____________________                                                        «___»________2007г

Курсовой проект.

по курсу: Информационно-аналитическая деятельность в сфере сервиса.

на тему: «Технология создания Web-страниц».

                                                                  Проверил:  Разгоняев В.К.  

Выполнила: студентка гр. 41-ПИ

                                                                                        Давыдова Н.Н.                                                                       

Омск 2007

Содержание

[1] World Wide Web

[1.1] 1.1.  Распространение Internet

[1.2] 1.2. Концепция WWW

[1.3] 3.1. Язык HTML

[1.3.1] Таблица 1.

[1.3.2] Таблица 2

[1.3.2.1] Таблица эквивалентов для некоторых символов

[2] 4. Практическое задание

[3] Заключение

Введение

World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.

Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.

Пользователю приятно посещать те Web-страницы, которые имеют стильное оформление, не отягощены чрезмерно графикой и анимацией, быстро загружаются и правильно отображаются в окне Web-браузера.

Создать Web-страницу непросто, но наверно каждый человек хотел бы попробовать себя в роли дизайнера.

Цель данной курсовой работы  определить, что необходимо знать и уметь для создания Web-страницы, какое программное обеспечение может являться инструментарием для создания Web-страниц.

Также в данной курсовой работе рассмотрены основы языка программирования Web-страниц – HTML, который является общепринятым стандартом WWW. Это дает возможность ознакомиться со структурой Web-страницы и приемами ее правильного оформления.

World Wide Web

1.1.  Распространение Internet

Internet - это самая большая мировая компьютерная сеть. Теперь Internet имеет приблизительно 150 миллионов пользователей более чем в 50 странах. WWW доступен в основном через Internet; но говоря WWW и Internet мы  подразумеваем не одно и то же. WWW можно отнести к внутреннему содержанию, то есть это какой-либо абстрактный мир знаний, в то время как Internet является внешней стороной глобальной сети в виде огромного количества кабелей и компьютеров.

Рис. 1

На рис.1 страны, обозначенные черным цветом, имеют связь по Internet. Количество людей, которые имеют такой доступ, в этих странах становится все большее и большее. Страны, обозначенные белым цветом, могут работать по e-mail, в локальных сетях или не имеют ничего подобного вообще.

1.2. Концепция WWW

Так что же такое World Wide Web,  или, как говорят в просторечии, WWW, the Web,  или еще более простое - 3W? WWW - это распределенная информационная система мультимедиа, основанная на гипертексте. Давайте разберем это определение по порядку.

Распределенная информационная система: информация сохраняется на огромном великом множестве так называемых WWW-серверов (servers), то есть компьютеров, на которых установлено специальное программное обеспечение и которые объединены в сеть Internet. Пользователи, которые имеют доступ к сети, получают эту информацию с помощью программ-клиентов, программ просмотра WWW-документов. При этом программа просмотра посылает по компьютерной сети запрос серверу, который хранит  файл с необходимым документом. В ответ на запрос сервер высылает программе просмотра этот необходимый файл или сообщение об отказе, если файл по тем или иным причинам недоступен. Взаимодействие клиент-сервер происходит по определенным правилам, или, как говорят иначе, протоколам. Протокол, принятый в WWW, называется HyperText Transfer Protocol,  сокращенно - HTTP.

Мультимедиа -  информация включает в себя не только текст, но и двух- и трехмерную графику, видео и звук.

Гипертекст - информация в WWW представляется в виде документов, любой из которых может содержать как внутренние перекрестные ссылки, так и ссылку на другие документы, которые сохраняются на том же самом или на любом другом сервере.

Такие ссылки называют гиперссылками или гиперсвязями. На экране компьютера в окне программы просмотра ссылки выглядят как выделенные каким-нибудь образом (например, другим цветом и/или подчеркиванием) участка текста или графики. Выбирая гиперссылки, пользователь программы просмотра может быстро перемещаться от одной части документа к другой, или же от одного документа к другому. При необходимости программа просмотра автоматически связывается с соответствующим сервером в сети и запрашивает документ, на который сделана ссылка. Кстати, идея гипертекстового представления информации должна уже быть хорошо знакома пользователям разных версий системы Microsoft Windows. Именно по этому принципу построена в Windows система подсказок (Help), с той лишь разницей, что гипертекстовая система подсказок Windows не является распределенной.

Итак, Web-страница может содержать стилизованный и форматированный текст, графику и гиперсвязи с разными ресурсами Internet. Чтобы реализовать все эти возможности, был разработанный специальный язык, названная HyperText Markup Language (HTML), то есть, язык разметки гипертекста. Документ, написанный на HTML, представляет собой текстовый файл, который содержит собственно текст, несущий информацию читателю, и флаги разметки. Последние представляют собой определенные последовательности символов, которые являются инструкциями для программы просмотра; в соответствии с этими инструкциями программа располагает текст на экране, включает в него рисунки, которые сохраняются в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Internet. Таким образом, файл на языке HTML приобретает вид WWW-документа только тогда, когда он интерпретируется программой просмотра. О языке HTML будет детально рассказано в следующем разделе, поскольку без знания основ этого языка невозможно создать Web-страницу  для публикации в WWW.

2. Технология создания Web-страниц

2.1. Основные правила разработки сайта

Главный критерий, на который следует ориентироваться в процессе разработки Web-страниц – это удобство посетителей сайтов. Сложность заключается в том, что посетители используют широкий спектр программных и аппаратных средств. Отсюда вытекает необходимость стандартизации подходов к созданию Web-страниц, которые позволили бы посетителям комфортно воспринимать информацию с сайта. В Интернете принято молчаливое соглашение о том, что профессиональный сайт должен корректно отображаться при экранном разрешении 640480 точек с цветовой палитрой 256 цветов. Для того чтобы Web-страница правильно отображалась при использовании данной цветовой палитры, необходимо включать в состав документа в основном графику в формате GIF, и лишь самые необходимые изображения в формате JPEG. После подготовки шаблона Web-страницы, его необходимо протестировать на соответствие изложенным требованиям.

Второе правило обусловлено тем, что посетители сайта используют различные браузеры, которые используют разные алгоритмы обработки HTML-кода. Поэтому одна та же страница может отображаться в браузерах по-разному. Поэтому необходимо обратить внимание на идентичность отображения Web-страницы в Internet Explorer, Netscape Navigator.

Подавляющее большинство пользователей Интернета используют для выхода в Интернет соединение с помощью модема. В этом случае скорость передачи данных играет для них решающую роль, поэтому все страницы Web-сайта, а также встроенные в них графические и интерактивные элементы, должны быть минимальными по объему. Это достигается за счет использования при разработке сайта специальных графических компрессоров, а также ряда приемов, позволяющих удалить из HTML-документа лишний код.

Работая с Web-страницами, пользователь не должен испытывать никаких затруднений в навигации по сайту, независимо от типа установленного программного обеспечения и модели компьютера. Он должен отчетливо представлять логическую структуру сайта и иметь возможность доступа к его компонентам. Поэтому созданная Web-страница должна обязательно включать навигационные элементы, охватывающие все разделы сайта, причем эти элементы должны быть на виду. Их расположение следует выбрать, исходя из удобства пользователя.

Web-сайт является также и художественным произведением, поэтому рекомендуется выдержать весь проект в едином дизайнерском стиле, оформляя различные разделы таким образом, чтобы общее художественное решение было схожим для всего сайта.

3. Создание Web-страниц с помощью языка HTML

3.1. Язык HTML

Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language - язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Веб-проекта. 

Можно работать на Web без знания языка HTML, поскольку тексты HTML могут создаваться разными специальными редакторами и конвертерами. Но писать непосредственно на HTML нетрудно. Возможно, это даже легче, чем изучать HTML-редактор или конвертер, которые часто ограничены в своих возможностях, содержат ошибки или проводят плохой HTML код, который не работает на разных платформах.

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML, скорее всего, будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими браузерами Web,  как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами.

Работа по HTML - это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо. Он поддерживается несколькими широко распространенными браузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

3.2. Структура документа HTML

Описание страницы (сайта) содержится в документе HTML. Документ представляет собой текстовый файл, который можно создать средствами редактора Notepad (Блокнот). Документы содержат программные коды, называемые тэгами. Тэги заключаются в угловые скобки. Синтаксис их записи выглядит как <тэг>. Обычно тэги записываются прописными буквами. Все объекты, не заключенные в угловые скобки, интерпретатор воспринимает как текстовые, отображая их на экране "как есть". Практически все тэги парные. Первый из них называется открывающимся, второй – закрывающимся. В общем виде программная строка HTML выглядит следующим образом:

<тэг>обрабатываемое значение</тэг>

Можно вкладывать тэги друг в друга, когда обрабатываемым значением одного тэга служит другой.

<тэг1>

<тэг2>обрабатываемое значение</тэг2>

</тэг1>

Тэги могут содержать параметры, называемые атрибутами, которые в свою очередь могут иметь значения (аргументы).

Документ HTML должен начинаться с тэга <HTML> и заканчиваться тэгом </HTML>. Документы HTML состоят из двух основных частей: заголовка и тела. Каждая из этих частей ограничивается соответствующей парой тэгов:

<HEAD> и </HEAD> – тэги заголовка;

<BODY> и </BODY> – тэги тела.

Заголовок web-страницы содержит информацию о самом документе, иногда специальные директивы. Содержимое заголовка не отображается в браузере, это служебная информация. Тело документа включает в себя весь основной код разметки web-страницы, который и определяет отображение HTML-документа на экране монитора. Тело документа содержит весь текст, иллюстрации, элементы навигации и т.д. В результате структура HTML-документа выглядит следующим образом:

<HTML>

<HEAD>

Здесь будет заголовок

</HEAD>

<BODY>

Здесь будут тэги тела программы

</BODY>

</HTML>

Для того чтобы в заголовке окна браузера отобразился текст, содержащий название страницы, необходимо поместить его между тэгами <TITLE> и </TITLE>.

В HTML-документ можно вставить комментарий. Для этого используется тэг <!>. Все, что заключено внутри этого тэга, считается комментарием, например <! комментарий>.

3.3. Работа с текстом

Для того чтобы текст выглядел красиво, необходимо применить форматирование текста. Для оформления текстов используются специальные тэги.

Тэг <P> является тэгом абзаца. Он переводит курсор на новую строку и еще добавляет одну пустую строку. Данный тэг имеет атрибут ALIGN. Значения атрибута ALIGN приведены ниже:

  •  RIGHT – выравнивание текста по правому краю экрана;
  •  CENTER – выравнивание текста по центру экрана;
  •  LEFT – выравнивание текста по левому краю экрана;
  •  JUSTIFY – выравнивание текста по ширине экрана.

Тэг <BR> предписывает переход на новую строку. Возможно использование нескольких тэгов <BR> подряд для задания последовательности пустых строк.

Для выбора размера шрифта можно использовать тэги логических стилей. При переходе от первого стиля к шестому уменьшается размер и толщина букв шрифта. Тэги стилей записываются как <H1>  <H2>...<H6>. Каждый из тэгов имеет закрывающийся тэг. С помощью данных тэгов оформляются заголовки различных уровней.

Кроме использования специальных размеров и начертаний, можно определять шрифты для каждого фрагмента текста с помощью специальных тэгов (табл. 1). Для тэгов этой группы существуют закрывающиеся тэги.

Таблица 1.

Тэги шрифтов

Стиль

Тэг

Полужирный

<B>

Курсив

<I>

Подчеркнутый

<U>

Вычеркнутый

<S>

Пишущая машинка

<TT>

С помощью специального тэга <FONT> и его атрибутов можно задать гарнитуру, размер, цвет шрифта. Атрибуты тэга приведены ниже:

  •  SIZE="Размер". Атрибут определяет размер текущего шрифта для отдельных фрагментов текста. Диапазон значений от 1 до 7. Можно управлять размером текущего шрифта относительно основного: увеличивать (+), уменьшать (–).
  •  FACE="Имя шрифта". Атрибут задает гарнитуру шрифта.
  •  COLOR="Цвет". Атрибут задает цвет шрифта. Цвет можно задать по имени, например, BLUE (голубой), либо используя шестнадцатеричную запись кода цвета (красной, зеленой и синей составляющей). Черному цвету соответствует #000000, белому –#FFFFFF. Цвет получает смешением составляющих.

В математических формулах используются верхний и нижний индексы. Тэги <SUP> – для верхнего, <SUB> – для нижнего индексов соответственно.

По умолчанию браузер заполняет фон сплошным цветом, определенным настройкой браузера. Поэтому для адекватного отображения web-страницы необходимо зафиксировать цвет фона. Фоновый цвет задается в тэге <BODY> атрибутом BGCOLOR. Например, тэг, задающий светло-зеленый фоновый цвет, имеет вид:

<BODY BGCOLOR="#90EE90">

Тэг, задающий серый фоновый цвет имеет вид:

<BODY BGCOLOR="GRAY">

Атрибут тэга <BODY> TEXT позволяет задать цвет текста для всего документа в целом. Но этот цвет для отдельных фрагментов текста можно изменить атрибутом тэга <FONT>.

Иногда требуется разместить на странице списки. При отображении списков браузер выделяет их отступом от края страницы. Кроме того, списки могут быть вложенными.

Нумерованные списки задаются тэгом <OL>, маркированные – тэгом <UL>. Оба тэга парные. Для нумерованных списков можно выбрать способ нумерации с помощью атрибута TYPE со значениями: 1 (арабские цифры), А (прописные буквы), а (строчные буквы), i (римские цифры). Можно задать номер, с которого начинается нумерация элементов списка с помощью атрибута START внутри тэга <OL>.

Перед элементами списка следует поставить тэг <LI>, чтобы индексация происходила автоматически.

Тип маркера можно задать значениями атрибутом TYPE тэга <UL>: disc (черные кружки), circle (окружности), square (квадраты). По умолчанию отображается маркер типа disc.

При оформлении текста для того, чтобы отделить один раздел от другого, часто используют разделительные полосы. Такие полосы вставляются тэгом <HR>. Можно задать толщину, ширину и способ выравнивания разделительной полосы атрибутами тэга:

  •  SIZE="значение". Атрибут задает толщину в пикселях.
  •  WIDTH="значение". Атрибут задает ширину в пикселях.
  •  ALIGN="значение". Атрибут задает способ выравнивания.
  •  NOSHADE. Атрибут задает сплошную черную полосу без     тени.

Тэг <MARQUEE> позволяет создать "бегущую" строку. Характеристики бегущей строки задаются следующими атрибутами:

  •  WIDTH – ширина поля бегущей строки в пикселях или процентах от ширины окна;
  •  HEIGHT – высота поля бегущей строки в пикселях;
  •  HSPACE, VSPACE – интервалы по горизонтали и вертикали между текстом строки и краями ее поля (в пикселях);
  •  ALIGN – определяет положение текста бегущей строки в ее поле. Атрибут имеет следующие значения:
  •  TOP – вверх;
  •  BOTTOM – вниз;
  •  MIDDLE – по середине;
  •  DIRECTION – определяет направление движения.
  •  LEFT – справа налево;
  •  RIGHT – слева направо.
  •  BEHAVIOR – определяет характер движения строки.

Иногда возникает необходимость вставки в текст специальных символов, например, пробелов, кавычек, знаков < и > и др. Вместо символов необходимо вставлять их буквенный эквивалент, который имеет следующий формат: &буквенный эквивалент;. Например, &lt; обозначает символ "<". Буквенные эквиваленты некоторых символов приведены в табл. 2.

Таблица 2

Таблица эквивалентов для некоторых символов

Символ

Эквивалент

"

quote

>

lt

<

gt

«

laquo

»

raquo

3.4. Вставка графических изображений

Графический файл можно создать предварительно с помощью графических редакторов, выбрать из Интернет-коллекций (например, по адресу:http://www.delfin.ru), получить с использованием сканера. Как уже отмечалось, картинки удобно предварительно поместить в подпапку Image в папке, содержащей Web-страницы на локальном сервере. Вставка на страницу графического изображения из файла графического формата производится с помощью тэга <IMG>. Данный тэг имеет следующие атрибуты:

  •  SRC указывает адрес графического файла (URL-адрес; имя файла, возможно, с указанием пути на локальном сервере).

< IMG SRC="адрес файла">

  •  WIDTH задает ширину прямоугольной области, в которой будет размещен рисунок. Измеряется в пикселях.
  •  VSPACE задает верхние и нижние пустые поля вокруг картинки в пикселях;
  •  HEIGHT задает высоту прямоугольной области, в которой будет размещен рисунок. Измеряется в пикселях. Этот атрибут (а также WIDTH) можно использовать для ускорения загрузки изображения.
  •  ALIGN определяет взаиморасположение текста и графики. Например, текст может обтекать картинку справа или слева (значения атрибута LEFT или RIGHT).
  •  HSPACE задает левые и правые пустые поля вокруг картинки в пикселях.
  •  ALT содержит альтернативный текст, который отображается вместо картинки в браузерах, не поддерживающих графику, а также в случае, если вывод графики отключен пользователем.

Для украшения страницы можно заполнить фон рисунком из графического файла. Фоновое изображение представляет собой файл, содержащий картинку, который многократно выводится на экран, заполняя все окно. Изображение для фона должно быть небольшим, неярким, незатейливым по содержанию, текст на нем должен хорошо читаться. Фон задается в тэге <BODY> атрибутом BACKGROUND. Значением атрибута является адрес графического файла.

3.5. Гиперссылки

Гиперссылки устанавливают связь между каким-либо элементом текущего документа HTML и другой Web-страницей либо независимым объектом – файлом или изображением. В качестве гиперссылки может выступать не только часть текста, но и графический элемент. Текстовая гиперссылка выделяется на странице подчеркиванием и цветом. Графическая гиперссылка – это изображение, выделенное рамкой, цвет которой можно менять. При наведении курсора мыши на гиперссылку появляется стилизованное изображение руки. Текстовые гиперссылки можно разделить на четыре типа: ссылки на документы HTML, ссылки на разделы внутри документа, ссылки на адрес электронной почты, на файловые объекты.

Гиперссылка на файловый объект подразумевает организацию связи HTML-документа с каким-либо файлом, хранящимся на сервере. Реализовать гиперссылку на другой файловый объект можно путем использования тэга <A>, которому соответствует закрывающийся тэг </A>. Структура текстовой ссылки имеет следующий вид:

<A HREF="адрес ссылки"> текст ссылки </A>

Например, следующий тэг описывает ссылку на HTML-файл пример15.html, при этом ссылка на экране будет представлена текстом Щелкните здесь:

<A HREF=" пример15.html"> Щелкните здесь </A>

Браузер выводит не имя файла, к которому необходимо перейти, а текст, заключенный между угловыми скобками. Поскольку настройки цвета в браузере у различных пользователей могут отличаться, можно принудительно задать цвет гиперссылки. Это делается в тэге <BODY> атрибутом LINK для непрочитанной ссылки и атрибутом VLINK для прочитанной гиперссылки, например:

<BODY BGCOLOR="#303030" TEXT="BLUE" LINK="GREEN" VLINK="YELLOW">

Реализовать гиперссылку на другую Web-страницу можно путем следующей записи тэга <A>:

<A HREF="URL" TARGET="параметр" TITLE="альтернативный текст"> текст гиперссылки </A>

URL указывает адрес страницы, с которой устанавливается гиперсвязь; TARGET описывает правила открытия документа в браузере. Наиболее часто встречающееся значение атрибута TARGET="_blank" отображает открываемый на ссылке документ HTML в новом окне браузере. Атрибут TITLE предназначен для создания альтернативного текста – всплывающей подсказки, появляющейся в небольшом прямоугольнике, если пользователь задержит курсор мыши над гиперссылкой на несколько секунд. Такая подсказка может содержать, например, более подробное описание вызываемого документа.

Иногда оказывается полезным организовать ссылки на разделы одного и того же документа (на определенные места одного и того же документа). Такие ссылки называют закладками. Для них нужны якорь и собственно ссылка. Якорь определяет место в документе, к которому происходит переход по ссылке. Ссылка использует имя якоря вместо имени файла.

Формат якоря:

<A NAME="имя якоря">текст на экране </A>

Формат ссылки:

<A HREF="# имя якоря">текст, на котором щелкать </A>

Для того чтобы превратить рисунок в гиперссылку, необходимо воспользоваться комбинацией тэгов <A> и <IMG>:

<A HREF="Адрес документа, на который организуется ссылка"><IMG SRC="Адрес изображения" WIDTH="Значение" HEIGHT="Значение" ALT="Текст" ALIGN=" Значение" BORDER="Значение"></A>

Атрибут BORDER задает толщину синей рамки, в которую заключается картинка, при превращении в гиперссылку. Рекомендуется это значение устанавливать равным нулю.

3.6. Создание таблиц

Описание таблицы начинается с тэга <TABLE>и заканчивается тэгом </TABLE>. Для создания границ (рамок) вокруг таблицы используется атрибут BORDER, значением которого является число, задающее ширину рамки. Для задания названия таблицы используется тэг <CAPTION> с атрибутом выравнивания ALIGN, который принимает значения TOP (расположение названия вверху таблицы) и BOTTOM (расположение названия внизу таблицы). Каждая строка начинается с тэга <TR> и заканчивается тэгом </TR>. Если строка должна содержать заголовки столбцов таблицы, то используются открывающийся и закрывающийся тэги <TH>. Если в ячейках должны размещаться данные, то используются тэги <TD> и </TD>. Тэги заголовков и данных должны располагаться  между тэгами рядов <TR> . То есть сначала определяется таблица (тэг </TABLE>), затем внутри этого тэга задаются строки (тэг <TR>), затем – содержимое ячеек.

Несколько ячеек могут быть объединены в одну как по горизонтали, так и по вертикали. Объединение по строкам делается тогда, когда содержимое объединяемых ячеек одного типа. Для объединения используются тэги <COLSPAN> и <ROWSPAN> (по столбцам и по строкам соответственно). Значениями этих атрибутов являются количества объединяемых столбцов или строк.

Можно задавать ширину всей таблицы и отдельных ячеек в пикселях либо в процентах от ширины окна (таблицы) Ширина таблицы задается атрибутом WIDTH в тэге <TABLE>, ширина ячейки – тем же атрибутом в тэге <TR> или <TD>.

Текст и графику внутри ячеек таблиц можно выравнивать. Горизонтальное и вертикальное выравнивание содержимого строк осуществляется с помощью атрибута ALIGN в тэге <TR>. Выравнивание в отдельных ячейках выполняет атрибут ALIGN в тэгах <TD>  и <TH>. Атрибут ALIGN принимает значения LEFT, RIGHT, CENTER.

Атрибут FRAME в тэге <TABLE> указывает способы изображения рамки таблицы:

  •  BOX – все стороны рамки;
  •  ABOVE – только верхняя часть рамки;
  •  BELOW – только нижняя часть рамки;
  •  HSIDES – горизонтальные части рамки сверху и снизу;
  •  VSIDES – только левая и правая вертикальные части рамки;
  •  LHS – только левая часть рамки;
  •  RHS – только левая часть рамки;
  •  VOID – не изображать внешнюю рамку.

Разделительные линии между столбцами и строками таблицы описываются атрибутом RULES в тэге <TABLE>. Атрибут RULES может принимать следующие значения, задающие способ изображения разделительных линий:

  •  ALL – все вертикальные и горизонтальные линии;
  •  ROWS – только горизонтальные линии между строками;
  •  COLS – только вертикальные линии между строками;
  •  NONE – не изображать разделительные линии.

Цветовое оформление таблиц производится с помощью атрибута BGCOLOR, который принимает в качестве аргумента цвет в виде имени или шестнадцатеричного числа.

Если нужно установить цвет для всей таблицы, то атрибут BGCOLOR вставляется в тэг <TABLE>. Для изменения цвета только одного ряда этот атрибут вставляется в тэг <TR>. Задание цвета отдельной ячейки обеспечивается атрибутом BGCOLOR внутри тэга <TD>.

Если в таблице имеются рамки, то можно указать и их цвет с помощью атрибутов:

  •  BORDERCOLOR – цвет всей рамки:
  •  BORDERCOLORLIGHT – цвет светлой части рамки;
  •  BORDERCOLORDARK – цвет темной части рамки.

Эти атрибуты вставляются в тэг <TABLE>. Чтобы они действительно работали, необходимо присутствие еще и атрибута BORDER, задающего ширину рамки.

Если требуется задать шрифт для текстов внутри ячеек таблицы, то это можно сделать с помощью тэгов заголовков и физических стилей внутри тэгов <TD>.

3.7. Публикация страницы

После того, как все страницы разработаны, их необходимо разместить на сервере, чтобы сделать доступными для пользователей Интернета. Данный процесс называется публикацией страницы.

Web-хостингом называется размещение Web-страниц в сети Интернет на заранее арендованном дисковом пространстве какого-либо сервера. При этом под хостингом понимается именно не публикация страницы, а аренда дискового пространства.

Хостинг может быть как платным, так и бесплатным. Многие фирмы предлагают определенный объем дискового пространства бесплатно. Пользователь услуг регистрируется на предлагающем хостинг сервере путем заполнения анкеты, после чего получает по электронной почте подтверждение публикации, логин (имя) и пароль. Однако в каждую страницу сайта владельцы сервера вставят рекламу, за счет показа которой и получается прибыль. Бесплатная реклама хороша для индивидуальных домашних страничек, а также для некоммерческих организаций и обществ, не заботящихся о своем имидже. Помимо дискового пространства некоторые службы предлагают пользователю бесплатный почтовый ящик, некоторые создают полноценный домен третьего уровня. Многие провайдеры также предлагают бесплатный хостинг вместе с предоставлением какой-либо услуги.

Если страница содержит коммерческую информацию, считается неприличным пользоваться бесплатным хостингом: если у фирмы нет денег, то она является несостоятельной.

Если страница содержит коммерческую информацию, провайдер может потребовать определенную плату за размещение станицы.

Стоимость размещения страницы определяется провайдером и зависит от следующих факторов:

  •  Присутствие на странице коммерческой информации.
  •  Вид адреса размещения. Чем короче адрес, тем дороже размещение.
  •  Объем файлов, обеспечивающих функционирование страницы.

Адрес страницы бывает одного из двух видов:

www. имя_страницы.домен

www.домен/~имя_страницы

Провайдер выделит место на жестком диске сервера и сообщит следующее:

  •  Адрес FTP-сервера. Этот адрес нужен для доступа к файлам страницы на сервере.
  •  Имя и пароль для входа в FTP-сервер. Эти данные понадобятся, чтобы перекачать файлы страницы на сервер, а затем иметь доступ к ним для введения изменений.
  •  Имя главного HTML-файла страницы. Этот файл первым загружается в браузер (index.html).
  •  Вид кодировки.
  •  Объем файлов. Некоторые провайдеры ограничивают объем 1–2 Мбайта, другие выделяют место до 10 Мбайт.

Далее необходимо перекачать файлы на сервер. Для этого следует связаться с сервером и воспользоваться программой, поддерживающей работу с FTP серверами. (CuteFTP). При инициализации соединения будет предложено ввести имя (login) и пароль. После ввода этих данных будет открыт доступ к каталогу на сервере, в который можно скопировать свои файлы.

Можно воспользоваться платным хостингом у различных компаний, перечень услуг которых значительно отличается по ассортименту. Однако в стоимость услуг обязательно должно входить предоставление доменного имени третьего уровня.

После размещения файлов на сервере, следует позаботиться о том, чтобы о странице узнало как можно больше людей. Это делается путем размещения адреса Web-страницы в каталогах поисковых серверов. Для этого необходимо выйти на страницу поискового сервера и найти там что-то вроде Добавить адрес, Внести в каталог, Add URL. Далее надо следовать инструкциям. Обычно, кроме адреса будет предложено ввести ключевые слова, которые имеют отношение к странице. Выбор ключевых слов очень важен. В качестве ключевых слов не рекомендуется использовать специфическую аббревиатуру и сокращения, а также длинные сочетания. Далее следует проверить, насколько хорошо получилось. После регистрации в поисковой системе, пользователь получает подтверждение от автоматической системы каталогизации HTML-документов.

4. Практическое задание

4.1. Ювелирный Интернет – магазин «Алтын»

В качестве практического задания я разработала сайт Ювелирного Интернет – магазина  «Алтын». Главная страница данного сайта представлена в приложении 1. А HTML код представлен в приложении 2. Сайт был разработан в соответствии с вышеизложенными правилами и конструкциями.

В магазине «Алтын» продаются ювелирные украшения такие, как  цепочки, кольца, серьги (причем сделанные только из золота).

На главной странице (по середине) – приветствие, лидеры продаж магазина «Алтын».

Ниже находятся ссылки на «кольца», «цепочки», «серьги», при нажатии на которые появляются рисунки данных изделий.

Т.е. при нажатии на ссылку «кольца» на другой странице появятся рисунки колец, которые имеются в продажи в данный момент. Если Вас интересуют серьги, то Вам следует нажать на «серьги», а если  цепочки, то на «цепочки».  На страницах кольца, цепочки и серьги рядом с  каждым рисунком ювелирного изделия  указана его цена (в $) и ссылка на «Подробнее…».

При нажатии на ссылку «Подробнее…» появляется  дополнительная информация. А именно - вес, какие размеры есть в наличии, цена, камень и т.д. На странице «Подробнее…» находится ссылка «Оформить заказ», которая позволяет заказать данный вид ювелирного изделия. Если Вы решите заказать какой-либо вид ювелирного изделия, то Вам необходимо заполнить определенный бланк, который появится при нажатии на «Оформить заказ» и отправить его нам, нажав на «Отправить».

Существует быстрый переход между страницами по ссылкам («На главную страницу»,  «Назад»).

4.2. Структура Интернет – магазина «Алтын»

Заключение

Итак, поняв принцип построения Web-страницы, изучив возможности соединения в ней различных видов информации, можно сказать, что Web-страницы, с их потенциалом могут применяться   для различных целей.

Web-страница – это лицо той фирмы, того учреждения, человека, который разместил ее в WWW. Именно поэтому сегодня Web-дизайну уделяется такое огромное внимание, ибо от него на прямую зависит популярность того или иного  информационного ресурса Сети. Недаром сейчас профессия Web-дизайнера является одной из самых  высокооплачиваемых.

Человек, создающий  Web-страницу, соединяет свои знания и навыки со своим творческим потенциалом. Умение творить – вот что отличает настоящего  Web-дизайнера. Для того чтобы создать Web-страницу, которая бы радовала глаз, нужно сочетать в себе качества художника и программиста.

Подводя итог всему выше сказанному, хочется отметить, что HTML стал тем форматом передачи данных, который наиболее полно и качественно удовлетворяет запросы современного общества. Несомненным фактом является и то, что будущее именно за HTML.

Приложение 1

Приложение 2

<html>

<title>index.htm</title>

<center>

<table>

<tr>

<td><img src="фон1.jpg"></td>

<th><img src="алтын.jpg"><br><font size=6><body Text="#993300"><b>Ювелирный Интернет-магазин</b></body></font></th>

<td><img src="фон2.jpg"></td>

</tr>

<br>

<tr>

<td><img src="line0.gif"><br><br>

<a href="kolca.htm"><font size=7>Кольца</font></a><br><br>

<a href="sergi.htm"><font size=7>Серьги</font></a><br><br>

<a href="cepi.htm"><font size=7>Цепи</font></a></td>

<td align=center><i>Любовь к ювелирным украшениям у

женщины зарождается ещё в раннем детстве.

Будучи маленькой девочкой, она восхищенно разглядывает и примеряет мамины золотые сережки, кольца и усыпанные разноцветными блестящими камушками браслеты. С возрастом эта страсть не угасает, и ювелирные украшения из золота всегда остаются самым желанным подарком от дорогого человека. Принося его в дар, мужчина словно доказывает женщине свою любовь и восхищение. Красиво и не назойливо напомнить о своих чувствах – вот основная причина,

по которой стоит подарить ювелирное украшение любимой женщине.

 </i></td>

</tr>

<tr><td></td>

<td align=center>

<a href="kolca.htm"><img height=70 hspace=50 width=60 src="кольцо1_s.jpg"></a>

<a href="cepi.htm"><img height=30 hspace=50 width=70 src="цепь3_s.jpg"></a>

<a href="sergi.htm"><img height=70 hspace=50 width=70 src="серьги3_s.jpg"></a>

</td>

</tr>

<tr><td><img hspace=50 src="rambler.gif"></td>

<td align=center><img vspace=50 src="реклама1.gif"></td>

<td><img src="olin0000.gif"><br><img src="логотип.jpg"</td>

</tr>

</table>

</center>

</html>

Библиографический список

  1.  Андреева И. А. Информационный бизнес и Интернет // Информационные ресурсы России. 2002. № 2.
  2.  Бородкин Л. И., Владимиров В. Н., Гарскова И. М. Азбука Интернета. Адресация в Интернете. Поиск информационных ресурсов в сети. В записную книжку // Новая и новейшая история. 1999. № 1.
  3.  Воройский Ф. С. Информатика: Новый систематизированный толковый словарь-справочник (Введение в современные информационные и телекоммуникационные технологии в терминах и фактах). М.: Физматлит, 2003.
  4.  Работа в сети Internet / Глушаков С. В., Ломотько Д. В. Харьков: Фолио, 2001.
  5.  Что такое Internet,  WWW  и  HTML // И. Закарян, В. Рафалович. – 2-е изд., перераб. и доп. М.: Интернет-Трейдинг, 2003.
  6.  Мировые информационные ресурсы: Учебное пособие / Басгаль В. В., Семенова З. В.Омск.: ОГИС, 2004.
  7.       www.pronet.ru
  8.       www.lib.toxy.cv.ua
  9.       www.education.kulichki.ru
  10.  www.gor.h1.ru
  11.  www.webschool.narod.ru

Оформить заказ

Рис. изделия     Описание   Бланк заказа

Отправить          Отмена

На гл. стр.                                     

Цепочки

На гл. стр.          Рис.1              Рис.2   

Кольца              Подробнее     Подробнее

Серьги                Рис.3             Рис.4             

                       Подробнее           Подробнее

                     

Поиск по цене

Подробнее

Рис. изделия     Описание

Оформить заказ

На гл. стр.                                Назад

Серьги

На гл. стр.        Рис.1                  Рис.2      

 Кольца            Подробнее       Подробнее     

Цепочки             Рис.3                  Рис.4    

                          Подробнее     Подробнее

                                                  Поиск по цене     

Кольца

На гл.стр.           Рис.1                        Рис.2             Поиск по цене

Кольца                Подробнее          Подробнее              

Серьги                  Рис.3                       Рис.4

                             Подробнее            Подробнее                           

Главная страница «Index.html».

Приветствие.

Цепочки      Кольца         Серьги    

  1.  

 

А также другие работы, которые могут Вас заинтересовать

84945. «Шукачі скарбів». Виховна година, присвячена 175-річниці з Дня народження Марка Твена 116 KB
  Мета: виховувати шанобливе ставлення до книг; виховувати такі почуття, як дружба, відповідальність, любов. Тип заняття: брейн-ринг Обладнання: уривки художніх фільмів, видання книжок М.Твена для дітей,; декорації: паркан, квіти, скриня із кульками «доброта», «щирість», «відданість», «підприємливість»...
84946. Масляна. Складання розповіді 31.5 KB
  Навчити будувати зв’язну розповідь за опорними словами та малюнками, вдосконалювати вміння висловлюватися реченнями, активізувати і поповнити словниковий запас, висловлювати свої думки в логічній послідовності, формувати навички усного і писемного мовлення, закріпити уміння добирати прикметники...
84947. Написання твору за картиною Р.Г.Романова «Зимовий ліс» 3.32 MB
  Організація учнів до уроку. Створення позитивного настрою. З хорошим настроєм, бажанням вчитися та пізнати щось нове розпочнемо наш з вами урок. Станьте, діти, всі рівненько, Посміхніться всім гарненько, Привітайте гостей, що до нас завітали. Хочу чути, чого б ви сьогодні їм всім побажали?
84948. Творческий интеллектуальный конкурс «Мисс Осень – 2010» 35.5 KB
  Цель конкурса: сформировать познавательные, личностные, социальные, творческие компетентности учащихся; способствовать развитию у учащихся творческих и интеллектуальных способностей; воспитывать чувство коллективизма, толерантности, умение работать в группе, отстаивать свою точку зрения, принимать решения.
84949. Творчість класного керівника 164.5 KB
  Ефективність роботи класного керівника визначається тим якою мірою навчально-виховний процес забезпечує розвиток творчих здібностей кожної дитини формує творчу особистість і готує її до творчої пізнавальної та суспільно трудової діяльності.
84950. Українська хата. Традиційна культура українців у побуті 203 KB
  Мета. Познайомити учнів з естетикою побуту українців; розширити уявлення про українську оселю, ужиткові речі, одяг, предмети побуту; сприяти розвитку у підростаючого покоління здібностей сприймати прекрасні скарби, створені художнім генієм українського народу, прилучати дітей до світу краси...
84951. Все починається з мами 50.5 KB
  Мета: удосконалювати навички виразного читання, збагачувати словниковий запас, розвивати уміння давати оцінні судження; виховувати пошану і любов до мами. Обладнання: прислів’я на картках, вислови видатних людей про маму.
84953. Будова тексту: зачин, основна частина, кінцівка 58 KB
  Мета: Дати учням уявлення про будову тексту, його складові частини. Удосконалювати навички добору заголовків до текстів. Розвивати мовлення учнів. Виховувати бережне ставлення до природи.