Файл: Основы программирования на языке HTML (Секционирование содержания).pdf
Добавлен: 05.04.2023
Просмотров: 373
Скачиваний: 2
HTML элемент <input> используется для создания интерактивных элементов управления для веб-форм, целью которых является получение данных от пользователя. В зависимости от устройства, ОС и обозревателя, существует довольно большое количество возможных виджетов.[[65]]
HTML элемент <label> представляет название для элементов пользовательского интерфейса.[[66]]
HTML-элемент <legend> представляет собой заголовок содержания родительского элемента <fieldset>.[[67]]
HTML элемент <meter> представляет либо скалярное значение в известных пределах, либо частичное.[[68]]
HTML-элемент <optgroup> позволяет группировать опции, находящиеся внутри элемента <select>[[69]]
HTML элемент <option> используется для определения пункта списка контейнера <select>, элемента <optgroup>, или элемента <datalist>. Элемент <option> может представлять раздел меню всплывающих окон и других перечней или списков HTML документа.[[70]]
HTML элемент <output> это контейнер в который сайт или приложение может помещать результаты вычислений или результат пользовательских действий.[[71]]
HTML элемент <progress> отображает индикатор, показывающий прогресс выполнения задачи или задания. Обычно отображается как стандартный прогресс-бар.[[72]]
HTML тэг <select> представляет собой элемент управления который содержит меню опций:[[73]]
HTML элемент <textarea> представляет редактируемый многострочный текст, полезно для формы обратной связи, например.[[74]]
Универсальные атрибуты тегов.
Универсальные атрибуты применяются практически ко всем тегам, поэтому выделены в отдельную группу, чтобы не повторять их для всех тегов.
accesskey позволяет получить доступ к элементу с помощью заданного сочетания клавиш.[[75]]
class определяет имя класса, которое позволяет связать тег со стилевым оформлением.[[76]]
contenteditable сообщает, что элемент доступен для редактирования пользователем.[[77]]
contextmenu устанавливает контекстное меню для элемента.[[78]]
dir задает направление и отображение текста — слева направо или справа налево.[[79]]
hidden скрывает содержимое элемента от просмотра.[[80]]
id указывает имя стилевого идентификатора.[[81]]
lang браузер использует значение параметра для правильного отображения некоторых национальных символов.[[82]]
spellcheck указывает браузеру проверять или нет правописание и грамматику в тексте.[[83]]
style применяется для определения стиля элемента с помощью правил CSS.[[84]]
tabindex устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab.[[85]]
title описывает содержимое элемента в виде всплывающей подсказки.[[86]]
Описание СSS и JavaScript
Хотя рассмотрение CSS и JavaScript не являются предметом данной работы, тем не менее достаточно сложно представить современный веб-сайт без применения этих технологий. Поэтому считаю необходимым в общем осветить и их.
Дизайн Web-узлов — это точное размещение компонентов HTML-страниц относительно друг друга в рабочей области окна браузера.
Недостатки такого определения Web-дизайна очевидны. В нем не учтены ни цвет, ни форма, ни другие свойства компонентов HTML-страниц. Главное в этом определении — показать ограниченность возможностей HTML-разметки. Позиционирование компонентов на странице является одним из самых слабых мест в HTML.
К компонентам страницы относятся: блоки текста, графика и встроенные приложения. Размер и границы каждого из этих компонентов в рамках HTML-разметки задаются с разной степенью точности. Размер графики и приложений можно задать с точностью до пикселя. Размеры текстовых блоков в HTML задать нельзя: они вычисляются браузером исходя из относительного размера шрифта по умолчанию.
Автор страницы не может заранее определить настройки браузера пользователя, что существенно ограничивает число вариантов представления информации на странице.
Нельзя сказать, что разработчики браузеров не пытались изменить данную ситуацию. В ранних версиях браузеров CERN для платформы NEXT и в браузерах WWWC автор страницы имел возможность переопределять настройки браузера по умолчанию через HTML-разметку. Но этот подход не получил продолжения в коммерческих продуктах.
Другой способ управления настройками браузера — программирование на JavaScript. Бурное развитие этого языка позволяет говорить о возможности полного контроля над процессом отображения HTML-страниц. Недостаток JavaScript — отказ от декларативного характера разметки и относительно большой объем кода для переопределения свойств элементов разметки.
Спецификация CSS (Cascading Style Sheets) позволяет остаться в рамках декларативного характера разметки страницы и полностью контролировать форму представления элементов HTML-разметки.
Каскадные таблицы стилей призваны разрешить противоречие между точностью определения размеров картинок и приложений, с одной стороны, и точностью определения размеров блогов текста и его начертания — с другой.
Таблицы стилей также позволяют определить цвет и начертание текстового фрагмента, изменять эти параметры внутри текстового блока, выполнять выравнивание текстового блока относительно других блогов и компонентов страницы.
Наличие подобных возможностей позволяет говорить о CSS как о средстве разделения логической структуры документа и формы его представления. Логическая структура документа определяется элементами HTML-разметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента.
CSS позволяет полностью переопределить форму представления элемента разметки по умолчанию. Например, <I>. . . </I> определяет отображение текста курсивом:
<I>Отобразим текст курсивом</I>
Отобразим текст курсивом
А теперь переопределим стиль отображения для элемента разметки I
<I STYLE="text-decoration:underline; font-style:normal;">
Отобразим текст курсивом
</I>
Отобразим текст курсивом
Этот пример показывает, что привычный стиль отображения элементов может быть полностью изменен при помощи CSS. В данной технологии HTML-разметка носит чисто декларативный характер.[[87]]
JavaScript — технология была создана для получения доступа из сценариев ко всем элементам HTML-документа. Иными словами, она предоставляет средства для динамического взаимодействия с пользователем, например для проверки приемлемости адресов электронной почты в формах ввода данных, отображения подсказок наподобие «Вы действительно подразумевали именно это?» и т. д. (хотя с точки зрения безопасности, которая всегда должна реализовываться на веб-сервере, на эту технологию положиться нельзя).
В сочетании с CSS JavaScript закладывает основу мощности динамических веб-страниц, которые изменяются буквально на глазах, в отличие от новой страницы, возвращаемой сервером.
Тем не менее с использованием JavaScript могут возникнуть осложнения, обусловленные некоторыми существенными различиями в способах реализации этого языка, выбранных разными разработчиками браузеров. В основном эти различия возникают, когда некоторые производители пытаются придать своим браузерам дополнительные функциональные возможности, не обращая внимания на совместимость с продуктами своих конкурентов.
К счастью, разработчики в большинстве своем уже взялись за ум и осознали необходимость полной совместимости своих продуктов, чтобы не приходилось создавать код с множеством исключений. Но остаются миллионы экземпляров устаревших браузеров, которыми будут пользоваться на протяжении еще многих лет. Тем не менее и для них существуют решения проблем несовместимости, однако существуют библиотеки и технологии, позволяющие без каких-либо опасений игнорировать существующие различия.[[88]]
Ранее было упомянуто, что изначально JavaScript разрабатывался для того, чтобы получить возможность динамического управления различными элементами, находящимися внутри HTML-документа, и это его предназначение по-прежнему является основным. Но все чаще JavaScript применяется для реализации технологии AJAX. Это понятие используется для обозначения процессов доступа к веб-серверу в фоновом режиме. (Сначала оно означало «асинхронный JavaScript и XML» — Asynchronous JavaScript and XML, но сейчас это определение несколько устарело.)
AJAX — процесс, лежащий в основе технологии Web 2.0, при использовании которой веб-страницы стали напоминать автономные программы, поскольку их уже не нужно загружать целиком. Вместо этого в быстром вызове AJAX может быть задействован отдельный элемент веб-страницы, например, может быть изменена ваша фотография на сайте социальной сети или заменена кнопка, на которой нужно щелкнуть, отвечая на вопрос.
Библиотека jQuery, которую можно использовать, чтобы не изобретать колесо в случае возникновения потребностей в быстродействующем, кросс-браузерном коде для управления веб-страницами. Конечно, доступны и другие подобные среды, но jQuery является самой популярной библиотекой и, исходя из показателей, накопленных за весьма длительный срок ее использования, обладает исключительной надежностью и является основным средством в арсенале многих опытных разработчиков.[[89]]
Для краткой демонстрации возможностей JavaScript, а также в качестве упражнения, автором была написана небольшая программа, позволяющая моментально визуализировать конструкции языка HTML и стилей CSS.
Рис.1 Интерфейс приложения
Здесь не преследовалось цели заменить качественные и мощные инструменты верстки, в том числе онлайновые, а лишь желание попрактиковаться в освоенном материале, а также для того чтобы под рукой всегда был быстрый и простой способ проверить свои идеи на практике посмотреть как визуализируются различные теги языка HTML, как изменяется документ при применении различных стилей. Для написания использовался HTML и JavaScript в виде HTML Application (Приложения HTML .hta)
Листинг программы Simple HTML Editor
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple HTML Editor by Koss Sergey</title>
</head>
<body>
<style>
iframe {
height : 640px;
width : 480px;
}
div {
display : block;
}
</style>
<script>
function go()
{
var sc = document.getElementById("scrCode");
var tc = document.getElementById("tframe");
tc.contentWindow.document.open();
tc.contentWindow.document.write(sc.value);
tc.contentWindow.document.close();
}
</script>
<div>
<textarea id=scrCode rows=40 cols=54></textarea>
<button onclick=go()>GO!</button>
<iframe id ="tframe">
</iframe>
</div>
</body>
</html>
Как видно из приведенного листинга, программа всего лишь переносит записанный пользователем код из элемента <textarea> в элемнт <iframe>, где интерпретируется процессором MSHTML уже как HTML-код.
Заключение
Рассмотренные в этой главе элементы и атрибуты HTML являются базовыми элементами необходимыми для построения гипертекстового документа. Запомнить их все и разом невозможно, да и не требуется. И на обучающих сайтах, и в книгах иногда может встретиться утверждение, что по-видимому полностью все аспекты HTML не знает никто (равно как и по мнению Бьерна Страуструпа никто досконально не знает С++). В любом случае, с практикой приходит и опыт, и необходимость искать в справочнике или набирать в поисковой системе очередной тег или атрибут отнимает от продуктивной деятельности все меньше и меньше времени.
Применение CSS и JavaScript совместно с HTML в свою очередь открывает целый новый пласт возможностей динамических веб-страниц.
Глава 2 Использование языка HTML на примере написания простого приложения.