Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
1
Internet publishing HTML documents writing basics Petr Zámostný room: A-72a phone.: 4222 e-mail: petr.zamostny@vscht.czpetr.zamostny@vscht.cz
2
Which software will be used ? Text Processor PSPad Download http://www.pspad.com/cz/download.phphttp://www.pspad.com/cz/download.php Browsers for checking documents appearance MSIE Mozilla Firefox - http://www.mozilla- europe.org/cs/products/firefox/http://www.mozilla- europe.org/cs/products/firefox/ Opera - http://www.opera.com/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 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
4
The first „webpage“ http://www.vscht.cz/kot/resources/studijni- materialy/ip-s-001/p01.html 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 propper webpage http://www.vscht.cz/kot/resources/studijni- materialy/ip-s-001/p02.html 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 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
7
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
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">......
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 text elementy
13
Element types Block … Inline
14
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 http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p03.html http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p03.html
15
Headings Nadpis 1 Nadpis 2 Nadpis 3 Nadpis 4 Nadpis 5 Nadpis 6 http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p04.html http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p04.html
16
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 123 456 http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p05.html http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p05.html
17
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 http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p06.html http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p06.html
18
Graphics <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /> http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p07.html http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p07.html
19
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í http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p08.html http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-001/p08.html
20
Example http://www.vscht.cz/kot/cz/ip/cviceni1.doc 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/
Podobné prezentace
