[PPT] - Internet publishing HTML (XHTML) language Petr Zmostn room: A-72a PowerPoint Presentation

SLIDE 1

Internet publishing HTML (XHTML) language

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

SLIDE 2

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 3

Essential HTML components

Attribute

Example
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 4

Essential HTML components

Character entities

Characters difficult to enter via keyboard HTML reserved characters

<, >, &

Example

&entity_name;
>

>

<

<

&

&

“

"

Nonbreaking space

&#character_unicode_number;
←

←

Й

Й

SLIDE 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

SLIDE 6

XHTML page structure

<?xml version="1.0" encoding="UTF-8"?> <!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>

XML declaration Document type definition – standard Core dokument

SLIDE 7

XML declaration

<?xml version="1.0" encoding="UTF-8"?>

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

SLIDE 8

Document type definition

Transitional

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Strict

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Frameset

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

SLIDE 9

Document type definition

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

SLIDE 10

Core document – <html> element

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

SLIDE 11

Head element content

<head> <title>Example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="HTML, XHTML" /> <meta name="Authors" content="Petr Zámostný" /> </head>

<title>

Name of the page displayed in the browser window

caption

<meta>

Document metadata

Usually they are not interpreted by browsers, used e.g. for fulltext search robots Exception: document type and encoding info

SLIDE 12

body element content

<body> text elements </body>

Text and formatting instructions Default behavior

Consecutive spaces, tabs, line-breaks are rendered as single space

Block and inline elements

SLIDE 13

Examples of elements (rehearsing)

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

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

SLIDE 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

f styles and dynamic behavior

title – specifies element tooltip

SLIDE 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

SLIDE 17

Text structure elements

div – section p – paragraph span – inline block br – line-break (content-less <br />)

SLIDE 18

Text structure (example)

<body> <div id=“section1"> <p>1st paragraph</p> <p>2nd paragraph</p> </div> <div id=“section2"> <p>3rd paragraph</p> <p>4th <span>paragraph</span> of<br /> text broken into 2 lines</p> </div> </body>

SLIDE 19

Headings

<body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body>

SLIDE 20

Formátting

<body> <p><em>emphasized text</em></p> <p><strong>strong printed text</strong></p> <p><b>bold text</b></p> <p><i>italics</i></p> <p>text<sub>subscript</sub></p> <p>text<sup>superscript</sup></p> <p><code>monospace font</code></p> <pre> Preformatted text A B C 1 2 3 4 5 6 </pre> </body>

SLIDE 21

Lists

<body> <h1>Unordered list</h1> <ul> <li type="disc">kolečko</li> <li type="circle">kroužek</li> <li type="square">čtvereček</li> </ul> <h1>Ordered list</h1> <ol type="a"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <h1>Definition list</h1> <dl> <dt>HTML</dt><dd>HyperText Markup Language</dd> <dt>XML</dt><dd>eXtensible Markup Language</dd> </dl> </body>

SLIDE 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

SLIDE 23

Graphics (příklad)

SLIDE 24

Tables

Tables are created hierarchically by following elements table – table

tr – row

td – cell th – heading cell

SLIDE 25

Tables

Important attributes of table element

border cellspacing cellpadding frame, rules

SLIDE 26

Tables

<table summary="anotace tabulky" border="1"> <tr> <th>záhlaví sloupce 1</th> <th>záhlaví sloupce 2</th> </tr> <tr> <td>buňka 1</td> <td>buňka 2</td> </tr> <tr> <td>buňka 3</td> <td>buňka 4</td> </tr> </table>

http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p01.html

SLIDE 27

Table borders

<table border="0"> <caption>Bez okraje</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br /> <table border="1"> <caption>S okrajem</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br /> <table border="1" frame="void"> <caption>Vnější okraj tabulky</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br /> <table border="1" rules="none"> <caption>Vnitřní okraj tabulky</caption> <tr><td>1. buňka</td><td>2. buňka</td></tr> <tr><td>3. buňka</td><td>4. buňka</td></tr> </table> <br />

SLIDE 28

<table summary="anotace tabulky" border="1"> <caption>Sklizeň ovoce</caption> <thead> <tr> <th></th> <th>Hrušky</th> <th>Jablka</th> </tr> </thead> <tfoot> <tr> <th>Celkem</th> <td>25</td> <td>17</td> </tr> </tfoot> <tbody> <tr> <th>Petr</th> <td>10</td> <td>10</td> </tr> <tr> <th>Pavel</th> <td>15</td> <td>7</td> </tr> </tbody> </table>

Structuring

http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p02.html

SLIDE 29

Table dimensions

<table border="1"> <caption>Implicitní chování</caption> <tr> <td>1. buňka</td> <td>2. trochu větší buňka</td> </tr> </table> <table border="1" width="500"> <caption>Pevná šířka</caption> <tr> <td>1. buňka</td> <td>2. trochu větší buňka</td> </tr> </table> <table border="1" width="80%"> <caption>Šířka v % okna</caption> <tr> <td>1. buňka</td> <td>2. trochu větší buňka</td> </tr> </table>

http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p03.html

SLIDE 30

Table alignment

<table border="1" width="100%"> <caption>Vodorovné zarovnání</caption> <tr><td align="left">buňka zarovnaná vlevo </td></tr> <tr><td align="right">buňka zarovnaná vpravo </td></tr> <tr><td align="center">buňka zarovnaná na střed </td></tr> <tr><td align="justify">buňka zarovnaná do bloku </td></tr> </table> <br /> <table border="1" width="100%"> <caption>Svislé zarovnání</caption> <tr height="50"><td valign="top">buňka zarovnaná nahoru </td></tr> <tr height="50"><td valign="middle">buňka zarovnaná na střed </td></tr> <tr height="50"><td valign="bottom">buňka zarovnaná dolů </td></tr> <tr height="50"><td valign="baseline">buňka zarovnaná na základní čáru</td></tr> </table> <br />

http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p04.html

SLIDE 31

Merging cells

<table border="1"> <tr><td>buňka</td><td>buňka</td><td>buňka</td><td>buňka</td></tr> <tr><td>buňka</td><td rowspan="2" colspan="2">expandovaná buňka</td><td>buňka</td></tr> <tr><td>buňka</td><td>buňka</td></tr> <tr><td>buňka</td><td>buňka</td><td>buňka</td><td>buňka</td></tr> </table><br />

http://www.vscht.cz/kot/resources/studijni-materialy/ip-s-002/p05.html