Министерство просвещения ПМР
Тираспольский Техникум Информатики и Права
Отделение информационных технологий
Курсовая работа
по дисциплине: Программное обеспечение компьютерных сетей.
на тему: Разработка Web сайта на основе HTML с использованием JavaScript.
Выполнил студент 313 группы:
Проверила преподаватель:
Защита «__»________2014 г.
Оценка «__»__________
Тирасполь
2014 г.
Содержание:
ВВЕДЕНИЕ 3
РАЗДЕЛ I. ТЕОРЕТИЧЕСКАЯ ЧАСТЬ. 4
1.1.ИСТОРИЯ HTML 4
1.1.1.ВЕРСИИ HTML 4
1.2.ГИПЕРТЕКСТ 6
1.2.1. СТРУКТУРА WEB-СТРАНИЦЫ 6
1.2.2. <HTML></html> 7
1.2.3. <HEAD></head> 7
1.2.4. <TITLE></title> 7
1.2.5. <BODY></body> 8
1.2.6. <!-- Комментарий --!> 8
1.2.7. <H1><h1> 8
1.2.8. <HR> 9
1.2.9. <A></a> 9
1.2.10. <BASE> 10
1.2.11.ПРАВИЛА СИНТАКСИСА 10
1.2.12. ИСПОЛЬЗОВАНИЕ СИМВОЛОВ 11
1.2.13. УПРАВЛЕНИЕ ЦВЕТОМ 13
1.3. КОНСТРУКТОР ДОКУМЕНТОВ 15
1.3.1. ПРИЛОЖЕНИЕ. СТРУКТУРА ПРИЛОЖЕНИЯ 15
1.3.2. ЦЕПОЧКА 15
1.3.3. УЛОЖИМ КАРТИНКУ В ФОНОВЫЙ ПАРКЕТ 16
1.4. ГРАФИКА 17
1.4.1. ФОРМАТ GIF 17
1.4.2. ФОРМАТ JPG 17
1.4.3. КАК ПРОГРАММИРОВАТЬ КАРТИНКИ 18
1.4.3.1. Картинка в тексте 18
1.5. ПОСТРОЕНИЕ ТАБЛИЦ. 19
1.5.1. КАК ЗАДАТЬ ТАБЛИЦУ 19
1.5.2.Атрибуты команды TABLE 19
Таблица 1.3. Атрибуты 19
Атрибуты команды TR 20
1.5.4. Атрибуты команды TD (TH) 20
1.6. ТАБЛИЦЫ СТИЛЕЙ 22
1.6.1. УРОВНИ CSS 22
1.6.2. СПОСОБЫ ОПРЕДЕЛЕНИЯ ТАБЛИЦ СТИЛЕЙ 22
1.7. JAVASCRIPT 24
1.7.1. ИСПОЛЬЗОВАНИЕ JAVASCRIPT 24
1.7.2. ВАЖНОСТЬ ИЗУЧЕНИЯ JAVASCRIPT 24
1.7.3 Переменные в языке JavaScript 24
1.7.5. МАССИВЫ JAVASCRIPT И ESCAPE-ПОСЛЕДОВАТЕЛЬНОСТИ 25
1.7.6. ВЫРАЖЕНИЯ, УСЛОВИЯ, ОПЕРАЦИИ, СТРОКИ И ЧИСЛА 25
РАЗДЕЛ II. ПРАКТИЧЕСКАЯ ЧАСТЬ 27
ЗАКЛЮЧЕНИЕ 28
СПИСОК ЛИТЕРАТУРЫ 29
Введение
Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные програмные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML – своеобразная противоположность сложным языкам программирования, известным только специалистам.
HTML давно перестал быть просто языком программирования. Человек, изучавший этот язык, обретает возможность делать сложные вещи простыми способами и, главное, быстро, что в компьютерном мире не так уж и мало. Гипертекст подходит для включения элементов мультимедиа в традиционные документы. Практически именно благодаря развитию гипертекста, большинство пользователей получило возможность создавать собственные мультимедийные продукты и распространять их на компакт-дисках. Такие информационные системы, выполненные в виде набора HTML-страниц, не требует разработки специальных программных средств, так как все необходимые инструменты для работы с данными (WEB-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров. От пользователя требуется выполнить только ту работу, которая относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создать HTML-страницы и продумать связь между ними.
HTML, как основа создания WEB-страниц, имеет прямое отношение и к новому направлению изобразительного искусства – WEB-дизайн. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен еще поместить все это в Сети, продумать связь между WEB-страницами, чтобы все двигалось, откликалась на действие пользователя, поражало воображение, вызывало желание создать что-нибудь свое, оригинальное в этой области.
Цель работы: изучить языки программирования HTML и JavaScript.
Исходя и выше поставленной цели при создании данного проекта я поставил следующие задачи:
1. Изучить и проанализировать литературу по данной теме.
2. Изучить принцип работы браузеров.
3. Создать оригинальный сайт.
Раздел I. Теоретическая часть.
1.1.История HTML
1.1.1.Версии HTML
Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в то время ни для языка, ни для браузера не нашлось достойного применения. В 1993 году появился HTML+ , и эта версия также осталась практически незамеченной. Начало широкого использования гипертекста дала версия 2.0, которая, появилась в июне 1994 года. Это был год роста популярности WWW по всему миру. Элементы, включенные в версию 2 , в большинстве своем используются по сей день.
В версии 3.0 HTML, которая появилась год спустя, была реализована возможность прорисовки математических символов (знаков интервала, бесконечности, дроби, скобок и т.д.) при помощи элементов языка. Под эту версию был разработан браузер Arena. Но этот проект оказался тупиковым и не получил дальнейшего распространения.
В 1996 году появился HTML 3.2. Это было новаторское решение, в спецификацию языка были введены фреймы, которые стали теперь весьма популярны у разработчиков WEB-страниц. Даже сейчас на основе этой спецификации можно реализовать интересные дизайнерские решения. Практически все современные браузеры поддерживают версию 3.2, поэтому авторы WEB-страниц уверенны в работоспособности всех элементов.
Наряду с официальными спецификациями языка, которые разрабатывались организацией W3C (W3 Консорциум ),компании-производители браузеров создавали собственные элементы (расширения). Впоследствии, некоторые из этих элементов, после получения всеобщего признания включились в спецификацию следующих версий языка. Но новаторское решение – фреймы, не были включены в спецификацию 3.2. Но браузеры поддерживали фреймы и многие книги, посвященные HTML, содержали описание фреймов без упоминания о том, что это нестандартные элементы. В последствии, фреймы стали стандартом де-факто. В версии 4 они уже были включены на полном основании.
И наоборот, элементы APPLET и SCRIPT, необходимые для расширения HTML другими программными кодами версии 3.2, не сыграли той роли, которую были призваны сыграть. Это объясняется тем, что браузеры различных версий по-разному интерпретировали программы на разных языках JAVA, JAVASCKRIPT, Visual Basic (VBScript). В результате не удалось получить достаточно надежный работающий код, и данные языки использовались любителями HTML в основном для экспериментов.
Официальная спецификация HTML 4 (Dynamic HTML) появилась в 1997 году. В это время уже было очевидно, что дальнейшее развитие гипертекста будет осуществляться за счет скрипт - программирования. Это оказалось немногим более эффективным, чем вводить в язык все новые элементы. Появившиеся в то время браузеры (Netscape Navigator 4, Microsoft Internet Explorer 4 и др.) уже достаточно надежно интерпретировали программный код (был установлен определенный уровень стандартизации). Однако проблемы у разработчиков еще остались. В качестве примера можно отметить, что многие скрипты начинаются с определения версии браузера, чтобы потом использовать тот или иной фрагмент кода. Очевидно, что на программиста ложится обязанность тестирования страниц на всех популярных в настоящие время браузерах.
В результате, использование всех возможностей Dynamic HTML стало уделом программистов достаточно крупных организаций, где есть условия для разработки сложных программ и всестороннего их тестирования. Создателям личных WEB-страниц подчас приходится искать компромисс между надежностью и новаторством, чтобы получить достаточно грамотный HTML-код.
1.2.Гипертекст
Главных причин популярности HTML три. Вот они в порядке возрастания важности.
HTML-программирование очень простое. В нем нет традиционных алгоритмических структур, таких, как развилка, цикл, процедура. Оно линейно в своей основе.
HTML-документ является переносимым продуктом. Это означает, что авторский труд будет легко доступен огромному числу пользователей, независимо от марки компьютера и типа операционной системы. Именно это свойство HTML-документов, а также их относительно малый размер, позволили с успехом использовать HTML-технологию для подготовки WWW-страниц в Интернете.
Переносимость HTML-документа достигается за счет того, что пересылается не экранное изображение, а программа. А изображение строит браузер, выполняя команды этой программы.
HTML-документ -- это гипертекст.
Синтаксис HTML.
1.2.1. Структура WEB-страницы
Заготовка типичной WEB-страницы:
<HTML>
<HEAD>
<TITLE> Структура WEB-страницы </title>
<STYLE> H2 {font-family: Arbat;}CODE { font-family: Arial;} </style>
<META http-equiv. = ”Content-Type” content = “text/html; chariest = windows-1251">
<META name = “Author” content = “Pavel Trizno”>
<META name = “Keywords” content = “ HTML, document, element”>
</head>
<BODY bgcolor = #FFFFFF>
<!-- Комментарий к страницы --!>
<A name = “top></a>
Переход к <A href = “#bottom”> конец </a> документа <P>
Переход к <A href = “#S001”> <B> ссылке 1 </b></a><P>
<P>
<HR>
<H1> Заголовок 1 </h1>
<H2> Заголовок 2 </h2>
<H3> Заголовок 3 </h3>
<H3> Заголовок 4 </h4>
<H3> Заголовок 5 </h5>
<H3> Заголовок 6 </h6>
<HR>
Здесь расположена <B> ссылка 1 </b><A name = “S001”></a>
<HR>
<P> Здесь должен располагаться оригинальный текст WEB-страницы
<HR>
<A name = “bottom”></a><P>
Переход в <A href = “#top”>начало</a> документа
</body>
</html>
Если рассмотреть исходные тексты различных WEB-страниц, то можно легко увидеть схожесть их структуры. Это объясняется тем, что документы создаются по определенным правилам. В основу синтаксиса языка HTML лег стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML)». Правда, существует большое различие между стандартом официальном и стандартом фактическим. HTML постоянно развивается, дополняется новыми элементами.
Рассмотрим основные элементы HTML.
1.2.2. <HTML></html>
Означает документ на языке HTML. Данный элемент является самым внешним, так как между его начальным и коечным тегами должна находится вся WEB – страница. Этот элемент имеет атрибуты version, long и dir, которыми в данном случае редко кто пользуется, и допускает вложение элементов HEAD, BODY и других, определяющую общую структуру WEB-страницы. Конечным тегом </html> оканчиваются все документы в формате HTML.
1.2.3. <HEAD></head>
Область заголовка Web – страницы, её первая часть. HEAD служит только для формирования общей структуры документа. Этот элемент может иметь атрибуты IANG, DIR, должен включать элемент TITLE и допускает вложение элементов BASE, META, LINK, OBJECT, SCARIPT, STULE.
1.2.4. <TITLE></title>
Элемент для размещения заголовка Web – страницы. Строка текста, расположенного внутри этого элемента, отображается не в документе, а в заголовке окна браузера. Эта строка часто используется при организации поиска в WWW. Эта строка должна достаточно точно отражать назначение документа.
1.2.5. <BODY></body>
Этот элемент заключает в себе гипертекст, который определяет собственно Web – страницу. Конечный тег этого элемента надо искать в конце HTML-файла. Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком.
Атрибут, определяющий фон страницы, является одним из самых важных для дизайна.
background = “Путь к файлу”
Более простое оформление фона сводится к заданию его цвета:
bgcolor = “#RRGGBB”
Цвета фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного, зеленого и синего. Оба приведенных выше атрибута не являются альтернативными и часто используются совместно: если по каким-либо причинам не может быть найден рисунок фона, используется цвет.
Поскольку фон станицы может изменятся, необходимо иметь возможность подбирать соответственный цвет текста. Для этого имеются следующей атрибут:
text = “#RRGGBB”
Для задания цвета текста гиперссылок используются следующие атрибуты:
link = “#RRGGBB”
Точно так же можно задать цвет для просмотренных гиперссылок:
vlink = “#RRGGBB”
Можно также указать изменение цвета для последней выбранный пользователем гиперссылки:
Alink = “#RRGGBB”
1.2.6. <!-- Комментарий --!>
В любом языке программирования есть конструкции, позволяющие создавать произвольные ремарки. HTML в этом смысле – не исключение. Текст, введений внутри этого элемента, игнорируется браузером. Эти элементы могут располагаться в любом месте WEB-страницы. Признаком комментария служит восклицательный знак, а текст комментария должен обрамляться двойным дефисом. Например:
<!-- Комментарий --!>
1.2.7. <H1><h1>
Элемент заголовка. Существует шесть уровней заголовка, которые обозначаются H1…H6. Заголовок уровня 1 самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков могут использовать атрибуты, задающие выравнивание влево, по центру или вправо:
align = “left”
align = “center”
align = “right”
1.2.8. <HR>
Горизонтальная линия – очень часто используемый элемент. Во-первых, потому что с его помощью очень удобно делить страницу на части.
Во-вторых, потому что выбор подобных элементов оформления у автора страницы очень небольшой. Этот элемент не имеет конечного тега, но допускает ряд атрибутов для выравнивания влево, по центру, вправо, по ширине:
align = “left”
align = “center”
align = “right”
align = “justify”
Можно задать толщину линии:
Size = толщина в пикселях
Можно управлять длиной линии:
width = длина в пикселях
width = длина в процентах
Можно выбрать цвет:
color = “цвет”
1.2.9. <A></a>
HTML-документ может быть очень большим, и в этом случае нужно иметь возможность быстрого перемещения к нужному разделу документа. Для этого можно использовать механизм гиперссылок. Необходимо также в нужных местах текста расставить соответствующие метки. Шаблон для создания меток таков:
<A name = “>Произвольный текст</a>
В данном случае данной строке документа присваивается имя, и, следовательно, в другой части документа или даже на другом документе может быть создана гиперссылка, приводящая в эту точку. Для перехода внутри документа можно использовать следующую конструкцию:
<P>Переход к <A href = “#метка”>метке</a></p>
Несколько подобных строк могут образовать своеобразное оглавление Web-страницы, которое можно разместить в начале и в конце документа.
Ссылки могут уводить не только в разные документы, но загружать на экран разные фрагменты одного и того же текста. В последнем случае навигационные средства браузера работают также.
1.2.10. <BASE>
Элемент для задания базового адреса (URL) для ссылок. Это позволяет опускать начальную часть адреса в ссылках документа. Для использования этого элемента необходимо использовать следующую конструкцию:
<BASE href =”http:// компьютер/путь 1”>
Фрагмент адреса путь1 не является обязательным. При формировании полного адреса он будет отброшен. Если в тексте документа встретится относительная ссылка
<A href =”путь 2/имя документа. Htm “ >Видимый текст ссылки</a>,
то она будет соответствовать URL
http: // компьютер/путь 2/имя документа. Htm
В том случае, когда надо задать базовый адрес для локального диска (например, D), должна быть использована такая конструкция:
<BASE href =file://D:путь>
Тогда при указании относительной ссылки можно будет задавать не только имя файла, но и имена папок, в которых он находится.
В выражении абсолютной ссылки можно также опустить указание на схему доступа (file://) В этом случае будет учитываться только левая часть абсолютной ссылки до первого левого символа “”, то есть имя локального диска.
1.2.11.Правила синтаксиса
При использовании каждого элемента важно знать, какие элементы могут располагаться внутри него, и внутри каких элементов может находиться он сам. Так, взаимное расположение элементов HTML, HEAD, TITLE, BODY должно быть стандартным на любой странице, в тех случаях, когда не используются фреймы. Если страница представляет собой документ планировки фреймов, то вместо элемента BODY используется элемент FRAMESET.
Существуют группы элементов, которые используются совместно. К ним относятся элементы для создания таблиц, списков, фреймов. В этом случае порядок вложения элементов определяется логикой создания того или иного объекта на странице. Таблицы и фреймы часто используются для того, чтобы разместить детали страницы (рисунки, текст и др.) в определённом порядке. Например, располагая рисунок внутри ячейки таблицы, можно добиться определённого его положения.
Большое количество элементов, которые используются для форматирования текста, допускают самые разнообразные варианты вложения. И сами они обязательно должны располагаться внутри определённых элементов.
Например, есть два абзаца (первый в зелёной рамке) и таблица:
<P style = “border: 3px solid green”> Текст абзаца 1</p>
<TABLE>…</ table>
<P> Текст абзаца 2 </p>
Таблица в данном случае – независимый элемент. Её можно, например, выравнивать независимо от остального текста.
Можно использовать другой код:
<P style = “border: 3px solid green “>Текст абзаца 1
<TABLE>…</table>
<P> текст абзаца 2</p>
Исчез конечный тег первого абзаца. Теперь таблица является частью первого абзаца, и зелёная рамка будет охватывать таблицу и текст.
И наоборот, элемент P может находиться внутри таблицы: например, один элемент ячейки TD может содержать несколько абзацев P.
Правила синтаксиса распространяются и на использование стартового и конечного тегов, атрибутов и содержимого элемента. Нельзя путать понятия «элемент» и «тег». Элемент – это контейнер, содержащий атрибуты внутри стартового тега и полезную информацию между стартовым и конечным тегами. Тег – это конструкция, заключённая в угловые скобки и используемая для обозначения области действия элемента.
Некоторые элементы не имеют конечного тега. Элементу BR, обозначающему конец строки, не нужен конечный тег. Некоторые элементы могут использоваться с конечным тегом и без него. Элемент абзаца P может иметь конечный тег, но если тег не задан, то признаком окончания действия элемента служит следующий элемент, который может логически определить конец текущего абзаца: другой элемент P, элемент рисунка IMG, элемент списка UL, элемент таблицы TABLE и др.
Важным правилом, которое не имеет исключений, является размещение атрибутов элемента внутри начального тега.
1.2.12. Использование символов
В HTML и в браузерах реализована возможность прорисовки символов по их кодам. Символы могут быть общепринятыми, нестандартными и используемыми в HTML в качестве служебных символов. Их называют спецсимволами. Первый способ ввода спецсимвола заключается в указании его кода. Например, латинскую букву А можно задать так: A. Для некоторых символов предусмотрена мнемоническая кодировка.
Часто используемые спецсимволы (по стандарту ISO 8859 – 1):
Таблица 1.1. Символы.
Код символа Числовой код Мнемонический код Название Символ
34 " " Прямая кавычка “
38 & & Амперсанд &
60 < < знак «меньше» <
62 > > Знак «больше» >
153 ™ &trade Троговая марка ™
160     Неразрывный пробел
162 ¢ ¢ Цент ¢
163 £ £ Фунт £
164 ¤ ¤ Знак валюты ¤
165 ¥ ¥ Йена ¥
166 ¦ ¦ Вертикальная строка ¦
167 § § Знак параграфа §
169 © © Знак копирайта
©
171 « « Левая типографская кавычка
«
172 ¬ ¬ Знак отрицания ¬
174 ® ® Знак “зарегестрировано”
®
176 ° ° Знак градуса °
177 ± ± Знак “плюс минус» ±
178 ² ² Степень 2 ²
179 ³ ³ Степень 3 ³
181 µ &mikro Знак «микро» µ
182 ¶ ¶ Знак абзаца ¶
183 · · Точка-маркер •
185 ¹ ¹ Степень 1 ¹
187 » » Правая типографская кавычка
»
188 ¼ ¼ Одна четвёртая ¼
189 ½ ½ Одна вторая ½
215 × × Знак умножения /
247 ÷ ÷ Знак деления /
1.2.13. Управление цветом
Кодирование цвета используется для раскрашивания шрифтов, горизонтальных линий и фона, других элементов страницы. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами. Существует несколько атрибутов, значениями которых являются параметры цвета. Самый простой способ определить цвет – написать название цвета на английском языке. Так, например, задаётся красный цвет шрифта в элементе FONT:
Color = “red”
Допустимые названия цветов:
Таблица 1.2. Цвета.
Русское название Английское название RGB – код
Аквамарин Aqua #00FFFF
Белый White #FFFFFF
Жёлтый Yellow #FFFF00
Зелёный Green #008000
Золотой Gold #FF0700
Индиго Indigo #4B0080
Каштановый Maroon #800000
Красный Red #FF0000
Оливковый Olive #808000
Оранжевый Orange #FF0000
Пурпурный Purple #800080
Светло-зелёный Lime #00FF00
Серебристый Silver #C0C0C0
Серый Gray #808080
Сизый Teal #008080
Синий Blue #0000FF
Ультрамарин Navy #000080
Фиолетовый Violet #EE80EE
Фуксиновый Fuchsia #FF00FF
Чёрный Black #000000
HTML – код, рисующий радугу на Web-странице:
<FONT color = “ red “> Радуга </ front>
<TABLE border = 0 width = 100% >
<TR><TD bgcolor = #FF3030 >K
<TR><TD bgcolor = FFD000 >0
<TR><TD bgcolor = #F3FF5F >Ж
<TR><TD bgcolor = #00FF00 >З
<TR><TD bgcolor = #6FD3F7 >Г
<TR><TD bgcolor = # 5F72FDF >С
<TR><TD bgcolor = # B568F4 >Ф
</ table>
Цветовая проработка Web-страницы является альтернативой многочисленных рисунков и позволяет обеспечить более быструю загрузку документа.
1.3. Конструктор документов
Пора от технических деталей программирования перейти к более важным вопросам:
• Как составить сценарий гипертекстового документа?
• Как спроектировать внешний вид документа на экране?
1.3.1. Приложение. Структура приложения
Когда гипертекст состоит из нескольких файлов, термин "документ" к нему уже не очень подходит. В дальнейшем будем называть документом однофайловый гипертекст. А для случая, когда файлов много, введем термин "приложение".
Лучше сначала решить, какой способ организации гипертекста больше всего подходит для поставленной задачи, то есть, подумать над общей структурой приложения.
1.3.2. Цепочка
Это самая простая структура. Документы, составляющие приложение, просматриваются пользователем по порядку, как страницы в книге. Каждый документ оканчивается ссылкой на следующий. Пользователь двигается по цепочке "до упора", то есть до последнего документа. В последнем документе ссылки "вперед" уже нет. Теперь можно окончить работу или, пользуясь кнопкой браузера "Назад" ("Back"), пройтись по документам "вспять".
Цепочку можно изобразить такой схемой:
Рис.1.1. Схема цепочки.
Для удобства работы с приложением, можно помещать на странице документа ссылки не только вперед, но и назад. В этом случае отпадает необходимость использовать навигационные кнопки браузера.
В чистом виде цепочка используется проектировщиками очень редко. Обычная практика - это цепочка документов с дополнительным набором HTML-файлов, образующих справочный раздел. В этот раздел выносятся большие иллюстрации, длинные примеры, комментарии, толкование терминов, литературные источники, лирические отступления.
Таким образом, дополнительно к ссылкам движения по цепочке, в приложении появляются ссылки, уводящие пользователя на документы справочного раздела. Изучив дополнительный материал, пользователь возвращается в цепочку и продолжает последовательное движение.
Схема цепочки со справочным разделом выглядит так:
Рис.1.2. Схема цепочки со справочным материалом
1.3.3. Уложим картинку в фоновый паркет
Пользуясь атрибутом bgcolor команды BODY, можно выкрасить фон документа в какой-нибудь один цвет.
Вместо одноцветной заливки можно использовать картинку. Эта картинка будет, повторяясь, укладываться в экранное поле наподобие паркетных плиточек.
Чтобы "паркет" смотрелся красиво, необходима визуальная стыковка плиточек между собой. Это надо учитывать при создании фоновой иллюстрации. И еще: очень важно, чтобы фон оставался именно фоном, а не отвлекал внимание пользователя от главных элементов документа, не мешал читать текст.
Фоновая картинка задается в команде BODY атрибутом background:
<BODY background=имя файла с картинкой>
1.4. Графика
Иллюстрации в тексте радуют глаз и делают документ более привлекательным. Пора и нам записать в свой актив вывод картинок средствами HTML.
Браузеры "понимают" два графических формата GIF и JPG.
1.4.1. Формат GIF
Картинки в этом формате поддерживают 256 цветов. В большинстве случаев этого вполне достаточно для получения качественных иллюстраций, но до фотографического качества, конечно, далеко.
GIF-формат имеет три приятные дополнительные возможности:
• Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик: нарисовать отдельные кадры, настроить время задержки в последовательности показа, "зациклить кино" или показывать кадры только один раз. Когда анимация готова, она записывается на диск как обычный GIF-файл. Хотя в этом файле не одна, а целая серия GIF-картинок и разная настроечная информация.
• Прозрачная графика. В GIF-формате один цвет можно объявить прозрачным. Это позволяет избавиться от строго прямоугольных иллюстраций и вписывать рисунок в документ более привлекательным образом. Прозрачный цвет задается в редакторе при записи GIF-файла на диск. Обычный GIF легко сделать прозрачным. Нужно просто загрузить его в GIF-редактор или PhotoShop и снова записать на диск, указав прозрачный цвет.
• Чересстрочная развертка. Применяется для больших GIF. Иллюстрация разделяется на четыре части, размером с оригинальную картинку. Первая часть содержит 1, 5, 9,... строки исходного изображения. Вторая -- 2, 6, 10,... Третья - 3, 7, 11,... Четвертая -- 4, 8, 12,...
1.4.2. Формат JPG
Этот формат был разработан специально для передачи фотографий. Он поддерживает миллионы цветов и позволяет получать изображения очень высокого качества.
JPG-формат поддерживает режим, похожий на чересстрочную развертку GIF. Но в отличие от GIF, деление на части происходит не по строкам, а по алгоритму выделения из картинки полноформатных частей. При этом каждая следующая часть по качеству выше предыдущей. JPG в таком режиме называется прогрессивным.
1.4.3. Как программировать картинки
1.4.3.1. Картинка в тексте
Картинку можно помещать в документ почти так же, как текстовый символ. Для вставки этого необычного знака нужно воспользоваться командой <IMG>. Команда не имеет парного закрывающего тега, но имеет много атрибутов.
Атрибут src = имя файла
Самым главным атрибутом команды является атрибут src, при помощи которого можно задать имя файла с картинкой. Например, команда <IMG src=img.gif> заставит браузер отобразить на экране графический файл img.gif из текущего каталога.
Атрибут alt = "текст надписи"
Если браузер не находит картинки в указанном месте на диске, он вместо нее рисует на экране маленький прямоугольник и вписывает в него надпись, которая задана атрибутом alt:
<IMG src=monstr.jpg alt="Страшный зверь">
Атрибут alt рекомендуется использовать всегда. Даже если картинка найдена браузером, задание надписи не будет лишним: стоит пользователю остановить курсор на картинке, как надпись появится в маленьком окошке и сообщит дополнительную информацию. Проверьте это на следующей картинке:
<IMG src=./pic07/cat7.gif alt="А нас и тут неплохо кормят!">
Атрибуты width = n и height = m
Эти атрибуты задают ширину и высоту (в пикселах) прямоугольника, в который выводится картинка.
Если атрибуты не заданы, картинка рисуется в естественных размерах.
Атрибут border = n
Атрибут позволяет задать рамку иллюстрации толщиной в n пикселов.
При отсутствии атрибута, или при значении n=0 рамка не рисуется.
1.5. Построение таблиц.
В практическом HTML-программировании таблицы совершенно незаменимы для создания левых и правых полей страницы, выравнивания элементов на экране, многоколонной верстки, наложения картинок друг на друга. И, наконец, для отображения на экране табличного материала.
1.5.1. Как задать таблицу
Таблица задается командой <TABLE> ... </TABLE>.
Внутри этих тэгов задаются строки командами <TR> ... </TR>.
Наконец, внутри строк задаются клетки (ячейки) командами <TD> ... </TD>.
Таким образом, по строкам, описывается вся структура таблицы.
Рис.1.3. Таблица
1.5.2.Атрибуты команды TABLE
Таблица 1.3. Атрибуты
Атрибут Значение Описание
Align left, right Выравнивание по горизонтали
Width Число или процент Ширина таблицы
Cellpadding число Расстояние между содержимым ячейки и рамкой
Cellspacing число Расстояние между ячейками таблицы
bgcolor цвет Цвет фона таблицы
Background файл Фоновая картинка
border число Ширина линий рамки
Bordercolor цвет Цвет линий рамки
Bordercolordark цвет Цвет рамки (снизу и справа)
Bordercolorlight цвет Светлый цвет рамки (сверху и слева)
1.5.3. Атрибуты команды TR
Таблица 1.4. Атрибуты команды TR
Атрибут Значения Описание
Align left, center, right Выравнивание по горизонтали
Valign top, center,bottom, baseline Выравнивание по вертикали
bgcolor цвет Цвет фона
Bordercolor цвет Цвет линий рамки
Bordercolordark цвет Цвет рамки (снизу и справа)
Bordercolorlight цвет Светлый цвет рамки (сверху и слева)
1.5.4. Атрибуты команды TD (TH)
Таблица 1.5. Атрибуты команды TD
Атрибут Значения Описание
Align left, center, right Выравнивание по горизонтали
Valign top, center, bottom, baseline Выравнивание по вертикали
Width число или процент Ширина ячейки
bgcolor цвет Цвет фона
background файл Фоновая картинка
Bordercolor цвет Цвет линий рамки
Bordercolordark цвет Цвет рамки (снизу и справа)
Bordercolorlight цвет Светлый цвет рамки (сверху и слева)
nowrap Выключение автоматического разрыва строк
colspan число Ширина большой ячейки (в столбцах)
rowspan число Высота большой ячейки (в строках)
1.6. Таблицы стилей
1.6.1. Уровни CSS
Впервые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0.
Существуют три уровня CSS, определяемых наличием завершенной редакции структуры. Это: CSS 1 (первый уровень структуры стилевых шаблонов, окончательно утвержденный 11 января 1999 года), CSS 2 (второй уровень стилевых конструкций, начало обсуждения которого датируется маем 1998 года) и CSS 3 (третий уровень стилевого оформления электронных документов, принятый к обсуждению 23 мая 2001 года, на момент написания книги находился в стадии проработки).
Именно третий уровень (CSS 3) позиционируется разработчиками в качестве некой единой системы представления стилей в электронном документе, основанной на использовании специальных модулей.
1.6.2. Способы определения таблиц стилей
Определение таблицы стилей (стилевого шаблона) возможно четырьмя способами:
ссылка на внешний файл. Если все стилевые шаблоны для конкретного HTML-документа разместить в одном текстовом файле (с расширением ess), то с помощью специального тега <LINK> из текущего документа можно сделать ссылку на внешний CSS-файл стилевых шаблонов, например:
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css">
Браузер, анализируя HTML-код, обратится по указанному пути и, обнаружив указанный файл стилевого оформления, отобразит элементы страницы в соответствии с определенными правилами CSS.
внедрение в документ. Под внедрением в документ подразумевается задание стилевой конструкции внутри самой HTML-страницы, например:
<STYLE TYPE="text/CS3">
<! —
BODY { font-family: Arial, Helvetica; }
INPUT { background-color: ICECECE; }
— >
</STYLE>
Данная конструкция также должна присутствовать в разделе HEAD.
включение в теговые конструкции. Любой отдельный HTML-элемент может быть подвергнут форматированию средствами CSS. Для этого необходимо задать определенное правило реализации того или иного тега, например:
<Р ALIGN="justify" STYLE="color: 1000000; font-family: Verdana;"> Текст параграфа...
импортирование. Импортирование стилевого шаблона CSS, по сути, аналогично указанию ссылки на внешний файл:
<STYLE TYPE-"text/css">
<! —
@import: url(style.ess);
-->
</STYLE>
Все четыре способа определения стилевого шаблона CSS можно использовать одновременно в пределах одного HTML-документа (листинг 9.1). Такая возможность позволяет задавать основное правило CSS, к примеру, в виде внешнего файла шаблонов, а для исключительных или редких HTML-элементов — отдельные конструкции либо в теге <STYLE>, либо в кодовых конструкциях самих тегов.
1.7. JavaScript
JavaScript - язык подготовки сценариев, позволяющий сделать Web-страницы более интерактивными и функциональными. Для написания сценариев JavaScript обязательно требуется знание языка HTML
1.7.1. Использование JavaScript
Присмотритесь к сайтам, которые вы посещаете. На каждой странице содержится текст и некоторое количество картинок. Быть может, есть часы, показывающие время, или бегущий текст в строке состояния браузера. Возможно, на сайте имеется форма, которую нужно заполнить. Если пропустить какую-либо графу анкеты, то появится сообщение об ошибке. На некоторых страницах встречаются движущиеся по экрану изображения или текст, изменяющийся при щелчке мыши.
Таким образом, вы можете наблюдать JavaScript в действии, а создать подобные эффекты может любой человек, знающий этот язык.
1.7.2. Важность изучения JavaScript
Полезно изучить JavaScript хотя бы из-за его широкого распространения в сети. Огромное количество Web-страниц сделано с использованием сценариев (по самым разным причинам), и сайты без них кажутся блеклыми и скучными. Каким бы интересным не было содержание сайта, некоторые посетители сразу захотят уйти. Конечно, нет смысла оспаривать важность текстового содержания для любой Web-страницы, однако использование JavaScript не только улучшит подачу материала, но и сделает вашу страницу более запоминающейся.
1.7.3 Переменные в языке JavaScript
Переменные имеют огромное значение не только в JavaScript, но и во всех языках программирования. Без их использования трудно обойтись, а с их помощью вы сможете управлять всеми типами данных.
Переменная - это имя, присваиваемое ячейке памяти компьютера, которая хранит определенные данные во время исполнения сценария JavaScript.
1.7.4. Создание переменных
В языке JavaScript переменные создаются довольно легко. Прежде всего нужно создать переменную. Это можно сделать двумя путями: объявив ее заранее или создав «на лету». Сначала будут рассматриваться переменные, объявляемые заранее.
1.7.5. Массивы JavaScript и Escape-последовательности
Массив (array) - мощное средство программирования для любого языка, в том числе в JavaScript. Массив позволяет сохранять несколько независимых значений в одной переменной. Обычно эти значения как-то связаны (например, названия дней недели). Преимущество массивов заключается в том, что правильное их использование значительно упрощает код и помогает избежать создания множества переменных с похожими именами.
1.7.6. Выражения, условия, операции, строки и числа
При изучении любого языка программирования (и JavaScript в том числе) время от времени приходится отвлекаться на попутные замечания.
Выражения и условия
С помощью переменных и массивов вы сохраняете в памяти компьютера любую нужную вам информацию в различных видах. Однако впоследствии вы можете сделать с этой информацией нечто большее, чем просто вывести ее на экран или поместить в окно предупредительных сообщений. Вы можете изменить ее, управлять ею или подвергнуть ее проверке. Для этих целей и предназначены выражения и условия.
Выражения (expressions) используются для комбинации двух или более значений, в результате чего получается третье, новое значение. Примером может служить сумма в следующем выражении:
1 + 2 = 3
Вы скомбинировали два значения (1 и 2), чтобы получить третье (3). Вот еще один пример:
3 + 3-1 = 5
Здесь комбинация трех значений (3,3 и 1) приводит к появлению нового значения (5).
Условия (conditions) позволяют сравнивать величины и определять логическое значение - true или false. Ниже приводится пример условия:
Лимоны желтые? Да.
Или другой пример:
3 + 3 = 6? Да.
Заметьте, что на оба этих вопроса можно дать только два ответа - да или нет (хотя на вопрос о лимонах можно ответить «наверное»). В языке JavaScript (и в других компьютерных языках) использование условий подразумевает только два результата - да или нет.
В выражениях и условиях данные комбинируются с помощью операций (operator). Если манипуляции осуществляются с какой-либо одной величиной, то такая операция именуется операцией с одним операндом (unary operator). Если таких величин две, то операция называется операцией с двумя операндами (binary operator), а если три - операцией с тремя операндами (ternary operator).
Раздел II. Практическая часть
2.1. Листинг сайта:
Заключение
В этом проекте был рассмотрен язык разметки гипертекстовых документов HTML, его основные функции свойства и параметры. Сегодня применение HTML практикуется во всех без исключения электронных документах, независимо от тематики, величины и коммерческой направленности Интернет проекта.
В данной работе такие технологии, как CSS JavaScript, были затронуты лишь поверхностно дабы показать эффективность совокупности использования HTML с интерактивными скриптовыми технологиями. Использование последних является отдельной темой, подходящей для отдельного проекта.
Список литературы
1. Айзекс А. Dynamic HTML BHV-Санкт-Петербург 1998
2. Ганчаров А. Самоучитель HTML. Питер 2000
3. Дарнелл Р. HTML 4 Энциклопедия пользователя ДиаСофт 1999
4. Денисов Internet Explorer 5 Справочник Питер 1999
5. Хоумер А. Dynamic HTML Справочник Питер 1999
6. Петюшкин А.В., HTML. Экспресс-курс. – СПб.: БХВ - Петербург, 2003
7. Кингсли-Хью Э., JavaScript: учебный курс. – СПб.: Питер, 2002
8. http://www.robotland.ru/
Разработка Web сайта на основе HTML с использованием JavaScript
Курсовая работа по предмету «Web-программирование»