Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Экзамен / web / example1 / Введение в PHP.doc
Скачиваний:
101
Добавлен:
18.05.2015
Размер:
3 Mб
Скачать

Создаем свои шаблоны в php

-------------------------------------------------

template.html

----------------

<html><body>$message</body></html>

-------------------------------------------------

index.php

----------------

$message="Hello world";

$html=addslashes(implode("",file("templates/template.html")));

eval("echo stripslashes(\"$html\");");

-------------------------------------------------

шаблон:

<html>

<head>

<title><?=$title?></title>

</head>

<body>

<?=$content?>

</body>

</html>

скрипт:

<?

//создание переменных:

$title = "главная страница";

$content = "здавствуй мир";

require("template.php");

?>

как вставить в шаблон код php а имено include "forum/news.php";

template.tpl

+++

<HTML>

<TITLE>Test template!</TITLE><P>

{TEXT}

+++++++++

index.php

+++

<?php

$plot = join(' ', file("template.tpl"));

$plot = str_replace("{TEXT}", "Hello world!",$plot);

echo $plot;

?>

Реализация шаблонов на PHP.

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

Листинг файла file2compile.tpl который мы будем парсить:

<html>

<head>{TITLE}</head>

<body bgcolor={BGCOLOR}>

{SOMETPLTAGS}

</body>

</html>

Тут приведен обычный HTML код. В данном файле можно найти переменные вида {TITLE}. Это как раз именно те переменные которые мы будем заменять на нужное нам значение.

Листинг файла template.php главный файл содержащий класс шаблонов:

<?php

class parse_class

{

var $vars = array();

var $template;

function get_tpl($tpl_name)

{

if(empty($tpl_name) || !file_exists($tpl_name))

{

return false;

}

else

{

$this->template = file_get_contents($tpl_name);

}

}

function set_tpl($key,$var)

{

$this->vars[$key] = $var;

}

function tpl_parse()

{

foreach($this->vars as $find => $replace)

{

$this->template = str_replace($find, $replace, $this->template);

}

}

}

$parse = new parse_class;

?>

Мы имеем PHP класс, разделенный на 3 функции. В самом начале файла мы объявляем классовые переменные.

$vars – массив со значениями (переменная, замена).

$template – файл который мы будем парсить.

Функция: get_tpl(). В качестве аргумента функция принимает имя файла. В теле функции мы проверяем задан ли аргумент и существует ли файл. Если аргумент не задан и файл не существует мы возвращаем значение FALSE. В противном случае мы заполняем классовую переменную(template) содержанием файла.

Функция set_tpl(). Функция принимает 2 значения-переменная (напр. {TITLE)} и значение на которое мы будем ее заменять.

Функция tpl_parse(). Функция не принимает никаких значений. В теле функции мы считывает массив $vars и производим замену установленных переменных на заданные значения.

Для вывода на экран используйте следующие команды:

<?php

require('template.php'); // Подключаем файл с классом

$parse->get_tpl('template.tpl'); //Файл который мы будем парсить

$parse->set_tpl('{TITLE}','Супер сайт'); //Установка переменной {TITLE}

$parse->set_tpl('{BGCOLOR}','#F2F2F2'); //Установка переменной { BGCOLOR }

$parse->set_tpl('{SOMETPLTAGS}','<font color=red>Это текст обрамленый красным цветом</font>'); //Установка переменной {SOMETPLTAGS}

$parse->tpl_parse(); //Парсим

print $parse->template; //Выводим нашу страничку

?>

Вполне естественным в таких условиях является переход к многоуровневой шаблонной организации сайтов. Основная идея заключается в следующем. Каждая html-страница состоит из нескольких логических кусков например, колонка с навигацией, колонка с новостями и основное текстовое поле. При помощи шаблонной системы мы можем присвоить каждой такой части страницы собственное имя - имя шаблона. Каждый шаблон может иметь несколько переменных, которые при его обработке заменяются либо обычным текстом, либо выводом других шаблонов. Таким образом, речь идет уже о многоуровневой системе шаблонов - шаблон верхнего уровня при обработке вызывает шаблон более низкого уровня и так далее. Разберем простой пример:

<Html>

<Head><Title> {TITLE} </Title></Head>

<Body>{BODY}</Body>

</Html>

