Internet publishing validation, HTML document publishing

Internet publishingvalidation, HTML document publishing

Petr Zámostnýroom: A-72aphone.: 4222e-mail: [email protected]

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

Quick validity check in PSPad

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 on web.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>


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>


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>


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


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


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

...

Documents

Internet publishing validation, HTML document publishing