Programming I2nd lecture

Block-level and inline elementsBlock Inline

• 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.

Block-level elementsMain Additional

• 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

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

Block-level/inline elements•DEL, INS•BUTTON

•OBJECT•SCRIPT

•MAP

•Can be used both ways

DIV• Simple block-level container

▫<div>▫ <p>Text</p>▫ <p>Another paragraph</p>▫</div>

• Usually used with id and/or class attributes:▫<div id=“header”>...</div>

<div id=“navigation”>...</div><div id=“content”>...</div>

SPAN•Simple inline container

▫<p>This text <span>is different/span> than this one.</p>

•Used to give a certain formating for small portions of text – color, font, etc▫<p>This text <span class=“other-color”>is

different</span> than this one.</p>

•As with DIV , this element usually has class and/or id attribute set.

Tables (1)

•Set of HTML elements to display tabular data in HTML document.

•<table> - main tag, marks start and end of table▫<table>...</table>

•<tr> - table row•<td> - table cell in a row

Tables (2)• The simplest example –

two rows and three columns

Tables (3)• Element td has attributes

colspan and rowspan

▫ <td colspan=“3”></td> Will take 3 columns

▫ <td rowspan=“2”></td> Will take 2 rows

Tables (4)• <th> is used instead of

<td> to mark cells, that contain headings

Tables (5). Exercise

TABLETRTDTH

Colspan, rowspan

DL• Definition list• A pair of <dt> and <dd>

instead of single <li>

IMG

•To insert images to HTML documennt

– <img src=“image.gif” alt=“Title” />

Other HTML elements (1)EM and STRONG DEL 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

Example

Other HTML documents (2)PRE and CODE ABBR 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

• <abbr title=“HyperText Markup Language”>HTML</abbr>

Example

Other HTML elements (3)BLOCKQUOTE CITE

• Block-level

• For a longer quotation

• Inline

• Short quotes, not separated into separate paragraph

META (1)▫<meta name=“” content=“”/>

•Name:▫Author▫Copyright▫Description▫Generator▫Keywords▫Ir kt.

META (2). Examples

HTML entities• &nbsp; – non breaking space• &amp; - ampersand (&)• &gt; - more than” (>)• &lt; - “less than” (<)• &copy; - Copyright (©) • &laquo; - «• &raquo; - »

• Full list: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

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