1 / 15

Internet publishing validation, HTML document publishing

This guide provides essential steps and tips for beginners on how to create and publish a web page effectively. It covers the initial setup of a text editor, creating a new file, inserting necessary document types and elements, and ensuring proper character encoding. Key instructions include writing valid HTML code and validating it through online tools. Also discussed are the basics of publishing your webpage on a server via LAN or FTP, as well as managing hyperlinks effectively. Ideal for those looking to establish a web presence.

eunice
Télécharger la présentation

Internet publishing validation, HTML document publishing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internet publishingvalidation, HTML document publishing Petr Zámostnýroom: A-72aphone.: 4222e-mail: petr.zamostny@vscht.cz

  2. 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

  3. 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

  4. Quick validity check in PSPad

  5. 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

  6. 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

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

  8. 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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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 • ...

More Related