Основы программирования на языке HTML (Цветовые спецификации)

Содержание:

ВВЕДЕНИЕ

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

HTML - своеобразная противоположность сложным языкам программирования, известным только специалистам.

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

Данная работа содержит описание языка разметки гипертекста HTML, являющегося основой создания web-сайтов.

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

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

Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").

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

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

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

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

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

Объектом исследования является процесс разработки сайта.

Предмет – язык гипертекстовой разметки HTML как средство создания сайта.

Цель работы – проанализировать принципы создания web-сайта с использованием языка HTML.

задачи:

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

1 ОСНОВНЫЕ ПОНЯТИЯ - СОЗДАНИЕ WEB-САЙТА

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

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

Рисунок 1- Мировая компьютерная сеть

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.

1.3 Язык HTML

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

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

Можно работать на Web без знания языка HTML, поскольку тексты HTML могут

создаваться разными специальными редакторами и конвертерами. Но писать

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

содержат ошибки или проводят плохой HTML код, который не работает на разных

платформах.

Язык HTML существует в нескольких вариантах и продолжает развиваться, но

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

HTML и познавая его глубже, создавая документ в начале изучения HTML и

расширяя его насколько это возможно, мы имеем возможность создавать Web-

страницы, которые могут быть просмотрены многими броузерами Web, как сейчас,

так и в будущем. Это не исключает возможности использования других методов,

например, метод расширенных возможностей, который предоставляется Netscape

Navigator, Internet Explorer или некоторыми другими программами.

Работа по HTML - это способ усвоить особенности создания документов в

стандартизированном языке, используя расширения, только если это

действительно необходимо.

HTML был ратифицирован World Wide Web Consortium. Он поддерживается

несколькими широко распространенными браузерами, и, возможно, станет

основанием почти всего программного обеспечения, которое имеет отношение к

Web.

1.4 Структура HTML - документа

Директивы HTML называются тегами. Теги заключаются в угловые скобки. Все теги за исключением некоторых – парные. Закрывающий тег отличается от открывающего наличием символа /. Синтаксис записи тега:

<ТЕГ> обрабатываемое значение </ТЕГ>

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

HTML не чувствителен к регистру, однако рекомендуется применять при написании тегов заглавный регистр для улучшения читаемости кода. Исключением являются адреса URL и escape-последовательности.

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

Синтаксис записи тега в совокупности с его атрибутом:

<ТЕГ имя_атрибута_1=” значение”

имя атрибута_n=” значение”>

Значения атрибутов заключаются в прямые кавычки <”>. Если внутри атрибута тега встречается другое значение, заключенное в кавычки, то есть имеет место вложение одних кавычек в другие, в качестве внутренних кавычек рекомендуется использовать одинарные. Такое выражение выглядит следующим образом:

<ТЕГ имя_атрибута_1=”значение_1;

’значение2’;

значение3”>

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

1) атрибуты, записываемые только строчными или заглавными символами латинского алфавита и не включающие иных символов, например цифр;

2) атрибуты, состоящие только из цифр от 0 до 9;

3) атрибуты, обозначающие промежутки времени.

Например, запись атрибутов border=”1” или align=” center” допустимо представить в виде border=1 или align=center.

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

<HTML>

<HEAD> Заголовок документа

<TITLE>Внешний заголовок </TITLE>

</HEAD>

<BODY>

Тело документа, содержащее основной код

</BODY>

</HTML>

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

Формат комментария:

<! - текст комментария - >

Дефинитивный определить. Согласно спецификациям HTML тег DOCTYPE (что означает "объявление типа документа" или дефинитивный определить) сообщает валидатору, какая версия HTML используется на странице. Этот тег должен всегда находиться в первой строке каждой страницы. Тег DOCTYPE – ключевой компонент web-страниц, претендующих на соответствие стандартам: без него код и CSS не пройдет проверку валидатором.

Тег DOCTYPE также важен для правильного отображения и работы страницы в браузерах, соответствующих стандартам (Mozilla, IE5/Mac, и IE6/Win).

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

Форматы тега DOCTYPE для стандартов HTML 4.01 Strict (строгий), Transitional (переходный), Frameset (с фреймами):

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http: // www. w3. org/TR/html4/strict. dtd">

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http: // www. w3. org/TR/html4/loose. dtd">

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN" "http: // www. w3. org/TR/html4/frameset. dtd">

1.5 HTML-редакторы

Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page 2000. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad). Текстовые редакторы возможно использовать только для создания небольших страниц, так как у них есть много минусов: не поддерживаются проекты, отсутствует "подсветка" текста, в общем, работать крайне неудобно. Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web- страниц в этом редакторе видишь одно, а в окне браузера - совсем другое (особенно это касается Netscape Navigator). Странички получаются какими-то кривыми, поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже. Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также

законодателем моды в этой области.

Последние версия HTML-редактора этой компании - DreamWeaver 3, который относится к категории WYSIWYG-редакторов, и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и ShockWave технологий, возможность закачки файлов через FTP, поддержка SSI и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и заключается преимущество технологии WYSIWYG - что вижу, то и получаю) (Рис.2).

Рисунок 2- DreamWeaver 3.0

Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд «вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.

Следующий редактор - HomeSite 4 - для создания страниц вручную, т. е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, NN, Opera).

HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему. Режим Edit позволяет получить полный контроль над страничкой. Здесь вы можете настроить практически все, сможете прописать функции каждого тега (тогда ваша страничка в любом браузере будет смотреться одинаково) (Рис.3)

Рисунок 3-HomeSite 4.0

HomeSite 4.0

Еще одна отличительная особенность HomeSite - это его «склейка» с Dreamweaver. HomeSite обладает кнопкой «Dreamweaver», а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для коректировки HTML-кода.

Рисунок 4- Корректировки HTML-кода

Одним из последних HTML-редакторов является EVR Soft 1st Page 2000 v2.

Его лозунг - "Create 1st class websites!" ("Создавайте первоклассные веб-сайты!"). Редактор содержит несколько режимов - Normal, Easy, Advanced/Expert и Hardcore, то есть вы можете выбрать свой уровень, а со временем перейти на более высокий. Еще одна особенность - довольно большая коллекция скриптов на JavaScript и DHTML. Все это довольно удобно разбито по категориям

1.6 Цветовые спецификации

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

Для вывода цветных изображений на экран монитора применяется так называемая палитра RGB (Red, Green, Blue). Согласно данному стандарту, теоретические основы которого были разработаны ученым-физиком Г. Гельмгольцем, можно получить абсолютно любой желаемый оттенок путем смешивания всего лишь трех красок: красной, зеленой и синей.

Для обозначения цвета шестнадцатеричным цифровым кодом перед самим кодом ставится символ <#>, далее следует набор из шести знаков в шестнадцатеричной системе счисления. (Табл. 1).

Таблица 1 – Обозначение цветов в шестнадцатеричной системе счисления

Цвет	Символьная метка	Цифровой код
Белый	White	#FFFFFF
Черный	Black	#000000
Зеленый	Green	#008000
Светло-зеленый	Lime	#00FF00
Серый	Gray	#808080
Светло-серый	Silver	#C0C0C0
Желтый	Yellow	#FFFF00
Темно-бордовый	Maroon	#800000
Синий	Blue	#0000FF
Темно-синий	Navy	#000080
Голубой	Aqua	#00FFFF
Изумрудный	Teal	#008080
Красный	Red	#FF0000
Пурпурный	Purple	#800080
Розовый	Fuchsia	#FF00FF
Оливковый	Olive	#808000

Для передачи цветов в html предпочтительнее пользоваться шестнадцатеричным цифровым кодом.

2 СОЗДАНИЕ WEB-СТРАНИЦЫ С ПОМОЩЬЮ ЯЗЫКА HTML

2.1 Форматирование текста

Иногда возникает необходимость использования в тексте символы, зарезервированные для обозначения элементов кода HTML. Это могут быть угловые скобки, прямые кавычки и т.д. Т. е. необходимо, чтобы символы отображались как текст, интерпретатор же воспринимает их как часть команд разметки гипертекста. Поэтому существуют escape-последовательности, или их еще называют "нотации символьных объектов". Они начинаются символом & и заканчиваются; а между ними размещается сама команда, записываемая в строчном регистре.

Таблица 2 – Обозначение символов

Символ	Значение	Именной примитив	Числовой примитив
<	Левая угловая скобка	&lt;	&#60;
>	Правая угловая скобка	&gt;	&#62;
“	Прямые кавычки	&quot;	&#34;
&	Амперсант	&amp;	&#38;
	Неразрывный пробел	&nbsp;	&#160;
©	Символ копирайта	&copy;	&#169;
®	Символ зарегистрированной торговой марки	&reg;	&#174;
=	Знак равенства	&equiv;	&#61;
	Стрелка влево	&larr;	&#8592;
	Стрелка вправо	&rarr;	&#8594;
	Стрелка вверх	&uarr;	&#8593;
	Стрелка вниз	&darr;	&#8595;

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

Исключением из этого правила может служить только текст, помеченный специальным тегом <PRE> – командой предварительного форматирования. Формат команды:

PRE> предварительно отформатированный текст </PRE>

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

Тег стандартного абзаца.

<P align= аргумент> Текст, заключенный в абзац </P>

Аргументы ALIGN:

1) right – выравнивание текста по правому краю;

2) left – выравнивание текста по левому краю;

3) center – выравнивание текста по центру;

4) justify – выравнивание текста по ширине.

Если при использовании тега <P> не задано никаких атрибутов, по умолчанию используется левое выравнивание.

Для выравнивания текста по центру можно использовать тег:

<CENTER> Текст </CENTER>

Разрывы строк. Для того, чтобы внутри тестового блока браузер отобразил перевод строки, например, для отделения одного абзаца от другого, в конце строки следует поместить тег <BR>. Следующее слово, встречающееся за данным тегом, будет перенесено на новую строку. Возможно использование нескольких тегов <BR> подряд для задания последовательности из нескольких пустых строк. Команда <BR> не имеет закрывающего тега.

Иногда тег <BR> содержит атрибут clear, который может принимать одно из трех значений: left, right, all. Указанные параметры позволяют переносить текст со смещением новой строки соответственно к левой, правой

или обеим границам экрана одновременно. Синтаксис записи этого тега с атрибутом clear:

<BR clear=”значение”>

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

<NOBR> строка без переносов </NOBR>

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

Шрифты. Элемент <FONT> определяет свойства шрифта.

Синтаксис записи тега <FONT>:

<FONT face=”значение1”

size=”значение2”

color=”значение3”>

текст

</FONT>

