Internet publishing HTML documents writing basics Petr Zámostný room: A-72a phone.:
Which software will be used ? Text Processor PSPad Download Browsers for checking documents appearance MSIE Mozilla Firefox - europe.org/cs/products/firefox/ europe.org/cs/products/firefox/ Opera - And other stuff later …
On-line information sources XHTML 1.0 specs /Overview.html /Overview.html Tutorial, examples For Opera users – WebDev Toolbar
The first „webpage“ materialy/ip-s-001/p01.html 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 propper webpage materialy/ip-s-001/p02.html materialy/ip-s-001/p02.html Follows standards It will work in all standards compliant browsers
Essential HTML components Element Element example Start tag Element content End tag „content-less elements“ HTML 4.01: no closing needed XHTML: elements must be closed Element can contain another elements Well-formed documents
Essential HTML components Attribute Link somewhere else 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" "
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 text elementy
Element types Block … Inline
Document structure elements Toto je 1. odstavec textu Toto je 2. odstavec textu Toto je 3. odstavec textu Toto je 4. odstavec textu ručně zalomený na 2 řádky
Headings Nadpis 1 Nadpis 2 Nadpis 3 Nadpis 4 Nadpis 5 Nadpis 6
Formatting zdůrazněný text silně tištěný text tučný text kurzíva text dolní index text horní index zdrojové texty se zobrazují neproporcionálním písmem Obsah se zobrazí neproporcionálním písmem přesně tak, jak je v dokumentu zapsán, včetně formátovacích znaků ABC
Lists Nečíslovaný seznam kolečko kroužek čtvereček Číslovaný seznam položka 1 položka 2 položka 3 Definiční seznam HTML HyperText Markup Language XML eXtensible Markup Language
Graphics <img src=" alt="Valid XHTML 1.0!" height="31" width="88" />
Odkazy Absolutní odkaz na jinou stránku Relativní odkaz na předchozí příklad Odkaz na návěští v tomto dokumentu Příklad definice návěští
Example Download text Transform it into the webpage shown on right Logo URL: FCHT link URL :