Internet publishing HTML (XHTML) language

1
Internet publishingHTML (XHTML) language

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

2
Essential HTML components

• Element
• ltpgtElement examplelt/pgt
• Start tag
• Element content
• End tag
• content-less elements
• HTML 4.01 no closing needed ltbrgt
• XHTML elements must be closed ltbr /gt
• Element can contain another elements
• Well-formed documents

3
Essential HTML components

• Attribute
• Example
• Link lta hrefsomewhere.html"gtsomewhere elselt/agt
• 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

4
Essential HTML components

• Character entities
• Characters difficult to enter via keyboard
• HTML reserved characters
• lt, gt,
• Example
• entity_name
• gt gt
• lt lt
• amp
• quot
• Nonbreaking space nbsp
• character_unicode_number
• ? 8592
• ? 1049

5
Essential HTML components

• Entities defined by XHTML
• http//www.w3.org/TR/xhtml1/DTD/xhtml-lat1.ent
• http//www.w3.org/TR/xhtml1/DTD/xhtml-symbol.ent
• http//www.w3.org/TR/xhtml1/DTD/xhtml-special.ent
• Entity given by number in UNICODE table -
  http//en.wikipedia.org/wiki/Unicode
• Character listings
• http//alanwood.net/unicode/
• In order to display properly, the characters must
  be supported by the browser as well as they must
  be included in specified font

6
XHTML page structure
lt?xml version"1.0" encoding"UTF-8"?gt lt!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml
1/DTD/xhtml1-transitional.dtd"gt lthtmlgt ltheadgt
lttitlegt...lt/titlegt lt/headgt ltbodygt ...
lt/bodygt lt/htmlgt
XML declaration Document type definition
standard Core dokument
7
XML declaration
lt?xml version"1.0" encoding"UTF-8"?gt

• Specifies the XML version and encoding for
  applications working at the XML level
• It is not mandatory, but it is automatically
  included by some editors
• It can cause problems in some MSIE installations
• Recommendation don not use it/delete it

8
Document type definition

• Transitional
• lt!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-trans
  itional.dtd"gt
• Strict
• lt!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-stric
  t.dtd"gt
• Frameset
• lt!DOCTYPE html
• PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
• "http//www.w3.org/TR/xhtml1/DTD/xhtml1-frame
  set.dtd"gt

9
Document type definition

• Specifies the standard used for writing the
  document
• Lists elements that are allowed in the document
  and their nesting

10
Core document lthtmlgt element
lthtml xmlns"http//www.w3.org/1999/xhtml"gt
ltheadgt ... lt/headgt ltbodygt ...
lt/bodygt lt/htmlgt

• Must contain the namespace declaration
  xmlnshttp//www.w3.org/1999/xhtml
• If it is missing it should work safely only in no
  other namespaces are used

11
Head element content
ltheadgt lttitlegtExamplelt/titlegt ltmeta
http-equiv"Content-Type" content"text/html
charsetutf-8" /gt ltmeta name"Keywords"
content"HTML, XHTML" /gt ltmeta name"Authors"
content"Petr Zámostný" /gt lt/headgt

• lttitlegt
• Name of the page displayed in the browser window
  caption
• ltmetagt
• Document metadata
• Usually they are not interpreted by browsers,
  used e.g. for fulltext search robots
• Exception document type and encoding infoltmeta
  http-equiv"Content-Type" content"text/html
  charsetutf-8" /gt

12
body element content
ltbodygt text elements lt/bodygt

• Text and formatting instructions
• Default behavior
• Consecutive spaces, tabs, line-breaks are
  rendered as single space
• Block and inline elements

13
Examples of elements (rehearsing)

• Block
• ltpgt lth1gtlth6gt ltpregt
• ltdivgt
• lthrgt
• ltdlgt ltulgt ltolgt
• lttablegt
• ltformgt
• Inline
• ltagt ltimggt ltmapgt ltbrgt ltscriptgt ltsubgt ltsupgt
• ltspangt
• ltemgt ltstronggt ltcodegt ltcitegt ltdfngt ltsampgt ltkbdgt
  ltvargt ltabbrgt
• ltigt ltbgt

14
Standard attributes

• Can be used for all elements except base, head,
  html, meta, param, script, style a title
• More simply they can be used in all visual
  elements

15
Standard attributes

• class specifies class (group) the element
  belongs to
• id assigns unique identifier to the element
• style can be used to directly set element style
  in CSS
• All attributes above are used for application of
  styles and dynamic behavior
• title specifies element tooltip

16
Language attributes

• For all elements except base, br, frame,
  frameset, hr, iframe, param a script
• dir can have values ltr rtl and controls the
  text direction (left-to-right, right-to-left)