Значением атрибута face является название шрифта, который используется для отображения текста, заключенного в теги <FONT> </FONT>. Если, например, вместо параметра "значение1" в приведенном примере вы подставите "Arial", помеченный тегом <FONT>, текст будет отображаться именно этим шрифтом. В атрибуте face в качестве значений допустимо указывать несколько гарнитур шрифтов, разделяя их запятой. Для отображения текста браузер применит одну из перечисленных гарнитур, имя которой первой совпадает с имеющимся в его распоряжении набором гарнитур.

<FONT face=”Helvetica, Arial”>

Атрибут size указывает на размер шрифта. Параметр этого атрибута может быть описан либо абсолютной, либо относительной величиной. Абсолютная величина подразумевает использование в качестве параметра целого числа, указывающего на высоту шрифта в пунктах. Относительная же величина, обозначаемая целым числом со знаком плюс или минус (например, +2 или - 1), - это количество пунктов, которые следует прибавить или отнять от размера шрифта, используемого браузером по умолчанию (12pt). Так, запись <FONT size="+1"> говорит о том, что размер помеченного таким тегом текста будет на один пункт больше, чем обычный текст документа. Кроме того, размер шрифта можно записывать целыми числами от 1до 7. В этих единицах основному шрифту, используемому по умолчанию, присваивается размер 3. Самый мелкий шрифт имеет размер 1, самый крупный – 7. Каждый шрифт в шкале "1-7" на 20% больше или меньше размера основного шрифта.

Атрибут color определяет цвет шрифта и подставляется либо цифровым кодом, либо символьной меткой.

Очевидно, что при использовании тега <FONT> любой из его атрибутов может быть опущен.

<FONT face=”Arial"

size="+2"

color="#OOOOFF">

отрывок текста

</FONT>

FONT face=”Arial"

size=5

color="olive">

отрывок текста

</FONT>

<Font size=6> текст </Font>

<Font size=+2> текст </Font>

<Font size=-1> текст </Font>

Изменение основного шрифта. По умолчанию текстовое содержимое документа отображается основным шрифтом, заданным в начальных установках браузера. Обычно основной шрифт имеет размер 3 и гарнитуру Times New Roman. Для изменения свойств основного шрифта предназначен одиночный тег <BASEFONT>, который имеет атрибуты size, color и face.

<BASEFONT size=5>

Задание цвета фона. Цвет фона всего документа определяется атрибутом bgcolor тега <BODY>.

<BODY bgcolor=”blue”>

Цвет текста. Для определения цвета шрифта можно пользоваться одним из 3 способов:

1) назначить цвет символов всего документа с помощью атрибута text тега <BODY>

<BODY text=”green”>;

2) если в документе определен основной шрифт с помощью тега <BASEFONT>, можно дополнить этот элемент атрибутом color

<BASEFONT size=5 color=”red”>;

3) для текстовых фрагментов цвет задается с помощью атрибута color в тегах <FONT>, при этом такое задание цвета отменяет действие атрибута text тега <BODY>

<FONT color=”red”>.

Элементы стиля шрифтов.

<B> Выделение текста полужирным шрифтом</B>

<I> Выделение курсивным шрифтом</I>

<U> Выделение текста подчеркиванием </U>

<TT> Моноширинный текст </TT>

<SMALL> Уменьшение размера шрифта на 10-20% относительно текущего размера шрифта </SMALL>

<BIG> Увеличение размера шрифта на 10-20% относительно текущего размера шрифта </BIG>

<STRIKE> Зачеркнутый текст </STRIKE>

<S> Зачеркнутый текст </S>

<SUB> Нижний индекс </SUB>

<SUP> Верхний индекс </SUP>

Данные пары тегов можно вкладывать одна в другую. Например, выделить текст жирным курсивным шрифтом можно так:

<В><I>Текст, выделенный жирным курсивным шрифтом</I></В>

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

элемента несет определенную смысловую нагрузку и должно быть каким-то образом выделено относительно обычного текста.

<EM> Элемент акцентирования. Большинство браузеров воспринимают его как выделение текста курсивом. </EM>

<STRONG> Элемент акцентирования. Этот элемент обычно интерпретируется браузерами как выделение полужирным шрифтом. </STRONG>

<DFN> Термин и его определение. Отображается курсивом. </DFN>

<KBD> “Текст, набранный с клавиатуры”. Отображается шрифтом Courier. </KBD>

<VAR> Задание переменной или ее значения. Содержимое выводится курсивом. </VAR>

<CODE> Воспроизведение специальных символов. Применяется в случаях, когда необходимо показать, что текст является исходным кодом какой-либо программы. </CODE>

<SAMP> Воспроизведение буквенных символов. Указывает, что текст является образцом. </SAMP>

<ACRONYM title=”значение”>

Элемент аббревиатуры. В содержимом располагается сокращенное название аббревиатуры. Расшифровка термина появляется в виде всплывающей подсказки, текст которой задается значением атрибута title. Содержимое ACRONUM появляется обычным текстом. Назначение ACRONUM состоит в подготовке информации для поисковых серверов по расшифровке аббревиатур.

</ACRONYM>

Оформление цитат.

<BLOCKQUOTE cite=”URL”>

Текст длинной цитаты

</BLOCKQUOTE>.

