Upload
eunice
View
32
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Internet publishing validation, HTML document publishing. Petr Zámostný room: A-72a phone.: 4222 e-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 - PowerPoint PPT Presentation
Citation preview
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>
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
...