Internet publi shing recommended software, encoding HTML, publishing on webserver

1. Internet publishingrecommended software, encodingHTML, publishing on webserver Petr Zámostnýroom: A-72aphone: 4222e-mail: petr.zamostny@vscht.cz

2. PSPad editor • Freeware • http://www.pspad.com/cz/download.php

3. Making the first webpage • Run text processor(PSPad, Notepad, …) • Create a new file • Add DTD • Add mandatory elements • Insert content • Set up the encoding • Save the file

4. Encoding • Encoding specification in the document • <meta http-equiv="content-type" content="text/html; charset=utf-8" /> • Encoding specification used for file saving

5. …Encoding • File encoding • Is determined by the physical representation of character in the document • Document encoding information • Informs the browser about the encoding that is used for non-ASCII characters • The encoding settings in the document and in the text processor must be identical

6. Excercise • Create a webpage similar to the page on left

7. Write valid code • Get used to checking validity of each page you write • http://validator.w3.org/

8. Publishing on webserver • ICT webserver publication tutorial • http://www.vscht.cz/homepage/vc/index/howto/homeadresare

9. Tables <table summary=“table summary" border="1"> <tr> <th>záhlaví sloupce 1</th> <th>záhlaví sloupce 2</th> </tr> <tr> <td>buňka 1</td> <td>buňka 2</td> </tr> <tr> <td>buňka 3</td> <td>buňka 4</td> </tr> </table>

10. Structuring <table summary="anotace tabulky" border="1"> <caption>Sklizeň ovoce</caption> <thead> <tr> <th></th> <th>Hrušky</th> <th>Jablka</th> </tr> </thead> <tfoot> <tr> <th>Celkem</th> <td>25</td> <td>17</td> </tr> </tfoot> <tbody> <tr> <th>Petr</th> <td>10</td> <td>10</td> </tr> <tr> <th>Pavel</th> <td>15</td> <td>7</td> </tr> </tbody> </table>

11. Dimensions <table border="1"> <caption>Implicitní chování</caption> <tr> <td>1. buňka</td> <td>2. trochu větší buňka</td> </tr> </table> <table border="1" width="500"> <caption>Pevná šířka</caption> <tr> <td>1. buňka</td> <td>2. trochu větší buňka</td> </tr> </table> <table border="1" width="80%"> <caption>Šířka v % okna</caption> <tr> <td>1. buňka</td> <td>2. trochu větší buňka</td> </tr> </table>

12. Ohraničení tabulky <table border="0"> <caption>Bez okraje</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br /> <table border="1"> <caption>S okrajem</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br /> <table border="1" frame="void"> <caption>Vnější okraj tabulky</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br /> <table border="1" rules="none"> <caption>Vnitřní okraj tabulky</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br />

13. Alignment <table border="1" width="100%"> <caption>Vodorovné zarovnání</caption> <tr><td align="left">buňka zarovnaná vlevo </td></tr> <tr><td align="right">buňka zarovnaná vpravo </td></tr> <tr><td align="center">buňka zarovnaná na střed </td></tr> <tr><td align="justify">buňka zarovnaná do bloku </td></tr> </table> <br /> <table border="1" width="100%"> <caption>Svislé zarovnání</caption> <tr height="50"><td valign="top">buňka zarovnaná nahoru </td></tr> <tr height="50"><td valign="middle">buňka zarovnaná na střed </td></tr> <tr height="50"><td valign="bottom">buňka zarovnaná dolů </td></tr> <tr height="50"><td valign="baseline">buňka zarovnaná na základní čáru</td></tr> </table> <br />

14. Cell merging <table border="1"> <tr><td>buňka</td><td>buňka</td><td>buňka</td><td>buňka</td></tr> <tr><td>buňka</td><td rowspan="2" colspan="2">expandovaná buňka</td><td>buňka</td></tr> <tr><td>buňka</td><td>buňka</td></tr> <tr><td>buňka</td><td>buňka</td><td>buňka</td><td>buňka</td></tr> </table><br />