Задает отображение длинных цитат отдельным текстовым блоком. Содержимое элемента выводится с небольшим отступом от левого и правого краев страницы (по умолчанию отступ равен 40px). Перед цитатой и после нее браузер оставляет по одной пустой строке. Атрибут cite предназначен для указания URL-адреса цитируемого документа. Этот атрибут не влияет на отображение цитаты и носит справочный характер.

<Q> Текст короткой цитаты </Q>

Тег применяется для форматирования коротких цитат. Содержимое элемента отображается без разрыва строки.

<CITE> Текст цитаты </CITE>

Цитаты, оформленные с помощью этого элемента, выделяются курсивным шрифтом.

Элемент <ADDRESS>. Используется для размещения в документе контактной информации. Элемент представляет собой блок, содержимое которого отображается курсивом и внутрь которого можно помещать другие элементы, например, разрывы строк, рисунки, гиперссылки и т.д., но нельзя вставлять блоки (разделы, списки, абзацы).

Формат элемента:

<ADDRESS>

Содержимое

</ADDRESS>

Пример:

<ADDRESS>

Екатерина Семенова <BR>

Ведущий менеджер

Телефон 123-123-123

<A href=”URL”>realiz@kdk. com</A>

</ADDRESS>

Атрибуты тега <BODY>. Общий формат записи тега <BODY> со всеми допустимыми атрибутами имеет вид:

<BODY background=”URL”

bgcolor=”значение1”

text=”значение2”

link=”значение3”

vlink=”значение4”

alink=”значение5”>

тело документа HTML

</BODY>

Атрибут background позволяет поместить на web-страницу фоновый рисунок, записав в качестве параметра атрибута URL этого рисунка. URL можно задавать либо в виде полного адреса Интернета (например, "http: // www. server. ru/images/имя_файла. gif"), либо в виде сокращенного адреса с указанием пути к директории на текущем сервере, в которой хранится данное изображение (например, ". . /images/имя_файла. gif”). Допускается просто указывать имя графического файла, если он хранится в той же директории, что и использующий его файл HTML. Данное изображение может иметь любой размер, поскольку при интерпретации кода оно многократно повторяется, заполняя все доступное пространство в окне браузера.

Атрибут text позволяет задать цвет текста для всего документа в целом. Однако он может быть изменен в определенном участке текста путем использования команды <FONT> с атрибутом color.

Атрибут bgcolor используется для задания фонового цвета всему документу. Атрибуты bgcolor и background не исключают друг друга, однако у последнего имеется приоритет. Это означает, что в случае, когда заданы оба эти атрибута, сначала выполняется заливка web-страницы цветом, назначенным в атрибуте bgcolor, поверх которой размещается изображение, заданное атрибутом background.

Атрибут link задает цвет, которым отображается не посещенная гиперссылка, то есть ссылка, к которой посетитель данного web-сайта еще не обращался. По умолчанию ей присваивается значение "blue" (#0000FF). В свою очередь, атрибут vlink указывает на цвет посещенной ссылки, значение которой по умолчанию – "purple" (#800080).

Атрибут alink определяет цвет гиперссылки в момент нажатия. По умолчанию данный атрибут также имеет значение "purple".

Применение многоязычного текста. Указание языка, на котором составлен документ или его фрагмент выполняется атрибутом lang. В качестве значения этого атрибута представляется код языка (en – английский, en–US – английский США, de – немецкий, ru – русский, uk – украинский). Например,

<HTML lang=”de”> – документ составлен на немецком языке,

<Q lang=”uk”> – цитата на украинском.

Направление чтения текста. Задается атрибутом dir, принимающим значения: ltr – слева направо, rtl – справа налево. Атрибут задается для текстов на арабском языке или иврите.

2.2. Разделы, заголовки и горизонтальные линии

Разделы. Формат задания раздела:

<DIV> HTML-код или текст </DIV>

или

<SPAN> HTML-код или текст </SPAN>

Разделы используются для задания параметров текста и его расположения. К разделу можно применять любые атрибуты стиля. Теги <DIV> и <SPAN> отличаются тем, что при использовании тега <DIV> браузер производит перенос раздела на новую строку и перед ним автоматически устанавливается пустая строка. При использовании тега <SPAN> переноса не возникает.

Заголовки. Заголовки позволяют разделить web-страницу на логически законченные блоки и помогают ориентироваться в содержимом документа.

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

Для того чтобы отобразить заголовок на web-странице, необходимо использовать тег <Нn>, где n - целое число от 1 до 6, обозначающее номер уровня заголовка, причем самым верхним уровнем принято считать 1. Синтаксис записи этой команды:

<Нn аlign="параметр"> Текст заголовка </Нn>

Атрибут align дает возможность web-мастеру определить расположение заголовка в окне браузера. Параметр этого атрибута может принимать одно из трех возможных значений:

1) right – позиционирование заголовка по правой границе документа;

2) left – позиционирование заголовка по левой границе документа;

3) center – позиционирование заголовка по центру документа.

По умолчанию заголовки выравниваются по левому краю страницы. Высоты заголовков относятся как 2: 1,5: 1,17: 1,33: 0,83: 0,67. Заголовки как блоковые элементы отделяются от текста пустыми строками.

Пример:

<Н1 align=”center”>

ДОБPO ПОЖАЛОВАТЬ НА МОЮ СТРАНИЧКУ!

</Н1>

