From 8ede1a2ecbb62577afd32996956c5feaf7ddf9b6 Mon Sep 17 00:00:00 2001 From: Derek Jones Date: Wed, 5 Oct 2011 13:34:52 -0500 Subject: replacing the old HTML user guide with a Sphinx-managed user guide --- user_guide_src/source/helpers/html_helper.rst | 348 ++++++++++++++++++++++++++ 1 file changed, 348 insertions(+) create mode 100644 user_guide_src/source/helpers/html_helper.rst (limited to 'user_guide_src/source/helpers/html_helper.rst') diff --git a/user_guide_src/source/helpers/html_helper.rst b/user_guide_src/source/helpers/html_helper.rst new file mode 100644 index 000000000..2e217898e --- /dev/null +++ b/user_guide_src/source/helpers/html_helper.rst @@ -0,0 +1,348 @@ +########### +HTML Helper +########### + +The HTML Helper file contains functions that assist in working with +HTML. + +.. contents:: Page Contents + +Loading this Helper +=================== + +This helper is loaded using the following code:: + + $this->load->helper('html'); + +The following functions are available: + +br() +==== + +Generates line break tags (
) based on the number you submit. +Example:: + + echo br(3); + +The above would produce:


+ +heading() +========= + +Lets you create HTML

tags. The first parameter will contain the +data, the second the size of the heading. Example:: + + echo heading('Welcome!', 3); + +The above would produce:

Welcome!

+ +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:

Welcome!<

+ +img() +===== + +Lets you create HTML tags. The first parameter contains the +image source. Example + +:: + + echo img('images/picture.jpg'); // gives + +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 + + +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. + +:: + + $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); // Me, demonstrating how to eat 4 slices of pizza at one time + + +link_tag() +=========== + +Lets you create HTML 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. + +:: + + echo link_tag('css/mystyles.css'); // gives + + +Further examples + +:: + + echo link_tag('favicon.ico', 'shortcut icon', 'image/ico'); // + + echo link_tag('feed', 'alternate', 'application/rss+xml', '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); // + + +nbs() +===== + +Generates non-breaking spaces ( ) based on the number you submit. +Example + +:: + + echo nbs(3); + +The above would produce + +:: + +     + +ol() and ul() +============= + +Permits you to generate ordered or unordered HTML lists from simple or +multi-dimensional arrays. Example + +:: + + $this->load->helper('html'); + + $list = array(              + 'red',              + 'blue',              + 'green',              + 'yellow'              + ); + + $attributes = array(                      + 'class' => 'boldlist',                      + 'id'    => 'mylist'                     + ); + + echo ul($list, $attributes); + +The above code will produce this + +:: + +    +
  • red
    •    +
  • blue
    •    +
  • green
    •    +
  • yellow
    • + + +Here is a more complex example, using a multi-dimensional array + +:: + + $this->load->helper('html'); + + $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 + +:: + +    +
  • colors      +
             +
    • red
      •        +
    • blue
      •        +
    • green
      •      +
       +
    •    +
  • shapes      +
             +
    • round
      •        +
    • suare
      •        +
    • circles          +
                   +
      • elipse
        •            +
      • oval
        •            +
      • sphere
        •          +
             +
      •      +
       +
    •    +
  • moods      +
             +
    • happy
      •        +
    • upset          +
                   +
      • defeated              +
                         +
        • dejected
          • +
        • disheartened
          • +
        • depressed
          • +
        +
        • +
      • annoyed
        • +
      • cross
        •            +
      • angry
        •          +
             +
      •      +
       +
    • + + +meta() +====== + +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: + + echo meta('Content-type', 'text/html; charset=utf-8', 'equiv'); + // Note the third parameter. Can be "equiv" or "name" + // Generates: + + echo meta(array('name' => 'robots', 'content' => 'no-cache')); + // Generates: + + $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: + // + // + // + // + // + +doctype() +========= + +Helps you generate document type declarations, or DTD's. XHTML 1.0 +Strict is used by default, but many doctypes are available. + +:: + + echo doctype(); // + + echo doctype('html4-trans'); // + +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') | | ++------------------------+--------------------------+---------------------------------------------------------------------------------------------------------------------------+ +| XHTML 1.0 Strict | doctype('xhtml1-strict') | | ++------------------------+--------------------------+---------------------------------------------------------------------------------------------------------------------------+ +| XHTML 1.0 Transitional | doctype('xhtml1-trans') | | ++------------------------+--------------------------+---------------------------------------------------------------------------------------------------------------------------+ +| XHTML 1.0 Frameset | doctype('xhtml1-frame') | | ++------------------------+--------------------------+---------------------------------------------------------------------------------------------------------------------------+ +| XHTML Basic 1.1 | doctype('xhtml-basic11') | | ++------------------------+--------------------------+---------------------------------------------------------------------------------------------------------------------------+ +| HTML 5 | doctype('html5') | | ++------------------------+--------------------------+---------------------------------------------------------------------------------------------------------------------------+ +| HTML 4 Strict | doctype('html4-strict') | | ++------------------------+--------------------------+---------------------------------------------------------------------------------------------------------------------------+ +| HTML 4 Transitional | doctype('html4-trans') | | ++------------------------+--------------------------+---------------------------------------------------------------------------------------------------------------------------+ +| HTML 4 Frameset | doctype('html4-frame') | | ++------------------------+--------------------------+---------------------------------------------------------------------------------------------------------------------------+ -- cgit v1.2.3-24-g4f1b