39

ВВЕДЕНИЕ 3

1. ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ 4

2. СТУКТУРА САЙТА И СОДЕРЖАНИЕ СТРАНИЦЫ 15

3. ИЗБРАННЫЕ СТРАНИЦЫ С ФРАГМЕНТАМИ КОДОВ 18

3.1. Страница «Атрибутика» 18

3.2. Страница «История» 24

ВВЕДЕНИЕ

Термин HTML (Hyper Text Markup Language) означает "язык маркировки гипертекстов". Это понятие более широкое, включает в себя Интернет и локальные сети, редакторы, браузеры, разнообразные програмные продукты, компакт-диски, обучающие курсы, дизайн и многое другое. HTML– своеобразная противоположность сложным языкам программирования, известным только специалистам.

HTMLдавно перестал быть просто языком программирования. Человек, изучавший этот язык, обретает возможность делать сложные вещи простыми способами и, главное, быстро, что в компьютерном мире не так уж и мало. Гипертекст подходит для включения элементов мультимедиа в традиционные документы. Практически именно благодаря развитию гипертекста, большинство пользователей получило возможность создавать собственные мультимедийные продукты и распространять их на компакт-дисках. Такие информационные системы, выполненные в виде набораHTML-страниц, не требует разработки специальных программных средств, так как все необходимые инструменты для работы с данными (WEB-браузеры) стали частью стандартного программного обеспечения большинства персональных компьютеров. От пользователя требуется выполнить только ту работу, которая относится к тематике разрабатываемого продукта: подготовить тексты, нарисовать рисунки, создатьHTML-страницы и продумать связь между ними.

HTML, как основа созданияWEB-страниц, имеет прямое отношение и к новому направлению изобразительного искусства –WEB-дизайн. Художнику в Интернете недостаточно просто нарисовать красивые картинки, оригинальный логотип, создать новый фирменный стиль. Он должен еще поместить все это в Сети, продумать связь междуWEB-страницами, чтобы все двигалось, откликалась на действие пользователя, поражало воображение, вызывало желание создать что-нибудь свое, оригинальное в этой области.

Цель работы: изучить языки программированияHTMLиJavaScript.

Исходя и выше поставленной цели при создании данного проекта я поставил следующие задачи:

1. Изучить и проанализировать литературу по данной теме.

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

3. Создать оригинальный сайт.

1. Теоретическая часть Что такое сайт

До­словный перевод с английского слова «site» способен только ввести в заблуждение. Поскольку как раз «местом» (пусть даже в смысле — «место на диске» сервера) сайт является в наименьшей степени. Ведь физически он может находиться на самых разных серверах и на разных континентах.

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

Другими словами, сайт — это электронная публикация любого размера и содержания, доступная во Всемирной Сети Интернет, причем любой направленности, информа­ционной или эмоциональной.

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

Итак, первое, абсолютно необходимое требование к сайту, — доступность в Сети. А Сеть (то есть Интернет) основана на определенном протоколе данных, именуемом ТСР/IР.

Собственно веб-технологии покоятся на трех столпах — это НТМL, веб-графика и средства придания интерактивности. А для доступа к этим технологиям предназначены браузеры.

Браузеры

Вот с них-то и начнем, поскольку их особенности всегда нужно держать в голове при применении любых веб-тех­нологий. Браузеры — это в первую очередь программы-интерпретаторы языка HTML (о нем — чуть ниже). Различают браузеры, работающие в текстовом и графическом ре­жимах (далее они именуются, не вполне строго, текстовы­ми и графическими браузерами).

Подавляющее большинство посетителей Всемирной сети все же использует браузеры, дающие возможность отображения графических элементов. Среди них с переменным успехом лидируют Internet Explorer и Netscape Navigator. Есть еще браузер Opera, имеющий определенную популяр­ность в Европе. Пользователи UNIX-совместимых операци­онных платформ (например, операционной системы Linux) весьма часто применяют Lynx — чисто текстовый браузер. Доля всех остальных браузеров пренебрежимо мала.

Разные браузеры и разные их версии показывают одну и ту же страницу по-разному: от незначительных отличий в ширине полей или виде шрифта до весьма существенных изменений, в результате которых содержимое веб-страни­цы отображается совершенно некорректно. Эле­мент, хорошо видимый в Internet Explorer, может выглядеть иначе в Opera (и наоборот) и вообще исчезнуть в любом из браузеров других версий.