Это может быть шаблон верхнего уровня для любого сайта. Он имеет две переменные: {TITLE} и {BODY}. Первая из них, очевидно, может сразу заменяться текстом; вторая же, для большей структурированности, должна заменяться выводом шаблона body, который может иметь следующий вид:

<Table width=100%>

<tr>

<td>Навигация</td>

<td>Main</td>

<td><Новости></td>

</tr>

<tr>

<td>{NAVIGATION}</td>

<td>{MAIN}</td>

<td>{NEWS}</td>

</tr>

</table>

Каждая из трех переменных этого шаблона уже может заменяться текстом. Хотя, конечно, можно и для каждой их них создать еще по шаблону.

Как же по заданной болванке сгенерировать обычную html-страницу и вывести ее браузеру? В большинстве систем для этого используется объектный подход: порождается новый экземпляр класса, который имеет несколько свойств (путь, по которому хранятся шаблоны, имя верхнего шаблона и значения переменных) и методов (заполнить какую-то переменную, обработать шаблон, вывести сгенерированную страницу пользователю и т.д.).

В блоке с кодом приведен примерный сценарий, формирующий и выводящий HTML-страницу пользователю. А сейчас я просто прокомментирую основные шаги обработки шаблонов при помощи рассматриваемого пакета. Прежде всего необходимо подключить ядро системы - файл class.FastTemplate.php. Именно там описаны все функции по обработке шаблонов. После этого создается новый экземпляр класса и меняются некоторые его свойства. В частности, необходимо при помощи метода define сопоставить имя каждого используемого шаблона с именем конкретного файла. Затем при помощи метода assign заполняются переменные шаблона; если же ты хочешь поместить туда вывод другого шаблона, его следует сперва обработать при помощи метода parse. В результате получаем переменную, содержащую вывод обработанного шаблона, и можем ее запросто подставить как параметр к методу Assign, заполняющему переменную в шаблоне более высокого уровня. Так снизу вверх и формируется страница. Для ее вывода пользователю используется метод FastPrint(VAR_NAME), в качестве параметра которого указывается имя переменной с выводом шаблона; если этот параметр опустить, по дефолту подставляется вывод последней болванки, обработанной методом parse.

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

как подобные шаблонные системы устроены внутри

Пример кода

<?php

/* Подключаем главный файл шаблонной системы */

include "class.FastTemplate.php";

/* Создаем новый экземпляр класса FastTemplate */

$tmpl=new FastTemplate(".");

/* Привязываем имена файлов к символическим именам шаблонов */

$tpl->define(array("top" => "top.tpl", "doc"=>"doc.tpl"));

/* Присваиваем переменным шаблона body значения, на следующем шаге обрабатываем этот шаблон */

$tpl->assign(array("NAVIGATION" => "Here is menu...",

"MAIN" => "Here is text", "NEWS" => "Here are some news..."));

$tpl->parse("BODY", "doc");

$tpl->parse("TOP", "top"); /* Парсим шаблон верхнего уровня */

$tpl->FastPrint();

/* Выводим юзеру результат. Эта запись равносильна следующей: $tpl->FastPrint(TOP), т.е. функция принимает в качестве параметра имя переменнойс результатом */

?>

Класс HTML_Template_IT из библиотеки PEAR.

<table border>

<tr>

<td colspan=2>

__global__

<p>

(hidden and automatically added)

</td>

</tr>

<tr>

<td>block1</td>

<td>

<table border>

<tr>

<td colspan=2>block2</td>

</tr>

<tr>

<td>inner1</td>

<td>inner2</td>

</tr>

</table>

</td>

</tr>

</table>

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

В документации к этому классу написано, что он знает, что inner1 — дочерний для блока block2, и нет необходимости сообщать ему об этом. Чтобы вставить данные в блок, достаточно выполнить такой код столько раз, сколько нужно строк:

<?php

$tpl->setVariable(...);

$tpl->parseCurrentBlock();

?>

Чтобы внести контент в block1, нужно выполнить такое:

<?php

$tpl->setCurrentBlock("inner1");

$tpl->setVariable(...);

$tpl->parseCurrentBlock();

$tpl->setVariable(...);

$tpl->parseCurrentBlock();

$tpl->parse("block1");

?>

В итоге код скрипта выглядит так:

