Start

Initiate

Section: Start | Tags: require, global, class | Completed in: 0.442028ms

Include the Classfile _html.php and a global instance will be created using the settings from core/config.php (If it does not exist you have to run _html.php one time so a config-sample.php will be generated. You then can rename it to config.php and make your settings).

Code

require_once '../_html.php';
global $HTML;
print_r($HTML);

Result (101 Chars)

Xiphe\HTML Object
(
    [tagStore] => Array
        (
        )

    [_ID:Xiphe\HTML:private] => 1
)

Own instance

Section: Start | Tags: instance, class | Completed in: 0.0679493ms

You can have multiple other instances of the HTML object containing different settings. This is very useful to set the baseUrl setting used by magic url

Code

$myHTML = new Xiphe\HTML('http://www.example.org');
print_r($myHTML);

Result (141 Chars)

Xiphe\HTML Object
(
    [tagStore] => Array
        (
        )

    [_ID:Xiphe\HTML:private] => 5
    [baseUrl] => http://www.example.org
)

Tags

Basic tag

Section: Tags | Tags: tag basic | Completed in: 7.3349476ms

Every Tag will be generated by a method call of the $HTML object, the tagname is the method name.

Code

$HTML->div('this is a basic div');

Result (31 Chars)

<div>this is a basic div</div>

Self-closing Tags

Section: Tags | Tags: tag, basic, self-closing | Completed in: 0.1869202ms

Followeing tags are preregistered as self-closing tags.

  • area
  • base
  • basefont
  • br
  • col
  • frame
  • hr
  • img
  • input
  • isindex
  • link
  • meta
  • param
  • script
  • source
  • wbr

Code

$HTML->br();

Result (7 Chars)

<br />

Method Chaining

Section: Tags | Tags: tag, basic, chains | Completed in: 0.8850098ms

Most method calls are returing the HTML-Instance, so chaining is possible.

Code

$HTML->div('this')->span('is')->pre('a')->p('chain')->hr();

Result (65 Chars)

<div>this</div>
<span>is</span>
<pre>a</pre>
<p>chain</p>
<hr />

Starting and ending Tags

Section: Tags | Tags: tag, basic, start, end | Completed in: 1.5239716ms

You can start Tags without inner-content whith the prefix s_. And you can end this Tag with the method $HTML->end().

Code

$HTML->s_div()->p('this is wrapped')->end();

Result (37 Chars)

<div>
	<p>this is wrapped</p>
</div>

The end() Method

Section: Tags | Tags: tag, basic, end | Completed in: 2.7179718ms

As mentioned above: This method closes tags that have been opened by the s_prefix. If you call it without arguments, it will close the last tag. If you call it with an integer, it will try to close as many tags, If you pass an #id or .class all tags including the one with the class or id will be closed. if you call it with 'all' ...guess what :)

Code

$HTML->s_html()->s_head()->title('foo')->end() //Ends the head tag
	 ->s_body()->s_div('#wrap')->s_div()->s_div()->s_div()->p('content') //Stack some divs
	 ->end(2)       //Ends the last two divs
	 ->comment('Closed two tags.')
	 ->end('#wrap') //Ends all tags until the wrap id (.classes are supported, too).
	 ->comment('Closed until #wrap.')
	 ->end('all')  //Ends body and html tag
	 ->comment('Closed the rest.');

Result (282 Chars)

<html>
	<head>
		<title>foo</title>
	</head>
	<body>
		<div id="wrap">
			<div>
				<div>
					<div>
						<p>content</p>
					</div>
				</div>
				<!-- Closed two tags. -->
			</div>
		</div><!-- #wrap -->
		<!-- Closed until #wrap. -->
	</body>
</html>
<!-- Closed the rest. -->

Attributes

Basic attributes

Section: Attributes | Tags: attribute, basic | Completed in: 0.8349419ms

Attributes are passed as a the second parameter - or for starting and self-closing tags as the first and only. name and value are separated by an equality sign. (can be escaped) The Default Attribute is class, see First Attributes for exceptions.

Code

$HTML->div('this is a div with a class', 'foo');
$HTML->br('bar');
$HTML->nav('...', 'role=access');
$HTML->a('link', 'href=http://www.example.org?get\=param'); //escaped

Result (150 Chars)

<div class="foo">this is a div with a class</div>
<br class="bar" />
<nav role="access">...</nav>
<a href="http://www.example.org?get=param">link</a>

Multiple Attributes

Section: Attributes | Tags: attribute, multiple | Completed in: 0.3790855ms

If you need more than one attribute on one tag, they can be separated by an pipe char "|" (can be escaped, too).

Code

$HTML->div('this is a div with a class and an id', 'class=foo|id=bar');
$HTML->a('lorem', 'href=http://www.example.org/?foo\=bar|target=_blank');

Result (137 Chars)

<div class="foo" id="bar">this is a div with a class and an id</div>
<a href="http://www.example.org/?foo=bar" target="_blank">lorem</a>

Attribute Aliases

Section: Attributes | Tags: attribute, alias | Completed in: 1.1799335ms