Горизонтальные линии. Чтобы визуально отделить часть объектов документа от других, применяются горизонтальные линии. Горизонтальная линия – это графический элемент, имеющий длину, толщину и цвет для создания таких линий в HTML используется непарный тег <HR> (сокращение от Horizontal Ruler). В спецификации HTML для отображения вертикальных линий не предусмотрено специальных тегов.

Формат создание стандартной линии (по умолчанию стандартная линия занимает всю ширину окна браузера, а её толщина составляет 2px, верхняя часть линии несколько темнее нижней):

<HR>

Формат сплошной темной линии без тени:

<HR noshade>

Формат горизонтальной линии с указанием свойств:

<HR align=”значение”

width=”значение”

size=”значение”

color=”значение”>

Атрибут align задает выравнивание линии и может принимать значения center, left или right. По умолчанию линии выравниваются по центру страницы.

Атрибут width задает длину линии в пикселях или процентах. Например, тег <HR width=25> определяет горизонтальную линию шириной 25 пикселей. Если значение атрибута задается в процентах (ставится символ %), то ширина линии вычисляется относительно ширины окна, например <HR width=”25%”>. Задание длины линии в относительных единицах предпочтительнее.

Толщина линии задается атрибутом size. Значение этого атрибута задается в пикселях в диапазоне от 1 до 175. Присвоение больших значений игнорируется. По умолчание size=2px.

Цвет линии определяется атрибутом color.

2.3 Форматы и общие параметры таблиц

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

1) TR – элемент, формирующий отдельную строку;

2) TD – элемент, определяющий содержимое ячейки данных;

3) TH – элемент, задающий ячейку заголовка;

4) CAPTION – элемент названия таблицы.

Структура записи тега <TABLE> в общем виде следующая:

<TABLE аlign=”значение”

width=”значение”

height=”значение”

background=”URL”

bgcolor=”значение”

border=”целое число”

borderсolor=”значение”

borderсolordark=”значение”

borderсolorlight=”значение”

cellpadding=”целое число”

cellspacing=”целое число”

cols=”значение”

frame=”значение”

rules=”значение”>

<CAPTION align=”значение”

valign=”значение”>

Название таблицы:

</CAPTION>

<TR align=”значение”

valign=”знaчeниe”

width=”значение”

height=”целое число”

bgcolor=”значение”

borderсolor=”значение”

borderсolordark=”значение”

borderсolorlight=”значение”>

<TH align=”значение”

valign=”знaчeниe”

width=”значение”

height=”целое число”

background=”URL”

bgcolor=”значение”

borderсolor=”значение”

borderсolordark=”значение”

borderсolorlight=”значение”

colspan=”целоe число”

rowspan=”целое число”

nowrap>

Ячейка заголовка таблицы:

</TH>

</TR>

<TR>

<TD align=”значение”

valign=”значение”

width=” значение”

height=”целое число”

background=”URL”

bgcolor=” значение”

borderсolor=” значение”

borderсolordark=” значение”

borderсolorlight=” значение”

colspan=”целоe число”

rowspan=” целое число”

nowrap>

Содержимое ячеек

</ТD>

</TR>

</TABLE>

Общие параметры таблицы определяются значениями атрибутов тега <TABLE>:

1) align – задает горизонтальное позиционирование всей таблицы в целом, может принимать значения left, right или center;

2) width определяет ширину всей таблицы и может принимать значение целого числа, если ширина таблицы указывается в пикселях, либо в процентах от ширины экрана пользователя. Если этот атрибут не задан, то он определяется на основе содержимого таблицы;

3) height устанавливает высоту таблицы;

4) background определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы;

5) bgcolor устанавливает цвет фона таблицы;

6) border указывает на толщину рамки и пикселях. Если border=0, таблица становится «невидимой»;

7) bordercolor устанавливает цвет рамки таблицы;

8) bordercolordark, bordercolorlight – используются для задания объемной границы таблицы. Такой эффект достигается за счет разных цветов верхней и нижней линий, образующих рамку. Атрибут bordercolordark определяет цвет затененной части рамки, bordercolorlight задает цвет освещенной рамки;

9) cellpadding определяет расстояние в пикселях между границей ячейки и её содержимым;

10) cellspacing задает расстояние между внешними границами ячеек в пикселях;

11) cols указывает количество столбцов в таблице;

1. frame определяют параметры внешних границ таблицы. Чтобы этот атрибут влиял на отображение рамок, должен быть установлен атрибут border с ненулевым значением. Атрибут frame может принимать следующие значения:
2. border (или box) – устанавливает все линии внешней рамки;
3. void – внешняя рамка не отображается;
4. above (или below) – выводит только верхнюю (или нижнюю) границу таблицы;
5. hsides – выводит только верхнюю и нижнюю линии рамки;
6. vsides – выводит только левую и правую линию рамки;
7. lhs – устанавливает только левую линию рамки;
8. rhs – устанавливает только правую линию рамки.

13) rules определяют параметры внутренних границ таблицы. Чтобы этот атрибут влияли на отображение рамок, должен быть установлен атрибут border с ненулевым значением. Атрибут rules может принимать следующие значения:

а) none – все внутренние линии не отображаются;

б) groups – отображает горизонтальные границы между группами строк и столбцов;

в) rows – определяет отображение только горизонтальных линий между строками;

г) cols – устанавливает отображение только вертикальных линий между столбцами;

д) all – все внутренние рамки отображаются.

