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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Helper : CodeIgniter User Guide</title>
<style type='text/css' media='all'>@import url('../userguide.css');</style>
<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />
<script type="text/javascript" src="../nav/nav.js"></script>
<script type="text/javascript" src="../nav/prototype.lite.js"></script>
<script type="text/javascript" src="../nav/moo.fx.js"></script>
<script type="text/javascript" src="../nav/user_guide_menu.js"></script>
<meta http-equiv='expires' content='-1' />
<meta http-equiv= 'pragma' content='no-cache' />
<meta name='robots' content='all' />
<meta name='author' content='ExpressionEngine Dev Team' />
<meta name='description' content='CodeIgniter User Guide' />
</head>
<body>
<!-- START NAVIGATION -->
<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
<div id="nav2"><a name="top"></a><a href="javascript:void(0);" onclick="myHeight.toggle();"><img src="../images/nav_toggle_darker.jpg" width="154" height="43" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div>
<div id="masthead">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td><h1>CodeIgniter User Guide Version 2.1.4</h1></td>
<td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
</tr>
</table>
</div>
<!-- END NAVIGATION -->
<!-- START BREADCRUMB -->
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td id="breadcrumb">
<a href="http://codeigniter.com/">CodeIgniter Home</a> ›
<a href="../index.html">User Guide Home</a> ›
HTML Helper
</td>
<td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="ellislab.com/codeigniter/user-guide/" />Search User Guide <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" /> <input type="submit" class="submit" name="sa" value="Go" /></form></td>
</tr>
</table>
<!-- END BREADCRUMB -->
<br clear="all" />
<!-- START CONTENT -->
<div id="content">
<h1>HTML Helper</h1>
<p>The HTML Helper file contains functions that assist in working with HTML.</p>
<ul>
<li><a href="#br">br()</a></li>
<li><a href="#heading">heading()</a></li>
<li><a href="#img">img()</a></li>
<li><a href="#link_tag">link_tag()</a></li>
<li><a href="#nbs">nbs()</a></li>
<li><a href="#ol_and_ul">ol() and ul()</a></li>
<li><a href="#meta">meta()</a></li>
<li><a href="#doctype">doctype()</a></li>
</ul>
<h2>Loading this Helper</h2>
<p>This helper is loaded using the following code:</p>
<code>$this->load->helper('html');</code>
<p>The following functions are available:</p>
<h2><a name="br"></a>br()</h2>
<p>Generates line break tags (<br />) based on the number you submit. Example:</p>
<code>echo br(3);</code>
<p>The above would produce: <br /><br /><br /></p>
<h2><a name="heading"></a>heading()</h2>
<p>Lets you create HTML <h1> tags. The first parameter will contain the data, the
second the size of the heading. Example:</p>
<code>echo heading('Welcome!', 3);</code>
<p>The above would produce: <h3>Welcome!</h3></p>
<p>Additionally, in order to add attributes to the heading tag such as HTML classes, ids or inline styles, a third parameter is available.</p>
<code>echo heading('Welcome!', 3, 'class="pink"')</code>
<p>The above code produces: <h3 class="pink">Welcome!<<h3></p>
<h2><a name="img"></a>img()</h2>
<p>Lets you create HTML <img /> tags. The first parameter contains the image source. Example:</p>
<code>echo img('images/picture.jpg');<br />
// gives <img src="http://site.com/images/picture.jpg" /></code>
<p>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.</p>
<p><code>echo img('images/picture.jpg', TRUE);<br />
// gives <img src="http://site.com/index.php/images/picture.jpg" alt="" /></code></p>
<p>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.</p>
<p><code> $image_properties = array(<br />
'src' => 'images/picture.jpg',<br />
'alt' => 'Me, demonstrating how to eat 4 slices of pizza at one time',<br />
'class' => 'post_images',<br />
'width' => '200',<br />
'height' => '200',<br />
'title' => 'That was quite a night',<br />
'rel' => 'lightbox',<br />
);<br />
<br />
img($image_properties);<br />
// <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" /></code></p>
<h2><a name="link_tag"></a>link_tag()</h2>
<p>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 TRUE/FALSE value that specifics if the href should have the page specified by $config['index_page'] added to the address it creates.<code>
echo link_tag('css/mystyles.css');<br />
// gives <link href="http://site.com/css/mystyles.css" rel="stylesheet" type="text/css" /></code></p>
<p>Further examples:</p>
<code>
echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');<br />
// <link href="http://site.com/favicon.ico" rel="shortcut icon" type="image/ico" />
<br />
<br />
echo link_tag('feed', 'alternate', 'application/rss+xml', 'My RSS Feed');<br />
// <link href="http://site.com/feed" rel="alternate" type="application/rss+xml" title="My RSS Feed" /> </code>
<p>Additionally, an associative array can be passed to the link() function for complete control over all attributes and values.</p>
<p><code>
$link = array(<br />
'href' => 'css/printer.css',<br />
'rel' => 'stylesheet',<br />
'type' => 'text/css',<br />
'media' => 'print'<br />
);<br />
<br />
echo link_tag($link);<br />
// <link href="http://site.com/css/printer.css" rel="stylesheet" type="text/css" media="print" /></code></p>
<h2><a name="nbs"></a>nbs()</h2>
<p>Generates non-breaking spaces (&nbsp;) based on the number you submit. Example:</p>
<code>echo nbs(3);</code>
<p>The above would produce: &nbsp;&nbsp;&nbsp;</p>
<h2><a name="ol_and_ul"></a>ol() and ul()</h2>
<p>Permits you to generate ordered or unordered HTML lists from simple or multi-dimensional arrays. Example:</p>
<code>
$this->load->helper('html');<br />
<br />
$list = array(<br />
'red', <br />
'blue', <br />
'green',<br />
'yellow'<br />
);<br />
<br />
$attributes = array(<br />
'class' => 'boldlist',<br />
'id' => 'mylist'<br />
);<br />
<br />
echo ul($list, $attributes);<br />
</code>
<p>The above code will produce this:</p>
<code>
<ul class="boldlist" id="mylist"><br />
<li>red</li><br />
<li>blue</li><br />
<li>green</li><br />
<li>yellow</li><br />
</ul>
</code>
<p>Here is a more complex example, using a multi-dimensional array:</p>
<code>
$this->load->helper('html');<br />
<br />
$attributes = array(<br />
'class' => 'boldlist',<br />
'id' => 'mylist'<br />
);<br />
<br />
$list = array(<br />
'colors' => array(<br />
'red',<br />
'blue',<br />
'green'<br />
),<br />
'shapes' => array(<br />
'round', <br />
'square',<br />
'circles' => array(<br />
'ellipse', <br />
'oval', <br />
'sphere'<br />
)<br />
),<br />
'moods' => array(<br />
'happy', <br />
'upset' => array(<br />
'defeated' => array(<br />
'dejected',<br />
'disheartened',<br />
'depressed'<br />
),<br />
'annoyed',<br />
'cross',<br />
'angry'<br />
)<br />
)<br />
);<br />
<br />
<br />
echo ul($list, $attributes);</code>
<p>The above code will produce this:</p>
<code>
<ul class="boldlist" id="mylist"><br />
<li>colors<br />
<ul><br />
<li>red</li><br />
<li>blue</li><br />
<li>green</li><br />
</ul><br />
</li><br />
<li>shapes<br />
<ul><br />
<li>round</li><br />
<li>suare</li><br />
<li>circles<br />
<ul><br />
<li>elipse</li><br />
<li>oval</li><br />
<li>sphere</li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li>moods<br />
<ul><br />
<li>happy</li><br />
<li>upset<br />
<ul><br />
<li>defeated<br />
<ul><br />
<li>dejected</li><br />
<li>disheartened</li><br />
<li>depressed</li><br />
</ul><br />
</li><br />
<li>annoyed</li><br />
<li>cross</li><br />
<li>angry</li><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
</ul>
</code>
<h2><a name="meta"></a>meta()</h2>
<p>Helps you generate meta tags. You can pass strings to the function, or simple arrays, or multidimensional ones. Examples:</p>
<code>
echo meta('description', 'My Great site');<br />
// Generates: <meta name="description" content="My Great Site" /><br />
<br /><br />
echo meta('Content-type', 'text/html; charset=utf-8', 'equiv'); // Note the third parameter. Can be "equiv" or "name"<br />
// Generates: <meta http-equiv="Content-type" content="text/html; charset=utf-8" /><br />
<br /><br />
echo meta(array('name' => 'robots', 'content' => 'no-cache'));<br />
// Generates: <meta name="robots" content="no-cache" /><br />
<br /><br />
$meta = array(<br />
array('name' => 'robots', 'content' => 'no-cache'),<br />
array('name' => 'description', 'content' => 'My Great Site'),<br />
array('name' => 'keywords', 'content' => 'love, passion, intrigue, deception'),<br />
array('name' => 'robots', 'content' => 'no-cache'),<br />
array('name' => 'Content-type', 'content' => 'text/html; charset=utf-8', 'type' => 'equiv')<br />
);<br />
<br />
echo meta($meta);
<br />
// Generates: <br />
// <meta name="robots" content="no-cache" /><br />
// <meta name="description" content="My Great Site" /><br />
// <meta name="keywords" content="love, passion, intrigue, deception" /><br />
// <meta name="robots" content="no-cache" /><br />
// <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</code>
<h2><a name="doctype"></a>doctype()</h2>
<p>Helps you generate document type declarations, or DTD's. XHTML 1.0 Strict is used by default, but many doctypes are available.</p>
<code>
echo doctype();<br />
// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<br />
echo doctype('html4-trans');<br />
// <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
</code>
<p>The following is a list of doctype choices. These are configurable, and pulled from <samp>application/config/doctypes.php</samp></p>
<table cellpadding="0" cellspacing="1" border="0" style="width:100%" class="tableborder">
<tr>
<th>Doctype</th>
<th>Option</th>
<th>Result</th>
</tr>
<tr>
<td class="td">XHTML 1.1</td>
<td class="td">doctype('xhtml11')</td>
<td class="td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></td>
</tr>
<tr>
<td class="td">XHTML 1.0 Strict</td>
<td class="td">doctype('xhtml1-strict')</td>
<td class="td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></td>
</tr>
<tr>
<td class="td">XHTML 1.0 Transitional</td>
<td class="td">doctype('xhtml1-trans')</td>
<td class="td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></td>
</tr>
<tr>
<td class="td">XHTML 1.0 Frameset</td>
<td class="td">doctype('xhtml1-frame')</td>
<td class="td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"></td>
</tr>
<tr>
<td class="td">HTML 5</td>
<td class="td">doctype('html5')</td>
<td class="td"><!DOCTYPE html></td>
</tr>
<tr>
<td class="td">HTML 4 Strict</td>
<td class="td">doctype('html4-strict')</td>
<td class="td"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></td>
</tr>
<tr>
<td class="td">HTML 4 Transitional</td>
<td class="td">doctype('html4-trans')</td>
<td class="td"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></td>
</tr>
<tr>
<td class="td">HTML 4 Frameset</td>
<td class="td">doctype('html4-frame')</td>
<td class="td"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"></td>
</tr>
</table>
</div>
<!-- END CONTENT -->
<div id="footer">
<p>
Previous Topic: <a href="form_helper.html">Form Helper</a>
·
<a href="#top">Top of Page</a> ·
<a href="../index.html">User Guide Home</a> ·
Next Topic: <a href="path_helper.html"> Path Helper</a></p>
<p><a href="http://codeigniter.com">CodeIgniter</a> · Copyright © 2006 - 2012 · <a href="http://ellislab.com/">EllisLab, Inc.</a></p>
</div>
</body>
</html>
|
