1 / 20

Essentials of HTML and XHTML: Basics for Internet Publishing

This guide offers foundational knowledge for creating and publishing HTML and XHTML documents. Utilizing PSPad as a text processor, it covers essential components such as elements, attributes, and document structure. You'll learn about different types of elements, formatting, lists, and the significance of adhering to web standards. Additionally, it provides links to online resources, including tutorials and specifications, ensuring you have the necessary tools to build compliant web pages. Ideal for beginners and those looking to refresh their skills.

krista
Télécharger la présentation

Essentials of HTML and XHTML: Basics for Internet 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 publishingHTML documents writing basics Petr Zámostnýroom: A-72aphone.: 4222e-mail: petr.zamostny@vscht.cz

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

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

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

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

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

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

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

  9. How to make a page in PSPad

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

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

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

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

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

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

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

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

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

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

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

More Related