2.4 Параметры заголовка, строк и ячеек таблицы

Параметры заголовка определяются следующими значениями атрибутов тега <CAPTION>:

1) align – определяет выравнивание названия относительно границ таблицы и может принимать значения: left (выравнивание по левой границе, название располагается над таблицей), right (выравнивание по правой границе, название располагается над таблицей), center или top (выравнивание по центру, название располагается над таблицей), bottom (выравнивание по центру, название располагается под таблицей);

2) valign – используется для выравнивания названия при размещении его над или под таблицей. Атрибут align не выполняет выравнивания названия вправо или влево при значениях top и bottom. Для такого выравнивания нужно применять оба атрибута valign и align: атрибут valign будет задавать расположение названия над или под таблицей, а атрибут align – определять его выравнивание по левой или правой границе таблицы.

Параметры строк таблицы задаются значениями атрибутов тега <TR>, а параметры ячеек – значениями атрибутов тегов <TD>, <TH>:

1) align – задает выравнивание содержимого ячейки по горизонтали и определяется значениями left, right, center;

2) valign – задает выравнивание содержимого ячейки по вертикали и определяется значениями top (по верхнему краю), bottom (по нижнему краю), middle (посредине), baseline (по базовой линии);

3) width задает ширину ячейки;

4) height устанавливает высоту ячеек таблицы. Если значение height меньше содержимого ячейки, этот параметр игнорируется;

5) background определяет изображение, которое будет использоваться в качестве фонового рисунка ячейки таблицы;

6) bgcolor устанавливает цвет фона ячейки таблицы;

7) bordercolor устанавливает цвет рамки ячеек таблицы;

8) bordercolordark, bordercolorlight – используются для задания объемной границы ячеек таблицы. Атрибут bordercolordark определяет цвет затененной части рамки, bordercolorlight задает цвет освещенной рамки;

9) colspan – устанавливает число ячеек, которые должны быть объединены в одну по горизонтали;

10) rowspan – устанавливает число ячеек, которые должны быть объединены в одну по вертикали;

11) nowrap – запрет переноса слов внутри ячейки. Текст отображается одной сплошной строкой.

2.5 Группирование строк и столбцов таблицы

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

Группирование строк задается с помощью трёх тегов:

<THEAD>

Заголовочная часть таблицы:

</THEAD>

<TBODY>

Основная часть таблицы:

</TBODY>

<TFOOT>

Нижняя часть таблицы:

</TFOOT>

В таблице может быть только один элемент TBODY и FOOT, но несколько элементов TBODY. Допустимыми атрибутами этих тегов являются:

1) align и valign - для горизонтального и вертикального выравнивания;

2) title – для формирования всплывающей подсказки;

3) lang и dir – для задания языка и направления чтения документа.

Для группирования элементов столбцов используется тег COLGROUP. Формат записи тега:

<COLGROUP span=значение

width=”значение”

align=”значение”

valign=”значение”>

Строки, для которых сгруппированы столбцы:

</COLGROUP>

Значения атрибутов:

1) span –задает количество столбцов в группе;

2) width – задает ширину каждого столбца группы, её значение может задаваться в пикселях;

3) align и valign – для горизонтального и вертикального выравнивания.

2.6 Представление графики на Web-страницах

На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров. Далее – краткий обзор "большой тройки" онлайновых графических форматов. Более подробная информация представлена в главах, посвященных каждому из форматов.

GIF. GIF – Grafic Interchange Format можно назвать традиционным форматом файлов Web. Он был первым форматом файлов, который

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

Его свойства состоят в следующем:

• поддерживает не более 256 цветов (меньше можно и часто нужно);
• использует палитру цветов;
• использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP, и, следовательно, GIF-файлы в дальнейшем практически не сжимаются);
• поддерживает чересстрочную развертку;
• является поточным форматом, т.е. показ картинки начинается во время перекачки;
• позволяет назначить одному из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов;
• имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов;
• поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах), осуществлять задержку между показами изображений и т.д.

А теперь немножко разъяснений – к чему эти свойства могут привести. Как известно, GIF поддерживает не больше 256 цветов, а это значит, что все изображения, которые мы сохраняем в GIF-формате, явно или неявно уменьшают количество цветов, чтобы уложиться в этот лимит (разные программы с разным успехом). А отсюда вывод – если взять красивую фотографию с плавными переходами и едва уловимыми оттенками цвета, то после преобразования все будет гораздо хуже – оттенки перестанут быть неуловимыми, и вся фотография приобретет неестественный, нереалистичный вид. Поэтому, если надо все-таки сохранить фотографию в формате GIF и передать все оттенки, то приходится идти на хитрости. Например, к фотографии можно применить какой-нибудь художественный фильтр и превратить ее в рисунок или применить тонирование. Зато нет никаких проблем с сохранением рисунков и чертежей в этом формате, они, как правило, хорошо сжимаются и не содержат много цветов.

JPEG. Вторым наиболее популярным графическим форматом в Web является JPEG – Joint Photographic Experts Group. Он содержит 24-разрядную информацию о цвете. Это 16,77 млн цветов в отличие от 256 цветов формата GIF. В JPEG используется так называемое сжатие с потерями. Это означает, что некоторая информация об изображениях в процессе сжатия отбрасывается, но в большинстве случаев ухудшение качества изображения не наносит вреда и часто даже не заметно.

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

