html tags tutorial
DESCRIPTION
Learn how to use HTML Tags in ProdigyViewTRANSCRIPT
![Page 2: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/2.jpg)
OverviewObjective
Learn how to use html elements in ProdigyView.
Requirements
Understand of HTML tags
Estimated Time
9 minutes
www.prodigyview.com
![Page 3: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/3.jpg)
Follow Along With A Code Example
1. Download a copy of the example code at www.prodigyview.com/source.
2.Install the system in an environment you feel comfortable testing in.
3.Proceed to examples/template/Html.php
![Page 4: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/4.jpg)
Learning the ElementsThe purpose of this tutorial is to learn to use the html elements in ProdigyView.
The elements provide a way to quickly display html with a decreased chance of syntax errors.
Because elements are stored in variables, they can be accumulated and displayed when needed. Methods can also be used to created a template engine.
![Page 5: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/5.jpg)
HeadersTags:
<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
![Page 6: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/6.jpg)
Options for HTML Elements
Referring to our last slide, notice how we can pass values for defining the class or id of an element in an array. Every html element in ProdigyView takes in options as it last argument.
These options can be used to define elements in the tags, as you will see throughout this tutorial. Options that can be added include but are not limited to:class
id
dir
lang
style
title
onabort
onmousedown
onmouseup
onclick
onblur
onfocus
accesskey
xml:lang
spellcheck
![Page 7: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/7.jpg)
Paragraph
Tag:
<p></p>
Purpose:
Display a paragraph of text.
www.prodigyview.com
![Page 8: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/8.jpg)
Div
Tag:
<div></div>
Purpose:
Used for showing a division or section of page.
Actions can be added to the div
www.prodigyview.com
![Page 9: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/9.jpg)
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.
www.prodigyview.com
Add event to the link
Create url with array
![Page 10: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/10.jpg)
LinkTag:
<link></link>
Purpose:
Link to an external document.
Set the type to css
Set the media to print
Location of external file
![Page 11: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/11.jpg)
MetaTag:
<meta></meta>
Purpose:
Meta tags are used to place meta information about the page. Meta tags are not displayed.
The name of the tag
Set the charset Set the content
![Page 12: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/12.jpg)
SpanTags:
<span></span>
Purpose:
Group inline elements and style elements.
Set the class for the span
![Page 13: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/13.jpg)
StrongTag:
<strong></strong>
Purpose:
Emphasizes text or defines important text.
Test to be placed inside the strong tag
Inline styling of the font size
![Page 14: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/14.jpg)
ImageTags:
<img />
Purpose:
Display an image. Image can be from an external site or a location on an internal site.
www.prodigyview.com
![Page 15: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/15.jpg)
Li and UL/OL
Tag:
<ul><li></li></ul>
Or
<ol><li></li></ol>
Purpose:
Display a list of items.
www.prodigyview.com
![Page 16: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/16.jpg)
IFrameTag:
<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
www.prodigyview.com
![Page 17: Html Tags Tutorial](https://reader033.vdocuments.net/reader033/viewer/2022061206/5482879db07959150c8b4807/html5/thumbnails/17.jpg)
API ReferenceFor a better understanding of the HTML elements, check out the api at the two links below.
PVHtml
www.prodigyview.com
More Tutorials
For more tutorials, please visit:
http://www.prodigyview.com/tutorials