Internet publishing validation HTML document publishing Petr Zmostn
Internet publishing validation, HTML document publishing Petr Zámostný room: A-72 a phone. : 4222 e-mail: petr. zamostny@vscht. cz
How to start writing a web page - rehearsing o o o o 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 o o o Get used to check validity of each page you create http: //validator. w 3. org/ If using validation by file upload, there may be encoding problems misreported It can be avoided by using extended interface http: //validator. w 3. org /file-upload. html
Quick validity check in PSPad
Publishing files on a webserver o o Via LAN Via FTP n n o Common choice for professional/commercial webhosting e. g. web. vscht. cz Form Interface n n Common for free and sponsored services e. g. mujweb. atlas. cz
Publishing webpage on web. vscht. cz o In ICT domain (after succesfull login) n n n o Tutorial (in Czech) n o Content of network folder Z: HTML Is accessible as http: //web. vscht. cz/login e. g. http: //web. vscht. cz/zamostnp http: //www. vscht. cz/homepage/vc/index/ho wto/www/tvorba_www How to connect Z: drive (in Czech) n http: //www. vscht. cz/homepage/vc/index/ho wto/homeadresare
Exercise o o 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) <body> <p><a href="http: //www. google. com">Absolute link to another page</a></p> <p><a href="priklad 02 -07. html">Relative link to document in the same folder </a></p> <p><a href="#navesti 1">Link to label in THIS document</a></p> <p><a name="navesti 1" /> Label definition</p> </body> o Hyperlinks within your website should be relative (remember that you may want to move the website in the future) ohttp: //www. vscht. cz/kot/resources/studijni-materialy/ip-s-001/p 08. html
Root document o If the HTTP request does not specify the exact file (only folder), such as. n n o o 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> <td>buňka 1</td> <td>buňka 2</td> </tr> <td>buňka 3</td> <td>buňka 4</td> </tr> </table> ohttp: //www. vscht. cz/kot/resources/studijni-materialy/ip-s-002/p 01. 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> </tr> <th>Pavel</th> <td>15</td> <td>7</td> </tr> </tbody> </table> ohttp: //www. vscht. cz/kot/resources/studijni-materialy/ip-s-002/p 02. 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> ohttp: //www. vscht. cz/kot/resources/studijni-materialy/ip-s-002/p 03. 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> <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> ohttp: //www. vscht. cz/kot/resources/studijni-materialy/ip-s-002/p 04. html
Merging cells <table border="1"> <tr><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><td>buňka</td></tr> </table> ohttp: //www. vscht. cz/kot/resources/studijni-materialy/ip-s-002/p 05. html
Exercise o o Create a page containing table similar to that on right Use figures n n n http: //www. vscht. cz/kot/cz /ip/brouk 1. jpg http: //www. vscht. cz/kot/cz /ip/brouk 2. jpg. . .
- Slides: 15