Файл: Основы программирования на языке HTML..pdf

ВВЕДЕНИЕ

Термин Web-дизайн состоит из двух частей. Первая часть - Web - это сокращенное написание слов World Wide Web - Всемирная Паутина. Вторая часть термина - слово "дизайн" - происходит от английского слова design, что означает: проектировать, конструировать, планировать, чертить, создавать рисунок. Таким образом, предварительный перевод термина Web-design с английского языка на русский язык может быть таким: "проектирование для Интернета".

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

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

Текстура - характер поверхности какого-либо объекта, обусловленный его внутренним строением, структурой, объективными физическими свойствами (дерево, металл, стекло, ткань).

Фактура - внешние свойства поверхности объекта (гладкая, шероховатая, зеркальная). Фактура характеризует качество обработки поверхности объекта.

Форма - внешнее очертание, наружный вид, контур объекта.

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

Web-дизайн - новый жанр изобразительного искусства, основанный на применении специфических инструментов (компьютера и программ-редакторов), специальных языков программирования (HTML, JavaScript, Java, Perl, C++, PHP и др.) и сетевых технологий (CGI, CSS, SSI и др.). Целью Web-дизайна является проектирование (создание) объектов (Web-страниц, баннеров, апплетов, скриптов, отдельных элементов Web-страниц), размещаемых в Интернете.

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

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

Начинающие Web-дизайнеры (любители) размещают на своих домашних страничках собственные литературные, графические и музыкальные произведения, результаты научных исследований, фотографии, репродукции любимых картин, кулинарные рецепты, основные сведения о себе, о своих увлечениях и т. п. Это позволяет им отыскать в сети единомышленников, людей со сходными интересами, общаться с интересными людьми.

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

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

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

Основной задачей профессиональных Web-дизайнеров является привлечение большого числа посетителей на созданный ими сайт. И если на страницы дизайнеров-любителей заходят два-три посетителя в неделю, то коммерческие сайты посещают ежедневно тысячи людей. Этому способствует неразрывное единство художественного оформления сайта и его предметного содержания (единство формы и содержания). Не последнюю роль в создании популярности играет умение "раскрутить" сайт.

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

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

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

Проектирование страниц или сайтов осложняется еще и тем обстоятельством, что одна и та же страница отображается по-разному разными браузерами (Internet Explorer, Netscape Navigator, Opera) и в окнах разного размера. Во многих случаях браузер самостоятельно "решает" как будет выглядеть загружаемая страница. Изменить внешний вид страницы может и пользователь, например, путем отключения опции загрузки рисунков, анимации.

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

Кратко рассмотрим вопрос оценки допустимого объема Web-страницы. В современном динамичном мире каждому человеку нужно успеть многое сделать. Поэтому люди экономят каждое мгновение дарованной им жизни. Пользователи, путешествующие по сети, "проскакивают" мимо тех Web-страниц, которые недопустимо долго загружаются на их компьютеры. По этой причине при проектировании сайта дизайнеру необходимо уметь заранее оценить примерное время загрузки и допустимый объем создаваемой ими страницы. Считая, что предельно допустимое время ожидания загрузки Web-страницы составляет 30-40 секунд, а средняя скорость поступления информации по коммутируемому каналу - 10-20 Кбит/с, получаем желательный объем проектируемой Web-страницы - 300-800 Кбит, т. е. 37,5-100 Кбайт. Естественно, что при использовании выделенного канала скорость загрузки, как правило, возрастает в 3-4 раза, и поэтому допустимый объем страницы в перспективе может быть увеличен.

Глава 1. ОСНОВНЫЕ ПОНЯТИЯ HTML

 HTML – язык гипертекстовой разметки документов (HyperText Markup Language). С помощью HTML создаются Web-страницы, которые находятся в глобальной компьютерной сети Интернет. HTML – это не язык программирования в традиционном смысле, он является языком разметки. С помощью HTML текстовый документ разбивают на блоки смысловой информации (заголовки, параграфы, таблицы, рисунки и т.п.).

