Internet publishing recommended software, encoding HTML, publishing - PowerPoint PPT Presentation

Internet publishing recommended software, encoding HTML, publishing on webserver Petr Zámostný room: A-72a phone: 4222 e-mail: petr.zamostny@vscht.cz

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

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

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

…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

Excercise � Create a webpage similar to the page on left

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

Publishing on webserver � ICT webserver publication tutorial � http://www.vscht.cz/homepage/vc/index/ho wto/homeadresare

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>

<table summary="anotace tabulky" border="1"> Structuring <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>

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>

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 />

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 />

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 />