23
becoming a PowerSchool guru using HTML in PowerSchool
becoming a PowerSchool guru
using
HTML in PowerSchool
Kathy DaviesLamar County
System Information Manager10 yrs at Lamar County School SystemPowerSchool Admin since Jan. 2009SASI from 2002-2009Ga PowerSchool Users Group Executive Committee – Co-Chair and Regions Committee ChairGaETC SIS Forums Rep
Married to Chad – Physics Prof. @ Gordon College5 dog-kidsknitting fiend (knittingnoodle on ravelry)
there is never enough time to knit – or play fetch
Our Outline
BasicHTML PowerSchool
Extras Custom
Webpage Management
Basic HTML
tags and attributes and elements, oh my!
HTML – HyperText Markup Language
HTML is the magic behind the web, the code that makes everything work.
It is a simple text language, so any text editor will work (not WordPad.)
HTML is made up of tags, elements and attributes. Basically, it’s text that tells the browser what to make the page look like and what to put on it.
A Word About CSS
CSS – Cascading Style Sheets – are used heavily in PowerSchool to form the layout and appearance of each page. We won’t be editing any of those today, but you’ll see ‘class=‘ and you’ll know it’s pointing to CSS.
Tags
Tags give meaning to a section of text, telling the browser what to do with it and how to display it.
The first tag should always be the doctype, so PowerSchool pages start with:
<!DocType html>
You’d think this would be enough, but, no, you have to reiterate so we know where the actual html starts:<html>Everything else</html>
Notice that there is an opening and a closing tag on this one. Most tags have both.
Inside the <html> tags:
<head>blahblah…</head>
The Head section of a Web page holds the page title and other information about the page but does not appear in the body of the page. PowerSchool head sections contain a wealth of other data, but what you need is mainly found on the templates they offer.
Titles
Inside the head section, you’ll find:
<title>Page Title Shown on Top of the Browser Window and Tabs</title>
This is the one section of the PowerSchool header that you’ll need to edit.
So we have:<!DocType html><html><head><title>Title of My Page</title></head>
Notice I haven’t closed the <html> tag, yet. We’ll get there.
The next tag you’ll find is the Body tag:
<body>Lots of text and pretty pictures.</body>
After you’ve closed the body tag, you can close the HTML tag. At the bottom of most Web pages, you’ll find:
</body></html>
Because there really isn’t much to say when you’re done with the page. So, we have:
<!DocType html><html><head><title>Title of Page</title></head><body>Everything you see in the browser window.</body></html>
The Basic Structure
Now let’s make it pretty.
Attributes are like the adjectives of HTML…they define the properties or what the element should look like.
Paragraphs: <p>This is a paragraph.</p> <p align=“right”>This is a right justified paragraph.</p> (also ‘left’, ‘justify’, and center)
Font attributes:size: <font size=“2”>text</font> (1-6)color: <font color=“green”>text</font>face: <font face=“comic sans”>Don’t use too many different fonts; one or 2 should
suffice.</font>weight: <font weight=“700”>best used for a string of text because there are other options for this one
</font> (100-900, 700 is bold)
<font size=“2” weight=“700” color=“green”>text</font>
Attributes
Tags With No Attributes
Certain tags have no attributes and are usually used for a single word or short phrase.
<center> although this one is sometimes used at the top and bottom of a sectionto indicate that the entire section should be centered</center>
Bold or Strong text:<b>bold text</b> or <strong>heavy text</strong>.Underlined text: <u>text</u> (not recommended for use on a Web page)Italics or emphasized text: <i>text</i> or <em>text</em>
<font size=“2” weight=“700” color=“green”><i>text</i></font>
Linking Text
An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag – the destination of the link:
<a href=“http://powersource.pearsonschoolsystems.com”>Power Source</a>
Shows up as : Power Source
Note the quotes around the URL.
Self Closing Tags
This is mainly ‘good practice’ and not absolutely necessary, but I like to promote good practice.
Line break: <br /> lines are closer together than a paragraph ending.
<img src=“http://myserver.com/image.jpg” />
Note that the closing bracket is preceded by a space and a forward slash. And the quotes around the url.
I snuck in that image tag. I am assuming you aren’t going to add too many images right now, so we won’t dwell on it.
PowerSchool HTML Extras
wildcards, page inserts, and more goodies
PowerSchool Page Structure
<!DOCTYPE html><html><!-- non framed --><head><title>Admin Page Breakdown</title>
<link href="/images/css/screen.css" rel="stylesheet" media="screen"><link href="/images/css/print.css" rel="stylesheet" media="print">˜[wc:commonscripts]
</head>
<body>˜[wc:admin_header_css]<!-- breadcrumb start --><a href="/admin/home.html" target="_top">Start Page</a> - <a href="/admin/ui_examples/home.html" target="_top">UI Examples</a> - Admin Pages<!-- breadcrumb end -->
˜[wc:admin_navigation_css]
This is the right side of admin pages…where most of your customizing will take place.
˜[wc:admin_footer_css]</body></html>
Style Sheets – making websites sparkle!!
PowerSchool Format Fun
A lot of the formatting in PowerSchool is already done through css, so you just need to know how to make them work for you.
PowerSchool uses a div tag, <div class=“box-round”> to create a small line around the body of most pages, As long as you are between this and </div> at the bottom of the page, the following will work.
Headers and Lists have formatting that helps keep things consistent.
<h1>Big, Bold Text</h1> <h6>teeny, tiny text</h6>
Lists work as expected in PowerSchool:Ordered List – <ol><li>First List Item</li><li>Second List Item</li></ol>
Unordered List<ul><li>First List Item</li><li>Second List Item</li></ul>
Looks like:
1. First List Item2. Second List Item
Looks like:
• First List Item• Second List Item
PowerSchool Submit Buttons
˜[wc:admin_navigation_css]
Submit Button:
<div class="button-row"> <button disabled="disabled">Disabled Button</button> <button name="btnSubmit" id="btnSubmit" type="submit">Submit</button> </div>
˜[wc:admin_footer_css]
Tables
You find tables in many PowerSchool pages, so here are the basics;
<table><th>Table Header</th><tr><td>Text in a cell</td><td>Text in another cell</td></tr></table>
Tables don’t always have a Header section, but the Rows <tr> and cells <td> will always be there.
Again, PowerSchool has some built in formats you can take advantage of.
Tables in PowerSchool
<table class="linkDescList"> <colgroup><col><col></colgroup> <thead>
<tr><th>Link</th><th>Description</th></tr> </thead>
<tfoot> </tfoot>
<tbody>
<tr><td><a href="/admin/ui_examples/adminpage.html">Admin Page</a></td><td>Descriptions</td></tr> <tr><td><a href="/admin/ui_examples/teacherpage.html">Teacher Page</a></td><td>Descriptions</td></tr>
</tbody> </table>
Forces the alternating colors in the rows
Puts color on header row
Classes
PowerSchool uses the Class attribute to define particular looks for various pages and elements on a page. For example:
<table class=”grid">
Inserts – X: codes, & Wildcards
Inserts are commands that call up other existing pages and display them as if they were part of the current page.
~[x:insertfile;inserts/GA_SysRes.html]
<body>˜[wc:admin_header_css]<!-- breadcrumb start --><a href="/admin/home.html" target="_top">Start Page</a> - <a href="/admin/ui_examples/home.html" target="_top">UI Examples</a> - Admin Pages<!-- breadcrumb end -->
˜[wc:admin_navigation_css]
Most of your page.
˜[wc:admin_footer_css]</body>
More PowerSchool HTML Help
https://yourpowerschoolserver.com/admin/ui_examples/
HTML Tutorials – http://www.htmlcdetutorial.com and http://www.w3schools.com/html/default.asp
Free Text Editors – Windows – Crimson Editor http://www.crimsoneditor.com - Mac – Text Wrangler http://www.barebones.com/products/textwrangler
Lots of others…just Google it.
Not so free - Dreamweaver
Custom Webpage Management
putting it all together and making it work
See you at the Opening Session!Don’t forget to Visit the Vendors!
Cookies at the break!
