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

• align и valign – выполняют аналогичные функции тега <tr>;
• colspan – указывает количество объединяемых ячеек по горизонтали;
• rowspan – указывает количество объединяемых ячеек по вертикали.

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

Списки

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

Список – это набор упорядоченных абзацев текста, помеченных специальными значками (маркированные списки) или цифрами (нумерованные списки).^[16]

В HTML 4.01 поддерживаются три вида списков: маркированные, нумерованные, а также списки определений.

Маркированный список помещается внутри пары тегов <ul> и </ul>. Перед каждым пунктом списка необходимо поместить тег <li>. Закрывающий тег </li> не обязателен. На рисунке 2.6.1 представлена структура маркированного списка.

(рис 2.6.1)

Тег <ul> имеет параметр type, позволяющий задать значок, которым помечается строки списка. Параметр может принимать следующие значения:

• disk –значки в форме кружка с заливкой;
• circle – значки в форме кружков без заливки;
• square – значки в форме квадрата с заливкой.

Параметр type используется только в формате Transitional.

Нумерованный список помещается внутри пары тегов <ol> и </ol>. Пред каждым пунктом списка необходимо поместить тег <li>. Закрывающий тег </li> не обязателен. На рисунке 2.6.2 представлена структура нумерованного списка.

(рис. 2.6.2)

Тег <ol> имеет два параметра. Первый, type, позволят задать формат, которым нумеруется строки списка. Параметр может принимать следующие значения:

• А – пункты нумеруются прописными латинскими буквами;
• а – пункты нумеруются строчными латинскими буквами;
• I – пункты нумеруются прописными римскими буквами;
• i – пункты нумеруются строчными римскими буквами;
• 1 – пункты нумеруются арабскими цифрами. Этот параметр используется по умолчанию.

Второй параметр тега <ol> - start. Он задает номер, с которого будет начинаться нумерация строк. Тег <li> имеет параметр value, который позволяет изменить номер данного элемента списка. Параметры type, start, value используется только в формате Transitional.

Списки определений состоят из пар «термин/определение». Описываются с помощью тега <dl>. Для вставки термина применяется тег <dt>, а для вставки определения – тег <dd>. Закрывающие теги </dt> и </dd> не обязательны. Пример использования списка определения показан на рисунке 2.6.3.

(рис 2.6.3)

Гиперссылки

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

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

Все эти разновидности гиперссылок создаются в HTML с помощью парного тега <a> и </a>.

Внешние гиперссылки вставляются в HTML-документ с помощью тега <a>. Тег должен быть расположен внутри блочного тега, например <p>, <div> или другие. Основным параметром тега <a> является href. Именно этот параметр задает URL-адрес Web-страницы, которая будет загружена при щелчке мыши на указателе. В качестве указателя может быть текст:

<a href=”https://synergy.ru”>Текст ссылки</a>

URL-адреса делятся на две категории:

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

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

Внутренняя гиперссылка также вставляется при помощи тега <a> с одним отличием – параметр href содержит имя указателя, а не URL-адрес. Перед именем указателя ставится знак #:

<a href=”#chapter1”>Глава 1</a>

Указатель создается с помощью тега <a>, но вместо параметра href используется параметр name, который задает имя указателя:

<a name=”chapter1”></a>

Язык HTML предлагает некоторые дополнительные возможности для создания гиперссылки. Их применяют не часто, но иногда они бывают полезны. Например, для гиперссылки можно указать «горячую» клавишу. Если пользователь нажмет эту клавишу, удерживая нажатой клавишу <Alt>, Web-браузер выполнит переход по такой гиперссылке. Для указания «горячей» клавиши предусмотрен необязательный атрибут accesskey тега <a>. Значение этого атрибута – латинская буква, соответствующая нужной клавише/

(рис. 2.7)

На рисунке 2.7 указана для гиперссылки «горячая» клавиша <S>. И чтобы перейти по ней, пользователю достаточно будет нажать комбинацию клавишь <Alt>+<S>.^[17]

Добавление изображений и мультимедиа на Web-страницу

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

В Интернете применяются следующие графические форматы:^[18]

