1 / 23

using HTML in PowerSchool

becoming a PowerSchool guru. using HTML in PowerSchool.

nedra
Download Presentation

using HTML in PowerSchool

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. becoming a PowerSchool guru usingHTML in PowerSchool

  2. Kathy DaviesLamar CountySystem 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 RepMarried to Chad – Physics Prof. @ Gordon College5 dog-kidsknitting fiend (knittingnoodle on ravelry) there is never enough time to knit – or play fetch

  3. Our Outline Basic HTML Custom Webpage Management PowerSchool Extras

  4. tags and attributes and elements, oh my! Basic HTML

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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>

  10. 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>

  11. 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: <ahref=“http://powersource.pearsonschoolsystems.com”>Power Source</a> Shows up as : Power Source Note the quotes around the URL.

  12. 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. <imgsrc=“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.

  13. wildcards, page inserts, and more goodies PowerSchool HTML Extras

  14. 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!!

  15. 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, <divclass=“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: First List Item Second List Item • Looks like: • First List Item • Second List Item

  16. PowerSchool Submit Buttons ˜[wc:admin_navigation_css] Submit Button: <div class="button-row"> <buttondisabled="disabled">Disabled Button</button> <buttonname="btnSubmit" id="btnSubmit" type="submit">Submit</button> </div> ˜[wc:admin_footer_css]

  17. 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.

  18. 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> <tfoot> </tfoot> <tbody> <tr><td><a href="/admin/ui_examples/adminpage.html">Admin Page</a></td><td>Descriptions</td></tr> <tr><td><ahref="/admin/ui_examples/teacherpage.html">Teacher Page</a></td><td>Descriptions</td></tr> </tbody> </table> Puts color on header row

  19. Classes PowerSchool uses the Class attribute to define particular looks for various pages and elements on a page. For example: <table class=”grid">

  20. 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>

  21. 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

  22. putting it all together and making it work Custom Webpage Management

  23. Don’t forget to Visit the Vendors!Cookies at the break! See you at the Opening Session!

More Related