Internet publishing HTML documents writing basics Petr Zámostný room: A-72a phone.: 4222 e-mail: petr.zamostny@vscht.cz
Which software will be used ? � Text Processor PSPad Download http://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 Opera users – 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 m ay work � Ignores standards and recommendations, so that the functionality cannot be guarantied
The first propper webpage � 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 <body> text elementy </body> � The page content � Default behavior � Consecutive spaces, tabs, linebreaks are rendered as single space � Block and inline elements
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/ �
Recommend
More recommend
![Security and Networking Basics Security and Networking Basics Internet Security [1] VU Engin](https://c.sambuz.com/865114/security-and-networking-basics-security-and-networking-s.jpg)
