110 likes | 218 Vues
Technologies for web publishing. Ing. Vaclav Freylich. Lecture 1. Brief content. Basic XHTML course HTML syntax elements formatting (using CSS) validation CSS formatting HTML elements positioning. Literature and sources. http://www.w3schools.com http://www.w3schools.com/css
E N D
Technologies for web publishing Ing. Vaclav Freylich Lecture 1
Brief content • Basic XHTML course • HTML syntax • elements • formatting (using CSS) • validation • CSS • formatting HTML elements • positioning TNPW1 - přednáška č. 1
Literature and sources • http://www.w3schools.com • http://www.w3schools.com/css • http://www.htmlcodetutorial.com TNPW1 - přednáška č. 1
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 TNPW1 - přednáška č. 1
HTML the tag and the element • HTML page consists of tags (elements) Pair tag: <body></body> non-pair tag (HTML): <br> non-pair tag (XHTML):<br /> • Tag with some content = element • Element can have attributes <ahref="product.htm">Link to the next page</a> TNPW1 - přednáška č. 1
HTML page – basic structure <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="author" content="John Smith"> <title>My first page</title> </head> <body> <p>Hello world!</p> </body> </html> TNPW1 - přednáška č. 1
XHTML – just a small difference <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="author" content="John Smith" /> <title>My first page</title> </head> <body> <p>Hello world!</p> </body> </html> TNPW1 - přednáška č. 1
HTML - Plain text Paragraph <p class="basic_text">Some text here</p> 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! TNPW1 - přednáška č. 1
HTML - headline Headline <h1>Main headline of the page</h1> 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. TNPW1 - přednáška č. 1
HTML – phrase elements • Phrase elements Determine the semantic meaning of the text. Usually they are implicitly formatted by the browser. Frequently used <em></em> emphasis <strong></strong> highlighted text Other phrase elements <code></code> source code <samp></samp> output of some script or program <dfn></dfn> definition TNPW1 - přednáška č. 1
HTML - quotation Element cite <cite>Shakespeare</cite>. Name of the author, quoted source, .. Elements <q> and <blockquote> <q>To be or not to be?</q> Used for short quotations. Browser should add the quotes to the text marked with this element. <blocquote><p>To be or not to be?</p></blockquote> Block element for longer quotations. It can contain only the block elements. TNPW1 - přednáška č. 1