<?php

$tpl = new HTML_Template_IT( [string filerootdir] );

// загрузка шаблона или указание его через класс

$tpl->loadTemplatefile( string filename [, boolean removeUnknownVariables,

boolean removeEmptyBlocks] )

// установка переменных "global", т.е. переменных, не входящих в блок (дочерний блок)

$tpl->setVariable( string variablename, mixed value );

// ещё один способ указания переменных — через массив

$tpl->setVariable( array ( string varname => mixed value ) );

// Будем использовать какой-нибудь блок, пусть даже глубоко вложенный в другие

$tpl->setCurrentBlock( string blockname );

// Повторяем столько, сколько нужно

$tpl->setVariable( array ( string varname => mixed value ) );

$tpl->parseCurrentBlock();

// получаем результат или печатаем его вызывая $tpl->show()

$tpl->get();

?>

Приложение 7. Работа с XML

XML — это способ записи структурированных данных. Под "структурированными данными" подразумевают электронные таблицы, адресные книги, конфигурационные параметры, финансовые транзакции, технические чертежи и так далее. XML представляет собой набор правил для разработки текстовых форматов, которые позволят структурировать данные.

XML облегчает компьютеру задачу создания и чтения данных, обеспечивая при этом однозначность их структуры. XML позволяет избежать распространенных ошибок проектирования языков: он расширяем, независим от платформы, включает поддержку интернационализации и локализации. XML полностью совместим с Unicode.

Модуль функций обработки XML появился в PHP3. При помощи функций этого модуля можно было создавать собственные обработчики XML-кода, но нельзя было проверять правильность XML-документа. Рассмотрим пример.

<eshop>

<!-- категории товаров -->

<category id="3">

<title>Мясные продукты</title>

<!-- Товары из данной категории -->

<commodity id="1">

<title>Рыба</title>

<measure-unit>килограмм</measure-unit>

<price>100</price>

</commodity>

<commodity id="3">

<title>Мясо</title>

<measure-unit>килограмм</measure-unit>

<price>200</price>

</commodity>

<!-- Подкатегория -->

<category id="15">

<title>Отходы производства</title>

<commodity id="2">

<title>Икра рыбья</title>

<measure-unit>килограмм</measure-unit>

<price>10</price>

</commodity>

</category>

</category>

<category id="10">

<title>Растительные продукты</title>

<commodity id="5">

<title>Подсолнух</title>

<measure-unit>штука</measure-unit>

<price>50</price>

</commodity>

</category>

</eshop>

Вот так в XML можно записать структурированные данные о продовольственном магазине, в котором товары разделены на категории, а категории могут быть подчинены друг другу. XML —уже готовый формат для записи такой структуры, в рамках которого остаётся лишь придумать названия узлов (тегов) и правила, в которые должна укладываться структура (например, что товар не может быть расположен вне категории или что уровней категорий может быть не больше трёх).

Разработчики php предлагают обрабатывать отдельные элементы XML-документа функциями php. Пример из руководства по php:

<?php

$file = "data.xml";

// Массив обрабатываемых узлов

$map_array = array(

"BOLD" => "B",

"EMPHASIS" => "I",

"LITERAL" => "TT"

);

// Функция для начала тега (может выводить сложный текст, но в данном примере выдаёт

// просто соответствующий тег).

function startElement($parser, $name, $attrs) {

global $map_array;

if ($htmltag = $map_array[$name]) {

print "<$htmltag>";

}

}

// Функция для конца тега

function endElement($parser, $name) {

global $map_array;

if ($htmltag = $map_array[$name]) {

print "";

}

}

// Функция для текста (текстового узла)

function characterData($parser, $data) {

print $data;

}

$xml_parser = xml_parser_create();

// use case-folding so we are sure to find the tag in $map_array

xml_parser_set_option($xml_parser, XML_OPTION_CASE_FOLDING, true);

xml_set_element_handler($xml_parser, "startElement", "endElement");

xml_set_character_data_handler($xml_parser, "characterData");

// Чтение XML-файла

if (!($fp = fopen($file, "r"))) {

die("could not open XML input");

}

while ($data = fread($fp, 4096)) {

if (!xml_parse($xml_parser, $data, feof($fp))) {

die(sprintf("XML error: %s at line %d",

xml_error_string(xml_get_error_code($xml_parser)),

xml_get_current_line_number($xml_parser)));

}

}

