Technologies for web publishing Ing. Vaclav Freylich Lecture 2

Lists Important HTML elements Simple syntax but powerful function For easy and well-arranged text output Frequently used for making the navigation structures TNPW1 - Lecture 2

Unordered lists Unordered list body <ul></ul> List item <li></li> - Visual form is similar in all browser but not standardized Sample code (unordered list with three items): <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> Output: Item 1 Item 2 Item 3 TNPW1 - Lecture 2

Ordered lists Ordered list body <ol></ol> List item <li></li> - Used when the order of list items is important Sample code (ordered list with three items): <ol> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol> Output: Item 1 Item 2 Item 3 TNPW1 - Lecture 2

Definition lists Definition list body <dl></dl> Definition term <dt></dt> Definition description <dd></dd> Unordered list of terms Each term can have a description Definition term and definition description can contain any element (not only the text) TNPW1 - Lecture 2

Definition lists Example <dl> <dt>Term 1</dt> <dd>Description 1</dd> <dt>Term 2</dt> <dd>Description 2</dd> </dl> Output Term 1 Description 1 Term 2 Description 2 TNPW1 - Lecture 2

Images Non-pair element <img /> <img src="button.gif" alt=“Image description" width="117" height="18“ /> The src attribute contains the absolute or relative server path to the image file Parameters height and width and alternate description alt are always required ! We can’t adjust the real image size (file size) by changing the width and height attributes TNPW1 - Lecture 2