RGB-код цвета (Red-Green-Blue)

МИНИСТЕРСТВО ТРУДА И СОЦИАЛЬНОЙ ЗАЩИТЫ РЕСПУБЛИКИ БЕЛАРУСЬ

Республиканский институт повышения
квалификации и переподготовки работников
Министерства труда и социальной защиты
Республики Беларусь

Учебно-методическое пособие

Создание Web -страниц
средствами языка HTML

Минск, 2003 г.

Рекомендовано использовать при проведении семинарских и практических занятий по теме "Построение Web-страниц и Web-сайта предприятия" в специализации "Оператор ПЭВМ (со знанием современных компьютерных и Интернет-технологий)". Может быть использовано преподавателями при подготовке к проведению занятий. А также может быть использовано любым пользователем ПЭВМ при самостоятельном изучении данной темы.

Составители: И.В. Виноградова

С.С. Щупак

Ó РИПК работников Минтруда и соцзащиты РБ 2003 г.

Введение

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

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

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

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

Основные определения

• World Wide Web, WWW или просто Web — Всемирная паутина — система доступа к гипертекстовым документам, существующая в Интернете. HTML является основным языком для создания документов в WWW. Изучая его, мы, фактически, изучаем часть этой системы.

• Web-страница — документ (файл), подготовленный в формате гипертекста и размещенный в World Wide Web.

• Сайт — набор Web-страниц, принадлежащих одному владельцу.

• Браузер (browser) — программа для просмотра Web-страниц.

• URL(Uniform Resource Locator) или универсальный указатель ресурса — адрес некоторого объекта в Интернете. Типичный URL для WWW имеет вид:

http:// www.название.домен/имя файла

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

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

• HTML-файл или HTML-страница — документ, созданный в виде гипертекста на основе языка HTML. Такие файлы имеют, как правило, расширения htm или htm l.

• Элемент — конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать их определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста — возможность вложения элементов.

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

• Атрибут — параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартных или произвольных. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.

• Гиперссылка — фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.

• Фрейм — область документа со своими полосами прокрутки.

• Апплет — программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.

• Скрипт или сценарий — программа, включенная в состав Web-страницы для расширения ее возможностей.

Синтаксис языка HTML

Объектами языка HTML являются:

Ø Текст

Ø Теги

Теги являются управляющими конструкциями и представляются в виде:

открывающий тег

<имя тега>

фрагмент текста

</имя тега>

Закрывающий тег

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

Теги могут вкладываться друг в друга:

<имя тега1>

<имя тега2>

фрагмент текста

</имя тега2>

</имя тега1>

Атрибуты (параметры) уточняют действия тегов. У каждого тега свой набор допустимых атрибутов. Атрибуты задаются в открывающем теге. В большинстве случаев атрибуты необязательны.

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

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

Замечание

Браузеры не проверяют правильность написания кода HTML.

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

Для ввода кодов HTML можно использовать обычный текстовый редактор Блокнот.

Сохранять файл в Блокноте следует с расширением .htm или .html. Если после этого два раза щелкнуть левой кнопкой мыши по имени этого файла в Проводнике Windows, то автоматически будет запущен браузер, и в него уже будет загружен выбранный HTML-документ.

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

Если рассмотреть исходные тексты различных Web-страниц, то можно легко увидеть схожесть их структур:

< HTML>

< HEAD>

Заголовок документа Служебная часть

</ HEAD>

< BODY>

Тело документа Содержательная часть

</BODY>

</HTML>

Тег <HTML> </html>

Обозначение документа на языке HTML. Данный элемент является самым внешним, так как между его начальным и конечным тегами должна находиться вся Web-страница. Он допускает вложение элементов HEAD, BODY и других, определяющих общую структуру Web-страницы.. Естественно, что конечным тегом </html> заканчиваются все подобные документы.

Тег <HEAD> </head>

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

Тег <BODY> </body>

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

Тег

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

Служебная часть

Служебная часть может включать:

Ø тег отображающий заголовок Web-страницы < TITLE> </ title>;

