Index: html/ahoj.html
===================================================================
--- html/ahoj.html	(revision 2:26a11fc8e3e4)
+++ html/ahoj.html	(revision 2:26a11fc8e3e4)
@@ -0,0 +1,85 @@
+<table>
+    <thead>
+        <tr>
+            <td>Sloupeček 1</td>
+            <td>Sloupeček 2</td>
+            <td>Sloupeček 3</td>
+            <td>Sloupeček 4</td>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+        <tr>
+            <td>Hodnota 1</td>
+            <td>Hodnota 2</td>
+            <td>Hodnota 3</td>
+            <td class="cislo">1234,56</td>
+        </tr>
+    </tbody>
+</table>
+<p>Ahoj. Právě jsi zmáčknul tlačítko :-)</p>
Index: html/hlavni.js
===================================================================
--- html/hlavni.js	(revision 2:26a11fc8e3e4)
+++ html/hlavni.js	(revision 2:26a11fc8e3e4)
@@ -0,0 +1,59 @@
+/**
+ * Aby to fungovalo i v MSIE 6.
+ * @return AJAXový objekt.
+ */
+function getXmlHttpRequestObject() {
+    if (window.XMLHttpRequest) {
+        return new XMLHttpRequest();
+    } else if(window.ActiveXObject) {
+        return new ActiveXObject("Microsoft.XMLHTTP");
+    } else {
+        alert("Váš prohlížeč nepodporuje AJAX. Pořiďte si méně zastaralý prohlížeč, nejlépe Firefox.");
+        return null;
+    }
+}
+
+/** Náš AJAXový objekt. */
+var ajax = getXmlHttpRequestObject();
+
+/**
+ * Zobrazí text na požadovaném místě.
+ * @param text text k zobrazení
+ * @param kde id prvku, do kterého se má text vypsat
+ **/
+function zobraz(text, kde) {
+    document.getElementById(kde).innerHTML = text;
+}
+
+/**
+ * Zobrazí text ve výstupním poli.
+ * @param text text k zobrazení
+ **/
+function zobrazVystup(text) {
+    zobraz(text, 'vystupniPole');
+}
+
+/**
+ * Zobrazí text ve poli pro nápovědu.
+ * @param text text k zobrazení
+ **/
+function zobrazNapovedu(text) {
+    zobraz(text, 'napovedniPole');
+}
+
+/** Jednoduchá AJAXová funkce, načte obsah souboru a zobrazí ho ve výstupním okně. */
+function demo() {
+    if (ajax.readyState == 4 || ajax.readyState == 0) {
+        ajax.open("GET", 'ahoj.html', true);
+        ajax.onreadystatechange = demoVypis;
+        ajax.send(null);
+    }
+    //zobrazNapovedu('Nějaká nápověda k danému příkazu.');
+}
+
+/** Pomocná funkce – postará se o vypsání v pravou chvíli. */
+function demoVypis() {
+    if (ajax.readyState == 4) {
+        zobrazVystup(ajax.responseText);
+    }
+}
Index: html/index.html
===================================================================
--- html/index.html	(revision 1:6dced8dcb2e6)
+++ html/index.html	(revision 2:26a11fc8e3e4)
@@ -6,4 +6,5 @@
         <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
         <link href="styl.css" type="text/css" rel="StyleSheet"/>
+        <script type="text/javaScript" src="hlavni.js"></script>
         <title>SQL: pojďte si hrát!</title>
     </head>
@@ -15,5 +16,5 @@
                 <h2>Nápověda</h2>
                 <div class="vnitrekBloku">
-                    <p>lorem ipsum, nějaký text, něco jako latina, ale jiné…</p>
+                    <p id="napovedniPole">lorem ipsum, nějaký text, něco jako latina, ale jiné…</p>
                 </div>
             </div>
@@ -27,5 +28,5 @@
                         <form>
                             <textarea>SELECT * FROM tabulka;</textarea>
-                            <button type="submit">Vykonat SQL!</button>
+                            <button type="button" onclick="javascript:demo();">Vykonat SQL!</button>
                         </form>
                     </div>
@@ -38,5 +39,5 @@
                 <div class ="blok" id="vystup">
                     <h2>Výsledek</h2>
-                    <div class="vnitrekBloku">
+                    <div class="vnitrekBloku" id="vystupniPole">
                         <p>
                             lorem ipsum, nějaký text, něco jako latina, ale jiné…
Index: html/styl.css
===================================================================
--- html/styl.css	(revision 1:6dced8dcb2e6)
+++ html/styl.css	(revision 2:26a11fc8e3e4)
@@ -1,14 +1,19 @@
+/** Obrázky s odkazem bez rámečku */
 a img {
     border: none;
 }
 
+/** Pozadí stránky a text */
 html {
     background: #42afdc;
     color:black;
 }
+
+/** Bezpatkové písmo */
 body {
     font-family: sans-serif;
 }
 
+/** Prostor pro logo a název programu */
 #zahlavi {
     height: 48px;
@@ -40,6 +45,7 @@
 #vstup textarea {
     width: 640px;
-    height: 110px;
+    height: 108px;
     padding: 8px;
+    border: 1px solid silver;
 }
 
@@ -51,5 +57,6 @@
     padding: 2px;
     font-size: 12px;
-    margin-right: 3px;
+    margin-right: 0px;
+    margin-top: 5px;
 }
 
@@ -63,10 +70,13 @@
 }
 
+/** Nadpisy bloků */
 .blok h2 {
-    font-size: medium;
+    font-size: 12px;
     padding: 2px;
+    padding-top: 4px;
     padding-left: 32px;
     margin: 0px;
     color: gray;
+    height: 20px;
 }
 
@@ -75,22 +85,53 @@
 }
 
+/** Vstupně-výstupní část */
+#io {
+    float: left;
+}
+
 #io h2 {
     background-image: url('grafika/blok-nadpis-680.png');
 }
 
-#io {
-    float: left;
-}
-
+/** Blok vstupu */
 #vstup {
     width: 680px;
 }
 
+/** Blok výstupu */
 #vystup {
     width: 680px;
 }
 
+/** Blok nápovědy */
 #napoveda {
     float: right;
     width: 320px;
 }
+
+/** Formátování (výstupní) tabulky */
+table {
+    border: 1px solid green;
+    border-collapse:collapse;
+}
+
+td {
+    border: 1px solid black;
+    padding: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+td.cislo {
+    text-align: right;
+}
+
+thead {
+    background: silver;
+    font-weight:bold;
+}
+
+thead td a {
+    color: black;
+    text-decoration: none;
+}