xml_parser_free($xml_parser);

?>

Данный пример можно расширить, добавив массив имён тегов, которые будут обрабатываться иным образом, и соответствующие условия в функции startElement и endElement.

Sablotron, expat, SAX-парсеры

В работе с XML-документами существует два подхода — SAX (simple access to XML) и DOM (document object model). Подход DOM — это работа с документом через объектный программный интерфейс. SAX — это получение данных при помощи парсера, обрабатывающего строку XML-документа.

SAX-парсер можно написать самому, если задача простая.

DOM-обработчик обычно используют готовый. DOM — спецификация, описывающая, какие объекты должны соответствовать каким узлам документа, какие методы и классы должны содержать. Спецификация очень объёмная, поэтому одному человеку её реализацию не написать. Для работы при помощи DOM используются готовые библиотеки, самая известная из них — libxml. В C/C++ эта библиотека подключается напрямую, в php есть библиотека php_domxml, включающая в себя libxml и имеющая надстройку для создания объектов DOM в среде php.

Итак, Sablotron и expat. Sablotron — это XSLT-процессор, программа, выполняющая XSL-трансформации для XML-документов. Sablotron использует expat — SAX-парсер XML — для доступа к данным в документе.

Простые примеры использования XSLT можно встретить где угодно. Нет смысла их повторять, лучше посмотрим, что даёт XSLT в плане организации шаблонов. В XSLT 1.0 есть мощный инструмент — элемент xsl:import. Процессор трансформаций открывает XSL-документ, указанный в элементе xsl:import, и дополняет шаблонами из импортируемого документа основной документ.

Приоритетом пользуются шаблоны в импортирующем документе. То есть, если в обоих XSLT-файлах есть шаблоны с одинаковым атрибутом select, в результирующий XSL-стиль берётся шаблон из импортирующего документа.

При помощи такого импорта можно создавать локальные стили для отдельных рубрик сайта. В локальном стиле описываются шаблоны для тегов, которые есть в данной рубрике. Кроме того, для отдельной рубрики можно переписать глобальный шаблон.

Очевидно так же, что имя импортируемого шаблона можно менять через параметр.

Генерация XML-документов из текстовых строк — вот первый шаг при переходе на систему XSLT-шаблонов. Рекомендуется тем, кто не имеет опыта в DOM XML. Следующим шагом будет замена тексто-ориентированной генерации документа на объектно-ориентированную.

DOM XML

Несмотря на многословность и большой объём кода, выполняющего достаточно простые операции, DOM XML имеет большие перспективы.

Главный недостаток текстового подхода в редактировании XML-документа (редактирования в скрипте, естественно) — то, что нужно либо внимательно вчитываться в спецификицию XML, либо не быть до конца быть уверенным в том, что же получилось в итоге.

Например, вставить текст в узел — простая задача. Однако в XML-документе служебные символы и символы, не входящие в таблицу ISO, должны быть преобразованы в XML-сущности (<) или в номера символов UTF-8 (&x0442;). В модуле DOM XML достаточно сконвертировать текст в UTF-8 и вызвать метод create_text_node.

Наконец, главное преимущество DOM XML — то, что бинарный модуль для текстовой обработки документа в php отсутствует. Это значит, что вам самим придётся писать парсер.

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

Операции с документом через DOM нужно группировать в свои собственные функции, то есть строить DOM-овый класс шаблона.

В отдельный шаблон можно вынести общие для сайта или его разделов данные. Остальное — вставлять в документ:

<?

$root1 = $dom1->document_element();

$child = $root1->child_nodes();

$root2 = $dom2->document_element();

for ($i = 0; $i < sizeof($child); $i++)

$root2->append_child($child[$i]->clone_node());

?>

Для сайта можно сделать простой скрипт, в который будут перенаправляться запросы к документам. В .htaccess пишется следующее:

Options FollowSymLinks

RewriteEngine On

# проверка наличия файла с тем же именем

# и расширением phpxml для корня раздела

RewriteCond %{DOCUMENT_ROOT}/$1/index.phpxml -f

# если такой файл есть, правило срабатывает

RewriteRule ^([a-z0-9_/-]+)/?$ /$1/index.php