Ø тег метаданных <МЕТА>;

Ø тег стилевого оформления Web-страницы < STYLE> </ style>;

Ø тег выполняемого сценария < SCRIPT> </ script>.

Тег <TITLE> </title>

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

<HTML>

<HEAD>

<TITLE> Моя личная страница </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

В отсутствие этого тега в строке заголовка выводится (в зависимости от браузера):

Ø No title

Ø Адрес загруженной страницы

Ø Ничего

Тег <МЕТА>

Теги <META> описывают свойства страницы.

Этот элемент содержит служебную информацию, которая не отражается при просмотре Web-страницы. Внутри него нет текста в обычном понимании, поэтому нет и конечного тега.

Каждый элемент МЕТА содержит два основных атрибута, первый из которых определяет тип данных NAME или HTTP - EQUIV, а второй — содержание CONTENT.

Теги <META> с атрибутом NAME в основном содержат информацию для поисковых машин.

Теги <META> с атрибутом HTTP-EQUIV в основном содержат информацию для браузера.

Значения атрибута CONTENT зависят от значений атрибутов NAME и HTTP-EQUIV.

Пример 1

Атрибут CONTENT содержит краткое описание сайта

Пример 2

Атрибут CONTENT содержит ключевые слова (через запятую)

Пример 3

Атрибут CONTENT указывает дату создания ресурса в формате МЕСЯЦ-ДЕНЬ-ГОД

Пример 4

Атрибут CONTENT указывает предполагаемую дату закрытия ресурса

Пример 5

Атрибут CONTENT указывает количество дней (от 1 до 30), по прошествии которых необходимо переиндексировать ресурс

Пример 6

Атрибут CONTENT указывает язык ресурса (на английском языке)

Пример 7

Атрибут CONTENT содержит имя автора ресурса

Пример 8

Атрибут CONTENT содержит имя человека (название организации), являющегося владельцем ресурса

Пример 9

Атрибут CONTENT содержит название программного продукта, средствами которого был создан данный ресурс

Пример 10.

Атрибут CONTENT задает количество секунд, через которые необходимо перезагружать страницу или количество секунд, через которое необходимо перейти по указанному адресу

Пример 11

Атрибут CONTENT указывает кодировку ресурса

Тег <STYLE> </style>

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

Тег <SCRIPT> </script>

Позволяет внедрять в создаваемые Web-страницы программы-сценарии. Для создания сценариев могут использоваться два языка программирования JavaScript и VBScript.

Содержимое Web-страницы

Содержимое Web-страницы располагается между тегам <BODY> </body>. В простейшем случае это может быть обыкновенный текст.

Тег <BODY> </body>

Внутри элемента BODY можно использовать все элементы, предназначенные для дизайна Web-страницы.

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

Рассмотрим атрибуты тега B0DY:

1. Для задания фона страницы.: background="Путь к файлу фона"

2. Для задания цвета фона: bgcol or="Цвет"

3. Для задания цвета текста: text="Цвет"

4. Для задания цвета текста непросмотренных гиперссылок: link="Цвет"

5. Для задания цвета просмотренных гиперссылок: vlink="Цвет"

6. Для задания цвета просматриваемых гиперссылок: alink="Цвет"

Цвет в HTML

Браузеры позволяют отображать более 16000000 цветов.

Существует два способа задания цвета:

RGB-код цвета (Red-Green-Blue)

Любой цвет разлагается на 3 основных: красный, зеленый, синий: RGB - Red-Green-Blue

Интенсивность компоненты записывается двузначным шестнадцатеричным числом:

0 1 2 3 4 5 6 7 8 9 A(10) B(11) C(12) D(13) E(14) F(15)

Пример: 0000FF - синий цвет

Любой цвет задается сочетанием 3 чисел, каждое из которых определяет долю одного из 3 основных цветов.

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

Перед последовательностью шестнадцатеричных цифр ставится знак #.

Дата добавления: 2021-06-02; просмотров: 99; Мы поможем в написании вашей работы!

Поделиться с друзьями:

12 Следующая ⇒

Мы поможем в написании ваших работ!