Internet publishing HTML documents writing basics Petr Zmostn - - PowerPoint PPT Presentation

▶
internet publishing html documents writing basics
SMART_READER_LITE
LIVE PREVIEW

Internet publishing HTML documents writing basics Petr Zmostn - - PowerPoint PPT Presentation

Oct 14, 2023 152 likes •368 views

Internet publishing HTML documents writing basics Petr Zmostn 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

slide-1
SLIDE 1

Internet publishing HTML documents writing basics

Petr Zámostný room: A-72a phone.: 4222 e-mail: petr.zamostny@vscht.cz

slide-2
SLIDE 2

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 …

slide-3
SLIDE 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 Opera users – WebDev Toolbar
  • http://nontroppo.org/ini/menu/WebDev_Menu_V1.6.ini
slide-4
SLIDE 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 m ay work Ignores standards and recommendations, so that the functionality cannot be guarantied

slide-5
SLIDE 5

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

slide-6
SLIDE 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
slide-7
SLIDE 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
slide-8
SLIDE 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>

slide-9
SLIDE 9

How to make a page in PSPad

slide-10
SLIDE 10

Encoding

Physical encoding must match the one specified in the document

slide-11
SLIDE 11

Quick writing tips

Ctrl+, – vloží <></> Alt+, – vloží <> Alt+. – vloží </>

slide-12
SLIDE 12

Body element

<body> text elementy </body>

The page content Default behavior

Consecutive spaces, tabs, linebreaks are rendered as single space

Block and inline elements

slide-13
SLIDE 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>
slide-14
SLIDE 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

slide-15
SLIDE 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

slide-16
SLIDE 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

slide-17
SLIDE 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

slide-18
SLIDE 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

slide-19
SLIDE 19

Odkazy

<body> <p><a href="http://www.google.com">Absolutní

  • dkaz 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

slide-20
SLIDE 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/