Добавлен: 24.04.2023
Просмотров: 221
Скачиваний: 2
Валидация - это процесс проверки кода и приведения его в соответствие с выбранным доктайпом (DTD).
Доктайп обычно указывает на документ, по которому планируется непосредственная валидация HTML, но может быть выбран из прагматических соображений для непосредственного выбора оптимального режима браузера. XHTML5 может вообще не иметь доктайпа, но при всем этом быть валидным.
Считается, что валидность кода представляет собой единую, универсальную характеристику любого программного кода. На самом деле, валидность это соответствие HTML кода документа четко установленному своду правил, который указан в доктайпе или подразумеваемому в языке гипертекстовой разметки HTML5 [12].
То есть, валидность представляет собой понятие относительное, поскольку правила бывают различными, и требования у них тоже могут быть разными.
Валидность HTML кода проверяется специальным инструментом, который называется валидатором. Самый известный валидатор в глобальной сети Internet w3c - https://www.w3.org. Валидатор w3c выполняет несколько проверок загружаемого пользователем программного кода.
Главные из них:
1. Проверка на наличие синтаксических ошибок:
Например c habrahabr.ru/post/69: <foo bar="baz"> является корректным синтаксисом, несмотря на то, что <foo> является недопустимым HTML-тэгом. Так что, проверка синтаксиса является минимально полезной для написания хорошего HTML-кода.
2. Проверка вложенности тэгов:
В HTML документе тэги должны быть закрыты в обратном порядке относительно их открытия. Эта проверка выявляет незакрытые или неправильно закрытые теги.
3. Валидация html согласно DTD:
Проверка того, насколько код соответствует указанному DTD - Document Type Definition (доктайпу). Она включает проверку названий тэгов, атрибутов, и «встраивания» тэгов (тэги одного типа внутри тэгов другого типа).
4. Проверка на наличие посторонних элементов:
Она обнаружит все, что есть в коде, но отсутствует в доктайпе. Например, пользовательские тэги и атрибуты.
Для проверки валидности CSS кода существует валидатор css - http://jigsaw.w3.org/css-validator [4].
Валидность кода – это результат механической проверки на отсутствие формальных ОВ, согласно указанного свода правил.
Нужно понимать, что валидация представляет собой инструмент, а не самоценность.
Верстальщики с опытом обычно знают, где можно нарушить правила валидации HTML или CSS, а где нет, и чем грозит (или не грозит) та или иная ошибка валидации.
Примеры того, когда не валидный код делает сайт:
– более удобным и быстрым - пользовательские атрибуты для Javascrip/AJAX;
– SЕО оптимизированным - разметка ARIA.
Как правило, опытные верстальщики придерживаются следующих правил:
– в коде не должно быть грубых ошибок;
– незначительные можно допустить, но только по обоснованным причинам [10].
Термин широко используется для обозначения программ, проверяющих корректность HTML-, XHTML-, XML-документов, RSS-лент, однако может быть использован применительно к любому формату или языку. Существуют совмещенные валидаторы, которые проверяют веб-страницы по нескольким стандартам одновременно, например, совмещенный валидатор W3C Unicorn
2. Практические аспекты использования HTML
2.1. Создание простого HTML документа
В качестве примера рассмотрим следующий код, разработанный на языке гипертекстовой разметки HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Пример веб-страницы</title>
</head>
<body>
<h1>Заголовок</h1>
<!-- Комментарий -->
<p>Первый абзац.</p>
<p>Второй абзац.</p>
</body>
</html>
Элемент <!DOCTYPE> предназначен для непосредственного указания типа текущего документа – DTD (document type definition, описание типа документа). Это необходимо, для того чтобы браузеры понимали, как именно следует интерпретировать текущую web-страницу, ведь HTML существует в нескольких версиях.
Тег <html> определяет начало HTML-файла, внутри него хранится заголовок (<head>) и тело документа (<body>).
<head>
Заголовок документа, как еще называют блок <head>, может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице, за исключением контейнера <title>.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Тег <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое.
<title>Пример веб-страницы</title>
Тег <title> определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач.
</head>
Обязательно следует добавлять закрывающий тег </head>, чтобы показать, что блок заголовка документа завершен.
<body>
Тело документа <body> предназначено для размещения тегов и содержательной части веб-страницы.
<h1>Заголовок</h1>
HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка.
<!-- Комментарий -->
Некоторый текст можно спрятать от показа в браузере, сделав его комментарием. В тоже время, такой текст пользователь не увидит, он все равно будет передаваться в документе, так что, посмотрев исходный код, можно обнаружить скрытые заметки.
<p>Первый абзац.</p>
Тег <p> определяет абзац (параграф) текста. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
<p>Второй абзац.</p>
Тег <p> является блочным элементом, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой.
</body>
Следует добавить закрывающий тег </body>, чтобы показать, что тело документа завершено.
</html>
Последним элементом в коде всегда идет закрывающий тег </html>.
2.2. Метод передачи параметров между страницами (get, post)
Для понимания передачи параметров между страницами необходимо разобраться в представлении внешних переменных и данных. Метод GET представляет собой запрос, отправляемый на сервер скрипту при помощи браузера.
Все переменные, приходящие в скрипт от браузера, в данном случае через URL, или с сервера являются внешними переменными. Разберём как это понять, приходящие в скрипт.
Скрипт представляет собой любую программу написанную разработчиком, для обработки переменных или любых других данных. Скрипт выполняет запрос браузера на представление страницы, он просто собирает, формирует страницу HTML кода и отправляет её в готовом виде пользователю, который запросил её с помощью браузера [14].
Таким образом, GET - это название запроса который отправляется на сервер скрипту с помощью браузера открыто, через URL, адресную строку.
Если в адресной строке представлен знак амперсанды (&) и знак вопрос (?), можно считать, что этот узел работает на PHP, и ему в данный момент отправлены переменные и их значения. Выглядеть это может примерно так:
http://lphp.ru/index.php?page=4&id_artpage=43
В этом случает пользователь отправит серверу данные и получит от него некоторые данные, используя метод GET:
– http:// - префикс основного протокола передачи данных в web (HTTP);
– lphp.ru - домен в котором находится сервер;
– index.php - имя файла, обрабатываемое запросом, кому именно отправлен GET-запрос;
– ? - разделитель, после которого перечисляются переменные со значениями, которые нужны скрипту обработчику для формирования ответной страницы;
– page - переменная или имя переменной;
– = - оператор присваивает значения переменной;
– 4 - значение переменной;
– & - разделитель в строке запроса, между парами (переменная=значение&переменная=значение) и т.д.
Таким образом, была рассмотрена схема построения запроса с использованием метода GET. В зависимости от того, что разработчик желает заложить в понятие каждой переменной её значения могут быть разными. Это не обязательно цифры, это могут быть строки, слова.
Напишем пример передачи значения переменной pages, скрипту обработчику. При этом скрипт выведет переданное ему значение на экран:
<form>
<label>
<input type= «text» name= «pages» id= «textfield»>
</label>
<label>
<input type= «submit» name= «button» id= «button» value= «Отправить»>
</label>
</form>
<?php
echo $_GET['pages'];
?>
В предыдущем листинге был представлен пример передачи значения обработчику, который находится в том же файле, это удобно в том случае, если скрипт небольших размеров. Чаще всего передача происходит между страницами и здесь нужно разделить форму отправки значений и код приёма (обработчик).
Далее рассмотрим пример включающий два файла, форма отправки находится в файле forma_.php, а обработчик в файле add_.php. Файлы можно называть произвольно. Однако, необходимо придерживаться синтаксиса именования файлов и правильно указывать путь к обработчику. Первое условие правильного именования состоит в том, что имя должно быть латинскими буквами.
Следующий листинг демонстрирует метод GET для передачи данных между страницами. Файл forma_.php
<form method= «GET» action= «add_.php»>
<label>
<input type= «text» name= «page» id= «textfield»>
</label>
<label>
<input type= «submit» name= «button» id= «button» value= «Отправить»>
</label>
</form>
Следующий листинг представляет собой содержание файла add_.php в котором используется обработчик запроса методом GET:
<?php
echo $_GET['pages'];
?>
Как можно видеть было изменение только формы отправки значения формы page.
В первой строке был добавлен метод которым отправляются значения, т.е. method= «GET» и добавлен адрес обработчика в данном случаи только имя файла (action= «add.php»), но можно так же указывать полный или относительный путь до обработчика. Принято на сайтах указывать относительный путь, в силу того что при переносе приложения на другой сервер не менять потом пути [15].
Второе существенное отличие метода POST от метода GET - вся передаваемая информация, как известно имеет свой объём. Так вот в GET этот объём ограничен 8 КБ. Метод POST таких ограничений не имеет.
При разработке и отладке приложений, чаще используют метод GET. При завершении и выпуске приложения, лучше изменить представление на метод POST, в целях безопасности и неограниченности объёма передачи информации.
Рассмотрим пример передачи данных между страницами, используя метод POST:
<form name= «form1» method= «post» action= «post.php»>
Введите текст:<br />
<textarea name= «text» cols= «80» rows= «10»></textarea>
<br />
<br />
<input name= «» type= «submit» value= «Отправить»/>
</form>
Ещё важным аргументом тега form, является аргумент action="post.php". Аргумент action предназначен для указания пути до обработчика, т.е. куда будут отправлены данные вписанные в эту форму [6]. Имеющую имя в данном скрипте form. Именование всех объектов web-страницы в PHP, осуществляется путём присвоения атрибуту name имени. По сути это именование переменной. Форма в которую выполняется ввод данных представляет собой переменную и у неё должно быть имя, для того чтоб можно было с помощью скрипта обращаться к ней.
Разберём теперь обработчик, который в данном примере, выполняет функцию приёма данных и вывода их на монитор. Делается это с помощью глобального массива - так называются группа переменных в PHP.
При использовании метода POST, правильное написание глобального массива, выглядит следующим образом:
$_POST[]
При отправке данных методом POST всегда все отправленные переменные и их значения, будут содержаться в этом глобальном массиве ($_POST[]) [13]. И только при обращении к нему получится получить отправленные данные с одной страницы на другую.
Представим еще один листинг, при помощи которого можно выводить данные на экран монитора методом POST. Файл post.php:
<?php
echo $_POST['text'];
?>
Данный листинг показывает обработчик формы. В глобальном массиве POST, в квадратных скобках мы видим имя переменной - именно так скрипт понимает, что нужно выводить на монитор $_POST['text']. В первом листинге мы именовали форму, назвав переменную text (name= «text»). Форма содержащая текст получила имя text.
Чтобы вывести на монитор отправленные данные, достаточно просто прописать имя переменной в квадратных скобках глобального массива POST.
Заключение
В процессе выполнения данной работы были получены следующие результаты. Установлено, что HTML является стандартизированным языком разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. Гипертекстовый документ – это текстовый файл, имеющий специальные метки, называемые тегами, которые впоследствии опознаются браузером и используются им для отображения содержимого файла па экране компьютера.