HTML Presentation
advertisement
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> <!-- 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] Style Sheets – making websites sparkle!! </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> 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] <!-- 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 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!
