programming i 2 nd lecture. block-level and inline elements blockinline block-level elements...
TRANSCRIPT
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
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 (3)• Element td has attributes
colspan and rowspan
▫ <td colspan=“3”></td> Will take 3 columns
▫ <td rowspan=“2”></td> Will take 2 rows
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
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>
Other HTML elements (3)BLOCKQUOTE CITE
• Block-level
• For a longer quotation
• Inline
• Short quotes, not separated into separate paragraph
HTML entities• – non breaking space• & - ampersand (&)• > - more than” (>)• < - “less than” (<)• © - Copyright (©) • « - «• » - »
• Full list: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references