150 likes | 264 Views
Internet publishing validation, HTML document publishing. Petr Zámostný room: A-72a phone.: 4222 e-mail: petr.zamostny@vscht.cz. How to start writing a web page - rehearsing. Start up your text editor ( PSPad , notepad ) Create a new file (use template if possible) Insert DTD
E N D
Internet publishingvalidation, HTML document publishing Petr Zámostnýroom: A-72aphone.: 4222e-mail: petr.zamostny@vscht.cz
How to start writing a web page - rehearsing • Start up your text editor(PSPad, notepad) • Create a new file (use template if possible) • Insert DTD • Insert mandatory elements • Set up character encoding • Type in the document content • Save the file
Write valid code • Get used to check validity of each page you create • http://validator.w3.org/ • If using validation by file upload, there may be encoding problems misreported • It can be avoided by using extended interface • http://validator.w3.org/file-upload.html
Publishing files on a webserver • Via LAN • Via FTP • Common choice for professional/commercial webhosting • e.g. web.vscht.cz • Form Interface • Common for free and sponsored services • e.g. mujweb.atlas.cz
Publishing webpage onweb.vscht.cz • In ICT domain (after succesfull login) • Content of network folder Z:\HTML • Is accessible as http://web.vscht.cz/login • e.g. http://web.vscht.cz/zamostnp • Tutorial (in Czech) • http://www.vscht.cz/homepage/vc/index/howto/www/tvorba_www • How to connect Z: drive (in Czech) • http://www.vscht.cz/homepage/vc/index/howto/homeadresare
Exercise • Make a webpage similar to that shown on left • HINT: Use Lorem-Ipsum generator for arbitrary text PSPadu • Validate the page source • Publish the webpage on webserver
Hyperlinks (rehearsing) • Hyperlinks within your website should be relative (remember that you may want to move the website in the future) <body> <p><a href="http://www.google.com">Absolute link to another page</a></p> <p><a href="priklad02-07.html">Relative link to document in the same folder</a></p> <p><a href="#navesti1">Link to label in THIS document</a></p> <p><a name="navesti1" />Label definition</p> </body> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p08.html
Root document • If the HTTP request does not specify the exact file (only folder), such as. • http://www.vscht.cz • http://web.vscht.cz/zamostnp • The server automatically redirects the request to a document named „index.html“ or „index.htm“ in the specified folder • That file should be the homepage
Tables <table summary="anotace tabulky" 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> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p01.html
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> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p02.html
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> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p03.html
Table 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 /> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p04.html
Merging cells <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 /> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p05.html
Exercise • Create a page containing table similar to that on right • Use figures • http://www.vscht.cz/kot/cz/ip/brouk1.jpg • http://www.vscht.cz/kot/cz/ip/brouk2.jpg • ...