class(.), id(#), src(?), style(}) and href(%) have aliases to shorten the writing process.

Code

$HTML->div('this is a div with a class and an id', '.foo|#bar');
$HTML->a('lorem', '%http://www.example.org/?foo\=bar|target=_blank|}color: green;');
$HTML->img('?http://www.example.org/test.jpg|alt=A test image');

Result (224 Chars)

<div class="foo" id="bar">this is a div with a class and an id</div>
<a href="http://www.example.org/?foo=bar" style="color: green;" target="_blank">lorem</a>
<img alt="A test image" src="http://www.example.org/test.jpg" />

Attribute Arrays

Section: Attributes | Tags: attribute, array | Completed in: 0.3831387ms

Attributes can be passed as an array to improve php readability.

Code

$HTML->a('lorem', array(
    'href' => 'http://www.example.org/?foo=bar',
    'target' => '_blank',
    'style' => 'color: green;',
));

Result (90 Chars)

<a href="http://www.example.org/?foo=bar" style="color: green;" target="_blank">lorem</a>

First Attributes

Section: Attributes | Tags: attribute, single, first | Completed in: 0.3621578ms

The Default First Attribute is class but specific tags do have other firsts with more sence.

  • a, link, css, less, favicon, appleicon: href
  • img, script: src
  • input, select, textarea, pw: name
  • checkbox, radio: id
  • submit, option, hidden, action: value
  • form: action
  • head: profile
  • label: for
  • rederect, viewport, description: content
  • abbr: title
  • if: 0

Code

$HTML->a('link', 'http://www.example.org/');

Result (43 Chars)

<a href="http://www.example.org/">link</a>

Default Attributes

Section: Attributes | Tags: attribute, default | Completed in: 0.4858971ms

Some Tags have default attributes with values. They can be overwritten.

  • link: rel="stylesheet" type="text/css" media="all"
  • css: rel="stylesheet" type="text/css" media="all"
  • less: rel="stylesheet/less" type="text/css" media="all"
  • style: rel="stylesheet" type="text/css" media="all"
  • script: type="text/javascript"
  • form: method="post"
  • input: type="text"
  • checkbox: type="checkbox"
  • radio: type="radio"
  • pw: type="password"
  • hidden: type="hidden" name="action"
  • submit: type="submit" name="submit"
  • zw: class="zerowrap"
  • favicon: rel="shortcut icon" type="image/ico"
  • clear: class="clear"
  • dclear: class="clear"
  • utf8: http-equiv="Content-Type" content="text/html; charset=utf-8"
  • rederect: http-equiv="refresh"
  • viewport: name="viewport" content="width=device-width, initial-scale=1.0"
  • appleicon: rel="apple-touch-icon"
  • action: type="hidden" name="action"
  • description: name="description"

Code

$HTML->link('../style.css');

Result (74 Chars)

<link href="../style.css" media="all" rel="stylesheet" type="text/css" />

Magic Url

Section: Attributes | Tags: attribute, default | Completed in: 0.7259846ms

If you specify a Base-Url in the Global Options, a "./" to the beginning of the value of a src or href attribute will be replaced by the baseurl. This can be turned off in the Global Options or escaped by "\"

Code

$HTML->a('Link to', './somewhere/');
$HTML->a('Link to', '\./somewhere/'); //escaped

Result (91 Chars)

<a href="http://www.example.org/somewhere/">Link to</a>
<a href="./somewhere/">Link to</a>

Double Attributes

Section: Attributes | Tags: attribute, double | Completed in: 0.7140636ms

Some Tags will copy an attribute if the other is not given to prevent W3C errors and enhance semantic.

  • input: id, name
  • checkbox: id, name
  • radio: id, name
  • select: id, name
  • pw: id, name
  • textarea: id, name
  • hidden: id, name
  • action: id, name
  • img: src, alt

Code

$HTML->img('./picture.jpg');
$HTML->img('\./picture.jpg');

Result (113 Chars)

<img alt="picture.jpg" src="http://www.example.org/picture.jpg" />
<img alt="picture.jpg" src="./picture.jpg" />

Global Options

Set Options

Section: Global Options | Tags: global, settings | Completed in: 0.617981ms

There are multiple ways to set the global options.

  1. You can rename the config-sample.php in config.php and uncomment and adjust the settings to globaly overwrite the defaults.
  2. If you use this as a Wordpress plugin along with !THE MASTER you can change the settings in the plugins tab.
  3. When creating a new intance of Xiphe\HTML you can pass an array of settings into the creation. Values set there will overwrite the global options just for this instance.
  4. An instance of Xiphe\HTML has the methods get_option(), set_option() and unset_option() get_option() will return the default option if the key is not set in the instance.

Code

$myHTML = new Xiphe\HTML(array(
  'tab' => '  ' // Set tab to two spaces.
));

printf('\'%s\'', $myHTML->getOption('tab'));

$myHTML->unsetOption('tab')->n(); // reset to global.

printf('\'%s\'', $myHTML->getOption('tab'));

Result (8 Chars)

'  '
'	'

tabs

Section: Global Options | Tags: global, settings, tabs, tab | Completed in: 1.6100407ms

The Tabs setting is used as counter for the current indention depth. Setting this as instance setting gains you the option to generate tags that does not use the global indention counter. This is especialy usefull for demo applications like this one. (Global tab count for document and internal for Demo results).

Type: integer Default: 0

Code

$testHtml = new Xiphe\HTML(); // Use Global Tabs
$testHtml2 = new Xiphe\HTML(array(
	'tabs' => 2 // Use internal Tabs
));
$HTML->unsetOption('tabs'); // Use global count
$HTML->div('This is not indented because global count is 0');

$HTML->setOption('tabs', 2); // Use internal Count
$HTML->div('This is indented because internal count is 2.');

$HTML->addTabs(-2); // this is the correct way to add and remove tabs.

$HTML->div('This not indented anymore.');

Result (155 Chars)

<div>This is not indented because global count is 0</div>
		<div>This is indented because internal count is 2.</div>
<div>This not indented anymore.</div>

tabWorth

Section: Global Options | Tags: global, settings, tab, clean | Completed in: 3.3130646ms

This is a verry advanced setting - normaly you do not need to change it.

The Worth of a Tab in spaces. When Clean Mode is set to "strong" a long string will be realigned so that a line is not longer than the maximal line width. This value will be multiplyed by the current indention count and substracted from the maximal line width.

Type: integer Default: 8

Code

$HTML->setOption('cleanMode', 'strong')
    ->setOption('tab', '  ')
    ->setOption('tabWorth', 2);

$lorem = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.';

$HTML->c_p($lorem);
$HTML->addTabs(8);
$HTML->c_p($lorem);

Result (650 Chars)

<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
  massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
  quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</p>
                <p>
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
                  eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
                  montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
                  pretium quis, sem.
                </p>

tab

Section: Global Options | Tags: global, settings, tab | Completed in: 1.9450188ms

The Tab setting is the symbol used to indent a new line.

Type: string Default: "\t"

Code

$HTML->setOption('tab', '  '); // Set tab to two spaces.

$HTML->s_div('#foo');
$HTML->div('This is indented with two spaces. (instance Setting)');
$HTML->end();

$HTML->unsetOption('tab')->n();

$HTML->s_div('#bar');
$HTML->div('This is indented with a tab. (global setting)');
$HTML->end();

Result (195 Chars)

<div id="foo">
  <div>This is indented with two spaces. (instance Setting)</div>
</div><!-- #foo -->

<div id="bar">
	<div>This is indented with a tab. (global setting)</div>
</div><!-- #bar -->

store

Section: Global Options | Tags: global, settings, store, tags, new instance | Completed in: 1.5041828ms

This is a verry advanced setting - normaly you do not need to change it.

Normaly started tags are stored globaly - every instance of HTML can use the end() method to close tabs opened by another instance. If an instance stores its opened tags internaly other instances can not close them with the end() method. An Instance of HTML using the internal store is also unable to close globaly stored tags. This is usefull for Demos like this one. (all examples use internal storage so they do not distract the markup outside the <pre\> tags.)

This is just a demonstration of the possibilities. Normally you want to end(\'all\') when returning from an internal store to global.

Type: string ("global"/"internal") Default: "global"

Code

$HTML->s_div('#foo');
$HTML->setOption('store', 'global'); // Reset to global because this demos use internal by default.
$HTML->s_p('#bar');
$HTML->setOption('store', 'internal');
$HTML->end(); // Ends #foo because it is the last opened tag from internal store.
$HTML->setOption('store', 'global');
$HTML->end(); // Ends #bar because it was the last opened tag from global store.

Result (68 Chars)

<div id="foo">
	<p id="bar">
	</div><!-- #foo -->
</p><!-- #bar -->

debug

Section: Global Options | Tags: global, settings, disbale | Completed in: 0.2191067ms

If and how debuging should be handled.

false skips every debug attempt 'Exception' throws an Exception, 'THEDEBUG' will try to use THEDEBUG from !THE MASTER

Type: string/boolean Default: false

Code

$HTML->setOption('debug', 'Exception');
try {
    $HTML->t_b_div('Lorem', '.foo');
} catch (\Exception $e) {
    echo $e->getMessage();
}

Result (37 Chars)

Invalid format in HTML Call "t_b_div"

break

Section: Global Options | Tags: global, settings, break | Completed in: 0.7410049ms

The default symbol to end a line.

Type: string Default: "\n"

Code

$HTML->setOption('break', ""); // No breaks (usefull for minimal output and ajax results.)

$HTML->div('Lorem', '.foo');
$HTML->div('Ipsum', '.bar');

Result (56 Chars)

<div class="foo">Lorem</div><div class="bar">Ipsum</div>

baseUrl

Section: Global Options | Tags: global, settings, url, magic url | Completed in: 1.1460781ms

The Base Url is used by the Magic Url replacement to replace any href or src attributes starting with a ./.

Type: string Default: "./"

Code

$HTML->setOption('baseUrl', "http://www.example.org");

$HTML->img('./img/example.jpg');
$HTML->a('Link', './subpage.html');

$HTML->unsetOption('baseUrl'); // Default.
$HTML->img('./img/example.jpg');

Result (176 Chars)

<img alt="example.jpg" src="http://www.example.org/img/example.jpg" />
<a href="http://www.example.org/subpage.html">Link</a>
<img alt="example.jpg" src="./img/example.jpg" />

maxLineWidth

Section: Global Options | Tags: global, settings, line width, clean | Completed in: 1.7421246ms

This is a verry advanced setting - normaly you do not need to change it.

The maximal width of a line of code when strong cleaning is activated.

Type: integer Default: 140

Code

$HTML->setOption('cleanMode', 'strong');

$lorem = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.';

$HTML->c_p($lorem);
$HTML->setOption('maxLineWidth', 40);
$HTML->c_p($lorem);

Result (549 Chars)

<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
	Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
	ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</p>
<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing
	elit. Aenean commodo ligula eget dolor. Aenean
	massa. Cum sociis natoque penatibus et magnis dis
	parturient montes, nascetur ridiculus mus. Donec
	quam felis, ultricies nec, pellentesque eu, pretium
	quis, sem.
</p>

disable

Section: Global Options | Tags: global, settings, disbale | Completed in: 0.4220009ms

Set true to disable tab generation (direct methods will work).

Type: boolean Default: false

Code

$HTML->div('Lorem', '.foo');
$HTML->setOption('disable', true);
$HTML->div('Ipsum', '.bar');

Result (29 Chars)

<div class="foo">Lorem</div>

noComments

Section: Global Options | Tags: global, settings, comments, disable | Completed in: 2.4881363ms

Set to true to skip comment tags.

Type: boolean Default: false

Code

for ($i=0; $i < 2; $i++) {
	if ($i === 1) {
		/* Disabling Comments on the second run */
		$HTML->setOption('noComments', true)->n();
	}

	$HTML->s_div('#foo')
		->span('LOREM')
	->end();
	$HTML->comment('This is a comment');
}

Result (125 Chars)

<div id="foo">
	<span>LOREM</span>
</div><!-- #foo -->
<!-- This is a comment -->

<div id="foo">
	<span>LOREM</span>
</div>

minLineWidth

Section: Global Options | Tags: global, settings, line width, clean | Completed in: 3.1468868ms

This is a verry advanced setting - normaly you do not need to change it.

The minimal width of a line of code when strong cleaning is activated. Has a higher status than maxLineWidth.

Type: integer Default: 50

Code

$HTML->setOption('cleanMode', 'strong');
$HTML->setOption('maxLineWidth', 100);

$lorem = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.';

$HTML->c_p($lorem); /* Content is max 92 symbols long 100(maxWidth)-8(Tabworth*1) */
$HTML->addTabs(1);
$HTML->c_p($lorem); /* Content is max 84 symbols long 100(maxWidth)-16(Tabworth*2) */
$HTML->addTabs(7);
$HTML->c_p($lorem); /* Content is max 50 symbols long (default)
					 * (should be 100-8*(1+7)=36 long without this setting)
					 */
$HTML->setOption('minLineWidth', 70);
$HTML->c_p($lorem); /* Content is max 70 symbols long (default) */

Result (1215 Chars)

<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
	Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
	ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</p>
	<p>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget
		dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
		nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
		quis, sem.
	</p>
								<p>
									Lorem ipsum dolor sit amet, consectetuer adipiscing
									elit. Aenean commodo ligula eget dolor. Aenean
									massa. Cum sociis natoque penatibus et magnis dis
									parturient montes, nascetur ridiculus mus. Donec
									quam felis, ultricies nec, pellentesque eu, pretium
									quis, sem.
								</p>
								<p>
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
									commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus
									et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
									felis, ultricies nec, pellentesque eu, pretium quis, sem.
								</p>

translator

Section: Global Options | Tags: global, settings, translation | Completed in: 0.4150867ms

Handles the translation for tags called with the translate tag option. Has to be a valid callback function.

Type: function Default: "__"

Code

/**
 * Think this as the default Wordpress translation method.
 * 
 * @param string $content the text that should be translated.
 * @param string $domain  identifier of the project/script (used in __ from Wordpress)
 * @return string the translation if found or the passed content.           [description]
 */
function __($content, $textdomain) {
	var_dump(func_get_args());
	return $content;
}
$HTML->x_p('Translate this.');

Result (102 Chars)

array(2) {
  [0]=>
  string(15) "Translate this."
  [1]=>
  string(4) "html"
}
<p>Translate this.</p>

textdomain

Section: Global Options | Tags: global, settings, translation, textdomain | Completed in: 0.4110336ms

Sets the textdomain passed as second argument to the translator.

Type: string Default: "html"

Code

/* __ function has been defined in the previous example */
$HTML->setOption('textdomain', 'myPlugin');
$HTML->x_p('Translate this.');

Result (106 Chars)

array(2) {
  [0]=>
  string(15) "Translate this."
  [1]=>
  string(8) "myPlugin"
}
<p>Translate this.</p>

Special Tags

Pseudo Tags

Section: Special Tags | Tags: specialtag, pseudo | Completed in: 6.3738823ms

There are some non-HTML-tags provided as shortcut to a specific tag/attr combo in cooperation with Default Attributes .zerowrap is a class i use for stacking elements on top of each other, while css position still is relative or static Here are examples:

Code

$HTML->comment('foo bar');
$HTML->s_div('.wrap')->blank('Lorem Ipsum')->end('.wrap');
$HTML->hidden('login');
$HTML->pw('password', false);
$HTML->zw();
$HTML->favicon('./icon.ico');
$HTML->clear();
$HTML->dclear();
$HTML->utf8();
$HTML->jquery();
$HTML->jqueryui();
$HTML->rederect('5; URL\=http://www.example.org');
$HTML->viewport();
$HTML->appleIcon('./icon.png');
$HTML->action('actionname');
$HTML->description('Lorem Ipsum');

Result (975 Chars)

<!-- foo bar -->
<div class="wrap">
	Lorem Ipsum
</div><!-- .wrap -->
<input id="action" name="action" type="hidden" value="login" />
<input id="password" name="password" type="password" />
<div class="zerowrap"></div>
<link href="http://www.example.org/icon.ico" rel="shortcut icon" type="image/ico" />
<br class="clear" />
<div class="clear"></div>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>
<meta content="5; URL=http://www.example.org" http-equiv="refresh" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link href="http://www.example.org/icon.png" rel="apple-touch-icon" />
<input id="action" name="action" type="hidden" value="actionname" />
<meta content="Lorem Ipsum" name="description" />

A label for inputs etc.

Section: Special Tags | Tags: specialtag, label, input | Completed in: 3.5769939ms

When generating a input, textfield or select tag, a label can be added as second/third parameter.

Per default the label will be named after the id of the input, false will return no label, a string will be the inner content of the label. An array or string can contain following options:

  • inner: the inner content
  • pos: after|before
  • sep: a string to put between label and input (def: "")
  • glue: "true" or "false". True to give the seperator a new line. ("true" is default if no seperator is set. "false" if not)

Code

$HTML->input('username');
$HTML->n(); // empty line

$HTML->input('foo', false);
$HTML->n();

$HTML->pw('password', 'Insert Password:');
$HTML->n();

$HTML->input('foo', 'sep=:|inner=Hello Foo');
$HTML->n();

$HTML->textarea(
    'Inner Content',
    'textarea',
    array(
        'inner' => 'This is a lable',
        'pos' => 'after',
        'sep' => $HTML->ri_span('/'),
        'glue' => false
    )
);

Result (443 Chars)

<label for="username">Username</label>
<input id="username" name="username" type="text" />

<input id="foo" name="foo" type="text" />

<label for="password">Insert Password:</label>
<input id="password" name="password" type="password" />

<label for="foo">Hello Foo</label>:<input id="foo" name="foo" type="text" />

<textarea id="textarea" name="textarea">Inner Content</textarea>
<span>/</span>
<label for="textarea">This is a lable</label>

The select() method

Section: Special Tags | Tags: specialtag, select | Completed in: 4.9359798ms

The select() method accepts up to four parameters.

  1. Attributes for the select tag.
  2. Array of options. the value can be a string or a Tag Object
  3. If this is a string an option with this value/content will be selected. If it is an integer the nth option will be selected. It is also possible to pass an array of values for multiple selections.
  4. The label.

Code

$HTML->select('user-role', array(
	 'admin' => 'Administrator',
	 'user' => 'Standard User',
	 'guest' => 'Mr. X',
), 'guest', 'Please choose a role');
$HTML->n();

$HTML->select('foo', array(
	 $HTML->t_option('Hello'),
	 $HTML->t_option('World', 'data-info=bar')
), 1, false);
$HTML->n();

$HTML->select('lorem', array(
	 'Test1',
	 'foo' => 'Test2',
	 'Test3',
	 'Test4'
), array('foo', 'Test4', 1));

Result (622 Chars)

<label for="user-role">Please choose a role</label>
<select id="user-role" name="user-role">
	<option value="admin">Administrator</option>
	<option value="user">Standard User</option>
	<option selected value="guest">Mr. X</option>
</select><!-- #user-role -->

<select id="foo" name="foo">
	<option selected>Hello</option>
	<option data-info="bar">World</option>
</select><!-- #foo -->

<label for="lorem">Lorem</label>
<select id="lorem" multiple name="lorem">
	<option selected>Test1</option>
	<option selected value="foo">Test2</option>
	<option>Test3</option>
	<option selected>Test4</option>
</select><!-- #lorem -->

The ul() and ol() methods

Section: Special Tags | Tags: specialtag, ol, ul | Completed in: 3.0379295ms

As seen in The select() method this methods are accepting an array of lis as a second parameter.

Code

$HTML->ul('foo', array(
	'a', 'b', 'c'
));
$HTML->n();

$HTML->ol('bar', array(
	'bar' => 'Lorem',
	'Ipsum',
	'rel=ipsum' => 'Dolor'
));

Result (181 Chars)

<ul class="foo">
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul><!-- .foo -->

<ol class="bar">
	<li class="bar">Lorem</li>
	<li>Ipsum</li>
	<li rel="ipsum">Dolor</li>
</ol><!-- .bar -->

The checkbox() method

Section: Special Tags | Tags: specialtag, script | Completed in: 1.7638206ms

The script() method will automaticly switch between embeded or extern scripts.

Code

$HTML->checkbox('foo', 'Be cool?', true);
$HTML->checkbox('bar', 'or not?');

Result (167 Chars)

<label for="foo">Be cool?</label>
<input checked id="foo" name="foo" type="checkbox" />
<label for="bar">or not?</label>
<input id="bar" name="bar" type="checkbox" />

The script() method

Section: Special Tags | Tags: specialtag, script | Completed in: 0.8881092ms

The script() method will automaticly switch between embeded or extern scripts.

Code

$HTML->script('./script.js');
$HTML->script('jQuery(document).ready(function($){ alert("hi"); });');

Result (173 Chars)

<script src="http://www.example.org/script.js" type="text/javascript"></script>
<script type="text/javascript">jQuery(document).ready(function($){ alert("hi"); });</script>

The blank() method

Section: Special Tags | Tags: specialtag, blank | Completed in: 1.1649132ms

This will parse the given content to fit into the tabbed markup but will not add any tags to it.

Code

$HTML->s_div();
echo 'Not that nice.';
$HTML->end();

$HTML->n();

$HTML->s_div()
	->blank('This is nicely indented text')
->end();

Result (71 Chars)

<div>
Not that nice.</div>

<div>
	This is nicely indented text
</div>

The HTML5() and XHTML() methods

Section: Special Tags | Tags: specialtag, html | Completed in: 6.2570572ms

Two methods to start a new HTML document.

The first parameter can be attributes for the head-tag, the second attributes for the html tag. if THETOOLS are availabe, some additional html classes will be set (browser, css-engine and ie classes).

Code

$HTML->HTML5()->end('all');

$HTML->n();

$HTML->XHTML('http://example.org/profile')->end('all');

$HTML->n();

$HTML->HTML5(null, '.myhtmlclass')
	->title('foo')
->end()
->s_body()
	->blank('Hello World!')
->end('all');

Result (786 Chars)

<!DOCTYPE HTML>
<html class="no-js">
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
	</head>
</html><!-- .no-js -->

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="no-js" xmlns="http://www.w3.org/1999/xhtml">
	<head profile="http://example.org/profile">
	</head>
</html><!-- .no-js -->

<!DOCTYPE HTML>
<html class="myhtmlclass no-js">
	<head>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
		<title>foo</title>
	</head>
	<body>
		Hello World!
	</body>
</html><!-- .myhtmlclass -->

The checkgroup() method

Section: Special Tags | Tags: specialtag, checkbox, checkgroup | Completed in: 3.6108494ms

This will parse the given content to fit into the tabbed markup but will not add any tags to it.

Code

$HTML->checkgroup(
	array(
		'myID1' => 'Hello Mister',
		'anotherId' => 'Foo',
		'whatsoever' => 'inner=Bar|sep=\=|pos=after',
		'mooh' => 'Cow makes'
	),
	array(
		'anotherId',
		4
	)
);

Result (379 Chars)

<label for="myID1">Hello Mister</label>
<input id="myID1" name="myID1" type="checkbox" />
<label for="anotherId">Foo</label>
<input checked id="anotherId" name="anotherId" type="checkbox" />
<input id="whatsoever" name="whatsoever" type="checkbox" />=<label for="whatsoever">Bar</label>
<label for="mooh">Cow makes</label>
<input checked id="mooh" name="mooh" type="checkbox" />

The if() method

Section: Special Tags | Tags: specialtag, if | Completed in: 2.8560162ms

HTML conditions. Comments are disabled inside conditions

Code

$HTML->s_div('#wrap')
	->if('lt IE 7')
		->s_p('.foo')
			->a('A Link', '#')
			->comment('deactivated')
->end('#wrap');

Result (121 Chars)

<div id="wrap">
	<!--[if lt IE 7]>
		<p class="foo">
			<a href="#">A Link</a>
		</p>
	<![endif]-->
</div><!-- #wrap -->

Tag Options

s for start

Section: Tag Options | Tags: tag options, options, start | Completed in: 0.7870197ms

This starts a tag that can contain content and registers it to be ended when The end() Method is called. This will also register an identifyer of the tag (the #id or first .class) to be added as a comment when the tag is closed.

Code

$HTML->s_div('#foo')->end();

Result (35 Chars)

<div id="foo">
</div><!-- #foo -->

r for return

Section: Tag Options | Tags: tag options, options, return | Completed in: 0.412941ms

Returns the generated content.

Code

$div = $HTML->r_div('foo', 'bar');
echo "Lorem Ipsum\n";
echo $div;

Result (39 Chars)

Lorem Ipsum
<div class="bar">foo</div>

i for inline

Section: Tag Options | Tags: tag options, options, inline | Completed in: 0.9558201ms

Generates a tag without tabs and breaks.

Code

$HTML->addTabs(5); // Pretend we are deeply nested.

$string = 'This is '.$HTML->ri_span('what', '.foo').' you want.';
print_r($string);
$HTML->n()->n();

$string = 'This '.$HTML->r_span('looks', '.bar').' strange.';
print_r($string);

Result (99 Chars)

This is <span class="foo">what</span> you want.

This 					<span class="bar">looks</span>
 strange.

l for inLine Inner

Section: Tag Options | Tags: tag options, options, inline inner | Completed in: 0.5638599ms

Generates the content without tabs and line breaks. This is appended to most tags as long as the content has no line breaks and is not longer as specified in the global options

Code

$longString = 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.';
$HTML->p($longString);
$HTML->l_p($longString);

Result (401 Chars)

<p>
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

f for forbid inline inner

Section: Tag Options | Tags: tag options, options, tag, forbid inline inner, inline, inner | Completed in: 0.5741119ms

This option puts the tags content always into a new line.

Code

$HTML->div('Foo');
$HTML->f_div('Bar');

Result (33 Chars)

<div>Foo</div>
<div>
	Bar
</div>

g for generate

Section: Tag Options | Tags: tag options, options, generate | Completed in: 1.6140938ms

Bypasses the Special Tags

Code

$HTML->g_select('foo', array('class' => 'bar')); // standard
$HTML->n();
$HTML->select('foo', array('class' => 'bar')); // special behaviour

Result (151 Chars)

<select class="bar">foo</select>

<label for="foo">Foo</label>
<select id="foo" name="foo">
	<option value="class">bar</option>
</select><!-- #foo -->

m for markdowm

Section: Tag Options | Tags: tag options, options, markdown | Completed in: 5.8660507ms

Parses markdown-syntax in the tags content.

Code

$HTML->m_blank('# h1
**strong** _em_');

Result (55 Chars)

<h1>h1</h1>
<p><strong>strong</strong> <em>em</em></p>

t for tag object

Section: Tag Options | Tags: tag options, options, tag, object | Completed in: 0.3449917ms

Just creates a Tag object and returns it directly.

Code

$Div = $HTML->t_div('Content', 'foo=bar');
print_r($Div);

Diff

OldNewDifferences
3434   [_closed:Xiphe\HTML\core\Tag:private] =>
3535   [_contentPrinted:Xiphe\HTML\core\Tag:private] =>
3636   [_configuration:protected] =>
 37   [_defaultConfiguration:protected] => Array 
 38       ( 
 39       ) 
 40 
3741   [_initArgs:protected] => Array
3842       (
3943       )

Result (945 Chars)

Xiphe\HTML\core\Tag Object
(
    [ID] => 189
    [name] => div
    [realName] => div
    [options] => Array
        (
            [0] => justGetObject
        )

    [attributes] => Array
        (
            [foo] => bar
        )

    [content] => Content
    [brackets] => Array
        (
            [start] => <:name
            [end] => </:name
            [close_start] => >
            [close_short] =>  />
            [close_end] => >
        )

    [attributeString] =>  foo="bar"
    [classes] => Array
        (
        )

    [inlineInner] => 1
    [selfclosing] => 
    [_opened:Xiphe\HTML\core\Tag:private] => 
    [_closed:Xiphe\HTML\core\Tag:private] => 
    [_contentPrinted:Xiphe\HTML\core\Tag:private] => 
    [_configuration:protected] => 
    [_defaultConfiguration:protected] => Array
        (
        )

    [_initArgs:protected] => Array
        (
        )

    [_callbacks:protected] => Array
        (
        )

)

Prediction (877 Chars)

Xiphe\HTML\core\Tag Object
(
    [ID] => 189
    [name] => div
    [realName] => div
    [options] => Array
        (
            [0] => justGetObject
        )

    [attributes] => Array
        (
            [foo] => bar
        )

    [content] => Content
    [brackets] => Array
        (
            [start] => <:name
            [end] => </:name
            [close_start] => >
            [close_short] =>  />
            [close_end] => >
        )

    [attributeString] =>  foo="bar"
    [classes] => Array
        (
        )

    [inlineInner] => 1
    [selfclosing] => 
    [_opened:Xiphe\HTML\core\Tag:private] => 
    [_closed:Xiphe\HTML\core\Tag:private] => 
    [_contentPrinted:Xiphe\HTML\core\Tag:private] => 
    [_configuration:protected] => 
    [_initArgs:protected] => Array
        (
        )

    [_callbacks:protected] => Array
        (
        )

)

o for tag object

Section: Tag Options | Tags: tag options, options, tag, object | Completed in: 0.3919601ms

This returns the tag object after its output was made.

Code

$Div = $HTML->o_div('Content', 'foo=bar');
print_r($Div->ID);

Result (32 Chars)

<div foo="bar">Content</div>
190

q for selfclose

Section: Tag Options | Tags: tag options, options, selfclose | Completed in: 0.2799034ms

Forces this tag to be self-closing

Code

$Div = $HTML->q_div('foo=bar');

Result (18 Chars)

<div foo="bar" />

p for comPress

Section: Tag Options | Tags: tag options, options, compress, css, js | Completed in: 1.4920235ms

Removes Comments and unifyes whitespace.

Code

$script = '
jQuery(document).ready(function($) {
	alert(\'HELP!\'); // Comments will be stripped.
}
';
$HTML->p_script($script);

$css = '
#foo {
	/* comment */
	margin: 0 auto 20px auto;
	background: black;
}
';
$HTML->n()->p_css($css);

Result (201 Chars)

<script type="text/javascript">jQuery(document).ready(function($){alert('HELP!');}</script>

<style media="all" rel="stylesheet" type="text/css">#foo{margin:0 auto 20px auto;background:black;}</style>

d for don't selfclose

Section: Tag Options | Tags: tag options, options, don't selfclose | Completed in: 0.2839565ms

Forces this tag to be not self-closing

Code

$Div = $HTML->d_br('?!?' ,'foo=bar');

Result (23 Chars)

<br foo="bar">?!?</br>

c for Clean Content

Section: Tag Options | Tags: tag options, options, tag, clean | Completed in: 4.2760372ms

When the tags content contains html markup it can be parsed to fit into the output generated by html. See cleanMode Settings for more informations.

Cleaning the content has a strong impact in performance. Use it wisely. Strong cleaning also cleans up misspelled closing tags. (See ul + ol in example)

Code

$markup = '<div id="foo"><ul><li>A</li><li>B</li><li>C</li></ol>
Lorem Ipsum</div>';
$CleaningHTML = new Xiphe\HTML(array(
	'tabs' => 0,
	'cleanMode' => 'strong'
));
$HTML->div($markup, '#wrap'); // no cleaning.

$HTML->n();

$HTML->c_div($markup, '#wrap'); // basic cleaning (default)

$HTML->n();

$CleaningHTML->c_div($markup, '#wrap'); // strong cleaning

Result (368 Chars)

<div id="wrap">
	<div id="foo"><ul><li>A</li><li>B</li><li>C</li></ol>
Lorem Ipsum</div>
</div><!-- #wrap -->

<div id="wrap">
	<div id="foo"><ul><li>A</li><li>B</li><li>C</li></ol>
	Lorem Ipsum</div>
</div><!-- #wrap -->

<div id="wrap">
	<div id="foo">
		<ul>
			<li>A</li>
			<li>B</li>
			<li>C</li>
		</ul>
		Lorem Ipsum
	</div><!-- #foo -->
</div><!-- #wrap -->

n for do NOT clean content

Section: Tag Options | Tags: tag options, options, tag, dont clean | Completed in: 2.3570061ms

If the clean Setting is set to true. This tag option negatiates it.

Code

$markup = '<div class="foo"><div class="bar">Lorem!</dvi></div>';
$CleaningHTML = new Xiphe\HTML(array(
	'tabs' => 0,
	'clean' => true,
	'cleanMode' => 'strong'
));
$CleaningHTML->f_div($markup, '#wrap'); // no cleaning.

$HTML->n();

$CleaningHTML->n_div($markup, '#wrap'); // basic cleaning (default)

Result (184 Chars)

<div id="wrap">
	<div class="foo">
		<div class="bar">Lorem!</div>
	</div><!-- .foo -->
</div><!-- #wrap -->

<div id="wrap"><div class="foo"><div class="bar">Lorem!</dvi></div></div>

x for translate

Section: Tag Options | Tags: tag options, options, translation | Completed in: 0.4389286ms

If the translator option is a valid callback this tag option will run the tags content throu it.

Code

/*
 * A translation Array
 */
$lang = array('Hello World!' => 'Hallo Welt!');

/**
 * Checks if the passed content has a translation entry in $lang
 * and returns it.
 *
 * @param string $content the text that should be translated.
 * @param string $domain  identifier of the project/script (used in __ from Wordpress)
 * @return string the translation if found or the passed content.
 */
$translator = function ($content, $domain) use ($lang) {
	if (isset($lang[$content])) {
		return $lang[$content];
	}

	return $content;
};

/*
 * Tell HTML to use our translator function.
 */
$HTML->setOption('translator', $translator);

/*
 * Use the tag option to run the content through our translator.
 */
$HTML->x_p('Hello World!');

Result (19 Chars)

<p>Hallo Welt!</p>

Misc

default config

Section: Misc | Tags: settings, default | Completed in: 0.0629425ms

Here are the default settings from Xiphe\HTML\core\config.

Code

var_dump(Xiphe\HTML\core\Config::getDefaults());

Result (556 Chars)

array(17) {
  ["baseUrl"]=>
  string(2) "./"
  ["noComments"]=>
  bool(false)
  ["magicUrl"]=>
  bool(true)
  ["disable"]=>
  bool(false)
  ["cleanwpoutput"]=>
  bool(true)
  ["translator"]=>
  string(2) "__"
  ["textdomain"]=>
  string(4) "html"
  ["tabs"]=>
  int(0)
  ["tab"]=>
  string(1) "	"
  ["break"]=>
  string(1) "
"
  ["debug"]=>
  string(8) "disabled"
  ["store"]=>
  string(6) "global"
  ["tabWorth"]=>
  int(4)
  ["maxLineWidth"]=>
  int(140)
  ["minLineWidth"]=>
  int(50)
  ["clean"]=>
  bool(false)
  ["cleanMode"]=>
  string(5) "basic"
}

auto sprintf

Section: Misc | Tags: sprintf, args, tag, content | Completed in: 0.4241467ms

If you pass more than two arguments to a tag generation, HTML will try to sprintf them into the content string. This does not work on special tags, starting tags and self-closing tags.

Code

$var = 'World';
$HTML->p('Hello %s', '.foo', $var);

Result (31 Chars)

<p class="foo">Hello World</p>

googleanalytics

Section: Misc | Tags: google, analytics, compressed, short | Completed in: 1.9471645ms

Simply generates a tracking script with the user account you passed.

Code

$HTML->googleanalytics('UA-0000000-0');

Diff

OldNewDifferences
1 <script type="text/javascript">var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-0000000-0']);_gaq.push(['_trackPageview']);(function(){var ga=document.createElement('script');ga.type='text/javascript';ga.async=true;ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s);})();</script>
1 <script type="text/javascript">(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create','UA-0000000-0');ga('send','pageview');</script>
22

Result (400 Chars)

<script type="text/javascript">(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create','UA-0000000-0');ga('send','pageview');</script>

Prediction (412 Chars)

<script type="text/javascript">var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-0000000-0']);_gaq.push(['_trackPageview']);(function(){var ga=document.createElement('script');ga.type='text/javascript';ga.async=true;ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s);})();</script>