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

Скачать файл
Заказать решение

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 25.04.2023

Просмотров: 198

Скачиваний: 2

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Введение

Глава 1. История появления HTML

Глава 2. Правила использования языка HTML

Глава 3. Структура HTML-документа

3.1 Дополнительные возможности HTML

3.2 Пара слов о CSS

Заключение

Список литературы

Для обозначения особенных данных HTML документа используются теги:

  1. Тег <base href= “ссылка”> используется для ввода полного URL[7] документа.
  2. Тег <meta> используется для ввода управляющей информации. Данный тег используется в сочетании с атрибутами:
    1. Name – имя свойства.
    2. Content – значение свойства.
    3. Scheme – имя схемы, используемой для обработки свойства.
    4. http-equiv – используется для указания имени http-сообщения (вместо name).
    5. lang – информация о языке (необязательный атрибут).
    6. dir – направленность текста (необязательный атрибут).
    7. Charset – кодировка HTML-документа.

Тег записывается в виде:

<meta charset=”Кодировка HTML-документа”>

<META name= “название свойства” content=”значение свойства”>

  1. Тег <link> - </link> используется для создания списка ссылок. Используется для подключения каскадных таблиц CSS.
  2. Тег <style> - </style> используется для описания стилей, которые будут использоваться в данном HTML-документе. Включает атрибуты:
    1. Type – обязательный атрибут, который указывает язык таблицы стилей.
    2. Media – необязательный атрибут, который задает целевое устройство для информации о стиле. По умолчанию задается для screen (экрана компьютера).
  3. Тег <script> - </script> используется для задания дополнительных скриптов (скрипт – краткое описание действий, выполняемых системой [1]). Тег использует следующие атрибуты:
    1. Type – указывается название языка, на котором написан скрипт.
    2. Src – указывается местоположение внешнего скрипта (URL). Если не указан, то содержимое тега будет интерпретировано как скрипт. Иначе скрипт загрузится с указанного URL.
    3. Defer – необязательный логический атрибут. Если указано, то скрипт не будет генерировать содержимое текста.
    4. Charset – указывается кодировка символов (необязательный атрибут).

Дополнительные теги для построения структуры страницы:

  1. Чтобы обозначить содержание страницы используется тег ARTICLE.
  2. Чтобы добавить документу разделы используйте тег <section> - </section>.
  3. Для создания боковой панели используйте тег ASIDE.

Атрибуты для редактирования текста (в теге <html>):

  1. Атрибут lang задает основной язык текста в документе HTML. В атрибуте указывается первичный код и подкод, если имеется. Например, <html lang=”de”> указывает на использование немецкого языка. <html lang=”en-us”> указывает на использование американской версии английского языка.
  2. Атрибут dir задает направление текста. LTR – текст читается слева направо. RTL – текст читается справа налево.

Для редактирования и вставки текстовых фрагментов используются теги:

  1. Тег <h1> - </h1> используется для обозначения заголовка 1 уровня (самого верхнего).
  2. Тег <h2> - </h2> используется для обозначения заголовка 2 уровня.
  3. Тег <p> - <p> используется для обозначения текста внутри одного абзаца.
  4. Тег <i> - </i> выделяет текст курсивом.
  5. Тег <d> - </d> выделяет текст жирным шрифтом.
  6. Тег <s> - </s> делает текст перечеркнутым.
  7. Тег <small> - </small> отображает текст шрифтом меньше, чем шрифт окружающего текста.
  8. Тег <sub> - </sub> выводит текст в нижнем регистре.
  9. Тег <sup> - </sup> выводит текст в верхнем регистре.

Также для редактирования текста используются теги для выделения аббревиатур (тег ABBR), тег для выделения акронима (ACRONYM), тег для выделения цитаты (CITE), тег для выделения фрагмента компьютерного кода как текста (CODE) и другие более частные случаи.