PNG. Есть еще третий графический формат, конкурирующий за постоянное использование в Web. Это формат PNG – Portable Network Graphic, который, несмотря на некоторые достоинства, с 1994 г. находится более или менее в тени. Только недавно браузеры начали поддерживать PNG как встроенную графику, но PNG имеет все шансы стать очень популярным форматом в Web. Именно поэтому он включен здесь в "большую тройку". PNG может поддерживать 8-разрядные индексированные цвета, 16-разрядные полутона или 24-разрядные полноцветные изображения, используя схему сжатия без потерь. Это обеспечивает более высокое качество изображений, а иногда и меньший объем файлов по сравнению с форматом GIF. Кроме того, файлы PNG имеют некоторые замечательные функции, например, встроенное управление коэффициентом гамма, и изменяемые уровни прозрачности (это позволяет показывать рисунок фона сквозь отбрасываемые мягкие тени).

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

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

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

Обязательно продумать аудиторию. Кто будет основной (и вторичной) аудиторией сайта? Какого они возраста? Чем они занимаются? Сколько времени они проводят на сайте?

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

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

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

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

2.6 Создание страниц в Macromedia Dreamweaver

Порядок выполнения работы:

• • • 1. Настройка программы;
      2. Создание web-сайта;
      3. Основные действия в программе;
      4. Графические изображения и гиперссылки.

Шаг 1. Настройка программы Dreamweaver

• • • 1. Для создания новой страницы в Dreamweaver выбраем в меню Файл пункт Новый или. На экране появится диалоговое окно Новый документ

Рисунок 5-. Dreamweaver

Шаг 2. Создание web-сайта

• • • 1. Выбираем категорию Стартовые страницы и загружаем один из шаблонов.

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

• • • 1. После того, как в главном окне программы появится наш шаблон, необходимо сохранить наш файл. На жестком диске необходимо создать отдельную папку (далее корневая папка), в которой будут находиться все файлы, необходимые для создания файла. Назовем эту папку Мой сайт. Для сохранения файла выбираем в меню Файл пункт Сохранить и в появившемся окне указываем путь сохранения Корневая папка.

Рисунок 6- Dreamweaver

• • • 1. Задаем имя первой страницы glavnaya.html. Теперь мы можем найти созданную страничку в правом окне экрана. По тому же принципу необходимо создать и сохранить еще 6 страничек. Имена новых страниц задаются в соответствии с содержанием страниц сайта (это необходимо для создания гиперссылок). Имена задаются английскими буквами.

Шаг 3. Основные действия в программе

• • • 1. Начнем мы с того, что введем в нашу только что созданную Web-страницу текст и отформатируем его — расставим заголовки, выделим части текста полужирным шрифтом и пр. В этом смысле Dreamweaver мало чем отличается от текстовых редакторов.

Рисунок 7- Macromedia Dreamweaver

• • • 1. Текст набирается с помощью клавиатуры при этом Dreamweaver самостоятельно разобьет текст на строки. Чтобы создать новый абзац, нужно нажать клавишу <Enter>. Если же надо просто перенести текст на другую строку (вставить так называемый разрыв строк), то достаточно нажать комбинацию клавиш <Shift>+<Enter>.
      2. Текстовый курсор, т. е. мигающая вертикальная черточка, показывающая место, где будет появляться набираемый нами текст, может перемещаться во всех направлениях с помощью клавиш-стрелок. Также мы можем "листать" текст нажимая клавиши <PeUn> и <PeDown> мгновенно перемещаться к началу и концу строки клавишами <Ноте> и <End>. Чтобы быстро переместиться в начало или конец документа, нужно нажать, соответственно, комбинацию клавиш <Ctrl>+<Home> или <Ctrl>+<End>. Мы также можем устанавливать текстовый курсор в произвольное место, просто щелкнув там мышью.
      3. В случае ошибки мы всегда можем удалить неправильно введенный текст, воспользовавшись клавишами <Backspace> и <Del>. Первая при нажатии удаляет символ, находящийся слева от текстового курсора, и идеально подходит для удаления только что введенного неправильного символа. Вторая удаляет символ, находящийся справа от текстового курсора.
      4. Кроме того, в окне документа Dreamweaver доступны такие операции, как перемещение ("вырезание"), копирование текста в буфер обмена Windows и последующая его вставка в место, где находится текстовый курсор. Это может быть очень полезно, если нам нужно переместить фрагмент текста с места на место или поместить похожие фрагменты текста в разные места документа.

Быстро выполнить все необходимые операции с текстом поможет специальная панель, расположенная снизу главного окна в программе Dreamweaver:

Рисунок 8- Параметры

• • • 1. После того, как необходимый текст набран и отформатирован, необходимо поработать с цветом. Цветовые параметры страницы тоже можно отредактировать при помощи этой панели.

Для задания цвета используется так называемый селектор цвета.

• • • 1. Селектор цвета состоит из двух частей. Справа находится поле ввода, где вводится код нужного цвета в формате RGB. Выглядит это так — #RRGGBB, где RR — это шестнадцатеричное число от 0 до FF, задающее долю в окончательном цвете красной составляющей, GG — зеленой, а BB — синей. Пример задания цвета в формате RGB — #336699 (это тускло-голубой цвет). Но вряд кто запомнит наизусть шестнадцатеричные коды цветов. Поэтому в левой части селектора цвета находится кнопка вызова окна выбора цвета, которое в раскрытом виде показано на след рисунке:

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