# это правило сработает для адреса, переписанного

# по предыдущему правилу, и для всех остальных

# файлов, отправляя запрос в скрипт composer.php.

RewriteCond %{DOCUMENT_ROOT}/$1.phpxml -f

RewriteRule ^([a-z0-9_/-]+)\.php$ /composer.php [L]

В скрипте composer.php будет открываться файл с тем же именем, что и запрашивался, но с расширением phpxml. Сервер Apache при обработке правил уже проверил факт существования этого файла.

Остаётся считать файл, вставить его содержимое в глобальный шаблон и преобразовать через XSLT.

Валидация документов

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

С базой было просто: получаешь массив и делаешь из него текстову строку (циклом или классом шаблона наподобие php-templates), либо получить строку при помощи sql2xml дерево объектов (или опять же строку). С файлом работать сложнее, потому что на всякий случай желательно проверять целостность данных.

Есть два подхода в создании разметки. Первый — разметка, ориентированная на данные (data-centric markup), второй — разметка, ориентированная на документ (document-centric markup).

Пример разметки ориентированной на данные:

<?xml version="1.0"?>

<championship-list>

<championship>

<acro>ETCC</acro>

<title>European Touring Car Championship</title>

<description>FIA-organized racing series. Uses racing cars.</description>

<site></site>

</championship>

<championship>

<acro>BTCC</acro>

<title>British Touring Car Championship</title>

<description>Analogue to ETCC, except that races take.</description>

<site>http://btcc.co.uk</site>

</championship>

<championship>

<acro>DTM</acro>

<title>Deuche Tourenwagen Masters</title>

<description>Most famous German Touring racing series. </description>

</championship>

</championship-list></no-escape>

Два уровня иерархии — строка + поле (естественно, если их станет 3 или 4, качественно ничего не изменится), в общем, то же самое, что и запрос из базы данных, отформатированный при помощи sql2xml. Пример документо-ориентированной разметки:

<?xml version="1.0"?>

<championship-list>

FIA organized about 20 racing servies, including 2 touring cars championships.

<championship><title>European Touring Car Championship</title>

(<acro>ETCC</acro>) uses significantly tuned road cars, mostly BMW.</championship>

<championship>Another FIA series is <title>British Touring Car</title>

(<acro>BTCC</acro>) is analogue to ETCC, except that races take.</championship>

Allthough, these are not the world's most famous championships.

<championship><acro>DTM</acro> (<title>Deuche Tourenwagen Masters</title>),

the most famous Touring racing series not only in Germany.</championship>

</championship-list>

Этот вариант написан свободным человеческим языком, но данные в элементах acro и title остались те же, их можно получить из документа теми же запросами XPath или XQuery: /championships/championship[acro='DTM']/title Первый вариант разметки можно представить в виде таблицы базы данных. Можно усложнить его, для примера — фрагмент документа:

<championship>

<acro>DTM</acro>

<title>Deuche Tourenwagen Masters</title>

<description>Most famous German Touring racing series.</description>

<drivers>

<driver>Laurent Aiello</driver>

<driver>Bernd Schneider</driver>

<driver>Marcel Fassler</driver>

<driver>Jean Alesi</driver>

<driver>Cristian Albers</driver>

</drivers>

</championship>

От этого документ не перестанет быть data-centric. Новый документ можно представить как 2 таблицы, соединяемые при запросе оператором LEFT JOIN.

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

Кстати, в этом заключается основное отличие XML-баз данных от не-XML. XML-database работает и с разметкой, ориентированной на документ (а не только в том, что результаты выдаются в XML). Разметку же типа data-centric вполне можно хранить в реляционной БД, а на выходе форматировать утилитой вроде sql2xml.

Так вот, возвращаясь к валидации документов, нужно заметить, что документо-ориентированную разметку очень сложно проверить на соответсвтие DTD или XML-схеме простым строковым парсером.

Ещё пример — разметка формы в моём классе TXF:

<?xml version="1.0" encoding="windows-1251"?>

<txf:form xmlns:txf="http://txf.sourceforge.net/" name="item"

action="category.php" receive-method="ANY" suggest-method="POST">

<txf:rule>

<txf:revswitch true="0">

<txf:logic type="and">

<txf:logic type="or">

