HTML Basics - Regular and PS Specific

HTML stands for HyperText Markup Language and is the language that web pages are written in that is then translated by browsers into regular information. It helps to have a basic understanding of HTML coding when customizing pages. Below are some common codes that you'll see in HTML. The codes usually have a less than and greater than with them, but they are left off here due to display limits:

html & /html - you'll see the html at the top of the page and the /html at the bottom of the page. The commands tell browsers where the html code starts and stops.

head & /head - seen at the top of the page, this includes information about the page and usually information used by search engines to find pages. It's common to see Javascript related commands here.

title & /title - found within the head part, this is the name that appears at the top of the browser and the title of the page when someone bookmarks a page. Used by pages that are in admin/students/studentpages or teachers/studentpages to create the title for the page that will appear in the menu.

script language="Javascript" & /script - usually found within head statements, Javascript is code to run a script on the page. Often times, you'll see a reference to javascript in the body of the page and at that point the script is being invoked.

body & /body - starts after the head part, the body includes the part that will be translated and displayed in the browser.

form action="web page" method="post" & /form - found on pages where the user fills out information and clicks on submit to save it or send it to a database. The "web page" part refers to the web page that will appear after the person clicks submit.

input type="type" name="fileld' value="" size="#" - found on pages where data is submitted, such as the demographics modify page. Here is a breakdown of the commaond:
• type= - most common types are text and check box. Refers to the choice given to the user on how to enter data.
• name= - the field in the database. Since there are several tables in the database, the table name or number usually appears before the field name. For example, name="[01]home_phone", means the data will be added to the field called home_phone in the 01 table which is the students table.
• value= - the default value added to the field. This part is usually optional, however, for PowerSchool pages it's required, otherwise data in the database will not display. If nothing else, just have value="".
• size= - defines how big in characters to make text boxes. For example, if type equals text and size equals 20, a 20 character width box will appear on the screen. More than 20 characters can be entered, but only 20 will be displayed at a time.

table & /table - used throughout the body to align information on the page. Web pages ignore tab statements, so tables are often used to place things. Within tables you may find the following:
• width= - followed by a percentage or a regular number. When it's a percentage, the width of the table is automatically resized to fit the percentage of the screen. When just a number, the table is a fixed width of that number in pixels.
• align= - followed by left, right, or center. It's the horizontal placement of the table on the page. The command valign is used for vertical placement.
• border= - followed by zero or another number. If zero, then the border does not display. Any other number will display a number with the number being the thickness of the line in pixels. The higher the number, the thicker the line.

tr & /tr - used within tables to signify the start and end of a row within that table. You may see a bgcolor= within a tr command, which is a command to make the background color of that row equal to the color defined after the equal sign.

td & /td - found within the tr commands, the td command defines data cells within the row. Similar to the columns within a table. If you want to have three columns within a row, then you would have three td commands within the tr section. Within the td commands you may find the following:
• width= - followed by a percentage or a regular number. When it's a percentage, the width of the cell is automatically resized to fit the percentage of the screen. When just a number, the cell is a fixed width of that number in pixels. You may also see height= which can resize the vertical size of a cell.
• align= - followed by left, right, or center. It's the horizontal placement of the information within cell. The command valign is used for vertical placement.
• colspan= - followed by a number. Refers to column span and the number is how many columns within the row the information will span across. For example, colspan="2" means the text will span across two columns rather than just the one column.
• bgcolor= - command to make the background color of the cell a certain color.
• class= - the page is referring to something from a css file.

img src="/location and name of image" width="#" height="#" border="#" alt="text" - used to place images on a page. Here is a breakdown of the different parts:
• src= - followed by the location and name of the image.
• width=, height=, border= - used to create a frame on the page and the image fits within that frame. If border="0", then no lines appear for the frame and with any other number the frame is visible.
• alt= - the text that appear when a mouse is hovered over an image or if images are turned off. Any img src command should have text to be web accessible.

(less than)a href="web page address of file"(greater than)Link Text(less than)/a(greater than) - creates links on a web page to another page or a file (replace less than and greater than with the actual symbols). The Link Text is what appears on the page for the visitor to click on to go to the other page or download the file. You may see target= between a and href, which is a command to open a link in a certain spot. For example, target="_blank" will open the link in a new browser window.

br & br / - line break, similar to pressing return or enter on the keyboard to start a new line.

You can view the html of a page by opening the original page in a html or text editor. However, sometimes you may not have access to the page, so you can view the html by viewing the page in a browser and then on the url for the page, remove everything after html and put a t and press enter. If you're viewing individual student information, you'll need to open the page in a separate window to get the true html for that page before doing the t. In some browsers you'll see the html right away, but with some you may have to use the browser's view source command after adding the t and pressing enter in order to see the html.

Here are some html commands you'll find that are specific to PowerSchool pages:

~[wc:...] - wc commands invoke html from wild card files, which are located in the wildcards folder that is one of the main web root folders. For example, there are common scripts used on every admin page, so instead of adding those lines to hundreds of pages, a wild card file with the html is created and a reference to it is added instead. That way, something can be changed in the wild card file without having to edit hundreds of pages. The wild card files can be found in the wildcards folder as text files. What follows wc: is the name of the file being invoked, for example, wc:commonscripts is invoking the commonscripts text file.

~[x:...] - x commands invoke some internal programming with what follows the x: the name of the command. For example, x:username displays the admin's name on the page. The x commands are created by PowerSchool programmers and you can't create your own, but if you find an x command that does what you're wanting to do, you can place that command on your page. So if you have a page where you want the admin's name to appear somewhere on the page, you can place ~[x:username] on the page to make it happen. With some x commands, you can view what they do by viewing the rendered page's html source in the browser window.

~(fielddname) - data from student fields and other fields can be displayed on pages by referencing the field name. It's similar to how fields are used on custom reports, but instead of using the ^, one must use a ~.

[01] or [05] - the [01] or [05] are usually found before field names and refer to the following tables in the database: [01] = students, [05] = teachers. There are a couple hundred tables in the database, so on a page which adds data to the database, the table number usually appears before the field name to signify to which table to add the data.

~[submitbutton] - places a submit button on the page plus adds information to the database based on input type="hidden" commands that precede it.

~(decode;... - decode commands translate information in a field or gpv command to other text. For example, the student gender field holds either M or F, but you can use a decode statement to print out either Male or Female.

~[gpv:... - gpv commands get posted values and use them on the page. A posted value is information that was passed to the page as part of a form action code on a page or as part of a link to the page.

~[if...] [/if] - if commands are used to do some html when a condition is true, and other html when the condition is false. There are some built-in if commands, such as if.guardian, but you can also create your own if commands.

system variables - if you see something like ~(curstudid) or ~(curschoolid), you're looking at a system variable. The variables are substituted with actual values based on values such as the current student id or the current school id.

[tlist_sql;...] [/tlist_sql] - used to embed sql into a page