Html Tags Tutorial


Published on

Learn how to use HTML Tags in ProdigyView

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html Tags Tutorial

  1. 1. HTML Tags
  2. 2. OverviewObjectiveLearn how to use html elements in ProdigyView.Requirements Understand of HTML tagsEstimated Time9 minutes
  3. 3. Follow Along With A Code Example1. Download a copy of the example code at Install the system in an environment you feel comfortable testing in.3. Proceed to examples/template/Html.php
  4. 4. Learning the ElementsThe purpose of this tutorial is to learn to use the htmlelements in ProdigyView.The elements provide a way to quickly display html with adecreased chance of syntax errors.Because elements are stored in variables, they can beaccumulated and displayed when needed. Methods canalso be used to created a template engine.
  5. 5. Headers Tags: <h1></h1> To <h6></h6> Purpose: Set up html headings for sections and subsections of a page.Add a class to the h2 header Add an id to h3 Add an inline style to h5 and h6
  6. 6. Options for HTML ElementsReferring to our last slide, notice how we can pass valuesfor defining the class or id of an element in an array.Every html element in ProdigyView takes in options as itlast argument.These options can be used to define elements in the tags,as you will see throughout this tutorial. Options that canbe added include but are not limited to: class  title  onblur id  onabort  onfocus dir  onmousedown  accesskey lang  onmouseup  xml:lang style  onclick  spellcheck
  7. 7. ParagraphTag:<p></p>Purpose:Display a paragraph of text.
  8. 8. DivTag:<div></div>Purpose:Used for showing a division or section of page. Actions can be added to the div
  9. 9. Hyperlink(aLink) Tag: <a></a> Purpose: A link or anchor to a location. Hyperlinks can go to both internal and external pages. The url for the link can also be passed in an array. Add event to the linkCreate url with array
  10. 10. LinkTag:<link></link>Purpose:Link to an external document.Location of external file Set the type to css Set the media to print
  11. 11. MetaTag:<meta></meta>Purpose:Meta tags are used to place meta information about thepage. Meta tags are not displayed.The name of the tag Set the charset Set the content
  12. 12. SpanTags:<span></span>Purpose:Group inline elements and style elements. Set the class for the span
  13. 13. StrongTag:<strong></strong>Purpose:Emphasizes text or defines important text.Test to be placed inside the strong tag Inline styling of the font size
  14. 14. ImageTags:<img />Purpose:Display an image. Image can be from an external site or alocation on an internal site.
  15. 15. Li and UL/OLTag:<ul><li></li></ul>Or<ol><li></li></ol>Purpose:Display a list of items.
  16. 16. IFrame Tag: <iframe src=“”></iframe> Purpose: Display another web page within a page.The page to display within the frame Error Message To Display Set the width of the iframe
  17. 17. API ReferenceFor a better understanding of the HTML elements, checkout the api at the two links below.PVHtml More TutorialsFor more tutorials, please visit: