summaryrefslogtreecommitdiffstats
path: root/user_guide_src/source/helpers/html_helper.rst
blob: 9e9d7ca62f45a5b5fa5bb594943ca23ce827244d (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
###########
HTML Helper
###########

The HTML Helper file contains functions that assist in working with
HTML.

.. contents::
	:local:

.. raw:: html

	<div class="custom-index container"></div>

Loading this Helper
===================

This helper is loaded using the following code::

	$this->load->helper('html');

Available Functions
===================

The following functions are available:


.. function:: br([$count = 1])

	:param	int	$count: Number of times to repeat the tag
	:returns:	string

	Generates line break tags (<br />) based on the number you submit.
	Example::

		echo br(3);

	The above would produce:

	.. code-block:: html

		<br /><br /><br />


.. function:: heading([$data = ''[, $h = '1'[, $attributes = '']]])

	:param	string	$data: Content
	:param	string	$h: Heading level
	:param	array	$attributes: HTML attributes
	:returns:	string

	Lets you create HTML heading tags. The first parameter will contain the
	data, the second the size of the heading. Example::

		echo heading('Welcome!', 3);

	The above would produce: <h3>Welcome!</h3>

	Additionally, in order to add attributes to the heading tag such as HTML
	classes, ids or inline styles, a third parameter is available::

		echo heading('Welcome!', 3, 'class="pink"')

	The above code produces:

	.. code-block:: html

		<h3 class="pink">Welcome!<h3>


.. function:: img([$src = ''[, $index_page = FALSE[, $attributes = '']]])

	:param	string	$src: Image source data
	:param	bool	$index_page: Whether to treat $src as a routed URI string
	:param	array	$attributes: HTML attributes
	:returns:	string

	Lets you create HTML <img /> tags. The first parameter contains the
	image source. Example::

		echo img('images/picture.jpg'); // gives <img src="http://site.com/images/picture.jpg" />

	There is an optional second parameter that is a TRUE/FALSE value that
	specifics if the *src* should have the page specified by
	``$config['index_page']`` added to the address it creates.
	Presumably, this would be if you were using a media controller::

		echo img('images/picture.jpg', TRUE); // gives <img src="http://site.com/index.php/images/picture.jpg" alt="" />

	Additionally, an associative array can be passed to the ``img()`` function
	for complete control over all attributes and values. If an *alt* attribute
	is not provided, CodeIgniter will generate an empty string.

	Example::

		$image_properties = array(
			'src' 	=> 'images/picture.jpg',
			'alt' 	=> 'Me, demonstrating how to eat 4 slices of pizza at one time',
			'class' => 'post_images',
			'width' => '200',
			'height'=> '200',
			'title' => 'That was quite a night',
			'rel' 	=> 'lightbox'
		);

		img($image_properties);
		// <img src="http://site.com/index.php/images/picture.jpg" alt="Me, demonstrating how to eat 4 slices of pizza at one time" class="post_images" width="200" height="200" title="That was quite a night" rel="lightbox" />


.. function:: ling_tag([$href = ''[, $rel = 'stylesheet'[, $type = 'text/css'[, $title = ''[, $media = ''[, $index_page = FALSE]]]]]])

	:param	string	$href: What are we linking to
	:param	string	$rel: Relation type
	:param	string	$type: Type of the related document
	:param	string	$title: Link title
	:param	string	$media: Media type
	:param	bool	$index_page: Whether to treat $src as a routed URI string
	:returns:	string

	Lets you create HTML <link /> tags. This is useful for stylesheet links,
	as well as other links. The parameters are *href*, with optional *rel*,
	*type*, *title*, *media* and *index_page*.

	*index_page* is a boolean value that specifies if the *href* should have
	the page specified by ``$config['index_page']`` added to the address it creates.

	Example::

		echo link_tag('css/mystyles.css');
		// gives <link href="http://site.com/css/mystyles.css" rel="stylesheet" type="text/css" />

	Further examples::

		echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');
		// <link href="http://site.com/favicon.ico" rel="shortcut icon" type="image/ico" />

		echo link_tag('feed', 'alternate', 'application/rss+xml', 'My RSS Feed');
		// <link href="http://site.com/feed" rel="alternate" type="application/rss+xml" title="My RSS Feed" />

	Additionally, an associative array can be passed to the ``link()`` function
	for complete control over all attributes and values::

		$link = array(
			'href'	=> 'css/printer.css',
			'rel'	=> 'stylesheet',
			'type'	=> 'text/css',
			'media'	=> 'print'
		);

		echo link_tag($link);
		// <link href="http://site.com/css/printer.css" rel="stylesheet" type="text/css" media="print" />


.. function:: nbs([$num = 1])

	:param	int	$num: Number of space entities to produce
	:returns:	string

	Generates non-breaking spaces (&nbsp;) based on the number you submit.
	Example::

		echo nbs(3);

	The above would produce:

	.. code-block:: html

		&nbsp;&nbsp;&nbsp;


.. function:: ul($list[, $attributes = ''])

	:param	array	$list: List entries
	:param	array	$attributes: HTML attributes
	:returns:	string

	Permits you to generate ordered or unordered HTML lists from simple or
	multi-dimensional arrays. Example::

		$list = array(
			'red',
			'blue',
			'green',
			'yellow'
		);

		$attributes = array(
			'class'	=> 'boldlist',
			'id'	=> 'mylist'
		);

		echo ul($list, $attributes);

	The above code will produce this:

	.. code-block:: html

		<ul class="boldlist" id="mylist">
			<li>red</li>
			<li>blue</li>
			<li>green</li>
			<li>yellow</li>
		</ul>

	Here is a more complex example, using a multi-dimensional array::

		$attributes = array(
			'class'	=> 'boldlist',
			'id'	=> 'mylist'
		);

		$list = array(
			'colors'  => array(
				'red',
				'blue',
				'green'
			),
			'shapes'  => array(
				'round',
				'square',
				'circles' => array(
					'ellipse',
					'oval',
					'sphere'
				)
			),
			'moods'  => array(
				'happy',
				'upset' => array(
					'defeated' => array(
						'dejected',
						'disheartened',
						'depressed'
					),
					'annoyed',
					'cross',
					'angry'
				)
			)
		);

		echo ul($list, $attributes);

	The above code will produce this:

	.. code-block:: html

		<ul class="boldlist" id="mylist">
			<li>colors
				<ul>
					<li>red</li>
					<li>blue</li>
					<li>green</li>
				</ul>
			</li>
			<li>shapes
				<ul>
					<li>round</li>
					<li>suare</li>
					<li>circles
						<ul>
							<li>elipse</li>
							<li>oval</li>
							<li>sphere</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>moods
				<ul>
					<li>happy</li>
					<li>upset
						<ul>
							<li>defeated
								<ul>
									<li>dejected</li>
									<li>disheartened</li>
									<li>depressed</li>
								</ul>
							</li>
							<li>annoyed</li>
							<li>cross</li>
							<li>angry</li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>

.. function:: ol($list, $attributes = '')

	:param	array	$list: List entries
	:param	array	$attributes: HTML attributes
	:returns:	string

	Identical to :func:`ul()`, only it produces the <ol> tag for
	ordered lists instead of <ul>.


.. function:: meta([$name = ''[, $content = ''[, $type = 'name'[, $newline = "\n"]]]])

	:param	string	$name: Meta name
	:param	string	$content: Meta content
	:param	string	$type: Meta type
	:param	string	$newline: Newline character
	:returns:	string

	Helps you generate meta tags. You can pass strings to the function, or
	simple arrays, or multidimensional ones.

	Examples::

		echo meta('description', 'My Great site');
		// Generates:  <meta name="description" content="My Great Site" />

		echo meta('Content-type', 'text/html; charset=utf-8', 'equiv');
		// Note the third parameter.  Can be "equiv" or "name"
		// Generates:  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

		echo meta(array('name' => 'robots', 'content' => 'no-cache'));
		// Generates:  <meta name="robots" content="no-cache" />

		$meta = array(
			array(
				'name' => 'robots',
				'content' => 'no-cache'
			),
			array(
				'name' => 'description',
				'content' => 'My Great Site'
			),
			array(
				'name' => 'keywords',
				'content' => 'love, passion, intrigue, deception'
			),
			array(
				'name' => 'robots',
				'content' => 'no-cache'
			),
			array(
				'name' => 'Content-type',
				'content' => 'text/html; charset=utf-8', 'type' => 'equiv'
			)
		);

		echo meta($meta);
		// Generates:
		// <meta name="robots" content="no-cache" />
		// <meta name="description" content="My Great Site" />
		// <meta name="keywords" content="love, passion, intrigue, deception" />
		// <meta name="robots" content="no-cache" />
		// <meta http-equiv="Content-type" content="text/html; charset=utf-8" />


.. function:: doctype([$type = 'xhtml1-strict'])

	:param	string	$type: Doctype name

	Helps you generate document type declarations, or DTD's. XHTML 1.0
	Strict is used by default, but many doctypes are available.

	Example::

		echo doctype(); // <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

		echo doctype('html4-trans'); // <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

	The following is a list of doctype choices. These are configurable, and
	pulled from application/config/doctypes.php

	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| Doctype                       | Option                       | Result                                                                                                                                           |
	+===============================+==============================+==================================================================================================================================================+
	| XHTML 1.1                     | doctype('xhtml11')           | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">                                                |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| XHTML 1.0 Strict              | doctype('xhtml1-strict')     | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">                                    |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| XHTML 1.0 Transitional        | doctype('xhtml1-trans')      | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                        |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| XHTML 1.0 Frameset            | doctype('xhtml1-frame')      | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">                                |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| XHTML Basic 1.1               | doctype('xhtml-basic11')     | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">                                    |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| HTML 5                        | doctype('html5')             | <!DOCTYPE html>                                                                                                                                  |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| HTML 4 Strict                 | doctype('html4-strict')      | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">                                                       |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| HTML 4 Transitional           | doctype('html4-trans')       | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">                                           |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| HTML 4 Frameset               | doctype('html4-frame')       | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">                                            |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| MathML 1.01                   | doctype('mathml1')	       | <!DOCTYPE math SYSTEM "http://www.w3.org/Math/DTD/mathml1/mathml.dtd">                                                                           |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| MathML 2.0                    | doctype('mathml2')           | <!DOCTYPE math PUBLIC "-//W3C//DTD MathML 2.0//EN" "http://www.w3.org/Math/DTD/mathml2/mathml2.dtd">                                             |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| SVG 1.0                       | doctype('svg10')             | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">                                       |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| SVG 1.1 Full                  | doctype('svg11')             | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">                                               |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| SVG 1.1 Basic                 | doctype('svg11-basic')       | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">                                   |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| SVG 1.1 Tiny                  | doctype('svg11-tiny')        | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">                                     |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| XHTML+MathML+SVG (XHTML host) | doctype('xhtml-math-svg-xh') | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">    |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| XHTML+MathML+SVG (SVG host)   | doctype('xhtml-math-svg-sh') | <!DOCTYPE svg:svg PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| XHTML+RDFa 1.0                | doctype('xhtml-rdfa-1')      | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">                                          |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+
	| XHTML+RDFa 1.1                | doctype('xhtml-rdfa-2')      | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.1//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd">                                          |
	+-------------------------------+------------------------------+--------------------------------------------------------------------------------------------------------------------------------------------------+