HTML Presentation

Transcript HTML Presentation

becoming a PowerSchool guru
using
HTML in PowerSchool
Kathy Davies
Lamar County
System Information Manager
10 yrs at Lamar County School System
PowerSchool Admin since Jan. 2009
SASI from 2002-2009
Ga PowerSchool Users Group Executive Committee –
Co-Chair and Regions Committee Chair
GaETC SIS Forums Rep
Married to Chad – Physics Prof. @ Gordon College
5 dog-kids
knitting fiend (knittingnoodle on ravelry)
there is never enough time to knit – or play fetch
Our Outline
Basic
HTML
PowerSchool
Extras
Custom
Webpage
Management
tags and attributes and elements, oh my!
Basic HTML
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 Basic Structure
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>
Now let’s make it pretty.
Attributes
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>
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 section
to 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.
wildcards, page inserts, and more goodies
PowerSchool HTML Extras
PowerSchool Page Structure
<!DOCTYPE html>
<html>

<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]
Style Sheets – making
websites sparkle!!
</head>
<body>
˜[wc:admin_header_css]

<a href="/admin/home.html" target="_top">Start Page</a> - <a href="/admin/ui_examples/home.html"
target="_top">UI Examples</a> - Admin Pages

˜[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>
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>
Looks like:
<li>First List Item</li>
<li>Second List Item</li>
1. First List Item
</ol>
2.
Unordered List
<ul>
<li>First List Item</li>
<li>Second List Item</li>
</ul>
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
Forces the alternating
colors in the rows
<table class="linkDescList">
<colgroup><col><col></colgroup>
<thead>
<tr><th>Link</th><th>Description</th></tr>
</thead>
Puts color on
header row
<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>
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]

<a href="/admin/home.html" target="_top">Start Page</a> - <a
href="/admin/ui_examples/home.html" target="_top">UI Examples</a> - Admin Pages

˜[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
putting it all together and making it work
Custom Webpage Management
See you at the Opening Session!
Don’t forget to Visit the Vendors!
Cookies at the break!