Internet publi shing HTML documents writing basics

Internet publishingHTML documents writing basics Petr Zámostnýroom: A-72aphone.: 4222e-mail: petr.zamostny@vscht.cz

Which software will be used ? • Text Processor PSPad • Downloadhttp://www.pspad.com/cz/download.php • Browsers for checking documents appearance • MSIE • Mozilla Firefox - http://www.mozilla-europe.org/cs/products/firefox/ • Opera - http://www.opera.com/ • And other stuff later …

On-line information sources • XHTML 1.0 specs • http://www.w3.org/TR/xhtml1/ • http://www.zralog.cz/translate/TR/REC-xhtml1-20020801/Overview.html • Tutorial, examples • http://www.w3schools.com/xhtml/default.asp • For Operausers – WebDev Toolbar • http://nontroppo.org/ini/menu/WebDev_Menu_V1.6.ini

The first „webpage“ • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p01.html • Contains some displayable text • Contains some formatting markup, that may work • Ignores standards and recommendations, so that the functionality cannot be guarantied

The first propperwebpage • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p02.html • Follows standards • It will work in all standards compliant browsers

Essential HTML components • Element • <p>Element example</p> • Start tag • Element content • End tag • „content-less elements“ • HTML 4.01: no closing needed<br> • XHTML: elements must be closed<br /> • Element can contain another elements • Well-formed documents

Essential HTML components • Attribute • Link <a href=“somewhere.html">somewhere else</a> • More detailed element specification • Must be placed in starting element brackets • Value must be enclosed in"" • Element may have more attributes • Attributes order is arbitrary

Simplified page structure • Really simplified, details in next lecture přednášce <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>...</title> </head> <body> ... </body> </html>

How to make a page in PSPad

Encoding • Physical encoding must match the one specified in the document

Quick writing tips • Ctrl+, – vloží <></> • Alt+, – vloží <> • Alt+. – vloží </>

Body element • The page content • Default behavior • Consecutive spaces, tabs, linebreaks are rendered as single space • Block and inline elements <body> text elementy </body>

Element types • Block • <p> <h1>…<h6> <pre> • <div> • <hr> • <dl> <ul> <ol> • <table> • <form> • Inline • <a> <img> <map> <br> <script> <sub> <sup> • <span> • <em> <strong> <code> <cite> <dfn> <samp> <kbd> <var> <abbr> • <i> <b>

Document structure elements <body> <div id=„cast1"> <p>Toto je 1. odstavec textu</p> <p>Toto je 2. odstavec textu</p> </div> <div id=„cast2"> <p>Toto je 3. odstavec textu</p> <p>Toto je 4. odstavec textu<br /> ručně zalomený na 2 řádky</p> </div> </body> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p03.html

Headings <body> <h1>Nadpis 1</h1> <h2>Nadpis 2</h2> <h3>Nadpis 3</h3> <h4>Nadpis 4</h4> <h5>Nadpis 5</h5> <h6>Nadpis 6</h6> </body> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p04.html

Formatting <body> <p><em>zdůrazněný text</em></p> <p><strong>silně tištěný text</strong></p> <p><b>tučný text</b></p> <p><i>kurzíva</i></p> <p>text<sub>dolní index</sub></p> <p>text<sup>horní index</sup></p> <p><code>zdrojové texty se zobrazují neproporcionálním písmem</code></p> <pre> Obsah se zobrazí neproporcionálním písmem přesně tak, jak je v dokumentu zapsán, včetně formátovacích znaků A B C 1 2 3 4 5 6 </pre> </body> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p05.html

Lists <body> <h1>Nečíslovaný seznam</h1> <ul> <li type="disc">kolečko</li> <li type="circle">kroužek</li> <li type="square">čtvereček</li> </ul> <h1>Číslovaný seznam</h1> <ol type="a"> <li>položka 1</li> <li>položka 2</li> <li>položka 3</li> </ol> <h1>Definiční seznam</h1> <dl> <dt>HTML</dt><dd>HyperText Markup Language</dd> <dt>XML</dt><dd>eXtensible Markup Language</dd> </dl> </body> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p06.html

Graphics <body> <hr /> <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31"width="88" /> </body> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p07.html

Odkazy <body> <p><a href="http://www.google.com">Absolutní odkaz na jinou stránku</a></p> <p><a href="priklad02-07.html">Relativní odkaz na předchozí příklad</a></p> <p><a href="#navesti1">Odkaz na návěští v tomto dokumentu</a></p> <p><a href="priklad02-08.html#navesti1">Odkaz na návěští v tomto dokumentu</a></p> <p><a name="navesti1" />Příklad definice návěští</p> </body> • http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p08.html

Example • http://www.vscht.cz/kot/cz/ip/cviceni1.doc • Download text • Transform it into the webpage shown on right • Logo URL: • http://www.vscht.cz/main/picture/mask/logo_cz.gif • FCHT link URL : • http://www.vscht.cz/main/soucasti/fakulty/fcht/

Internet publi shing HTML documents writing basics