Presentation on theme: "Becoming a PowerSchool guru using HTML in PowerSchool."— Presentation transcript:
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
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: You’d think this would be enough, but, no, you have to reiterate so we know where the actual html starts: Everything else Notice that there is an opening and a closing tag on this one. Most tags have both. Inside the tags: blahblah… 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: Page Title Shown on Top of the Browser Window and Tabs This is the one section of the PowerSchool header that you’ll need to edit. So we have: Title of My Page Notice I haven’t closed the tag, yet. We’ll get there.
The next tag you’ll find is the Body tag: Lots of text and pretty pictures. After you’ve closed the body tag, you can close the HTML tag. At the bottom of most Web pages, you’ll find: Because there really isn’t much to say when you’re done with the page. So, we have: Title of Page Everything you see in the browser window. 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: This is a paragraph. This is a right justified paragraph. (also ‘left’, ‘justify’, and center) Font attributes: size: text (1-6) color: text face: Don’t use too many different fonts; one or 2 should suffice. weight: best used for a string of text because there are other options for this one (100-900, 700 is bold) text Attributes
Tags With No Attributes Certain tags have no attributes and are usually used for a single word or short phrase. although this one is sometimes used at the top and bottom of a section to indicate that the entire section should be centered Bold or Strong text: bold text or heavy text. Underlined text: text (not recommended for use on a Web page) Italics or emphasized text: text or text text
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: Power Source Shows up as : Power SourcePower 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: lines are closer together than a paragraph ending. 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 Admin Page Breakdown ˜[wc:commonscripts] ˜[wc:admin_header_css] Start Page - UI Examples - 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] 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, to create a small line around the body of most pages, As long as you are between this and at the bottom of the page, the following will work. Headers and Lists have formatting that helps keep things consistent. Big, Bold Text teeny, tiny text Lists work as expected in PowerSchool: Ordered List – First List Item Second List Item Unordered List First List Item Second List Item Looks like: 1.First List Item 2.Second List Item Looks like: First List Item Second List Item
Tables You find tables in many PowerSchool pages, so here are the basics; Table Header Text in a cell Text in another cell Tables don’t always have a Header section, but the Rows and cells will always be there. Again, PowerSchool has some built in formats you can take advantage of.
Tables in PowerSchool Link Description Admin Page Descriptions Teacher Page Descriptions 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:
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] ˜[wc:admin_header_css] Start Page - UI Examples - Admin Pages ˜[wc:admin_navigation_css] Most of your page. ˜[wc:admin_footer_css]
More PowerSchool HTML Help https://yourpowerschoolserver.com/admin/ui_examples/ HTML Tutorials – http://www.htmlcdetutorial.com and http://www.w3schools.com/html/default.asphttp://www.htmlcdetutorial.com http://www.w3schools.com/html/default.asp Free Text Editors – Windows – Crimson Editor http://www.crimsoneditor.com http://www.crimsoneditor.com - Mac – Text Wrangler http://www.barebones.com/products/textwrangler 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!