1. Programming I 2 nd lecture

2. Block-level and inline elements BlockInline block-level elements generally can contain text, data, inline elements, or other block-level elements. block-level elements generally begin new lines of text. Inline elements generally only contain text, data or other inline elements. They are usually "smaller" than block- level elements. Inline elements do not generally begin new lines of text.

3. Block-level elements MainAdditional H1-H6 OL, UL, DL P * DIV BLOCKQUOTE, PRE, ADDRESS HR TABLE FORM, FIELDSET NOSCRIPT LI DD, DT TR, TD, TH THEAD, TBODY, TFOOT * no other block-line elements inside

4. Inline elements A BR EM, STRONG SPAN IMG INPUT, SELECT, TEXTAREA, LABEL ABBR, ACRONYM CITE, CODE, VAR, SAMP, TT, KBD, Q DFN BIG, SMALL, SUB, SUP B, I

5. Block-level/inline elements DEL, INS BUTTON OBJECT SCRIPT MAP Can be used both ways

6. DIV Simple block-level container ▫ ▫ Text ▫ Another paragraph ▫ Usually used with id and/or class attributes: ▫.........

7. SPAN Simple inline container ▫ This text is different/span> than this one. Used to give a certain formating for small portions of text – color, font, etc ▫ This text is different than this one. As with DIV, this element usually has class and/or id attribute set.

8. Tables (1) Set of HTML elements to display tabular data in HTML document. - main tag, marks start and end of table ▫... - table row - table cell in a row

9. Tables (2) The simplest example – two rows and three columns

10. Tables (3) Element td has attributes colspan and rowspan ▫  Will take 3 columns ▫  Will take 2 rows

11. Tables (4) is used instead of to mark cells, that contain headings

12. Tables (5). Exercise TABLE TR TD TH Colspan, rowspan

13. DL Definition list A pair of and instead of single

14. IMG To insert images to HTML documennt –

15. Other HTML elements (1) EM and STRONGDEL and INS To mark important parts of the text EM – first level of emphasis, displayed as italic by default STRONG – strong emphasis, displayed as bold by default Marks changes in HTML document DEL – removed info, crossed out INS – added info, underlined

16. Example

17. Other HTML documents (2) PRE and CODEABBR and ACRONYM PRE – a part of text where whitespace is important CODE – a part of text where programming code is displayed – by default is displayed in fixed-width font (Courier New, Lucida Console) To mark an acronym or abrevation in text Shows a definition on mouse over HTML

18. Example

19. Other HTML elements (3) BLOCKQUOTECITE Block-level For a longer quotation Inline Short quotes, not separated into separate paragraph

20. META (1) ▫ Name: ▫Author ▫Copyright ▫Description ▫Generator ▫Keywords ▫Ir kt.

21. META (2). Examples

22. HTML entities – non breaking space & - ampersand (&) > - more than” (>) < - “less than” (<) © - Copyright (©) « - « » - » Full list: http://en.wikipedia.org/wiki/List_of_XML_and_H TML_character_entity_references http://en.wikipedia.org/wiki/List_of_XML_and_H TML_character_entity_references

23. Exercise Create a HTML document, that uses all of HTML elements in the list below: ▫DIV, SPAN ▫TABLE ▫DL ▫IMG ▫EM/STRONG ▫DEL/INS ▫PRE/CODE ▫ABBR/ACRONYM ▫BLOCKQUOTE/CITE ▫META