Technologies for web publishing

1
Technologies for web publishing

• Ing. Vaclav Freylich

Lecture 1
2
Brief content

• Basic XHTML course
• HTML syntax
• elements
• formatting (using CSS)
• validation
• CSS
• formatting HTML elements
• positioning

3
Literature and sources

• http//www.w3schools.com
• http//www.w3schools.com/css
• http//www.htmlcodetutorial.com

4
Requirements

• Project
• personal website
• valid XHTML 1.0
• at least 10 .html files
• using external CSS
• Examination
• presentation of the project
• discussion about the project and the source code

5
HTML the tag and the element

• HTML page consists of tags (elements)
• Pair tag ltbodygtlt/bodygt
• non-pair tag (HTML) ltbrgt
• non-pair tag (XHTML) ltbr /gt
• Tag with some content element
• Element can have attributes
• lta href"product.htm"gtLink to the next pagelt/agt

6
HTML page basic structure

• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
  Transitional//EN"gt
• lthtmlgt
• ltheadgt
• ltmeta http-equiv"content-type"
  content"text/html charsetUTF-8"gt
• ltmeta name"author" content"John Smith"gt
• lttitlegtMy first pagelt/titlegt
• lt/headgt
• ltbodygt
• ltpgtHello world!lt/pgt
• lt/bodygt
• lt/htmlgt

7
XHTML just a small difference

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• lthtmlgt
• ltheadgt
• ltmeta http-equiv"content-type"
  content"text/html charsetUTF-8" /gt
• ltmeta name"author" content"John Smith" /gt
• lttitlegtMy first pagelt/titlegt
• lt/headgt
• ltbodygt
• ltpgtHello world!lt/pgt
• lt/bodygt
• lt/htmlgt

8
HTML - Plain text

• Paragraph
• ltp class"basic_text"gtSome text herelt/pgt
• The length of the paragraph text is not limited.
• We can set the text format in external CSS,
  inline CSS or using special HTML attributes
• Formatting by attributes is ordinarily not valid
• in XHTML 1.0 Strict!

9
HTML - headline

• Headline
• lth1gtMain headline of the pagelt/h1gt
• There are six headline levels existing (h1 h6).
  
• It is not suitable to jump across some levels.
• We should respect the semantic meaning of the
  page content and use the headlines according to
  this content.

10
HTML phrase elements

• Phrase elements
• Determine the semantic meaning of the text.
• Usually they are implicitly formatted by the
  browser.
• Frequently used
• ltemgtlt/emgt emphasis
• ltstronggtlt/stronggt highlighted text
• Other phrase elements
• ltcodegtlt/codegt source code
• ltsampgtlt/sampgt output of some script or program
• ltdfngtlt/dfngt definition

11
HTML - quotation

• Element cite ltcitegtShakespearelt/citegt.
• Name of the author, quoted source, ..
• Elements ltqgt and ltblockquotegt
• ltqgtTo be or not to be?lt/qgt
• Used for short quotations. Browser should add the
  quotes to the text marked with this element.
• ltblocquotegtltpgtTo be or not to be?lt/pgtlt/blockquotegt
  
• Block element for longer quotations.
• It can contain only the block elements.