Рисунок 9- Палитра

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

Зададим фон всей страничке. Выбраю цвет #14285F. Соответственно теперь нужно изменить цвет шрифта, чтобы текст был удобнее читать. Сделаем цвет шрифта черным, а заголовки фиолетовым.

То же самое необходимо проделать с остальными страницами будущего web-сайта, чтобы была выдержана единая стилистика текста. После всей проделанной работы в главном окне программы мы увидим следующее:

Рисунок 10- Главное окно

Шаг 4. Графические изображения и гиперссылки

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

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

Форматов графических изображений на свете существует очень много. Но в Web-графике популярны только три из них: GIF, JPEG и PNG. При разработке своего сайта используя только формат JPEG.

Формат JPEG (Joint Pictures Encoding Group, группа кодирования неподвижных изображений), напротив, замечательно подходит для хранения полутоновых изображений. Поэтому картины и сканированные фотографии хранят только в этом формате. Для начала, все графические изображения, которые буду использовать при разработке web-сайта, необходимо скопировать в корневую папку. Если этого не сделать, при просмотре сайта в Web обозревателе вы не увидите желаемых изображений. Чтобы вставить изображение на страницу сайта, нужно в меню Вставить выбрать пункт Изображение, и в сплывающем окне найти тот файл, который хотим разместить.

Рисунок 11- Источник

• • • 1. Поля ввода позволяют нам задать размеры изображения, введя его, соответственно, ширину и высоту вручную. Это может быть полезно, если выделенное изображение — часть оформления сайта; в остальных случаях удобнее задавать размеры изображения, перетаскивая мышью маркеры изменения размера.

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

Рисунок 12- Macromedia

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

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

Теперь создадим на нашей первой Web-странице первую гиперссылку, указывающую на вторую страницу сайта istoriya.html

Выделим слова История и посмотрим на редактор свойств. Большое поле ввода Ссылка для задания интернет-адреса для гиперссылки заметно сразу.

Рисунок 13- Карта сайта

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

Рисунок 14-Dreamweaver

18.В графе Ссылка появится имя указанного мною файла. Тем же самым способом нужно оформить все гиперссылки, которые хотим сделать в своем web-сайте. Каждую страницу я оформляю идентичным образом, в результате чего я получил готовый Web-сайт.

На данный момент почти все изображения в Web, представлены в двух форматах: GIF и JPEG. Третий соперник, заслуживающий упоминания, формат PNG, борется за поддержку и внимание браузеров

GIF. GIF – Grafic Interchange Format можно назвать традиционным форматом файлов Web. Был первым форматом файлов, который поддерживался Web-браузерами, и по сей день продолжает оставаться основным графическим форматом Web.

ЗАКЛЮЧЕНИЕ

В ходе выполнения данной работы были изучены вопросы, посвящённые HTML (Hyper Text Markup Language - язык разметки гипертекстов). Ознакомился с историей возникновения HTML, овладел особенностями создания web-страниц с использованием таблиц.

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

Данная работа содержит описание языка разметки гипертекста HTML, являющегося основой создания web-сайтов.

В ходе выполнения данной работы были изучены вопросы, посвящённые гипертекстовой разметке HTML и способах создания c её помощью, web-страницы с использованием мультимедиа.

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

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

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

СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ

1. Барысов Р. Постройте профессиональный сайт сами. – СПб., 2014г.
2. Гаевский, А.Ю., Романовский, В.А. Самоучитель по созданию Web-страниц: HTML, JavaScript и Dynamic HTML. – К. : А.С.К., 2015г.
3. Дронов В. А. Самоучитель Macromedia Dreamweaver 8. — СПб.: БХВ-Петербург, 2015г.
4. Иванова, Г.С. Технология программирования. – М.: КноРус, 2017г.
5. Кингсли-Хью Э., JavaScript: учебный курс. – СПб.: Питер, 2016г.
6. Кроудер Д. Создание web-сайта для чайников: 3-е издание. – М.: Диалектика, 2018г.
7. Панфилов К. По ту сторону веб-страницы. – СПб.: ДМК Пресс, 2011г.

8. Пауэл, Т. HTML: справочник программиста / Т.А. Пауэл, Д. Уитворт. – М.: АСТ, 2015.

1. Петюшкин А.В., HTML. Экспресс-курс. – СПб.: БХВ - Петербург, 2017г.
2. Печников В.Н. Самоучитель Web-страниц и Wеb-сайтов. – М.: Триумф, 2014г.
3. Печников В.Н. Создание Web-сайтов без посторонней помощи М.Триумф, 2015г.
4. Федько В.П. Основы маркетинга: сто экзаменационных ответов/ В.П. Федько, Н.Г. Федько. - Ростов - на - Дону: Изд. центр "Март", 2014г.
5. Холмогоров, В. Основы web-мастерства. Учебный курс. – СПб. Питер, 2017г.
6. Хоумер А. Dynamic HTML Справочник Питер 1016г.
7. Хуторской А. В., Орешко А. П. Технология создания сайтов. 10-11 классы; Дрофа - Москва, 2015г.
8. www.education.kulichki.net
9. www.gor.h1.ru
10. www.infocity.kiev.ua
11. www.lib.toxy.cv.ua
12. www.pronet.ru
13. https://www.google.com