<txf:func name="my_email_check">

<arg select="//txf:input[@name = 'email']/value"

setInvalid="//txf:func[@name = 'email']/value"/>

</txf:func>

<txf:trigger test="not(//txf:input[@name = 'send_email']/value)"/>

</txf:logic>

<txf:trigger test="string-length(//txf:input[@name = 'login']/value) > 0"/>

</txf:logic>

</txf:revswitch>

<txf:revswitch true="1">

<txf:trigger test="string-length(//txf:input[@name = 'login']/value) = 0 and

string-length(//txf:input[@name = 'email']/value) = 0

</txf:revswitch>

</txf:rule>

</txf:form>

В PHP 5 реализованы специальные встроенные классы (Reflection API), которые позволяют анализировать классы и объекты с целью определения методов, свойств и интерфейсов, которые они поддерживают.

<?php

class MyClass {

public $property;

function myFunc($name) {

echo $name;

}

}

ReflectionClass::export("MyClass");

ReflectionObject::export(new MyClass);

ReflectionMethod::export("MyClass", "myFunc");

ReflectionProperty::export("MyClass", "property");

ReflectionExtension::export("standard");

?>

С помощью класса ReflectionExtension аналогичным образом возможен анализ расширений PHP 5.

Все основные библиотеки для работы с XML, которые имелись в PHP 4, были подвергнуты серьезной переработке. Такие популярные расширения, как SAX, DOM и XSLT, теперь используют инструмент libxml2, что делает их еще более эффективными. В PHP 5 также включены два новых расширения – SimpleXML и SOAP.

SimpleXML позволяет значительно упростить работу с XML-данными, представляя содержимое XML-документа в виде PHP-объекта. Например, приведенный ниже XML-документ (books.xml):

<books>

<book>

<author>Andi Gutmans</author>

<title>PHP 5 Power Programming</title>

</book>

<book>

<author>Steven D. Nowicki</author>

<title>Professional PHP 5</title>

</book>

</books>

может быть очень легко обработан при помощи SimpleXML следующим PHP-сценарием:

<?php

$books = simplexml_load_file("books.xml");

echo "<ul>";

foreach ($books->book as $book) {

// Выводит авторов и названия их книг в виде HTML-списка

echo "<li>$book->author \"$book->title\"</li>";

}

echo "</ul>";

?>

Приложение 8. HTML

HTML (HyperText Markup Language, язык разметки гипертекста) — это прежде всего система верстки, которая определяет, как и какие элементы должны располагаться на веб-странице.

HTML не является языком программирования. В нем нет логических последовательностей. Это именно язык разметки документов (текста). HTML определяет логическую структуру документа.

Стандарт HTML, как и другие стандарты для веб, разработан под руководством консорциума World Wide Web (World Wide Web Consortium, W3C). Стандарты и спецификации, в том числе и для языка HTML, можно найти на сайте World Wide Web Consortium http://www.3w.org

Сущестует несколько версий HTML. В 1999 году вышла последняя редакция языка - HTML 4.01.

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

HTML-документ создается с помощью HTML-редактора и сохраняется в виде текстового файла с расширением .html или .htm. Для просмотра HTML-документов используются Web-браузеры, интерпретирующие документы.

Разметка гипертекста средствами HTML происходит путем вставки в текст дескрипторов — специальных кодовых слов, определяющих элементы форматирования. Для того чтобы дескрипторы отличались от остального текста, их заключают между знаками "больше" и "меньше", например: <b>, <a>, <img>.

Дескрипторы бывают контейнерные (парные) и неконтейнерные (одинарные), причем первые встречаются чаще. Контейнерный дескриптор состоит из двух частей — открывающего и закрывающего дескрипторов, — между которыми находится форматируемый текст, например:

<i> текст курсивом </i>

Закрывающий дескриптор отличается от открывающего наличием косой черты. Контейнерные дескрипторы бывают вложенными, например:

<i> курсив <b> жирный курсив </b> курсив </i>

При использовании вложенных дескрипторов нужно следить за их последовательностью: дескриптор, открытый первым, закрывается последним.

Одинарный тег состоит только из открывающего и не требует закрывающего тега. Встретив, например, такой тег <hr>, браузер выведет на экран горизонтальную разделительную линию.

Соседние файлы в папке example1