HTML

• HTML is the language used for describing webpages.
• The webserver sends html to the browser, the browser (client) interprets the html and displays it as a webpage.
  
• The structure of an html-file is similar to a tex-file, every element shown on the page is described in html-syntax.
• Name of html file usually ends in .html.
  
• Language elements similar to those in TeX: itemize lists, enumeration, tables, emphasized text, bold face text, etc.
• HTML syntax uses tags written as <tagname> for opening and the corresponding </tagname> for closing an element.
• Use the feature of your web-browser to show the html source code of any webpage you view.
• See the w3c page for a complete description of the language. For german/french speaking people, also selfhtml might be helpful.
  
• When writing your own pages, try the following page to have your html syntax checked. You will learn a lot about html this way.
• For testing purposes, you can work in /home/www/people/login, where 'login' is your RISC-login. Create a page 'page.html' in this directory, it can be referred to as http://www.risc.uni-linz.ac.at/people/login/page.html in the browser. Try out!
  

Formatting HTML pages

Visual appearance of parts of a page can be changed by using tags that change the font size, font shape, alignment, etc. Furthermore, many tags in html allow additional options the influence the way how a browser will display things on the screen. A better way to reach uniformity in the layout is to use cascading style sheets (CSS). The principle is easy:

1. Every element can have an associated class, just use <tagname class='cs'> to assign class 'cs' to this element.
2. A style sheet is setup to determine the formatting of elements according to their class, e.g.
   .cs {font-weight: bold;}
   would tell that any element having class 'cs' would use bold face font, or
   tagname.cs {font-size: 10pt;}
   would tell that any element <tagname class='cs'> would use 10pt font. For an exhaustive list of features available in CSS, we refer to this page. Similar to HTML pages, also a CSS style sheet can be validated (checked for conformity to the rules), see this page.
   
3. One or more style sheets can be linked to an html page in order to format the elements used in the html file, just write
   <link rel=stylesheet type="text/css" href='filename.css'>
   in the head of the html file to use stylesheet 'filename.css'.

Special Elements

HTML offers several special elements, which make HTML pages active (in some sense). We briefly discuss two of them.

1. Links are active elements that lead to another location when clicked. Links are the essence of the WWW, they turn individual pages into a web! A link is written as <a href='url'>, where url as the URL of the destination. url is typically another page. The special form url#loc refers to a particular location 'loc' in the target-URL 'url', which is specified by putting <a name='loc'> at the desired position in 'url'.
2. Forms are active elements with input fields, radio buttons, checkboxes, menus, etc. A form is filled out and then submitted to the server, typically by pressing a button in the form. A form must specify an action, which is executed when the form is submitted. The action is a program that will run on the server, when the form is submitted, with the form data passed as parameters to the program.

Dynamic Pages

Key idea: instead of writing the html code of a page let a program generate the page.
Why this? The page can have different content depending on when it is viewed, by whom it is viewed, from where it is viewed, etc.

First look at some examples:

• RISC People Page: The contents comes from a database at the moment when you view the page. Click on the filters on top of the list, e.g. to see only PhD Students, and the same program displays another result depending on parameters passed to the program. Note the URL shown in your browser is then http://www.risc.uni-linz.ac.at/people/?status=phdstud, which passes a parameter 'status' with value 'phdstud' to the program.
• RISC Media Archive Page: The list of years on the top is generated automatically depending on the current date. On a static page one would have to edit (and reformat!) the list every year!
• Theorema Download Page: This is a page containing a form (3 text input fields). View the HTML source of the page and towards the bottom of the page you will find the form code: <form action='script.php' method=post> ... </form>. This means that when the form is submitted the program 'script.php' is called with the form data as parameters, and the next page of course depends on the data given on this page.

How can such things be achieved?

• The web server and the programming language must play together. A popular combination is (also used at RISC) is an Apache web server with PHP as the programming language for the programs (often referred to as scripts).
• From now on we only talk about Apache/PHP and we assume an appropriate server configuration.
• The scripts are executed on the webserver, one often speaks in this context of server-side scripting.
  
• For testing purposes take the page 'page.html' from above and rename the page to 'page.php'.
• PHP program code is written inside <?php ... ?>, where ... is arbitrary PHP program code.
• PHP is an easy programming language with many useful features for web programming, see this page for an overview on the language constructs available in PHP.
• PHP scripts must generate the HTML code that should be displayed at the point in the page where the script is placed. Try the easiest example and write <?php echo("<h1>This is PHP</h1>"); ?> somewhere in your page and view it in a browser.

Parameters for scripts

There are two methods for passing parameters: GET and POST.

1. GET is when you encode parameters into the url such as url?param1=val1&param2=val2. This is e.g. done on the RISC people page when filtering PhD students, the url is then http://www.risc.uni-linz.ac.at/people/?status=phdstud (see above). This url is even special in the sense that it does not specify the file in the directory, Apache the serves a default file, namely index.html or index.php, depending which one is present, in the people directory it is index.php and it passes a parameter 'status' with value 'phdstud' to the script index.php using the GET method. In the script, we can then refer to the parameter as $_GET['status'].
   
2. When using the POST method one does not see the parameters in the url, which is typically used when submitting html forms (this is the meaning of 'method=post' in the example above!). Accordingly one refers to post parameters with $_POST['name'] in the PHP script.

File upload (advanced topic)

Often you will find pages that allow to upload a file, e.g. you did this in the frame of your plone exercise. How does this work?

The upload page is essentially a form (see above), a special element in form is one of type "file", which usually displays with a button that allows to browse your local filesystem to choose a file. When you submit the form, the chosen file is sent to the action-script as part of the POST request (note: you cannot do file upload using the GET method). If this script is written in PHP, some data (e.g. filename) is available in the variable $_FILES (see php documentation), and you can store the uploaded file on the webserver using move_uploaded_file (see php documentation).

Client-side scripting

Some dynamic behaviour can also be generated by having the browser (i.e. the client) execute programs that work on the html code of the page. This is where JAVASCRIPT enters the game. Many actions that are usually triggered by mouse or keyboard events can be executed in javascript. Many html elements can associate an action to be executed whenever a certain event happens, e.g. when the mouse moves over the element. The action is then typically specified as a javascript-program that can be executed by the browser (not the server). This is why you find an option "enable javascript" in most browsers, if the option is not active, javascript pages will not be fully functional. We do not go into details.