• lang document language

17
Text structure elements

• div section
• p paragraph
• span inline block
• br line-break (content-less ltbr /gt)

18
Text structure (example)
ltbodygt ltdiv idsection1"gt ltpgt1st
paragraphlt/pgt ltpgt2nd paragraphlt/pgt
lt/divgt ltdiv idsection2"gt ltpgt3rd
paragraphlt/pgt ltpgt4th ltspangtparagraphlt/spangt
ofltbr /gt text broken into 2 lineslt/pgt
lt/divgt lt/bodygt
19
Headings
ltbodygt lth1gtHeading 1lt/h1gt
lth2gtHeading 2lt/h2gt lth3gtHeading 3lt/h3gt
lth4gtHeading 4lt/h4gt lth5gtHeading 5lt/h5gt
lth6gtHeading 6lt/h6gt lt/bodygt
20
Formátting
ltbodygt ltpgtltemgtemphasized textlt/emgtlt/pgt ltpgtltstronggt
strong printed textlt/stronggtlt/pgt ltpgtltbgtbold
textlt/bgtlt/pgt ltpgtltigtitalicslt/igtlt/pgt ltpgttextltsubgtsu
bscriptlt/subgtlt/pgt ltpgttextltsupgtsuperscriptlt/supgtlt/p
gt ltpgtltcodegtmonospace fontlt/codegtlt/pgt ltpregt Prefo
rmatted text A B C 1 2 3 4 5 6 lt/pregt lt/bodygt
21
Lists
ltbodygt lth1gtUnordered listlt/h1gt ltulgt
ltli type"disc"gtkoleckolt/ligt ltli
type"circle"gtkroužeklt/ligt ltli
type"square"gtctvereceklt/ligt lt/ulgt
lth1gtOrdered listlt/h1gt ltol type"a"gt
ltligtitem 1lt/ligt ltligtitem 2lt/ligt
ltligtitem 3lt/ligt lt/olgt lth1gtDefinition
listlt/h1gt ltdlgt ltdtgtHTMLlt/dtgtltddgtHyperTex
t Markup Languagelt/ddgt ltdtgtXMLlt/dtgtltddgteXtens
ible Markup Languagelt/ddgt lt/dlgt lt/bodygt
22
Graphics

• img inserts image
• Attributes
• src URL of image file
• alt alternative text
• For users that cannot/does not want to display
  images
• height, width
• Enables the browser get image dimensions before
  they are actually downloaded speeds up document
  display
• Can be used to resize images .. But there are
  better ways to do it

23
Graphics (príklad)
ltbodygt lthr /gt ltimg src"http//www.w3.org/Icons
/valid-xhtml10" alt"Valid XHTML 1.0!"
height"31" width"88" /gt lt/bodygt
24
Tables

• Tables are created hierarchically by following
  elements
• table table
• tr row
• td cell
• th heading cell

25
Tables

• Important attributes of table element
• border
• cellspacing
• cellpadding
• frame, rules

26
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

27
Table borders
lttable border"0"gt ltcaptiongtBez
okrajelt/captiongt lttrgtlttdgt1. bunkalt/tdgtlttdgt2.
bunkalt/tdgtlt/trgt lttrgtlttdgt3. bunkalt/tdgtlttdgt4.
bunkalt/tdgtlt/trgt lt/tablegt ltbr /gt lttable
border"1"gt ltcaptiongtS okrajemlt/captiongt
lttrgtlttdgt1. bunkalt/tdgtlttdgt2. bunkalt/tdgtlt/trgt
lttrgtlttdgt3. bunkalt/tdgtlttdgt4. bunkalt/tdgtlt/trgt
lt/tablegt ltbr /gt lttable border"1"
frame"void"gt ltcaptiongtVnejší okraj
tabulkylt/captiongt lttrgtlttdgt1. bunkalt/tdgtlttdgt2.
bunkalt/tdgtlt/trgt lttrgtlttdgt3. bunkalt/tdgtlttdgt4.
bunkalt/tdgtlt/trgt lt/tablegt ltbr /gt lttable
border"1" rules"none"gt ltcaptiongtVnitrní
okraj tabulkylt/captiongt lttrgtlttdgt1.
bunkalt/tdgtlttdgt2. bunkalt/tdgtlt/trgt lttrgtlttdgt3.
bunkalt/tdgtlttdgt4. bunkalt/tdgtlt/trgt lt/tablegt ltbr /gt
28
Structuring
lttable summary"anotace tabulky" border"1"gt
ltcaptiongtSklizen ovocelt/captiongt lttheadgt
lttrgt ltthgtlt/thgt
ltthgtHruškylt/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

29
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

30
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

31
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