Internet publishing validation, HTML document publishing

1
Internet publishingvalidation, HTML document
publishing

• Petr Zámostnýroom A-72aphone. 4222e-mail
  petr.zamostny_at_vscht.cz

2
How to start writing a web page - rehearsing

• Start up your text editor (PSPad, notepad)
• Create a new file (use template if possible)
• Insert DTD
• Insert mandatory elements
• Set up character encoding
• Type in the document content
• Save the file

3
Write valid code

• Get used to check validity of each page you
  create
• http//validator.w3.org/
• If using validation by file upload, there may be
  encoding problems misreported
• It can be avoided by using extended interface
• http//validator.w3.org/file-upload.html

4
Quick validity check in PSPad
5
Publishing files on a webserver

• Via LAN
• Via FTP
• Common choice for professional/commercial
  webhosting
• e.g. web.vscht.cz
• Form Interface
• Common for free and sponsored services
• e.g. mujweb.atlas.cz

6
Publishing webpage on web.vscht.cz

• In ICT domain (after succesfull login)
• Content of network folder Z\HTML
• Is accessible as http//web.vscht.cz/login
• e.g. http//web.vscht.cz/zamostnp
• Tutorial (in Czech)
• http//www.vscht.cz/homepage/vc/index/howto/www/tv
  orba_www
• How to connect Z drive (in Czech)
• http//www.vscht.cz/homepage/vc/index/howto/homead
  resare

7
Exercise

• Make a webpage similar to that shown on left
• HINT Use Lorem-Ipsum generator for arbitrary
  text PSPadu
• Validate the page source
• Publish the webpage on webserver

8
Hyperlinks (rehearsing)
ltbodygt ltpgtlta href"http//www.google.com"gtAbso
lute link to another pagelt/agtlt/pgt ltpgtlta
href"priklad02-07.html"gtRelative link to
document in the same folderlt/agtlt/pgt ltpgtlta
href"navesti1"gtLink to label in THIS
documentlt/agtlt/pgt ltpgtlta name"navesti1"
/gtLabel definitionlt/pgt lt/bodygt

• Hyperlinks within your website should be relative
  (remember that you may want to move the website
  in the future)

• http//www.vscht.cz/kot/resources/studijni-materia
  ly/ip-s-001/p08.html

9
Root document

• If the HTTP request does not specify the exact
  file (only folder), such as.
• http//www.vscht.cz
• http//web.vscht.cz/zamostnp
• The server automatically redirects the request to
  a document named index.html or index.htm in
  the specified folder
• That file should be the homepage

10
Tables
lttable summary"anotace tabulky" border"1"gt
lttrgt ltthgtzáhlaví sloupce 1lt/thgt
ltthgtzáhlaví sloupce 2lt/thgt lt/trgt lttrgt
lttdgtbunka 1lt/tdgt lttdgtbunka 2lt/tdgt
lt/trgt lttrgt lttdgtbunka 3lt/tdgt
lttdgtbunka 4lt/tdgt lt/trgt lt/tablegt

• http//www.vscht.cz/kot/resources/studijni-materia
  ly/ip-s-002/p01.html

11
Structuring
lttable summary"anotace tabulky" border"1"gt
ltcaptiongtSklizen ovocelt/captiongt lttheadgt
lttrgt ltthgtlt/thgt
ltthgtHrukylt/thgt ltthgtJablkalt/thgt
lt/trgt lt/theadgt lttfootgt lttrgt
ltthgtCelkemlt/thgt lttdgt25lt/tdgt
lttdgt17lt/tdgt lt/trgt lt/tfootgt lttbodygt
lttrgt ltthgtPetrlt/thgt
lttdgt10lt/tdgt lttdgt10lt/tdgt lt/trgt
lttrgt ltthgtPavellt/thgt lttdgt15lt/tdgt
lttdgt7lt/tdgt lt/trgt lt/tbodygt
lt/tablegt

• http//www.vscht.cz/kot/resources/studijni-materia
  ly/ip-s-002/p02.html

12
Table dimensions
lttable border"1"gt ltcaptiongtImplicitní
chovánílt/captiongt lttrgt lttdgt1.
bunkalt/tdgt lttdgt2. trochu vetí bunkalt/tdgt
lt/trgt lt/tablegt lttable border"1"
width"500"gt ltcaptiongtPevná írkalt/captiongt
lttrgt lttdgt1. bunkalt/tdgt lttdgt2.
trochu vetí bunkalt/tdgt lt/trgt lt/tablegt
lttable border"1" width"80"gt
ltcaptiongtírka v oknalt/captiongt lttrgt
lttdgt1. bunkalt/tdgt lttdgt2. trochu vetí
bunkalt/tdgt lt/trgt lt/tablegt

• http//www.vscht.cz/kot/resources/studijni-materia
  ly/ip-s-002/p03.html

13
Table alignment
lttable border"1" width"100"gt
ltcaptiongtVodorovné zarovnánílt/captiongt
lttrgtlttd align"left"gtbunka zarovnaná vlevo
lt/tdgtlt/trgt lttrgtlttd align"right"gtbunka
zarovnaná vpravo lt/tdgtlt/trgt lttrgtlttd
align"center"gtbunka zarovnaná na stred
lt/tdgtlt/trgt lttrgtlttd align"justify"gtbunka
zarovnaná do bloku lt/tdgtlt/trgt lt/tablegt ltbr
/gt lttable border"1" width"100"gt
ltcaptiongtSvislé zarovnánílt/captiongt lttr
height"50"gtlttd valign"top"gtbunka zarovnaná
nahoru lt/tdgtlt/trgt lttr height"50"gtlttd
valign"middle"gtbunka zarovnaná na stred
lt/tdgtlt/trgt lttr height"50"gtlttd
valign"bottom"gtbunka zarovnaná dolu lt/tdgtlt/trgt
lttr height"50"gtlttd valign"baseline"gtbunka
zarovnaná na základní cárult/tdgtlt/trgt lt/tablegt
ltbr /gt

• http//www.vscht.cz/kot/resources/studijni-materia
  ly/ip-s-002/p04.html

14
Merging cells
lttable border"1"gt lttrgtlttdgtbunkalt/tdgtlttdgtbunk
alt/tdgtlttdgtbunkalt/tdgtlttdgtbunkalt/tdgtlt/trgt
lttrgtlttdgtbunkalt/tdgtlttd rowspan"2"
colspan"2"gtexpandovaná bunkalt/tdgtlttdgtbunkalt/tdgtlt
/trgt lttrgtlttdgtbunkalt/tdgtlttdgtbunkalt/tdgtlt/trgt
lttrgtlttdgtbunkalt/tdgtlttdgtbunkalt/tdgtlttdgtbunkalt/tdgtlttd
gtbunkalt/tdgtlt/trgt lt/tablegtltbr /gt

• http//www.vscht.cz/kot/resources/studijni-materia
  ly/ip-s-002/p05.html

15
Exercise

• Create a page containing table similar to that on
  right
• Use figures
• http//www.vscht.cz/kot/cz/ip/brouk1.jpg
• http//www.vscht.cz/kot/cz/ip/brouk2.jpg
• ...