1 <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns=
"http://www.w3.org/1999/xhtml" xml:
lang=
"en" lang=
"en">
5 <meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8" />
6 <title>HTML Helper : CodeIgniter User Guide
</title>
8 <style type='text/css' media='all'
>@import url('../userguide.css');
</style>
9 <link rel='stylesheet' type='text/css' media='all' href='../userguide.css'
/>
11 <script type=
"text/javascript" src=
"../nav/nav.js"></script>
12 <script type=
"text/javascript" src=
"../nav/prototype.lite.js"></script>
13 <script type=
"text/javascript" src=
"../nav/moo.fx.js"></script>
14 <script type=
"text/javascript" src=
"../nav/user_guide_menu.js"></script>
16 <meta http-equiv='expires' content='-
1'
/>
17 <meta http-equiv= 'pragma' content='no-cache'
/>
18 <meta name='robots' content='all'
/>
19 <meta name='author' content='ExpressionEngine Dev Team'
/>
20 <meta name='description' content='CodeIgniter User Guide'
/>
25 <!-- START NAVIGATION -->
26 <div id=
"nav"><div id=
"nav_inner"><script type=
"text/javascript">create_menu('../');
</script></div></div>
27 <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>
29 <table cellpadding=
"0" cellspacing=
"0" border=
"0" style=
"width:100%">
31 <td><h1>CodeIgniter User Guide Version
2.1.3</h1></td>
32 <td id=
"breadcrumb_right"><a href=
"../toc.html">Table of Contents Page
</a></td>
36 <!-- END NAVIGATION -->
39 <!-- START BREADCRUMB -->
40 <table cellpadding=
"0" cellspacing=
"0" border=
"0" style=
"width:100%">
43 <a href=
"http://codeigniter.com/">CodeIgniter Home
</a> ›
44 <a href=
"../index.html">User Guide Home
</a> ›
47 <td id=
"searchbox"><form method=
"get" action=
"http://www.google.com/search"><input type=
"hidden" name=
"as_sitesearch" id=
"as_sitesearch" value=
"codeigniter.com/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>
50 <!-- END BREADCRUMB -->
55 <!-- START CONTENT -->
61 <p>The HTML Helper file contains functions that assist in working with HTML.
</p>
64 <li><a href=
"#br">br()
</a></li>
65 <li><a href=
"#heading">heading()
</a></li>
66 <li><a href=
"#img">img()
</a></li>
67 <li><a href=
"#link_tag">link_tag()
</a></li>
68 <li><a href=
"#nbs">nbs()
</a></li>
69 <li><a href=
"#ol_and_ul">ol() and ul()
</a></li>
70 <li><a href=
"#meta">meta()
</a></li>
71 <li><a href=
"#doctype">doctype()
</a></li>
74 <h2>Loading this Helper
</h2>
76 <p>This helper is loaded using the following code:
</p>
77 <code>$this-
>load-
>helper('html');
</code>
79 <p>The following functions are available:
</p>
81 <h2><a name=
"br"></a>br()
</h2>
82 <p>Generates line break tags (
<br
/>) based on the number you submit. Example:
</p>
83 <code>echo br(
3);
</code>
84 <p>The above would produce:
<br
/><br
/><br
/></p>
86 <h2><a name=
"heading"></a>heading()
</h2>
87 <p>Lets you create HTML
<h1
> tags. The first parameter will contain the data, the
88 second the size of the heading. Example:
</p>
89 <code>echo heading('Welcome!',
3);
</code>
90 <p>The above would produce:
<h3
>Welcome!
</h3
></p>
92 <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>
93 <code>echo heading('Welcome!',
3, '
class="pink"')
</code>
94 <p>The above code produces:
<h3
class="pink"
>Welcome!<
<h3
></p>
97 <h2><a name=
"img"></a>img()
</h2>
98 <p>Lets you create HTML
<img /
> tags. The first parameter contains the image source. Example:
</p>
99 <code>echo img('images/picture.jpg');
<br />
100 // gives
<img src=
"http://site.com/images/picture.jpg
" /
></code>
101 <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>
102 <p><code>echo img('images/picture.jpg', TRUE);
<br />
103 // gives
<img src=
"http://site.com/index.php/images/picture.jpg
" alt=
"" /
></code></p>
104 <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>
105 <p><code> $image_properties = array(
<br />
106 'src' =
> 'images/picture.jpg',
<br />
107 'alt' =
> 'Me, demonstrating how to eat
4 slices of pizza at one time',
<br />
108 'class' =
> 'post_images',
<br />
109 'width' =
> '
200',
<br />
110 'height' =
> '
200',
<br />
111 'title' =
> 'That was quite a night',
<br />
112 'rel' =
> 'lightbox',
<br />
115 img($image_properties);
<br />
116 //
<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>
118 <h2><a name=
"link_tag"></a>link_tag()
</h2>
119 <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>
120 echo link_tag('css/mystyles.css');
<br />
121 // gives
<link href=
"http://site.com/css/mystyles.css
" rel=
"stylesheet
" type=
"text/css
" /
></code></p>
122 <p>Further examples:
</p>
125 echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');
<br />
126 //
<link href=
"http://site.com/favicon.ico
" rel=
"shortcut icon
" type=
"image/ico
" /
>
129 echo link_tag('feed', 'alternate', 'application/rss+xml', 'My RSS Feed');
<br />
130 //
<link href=
"http://site.com/feed
" rel=
"alternate
" type=
"application/rss+xml
" title=
"My RSS Feed
" /
> </code>
131 <p>Additionally, an associative array can be passed to the link() function for complete control over all attributes and values.
</p>
134 'href' =
> 'css/printer.css',
<br />
135 'rel' =
> 'stylesheet',
<br />
136 'type' =
> 'text/css',
<br />
137 'media' =
> 'print'
<br />
140 echo link_tag($link);
<br />
141 //
<link href=
"http://site.com/css/printer.css
" rel=
"stylesheet
" type=
"text/css
" media=
"print
" /
></code></p>
143 <h2><a name=
"nbs"></a>nbs()
</h2>
144 <p>Generates non-breaking spaces (
&nbsp;) based on the number you submit. Example:
</p>
145 <code>echo nbs(
3);
</code>
146 <p>The above would produce:
&nbsp;
&nbsp;
&nbsp;
</p>
148 <h2><a name=
"ol_and_ul"></a>ol()
and
ul()
</h2>
150 <p>Permits you to generate ordered or unordered HTML lists from simple or multi-dimensional arrays. Example:
</p>
153 $this-
>load-
>helper('html');
<br />
156 'red',
<br />
157 'blue',
<br />
158 'green',
<br />
159 'yellow'
<br />
160 );
<br />
162 $attributes = array(
<br />
163 'class' =
> 'boldlist',
<br />
164 'id'
=
> 'mylist'
<br />
165 );
<br />
167 echo ul($list, $attributes);
<br />
170 <p>The above code will produce this:
</p>
173 <ul
class="boldlist"
id="mylist"
><br />
174 <li
>red
</li
><br />
175 <li
>blue
</li
><br />
176 <li
>green
</li
><br />
177 <li
>yellow
</li
><br />
181 <p>Here is a more complex example, using a multi-dimensional array:
</p>
184 $this-
>load-
>helper('html');
<br />
186 $attributes = array(
<br />
187 'class' =
> 'boldlist',
<br />
188 'id'
=
> 'mylist'
<br />
189 );
<br />
192 'colors' =
> array(
<br />
193 'red',
<br />
194 'blue',
<br />
195 'green'
<br />
196 ),
<br />
197 'shapes' =
> array(
<br />
198 'round',
<br />
199 'square',
<br />
200 'circles' =
> array(
<br />
201 'ellipse',
<br />
202 'oval',
<br />
203 'sphere'
<br />
204 )
<br />
205 ),
<br />
206 'moods'
=
> array(
<br />
207 'happy',
<br />
208 'upset' =
> array(
<br />
209 'defeated' =
> array(
<br />
210 'dejected',
<br />
211 'disheartened',
<br />
212 'depressed'
<br />
213 ),
<br />
214 'annoyed',
<br />
215 'cross',
<br />
216 'angry'
<br />
217 )
<br />
218 )
<br />
219 );
<br />
222 echo ul($list, $attributes);
</code>
224 <p>The above code will produce this:
</p>
227 <ul
class="boldlist"
id="mylist"
><br />
228 <li
>colors
<br />
229 <ul
><br />
230 <li
>red
</li
><br />
231 <li
>blue
</li
><br />
232 <li
>green
</li
><br />
233 </ul
><br />
234 </li
><br />
235 <li
>shapes
<br />
236 <ul
><br />
237 <li
>round
</li
><br />
238 <li
>suare
</li
><br />
239 <li
>circles
<br />
240 <ul
><br />
241 <li
>elipse
</li
><br />
242 <li
>oval
</li
><br />
243 <li
>sphere
</li
><br />
244 </ul
><br />
245 </li
><br />
246 </ul
><br />
247 </li
><br />
248 <li
>moods
<br />
249 <ul
><br />
250 <li
>happy
</li
><br />
251 <li
>upset
<br />
252 <ul
><br />
253 <li
>defeated
<br />
254 <ul
><br />
255 <li
>dejected
</li
><br />
256 <li
>disheartened
</li
><br />
257 <li
>depressed
</li
><br />
258 </ul
><br />
259 </li
><br />
260 <li
>annoyed
</li
><br />
261 <li
>cross
</li
><br />
262 <li
>angry
</li
><br />
263 </ul
><br />
264 </li
><br />
265 </ul
><br />
266 </li
><br />
272 <h2><a name=
"meta"></a>meta()
</h2>
274 <p>Helps you generate meta tags. You can pass strings to the function, or simple arrays, or multidimensional ones. Examples:
</p>
277 echo meta('description', 'My Great site');
<br />
278 // Generates:
<meta
name="description"
content="My Great Site"
/><br />
281 echo meta('Content-type', 'text/html; charset=utf-
8', 'equiv'); // Note the third parameter. Can be "equiv" or "name"
<br />
282 // Generates:
<meta
http-equiv="Content-type"
content="text/html; charset=utf-
8"
/><br />
286 echo meta(array('name' =
> 'robots', 'content' =
> 'no-cache'));
<br />
287 // Generates:
<meta
name="robots"
content="no-cache"
/><br />
292 array('name' =
> 'robots', 'content' =
> 'no-cache'),
<br />
293 array('name' =
> 'description', 'content' =
> 'My Great Site'),
<br />
294 array('name' =
> 'keywords', 'content' =
> 'love, passion, intrigue, deception'),
<br />
295 array('name' =
> 'robots', 'content' =
> 'no-cache'),
<br />
296 array('name' =
> 'Content-type', 'content' =
> 'text/html; charset=utf-
8', 'type' =
> 'equiv')
<br />
297 );
<br />
302 //
<meta
name="robots"
content="no-cache"
/><br />
303 //
<meta
name="description"
content="My Great Site"
/><br />
304 //
<meta
name="keywords"
content="love, passion, intrigue, deception"
/><br />
305 //
<meta
name="robots"
content="no-cache"
/><br />
306 //
<meta
http-equiv="Content-type"
content="text/html; charset=utf-
8"
/>
310 <h2><a name=
"doctype"></a>doctype()
</h2>
312 <p>Helps you generate document type declarations, or DTD's. XHTML
1.0 Strict is used by default, but many doctypes are available.
</p>
315 echo doctype();
<br />
316 //
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
><br />
318 echo doctype('html4-trans');
<br />
319 //
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
>
322 <p>The following is a list of doctype choices. These are configurable, and pulled from
<samp>application/config/doctypes.php
</samp></p>
324 <table cellpadding=
"0" cellspacing=
"1" border=
"0" style=
"width:100%" class=
"tableborder">
331 <td class=
"td">XHTML
1.1</td>
332 <td class=
"td">doctype('xhtml11')
</td>
333 <td class=
"td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
></td>
336 <td class=
"td">XHTML
1.0 Strict
</td>
337 <td class=
"td">doctype('xhtml1-strict')
</td>
338 <td class=
"td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
></td>
341 <td class=
"td">XHTML
1.0 Transitional
</td>
342 <td class=
"td">doctype('xhtml1-trans')
</td>
343 <td class=
"td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
></td>
346 <td class=
"td">XHTML
1.0 Frameset
</td>
347 <td class=
"td">doctype('xhtml1-frame')
</td>
348 <td class=
"td"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
></td>
351 <td class=
"td">HTML
5</td>
352 <td class=
"td">doctype('html5')
</td>
353 <td class=
"td"><!DOCTYPE html
></td>
356 <td class=
"td">HTML
4 Strict
</td>
357 <td class=
"td">doctype('html4-strict')
</td>
358 <td class=
"td"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
></td>
361 <td class=
"td">HTML
4 Transitional
</td>
362 <td class=
"td">doctype('html4-trans')
</td>
363 <td class=
"td"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
></td>
366 <td class=
"td">HTML
4 Frameset
</td>
367 <td class=
"td">doctype('html4-frame')
</td>
368 <td class=
"td"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"
></td>
381 Previous Topic:
<a href=
"form_helper.html">Form Helper
</a>
382 ·
383 <a href=
"#top">Top of Page
</a> ·
384 <a href=
"../index.html">User Guide Home
</a> ·
385 Next Topic:
<a href=
"path_helper.html"> Path Helper
</a></p>
386 <p><a href=
"http://codeigniter.com">CodeIgniter
</a> · Copyright
© 2006 -
2012 · <a href=
"http://ellislab.com/">EllisLab, Inc.
</a></p>