HTML использует списки для добавления структуры в документ. Списки бывают следующих видов:

  1. Неупорядоченные списки (например, список покупок пользователя). Тег <ul> - </ul>, использующий стандартные необязательные атрибуты (id, class для обозначения идентификатора списка; lang, dir, title, style и теги событий) и атрибут type, который задает информацию о виде используемых маркеров (закрашенные или не закрашенные кружки, квадраты; для подключения других видов маркеров используется тег IMG, загружающий изображение маркера, который необходимо повторять для каждой строки списка).
  2. Упорядоченные списки (список со строго определенным порядком). Тег <ol> - </ol>, использующий атрибуты type и start, а также стандартные необязательные атрибуты (id, class, lang, dir, title, style и теги событий). Атрибут type в случае упорядоченных списков может принимать значения:
    1. Type=1 – нумерация арабскими цифрами.
    2. Type=A – нумерация прописными латинскими буквами.
    3. Type=a – нумерация строчными латинскими буквами.
    4. Type=I – нумерация большими римскими цифрами.
    5. Type=I – нумерация маленькими римскими цифрами.

Атрибут start задает начальный номер первого элемента в списке. По умолчанию значение равно 1.

  1. Списки определений. Включают три тега – DT, DD и DL. Тег <dt> - </dt> содержит термин. Тег <dd> - </dd> содержит определение термина. Тег <dl> - </dl> объединяет теги DT и DD. Теги могут содержать стандартные необязательные атрибуты (id, class, lang, dir, title, style и теги событий).
  2. Список меню. Тег <menu> - </menu> включает атрибут type, принимающий значения:
    1. Contex – контекстное меню.
    2. Toolbar – меню в виде панели инструментов.
    3. List – меню-список.

Для обозначения строк списков используется тег <li> без закрывающего тега. Поддерживается комбинирование списков.

В HTML поддерживается как вставка простой таблицы, так и создание вложенных друг в друга таблиц. Сама таблица обозначается тегом <table> - </table>, каждая строка таблицы тегом <tr> - </tr>, а ячейка таблицы обозначается тегом <th> - </th> для обозначения заголовка ячейки и тегом <td> - </td> для обозначения ячейки с данными. Таким образом, количество столбцов определяется через максимальное количество ячеек в одной из строк таблицы (остальные строки «добиваются» пустыми ячейками).

Для управления толщиной и видимостью рамки вокруг таблицы и ее ячеек используется атрибут border (в теге TABLE). Если значение не задано, то и рамка видна не будет. Если задан атрибут без значения, то толщина линии рамки будет равна 1 пикселю.

Для управления рекомендуемой шириной таблицы используется атрибут width (в теге TABLE), который задается в процентах или пикселях.

Для изменения расстояния между граничами ячеек используется атрибут cellspacing (значение указывается в пикселях). Для изменения расстояния между границей ячейки и текстом внутри ячейки (добавление отступа) используется атрибут cellpadding.

Чтобы задать цвет фона для таблицы используйте тег bgcolor с применением стандартных необязательных атрибутов.

Для добавления названия таблицы можно использовать тег <caption> - </caption> с применением стандартных атрибутов. Данный тег используется только посте тега TABLE.

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

Скрипты могут выполняться либо один раз при загрузке документа, либо при каждом событии, являющимся своеобразным триггером для выполнения скрипта. Как уже говорилось ранее, обозначение скрипта в документе выполняется тегом <script> - </script>. Тег позволяется задавать как в тексте документа HTML, так и в одном из заголовков документа. При этом обязательно указать язык сценариев скрипта в теге META.

Мы также писали ранее, что для некоторых тегов применяются теги событий, которые мы рассмотрим в данной главе. В случае использования в тегах, описанных ранее, теги событий указываются как атрибуты. Основные события:

  1. Событие onclick, происходящее при однократном нажатии кнопки мыши по содержимому элемента.
  2. Событие ondblclick, происходящее при двойном нажатии кнопки мыши по содержимому элемента.
  3. Событие onload, происходящее при окончании загрузки браузером документа в окно или фрейм. Данное событие задается только у тегов BODY и FRAMESET (тег определяет структуру фреймов на web-странице; в данном проекте рассмотрено не будет).
  4. Событие onunload, происходящее при окончании удаления браузером документа из окна или фрейма. Данное событие задается только у тегов BODY и FRAMESET.
  5. Событие onmousedown, происходящее при нажатии и удержании кнопки мыши по содержимому элемента. Событие onmouseup, происходящее при отпускании кнопки мыши после удержания по содержимому элемента.
  6. Событие onmouseover, происходящее при наведении курсора на содержимое элемента. Событие onmousemove, происходящее при перемещении курсора над содержимым элемента. Событие onmouseout, происходящее при перемещении курсора за пределы содержимого элемента.
  7. Событие onfocus, происходящее при фокусе на содержимое элемента. Фокус устанавливается как мышью, так и с помощью клавишы Tab. При переходе фокуса с содержимого элемента на другой элемент используется событие onblur.
  8. Событие onkeypress, происходящее при нажатии и отпускании клавиши по элементу. Событие onkeydown происходит при нажатии любой клавиши по элементу. Событие onkeyup происходит при отпускании клавиши с элемента.