• GIF – использует только 256 цветов и поддерживает прозрачность. Кроме того, GIF-файл может содержать анимацию;
• JPEG – метод сжатия фотографии с потерей качества. Прозрачность и анимация не поддерживается;
• PNG – формат хранения графики, использующий сжатие без потерь. Поддерживает прозрачность.

Изображения вставляются в Web-страницу с помощью одинарного тега <img>. Сам тег <img> должен быть расположен внутри блочного тега, например: <div>.

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

• src – URL-адрес файла графического изображения;
• alt – строка текста, которая будет показана вместо изображения до его загрузки или при отключенной графике, а также если изображение загрузить не удалось. Также при наведении курсора на изображение появляется подсказка с указанным текстом в параметре alt;
• width – ширина изображения в пикселах;
• height – высота изображения в пикселах;

Важно отметить, что значения параметров <width> и <height> могут не соответствовать реальным размерам изображения. В этом случае Web-браузер выполнит перемасштабирование. Если указать только один параметр, то значение второго будет рассчитано пропорционально значению первого исходя из реальных размеров изображения.^[19]

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

Аудиофайлы подготавливаются в следующих форматах:

• MPEG 3 level 3 (MP3) – для Internet Explorer, Safari и Chrome;
• OGG – для Firefox, Opera и Chrome.

Видеофайлы подготавливаются в следующих форматах:

• MPEG 4 File (MP4) – для Internet Explorer и Safari;
• WebM – для Firefox, Opera и Chrome.

Аудиоролик на страницу вставляется с помощью тега <audio>.

<audio src=”sound.mp3”></audio>

Этот тег поддерживает следующие параметры:

• src – URL-адрес мультимедийного файла с роликом;
• autoplay – если указан, воспроизведение начнется сразу после загрузки Web-страницы;
• controls – если указан, на экране будут показаны элементы управления роликом;
• loop – если указан, ролик будет воспроизводиться бесконечно;
• muted – если указан, после загрузки Web-страницы звук будет приглушен;
• preload – позволяет указать, как будет выполнена предварительная загрузка файла.

Для вставки на Web-страницу видеоролика применяется тег <video>.

<video src=”video.webm”></video>

Этот тег поддерживает все паромеры тега <audio> и три дополнительных:

• width – ширина панели проигрывателя в пикселах;
• height – высота панели проигрывателя в пикселах;
• poster – URL-адрес графического файла, который отображается вместо первого кадра.^[20]

Заключение

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

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

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

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

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

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

Библиография

1. Чиртик А.А. HTML. Популярный самоучитель. СПб.: Питер, 2006. 224 с.
2. Браун М., Ханикатт Д. HTML 3.2 в подлиннике.: БХВ-Петербург, 2002. 1040 с.
3. Пилгрим М. Погружение в HTML5: перев. с англ. СПб.: БХВ-Петербург, 2011. 304 с.
4. Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS. 2-е изд. СПб.: Питер, 2014. 720 с.
5. Прохоренок Н. А., Дронов В.А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера - СПб.: БХВ-Петербург, 2013. 768 c.
6. Мальчук Е.В. HTML и CSS. Самоучитель.: издательский дом «Вильямс», 2008. 416 с.
7. Гаевский А.Ю.,  Романовский В. А. 100% самоучитель по созданию Web-страниц и Web-сайтов. HTML и JavaScript".: издательство "Триумф", 2008. 460 с.
8. Макфарланд Д. Новая большая книга CSS.: Питер, 2016. 720 с.
9. Шафер С. HTML, XHTML и CSS. 5-е издание.: Москва,210. 656 c.
10. Дронов В.А. Laravel. Быстрая разработка современных динамических Web-сайтов на PHP, MySQL, HTML и CSS. – СПб.: БХВ-Петербург, 2018. 768 с.
11. Хольцшлаг М. Языки HTML и CSS: для создания Web-сайтов: [учеб. пособие] - М.: ТРИУМФ, 2007. 304 с.
12. Дронов В.А. HTML 5, CSS и Web 2.0. Разработка современных Web-сайтов – СПб.: БХВ-Петербург, 2011. 416 с.

Приложение