Итак, мы выяснили, что браузеры — это интерпретаторы языка, именуемого HTML.

HTML

На нем остановлюсь чуть подробнее. Скорее всего, вы знае­те, что это такое. Если же нет — все дальнейшее изложение может быть просто непонятно.

HTML — это язык гипертекстовой разметки (HyperText Markup Language). В его основе лежат управляющие кон­струкции, именуемые тегами, и элементы, составляющие собственно html-документ. Теги определяют структуру и вид html-страниц: именно благодаря им интерпретаторы HTML, встроенные в браузеры, формируют изображение документа на экране компьютера. А элементы страниц — это текст и (возможно) графика, определяющие их содер­жание.

Теги HTML разделяют элементы html -документа — заго­ловки различных уровней, абзацы, иллюстрации и прочее; они заключаются в угловые скобки: <имя_тега>. Для некоторых тегов (например, <br> — разрыв строки без образования нового абзаца) этого достаточно. Но большинство конструк­ций HTML требует еще и закрывающего тега, имеющего вид </имя_тега>: например, <title>Название сайта</title>.

Сколько тегов и какие они бывают — можно посмотреть в любом справочнике по HTML. Каждый html-документ должен содер­жать по крайней мере один тег — <html> (закрывающий тег обязателен). Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий: </html>.

Кроме обязательного тега практически каждый html-документ содержит тег <head></ head >, внут­ри которого располагается всякого рода служебная инфор­мация, не отображаемая в главном окне браузера (в том числе и тег <title>).

В большинстве html-файлов (за исключением фреймовых наборов, о чем — ниже) присутствуют теги <body> (закры­вающий тег </body> обязателен; то, что между ними — и есть содержимое html-документа, отображаемое в браузере) и <p> (ограничение абзаца, закрывающий тег </p> не обя­зателен, но, с точки зрения строгости синтаксиса, лучше его ставить).

Теги могут иметь атрибуты. Так, в теге <body> можно задать цвет фона, текста, гиперссылок и т. д. (например, следующим образом:

<body bgcolor= "#FFFFFF" text :="#000000" link="#ООООFF"

vlink="#800080">

Такая запись позволит отображать черный текст на белом фоне, цвет не посещенных гиперссылок будет синим, посе­щенных — фиолетовым). Значения атрибутов обязательно заключаются в кавычки. Некоторые теги непременно должны иметь атрибуты (например, тег <а>, о котором пойдет речь ниже), другие, подобно тегу <body>, могут обойтись без них.

Особую роль играет тег <a></a>, тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути:

(1) <a href="prf.html">мои фотографии</a> (2) <a href="photos/prf.html">мои фотографии</a> (3) <a href="http://www.homepage.ru/prf.html">мои фотографии</a>

В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.

Достаточно важны теги заголовков различных уровней <h#> </h#> (здесь и далее — закрывающий тег приводится, если он необходим). При этом, с точки зрения логики и специ­фикации языка, желателен правильный порядок их вложен­ности (то есть необходимо, чтобы за тегом <h1></h1> следо­вал тег <(h2></h2>, а не, скажем, <h4></h4>). В подавляющем большинстве браузеров эти теги выделяются полужирным шрифтом крупного кегля (тем более крупным, чем меньше цифра ранга заголовка). Аналогично печатной продукции это облегчает восприятие текста.

Вообще говоря, по своему замыслу HTML создавался так, чтобы максимально отделить структуру (и содержание) до­кумента от его визуального представления. То есть тексту, заключенному в тег <h1></h1>, теоретически будет прида­ваться большая значимость, чем тексту в теге <h2></h2>, что имеет значение для некоторых поисковых машин. А уж как именно эта значимость выражается визуально — остается на совести авторов кон­кретной реализации данного браузера.