Также в HTML предусматривается, чтобы браузер, который не может поддерживать скрипты документа, корректно обрабатывал документ HTML, пусть и без запуска скриптов. Для этого рекомендуется после закрывающего </script> использовать тег <notscript> - </notscript>. В данном теге можно задать другое поведение при невозможности обработки основного скрипта.

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

Добавление готовой иллюстрации в HTML документ выполняется с помощью тега IMG, имеющего следующие атрибуты:

  1. Src – обязательный атрибут, задающий URL-адрес к изображению.
  2. Align (выравнивание), width, height (высота и ширина изображения в пикселях или процентах).
  3. Hspace, vspace – указывают горизонтальные и вертикальные отступы от изображения в пикселях.
  4. Border – наличие и ширина рамки вокруг изображения.
  5. Alt – текстовая строка, являющаяся альтернативой изображению.
  6. Longdesc – указывается адрес документа, в котором можно прочитать аннотацию к изображению.
  7. А также стандартные необязательные атрибуты и теги событий.

Из изображения можно создать навигационную карту (и на другие мультимедиа файлы тоже, распространенных форматов, типа GIF, PNG, JPEG), на которой можно будет отмечать гипертекстовые ссылки (на элементы документа HTML или другие объекты). Данная возможность делает документ более ориентированным на пользователя, на удобное использование ссылок, на более дружественный интерфейс, но значительно загружает обработку HTML документа, из-за чего снижается производительность.

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

Для добавления аудио и видео объектов используются теги <audio> - </audio> и <video> - </video> соответственно. Путь к файлу может быть указан через вложенный тег SOURCE или атрибут src.

Для настройки воспроизведения аудио файла используются атрибуты (внутри тега AUDIO):

  1. Autoplay позволяет автоматически воспроизводить аудио файл.
  2. Controls позволяет добавить панель управления к аудио файлу.
  3. Loop запускает повторное воспроизведение аудио файла после его окончания.
  4. Preload загружает аудио файл вместе со всей страницей.

Для настройки воспроизведения видео файла используются теги:

  1. Autoplay позволяет автоматически воспроизводить видео файл.
  2. Controls позволяет добавить панель управления к видео файлу.
  3. Loop запускает повторное воспроизведение видео файла после его окончания.
  4. Preload загружает видео файл вместе со всей страницей.
  5. Height, width задают параметры области воспроизведения видео файла.

Все другие мультимедиа объекты загружаются с помощью тега <object> - </object>. При этом данный тег создает внутри HTML документа объект, содержимое которого находится во внешнем файле, вследствие чего сам мультимедиа файл не является объектом, а является его содержимым. Все дополнительные параметры объекта указываются в теге PARAM внутри тега OBJECT. Атрибуты тега OBJECT:

  1. Data содержит URL-адрес файла, в котором содержатся данные объекта.
  2. Classid используется либо для указания URL-адреса подключаемого Active X модуля, позволяя скачать модуль, если он не установлен. Либо для подключения уже имеющегося управляющего элемента Active X, указывая его идентификатор.
  3. Codebase используется для указывания базового URL-адреса для текущего объекта (по аналогии тега BASE для HTML документа).
  4. Codetype указывает тип содержимого данных. По умолчанию устанавливается такое же значение, которое указывается в атрибуте type.
  5. Border, hspace, vspace, align, height и width по аналогии с другими объектами мультимедиа.
  6. Id указывается идентификатор объекта внутри документа HTML.
  7. Tabindex указывается номер объекта в последовательности перехода по клавише Tab.
  8. Поддерживаются теги событий и тег style.

Смотрите также файлы