Гипертекстовый документ – это документ, содержащий переходы (гиперссылки) на другие документы. При использовании гиперссылки происходит перемещение от одного документа к другому (как по цепочке) в Интернете. HTML-документ является гипертекстовым документом.

Особенности HTML-документа:

1. HTML-документ может содержать текст, графику, видео и звук.

2. В общем случае HTML-документ – это один или несколько текстовых файлов, имеющих расширение .htm или .html.

3. Создавать HTML-документ можно как с помощью специальных программ – редакторов HTML (например, FrontPage), так и с помощью любого текстового редактора (например, блокнота Windows).

4. Для просмотра HTML-документов существуют специальные программы-браузеры. Они интерпретируют HTML-документы, т.е. переводят текст документа в Web-страницу, и отображают ее на экране пользователя. Существует очень много различных браузеров, но наиболее распространенными браузерами являются Microsoft Internet Explorer, Netscape Navigator и Opera.

5. Если при интерпретации HTML-документа браузер чего-то не понимает, то сообщения об ошибке не возникает, а это место в HTML-документе игнорируется и не отображается браузером.

HTML-документ состоит из элементов HTML.

Элемент HTML – это чаще всего два тега (открывающий и закрывающий) и часть документа между ними. Кроме того, существуют элементы HTML, состоящие только из одного тега.

Тег – в переводе с английского – ярлык, этикетка. Тег определяет тип выводимого элемента HTML (например, заголовок, таблица, рисунок и т.п.). Сам тег не отображается браузером. Тег представляет собой последовательность элементов:

• символ левой угловой скобки (<) – начало тега;
• необязательный символ слеша (/) – символ используется, чтобы обозначить закрывающий тег;
• имя тега;
• необязательные атрибуты в открывающем теге;
• символ правой угловой скобки (>)

Атрибуты – необязательный набор параметров, определяющих дополнительные свойства элемента HTML (например, цвет или размер). Атрибут состоит:

• из имени атрибута;
• знака равенства (=);
• значения атрибута – строки символов, заключенной в кавычки

Пример элемента HTML:

<H1 ALIGN= "CENTER">Глава 1</H1>

В этом примере:

<H1 ALIGN= "CENTER"> – открывающий тег

</H1> – закрывающий тег

H1 – имя тега

ALIGN= "CENTER" – атрибут

ALIGN – имя атрибута

"CENTER" – значение атрибута

Правила создания HTML-документов:

1.   Теги и атрибуты можно записывать в любом регистре, т.е. </H1> и </h1> – это одно и то же.

2.   Несколько пробелов подряд, символы табуляции и перевода строки при интерпретации браузером заменяются на один пробел. Это позволяет писать хорошо структурированные исходные тексты файлов HTML.

3.   Рекомендуется давать имена файлам HTML строчными английскими буквами. Длина имени – до восьми символов. В принципе, можно не придерживаться данной рекомендации, но тогда пользователи, работающие в операционных системах, отличных от Windows, не смогут воспользоваться Вашими HTML-документами.

СТРУКТУРА HTML-ДОКУМЕНТА

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

Также в HTML-документе должны присутствовать элементы HEAD (информация о документе) и BODY (тело документа).

Раздел документа HEAD

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

Раздел заголовка начинается тегом <HEAD> и следует сразу за тегом <HTML>. Между открывающим и закрывающим тегами элемента HEAD располагаются другие элементы заголовка.

Название документа TITLE

Для того чтобы дать название HTML-документу, предназначен тег <TITLE>. Это название будет выведено в заголовок окна браузера. Название записывается между тегами <TITLE> и </TITLE> и представляет собой строку текста. Длина этой строки может быть любой, но рекомендуется делать ее не больше 60 символов. Элемент TITLE должен находиться только в разделе HEAD.

Раздел документа BODY

В этом разделе документа располагается та информация, которая отображается в окне браузера. Раздел BODY должен начинаться тегом <BODY> и завершаться тегом </BODY>, между которыми располагаются элементы HTML, из которых и состоит содержание документа.