Аналогично, если, например, в печатном тексте требуется подчеркнуть мудрую или содержащую какие-либо непре­ходящие истины мысль, прибегают к курсивному или полужирному начертанию (иногда — к тому и другому одно­временно). В html-документе можно воспользоваться для данных целей тегами <b></b> и <i></i> (от английских слов «bold» и «italic») или даже обоими вместе (в любом порядке вложенности). Кстати, еще одно правило простанов­ки тегов — они не должны пересекаться, то есть <тег></тег2> обязательно должен располагаться внутри <тег1></тег1>. Иными словами, допустима конструкция <b><i>текст</i> </b>, но никак не <b><i>текст</b></i>. В большинстве случаев ошибка не наказуема, но иногда возникающий в результате эффект бывает совершенно сверхъестественным. Зачас­тую в указанном случае правильнее пользоваться тегами <strong></strong> и <em></em>. В первом варианте боль­шинство браузеров отображает подобный текст полужир­ным начертанием, во втором — курсивом. Но, главное, оба эти тега подчеркивают большую значимость заключенных в них элементов относительно всех остальных.

Кроме обычных тегов существуют еще и так называемые метатеги. Они не отображаются браузером, но могут содер­жать некую информацию, значимую для поисковых систем (например, ключевые слова, указание на авторство, описа­ние). Располагаются они внутри тега <head></head>.

Суммируя, приведу обычный набор подобных тегов про­стого html-документа:

<HTML>

<HEAD>

<META name= "author" content:= "Имя создателя сайта">

< META name = "description" content= "Описание">

< META name = "keywords" content:= "Перечень ключевых слов">

<title>Заголовок страницы<title>

</HEAD>

<BODY>

<hi >3а головок</h1>

<h2>Подзаголовок</h2>

< p>Абзац первый</p> ...

</BODY>

</HTML>

Кроме обычных html-документов (принадлежность к которым определяется наличием тега <body></body>) существуют так называемые фреймовые наборы. Для них обязательным явля­ется наличие тегов <frameset></frameset>, между которыми заключено не менее одного тега <frame> (практически — два и больше, иначе существование фреймового набора лишено смысла). Строго говоря, самостоятельными html-документами упомянутые фреймовые наборы не являются, а представляют собой ссылки на существующие (два или больше) html-файлы (указанные в теге <frame> как атрибут src="имя_файла.html"). Визуально фреймовый набор выглядит разделенным на два (или больше) окна, содержимое которых может прокручи­ваться или изменяться независимо друг от друга.

Вот как выглядит - код фреймового набора:

<HTML>

<HEAD>

<title>Заголовок фреймового набора<title>

</HEAD>

<framest rows= "30%, 70%" border= "0">

<frame src= “frame1.html”>

<frame src= “frame2.html”>

</frameset>

</HTML>

Как уже упоминалось, задумывался HTML именно в каче­стве языка разметки, созданного для структурирования до­кументов. А уж каким образом эта структура будет выгля­деть внешне, зависело, в первую очередь, от браузера и его пользовательских настроек, а также от самого создателя сайта. Данный принцип более или менее последовательно выдерживался вплоть до версии 2.0. (утверждена в 1995 году международным консорциумом World Wide Web, именуемым в народе W3C).

Так что, если вы пользуетесь в своей работе HTML 2.0, это почти гарантирует адекватное воспроизведение результатов практически во всех существующих ныне браузерах.

Исторически следующим возник HTML 3.2. Данная версия языка не является усовершенствованием версии 2.0 (кото­рым должен был стать так и не реализованный проект HTML 3.0). Напротив, это, скорее, своего рода отход от основополагающих принципов реализации предыдущего стандарта, поддерживающий, тем не менее, большинство его функций. Именно в этой версии появились (вернее, были официально узаконены) теги, напрямую указывающие на форму представления html-документа (вроде тех же <b> </b> и <i></i>). Тем не менее HTML 3.2 — и ныне живу­щий вариант рассматриваемого нами языка, поддерживае­мый большинством широко используемых браузеров.

HTML 4.0. При его создании разработчиками была сделана попытка избавиться от нега­тивного влияния на отображение документов визуальных тегов путем выделения их в группу нерекомендованных, тогда как к рекомендованным отнесены теги структурные (унаследованные от HTML 2.0) вместе с многочисленными нововведениями типа каскадных таблиц стилей.

HTML 4.0 можно лишь условно назвать стандартом завтрашнего дня. С одной стороны, он поддерживается толь­ко последними версиями броузеров, да и то не в полном объеме и совершенно по-разному. А с другой стороны, совсем недавно был принят новый стандарт — XHTML, основанный на XML (eXtended Markup Language). Он более последовательно развивает традиции SGML и поддержка его декларируется в грядущих вскоре версиях программ, предназначенных для просмотра HTML-страниц.