Inline Elements Karl Kasischke WCC INP 150 Winter

Size: px

Start display at page:

Download "Inline Elements Karl Kasischke WCC INP 150 Winter"

Jacob Tyler
6 years ago
Views:

1 Inline Elements 2009 Karl Kasischke WCC INP 150 Winter

2 Inline Elements Emphasizing Text Increasing / Decreasing Text Size Quotes and Citations Code, Variables, and Sample Output Spanning Text Subscripts and Superscripts Teletype Text Inserted and Deleted Text Acronyms and Abbreviations Definitions User Input Deprecated Inline Elements 2009 Karl Kasischke WCC INP 150 Winter

3 Tags that surround text content Extend only as far as their content Do not create extra vertical space on the lines above/below Do not force content that follows to new lines 2009 Karl Kasischke WCC INP 150 Winter

4 Can be nested inside other inline tags Block-level tags cannot be nested inside (</ inline tags (except <br XHTML 1.0 Strict requires all inline tags be inside a block-level container element 2009 Karl Kasischke WCC INP 150 Winter

5 Boldface Presentationally-focused do not use Device chooses how best to render content Desktop browsers render as boldface Neither of these is deprecated 2009 Karl Kasischke WCC INP 150 Winter

6 Italic Presentationally-focused do not use Device chooses how best to render content Desktop browsers render as italics Neither of these is deprecated 2009 Karl Kasischke WCC INP 150 Winter

7 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>emphasis in (X)HTML</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> some text in this paragraph shows strong emphasis and other text is just emphasized. </body> </html> 2009 Karl Kasischke WCC INP 150 Winter

8 ( huge ) Sizes range from 1 (tiny) to 7 Default text size is 3 <big> </big> Increases text one size larger than surrounding text Decreases text one size smaller than surrounding text Many sites use the deprecated CSS is always preferred 2009 Karl Kasischke WCC INP 150 Winter

9 Used to mark up quoted material Different than blockquote <q> </q> Short quotations Some browsers add quotation marks Different languages could display differently Has a cite attribute with URL or text value <cite> </cite> person who said it, or other reference document Usually renders in italics 2009 Karl Kasischke WCC INP 150 Winter

10 <cite>jason Withrow</cite> has been known to say: <q>separate structure and presentation in your code!</q> <cite>jason</cite> also has quoted others: <q>my students usually say <q cite= Karl Kasischke >Web design is fun!</q> and I agree.</q> 2009 Karl Kasischke WCC INP 150 Winter

11 <code> </code> Used to mark up a piece of computer code usually rendered in a monospace font <var> </var> Used for a variable that appears as page content Usually italicized <samp> </samp> sample output from computer code Usually rendered in a monospace font 2009 Karl Kasischke WCC INP 150 Winter

12 the variable <var>x</var> was defined in this Javascript: <code>var x = 'Hello World!';</code> and so the result was: <samp>hello World!</samp> 2009 Karl Kasischke WCC INP 150 Winter

13 Generic inline tags with no browser defaults for appearance Used when no other tag is appropriate and some markup is needed for text Typically styled using CSS 2009 Karl Kasischke WCC INP 150 Winter

14 Some content needs subscripts or superscripts mathematical and scientific information Footnotes Changes vertical spacing a bit Subscript: H 2 O Superscript: a 2 + b 2 =c Karl Kasischke WCC INP 150 Winter

15 al Gore4 is a proponent of reducing CO2 emissions. Al Gore 4 is a proponent of reducing CO 2 emissions Karl Kasischke WCC INP 150 Winter

16 <tt> </tt> Rendered in a monospace font Not deprecated, it is presentational in nature Using CSS with is preferable 2009 Karl Kasischke WCC INP 150 Winter

17 Used to show edits in a document <ins> </ins> Generally rendered as underlined text <del> </del> Generally rendered with line through the text 2009 Karl Kasischke WCC INP 150 Winter

18 cite Contains URL for explanation of change Value: text Default: none Not deprecated datetime Date and time the change was made ( YYYY-MM-DD ) Value: date Default: none Not deprecated 2009 Karl Kasischke WCC INP 150 Winter

19 title attribute can also be used to show explanation of change Values for cite and datetime are shown in some browsers by right-clicking and selecting 'Properties 2009 Karl Kasischke WCC INP 150 Winter

20 xhtml is used for <ins cite=" datetime=" ">structural</ins> <del datetime=" "> presentational</del> markup. 2009 Karl Kasischke WCC INP 150 Winter

21 <acronym> </acronym> <abbr> </abbr> Some browsers render with dotted underline Use a title attribute to show full text Helpful for accessibility (e.g. screen readers) Acronym tag deprecated in latest version of XHTML after much debate 2009 Karl Kasischke WCC INP 150 Winter

22 <acronym title="washtenaw Community College">WCC</acronym>'s address is: 4800 <abbr title="east">e.</abbr> Huron River <abbr title="drive">dr.</abbr> <abbr title="post Office">P.O.</abbr> Box D- 1 Ann Arbor, <abbr title="michigan">mi</abbr> 48106 2009 Karl Kasischke WCC INP 150 Winter

23 Used for a term the first time it is used in a document <dfn> </dfn> Generally rendered as italicized text Title attribute often used to hold the definition <dfn title="cascading Style Sheets">CSS</dfn> stands for Cascading Style Sheets. 2009 Karl Kasischke WCC INP 150 Winter

24 Indicates text to be entered by the user (via ( keyboard the <kbd> </kbd> Generally rendered in a monospaced font to proceed, please enter <kbd>continue</kbd>. 2009 Karl Kasischke WCC INP 150 Winter

25 font basefont strike s u Never use these tags Be aware of them. You might see them in old websites Know how to replace them with better tags 2009 Karl Kasischke WCC INP 150 Winter

26 Sets the font face, size and color Still found in many sites Better approach: CSS applied to a structural tag 2009 Karl Kasischke WCC INP 150 Winter

27 <basefont /> Sets the font appearance for the entire page Uses same attributes as tag Used inside <head> tag Better approach: CSS applied to <body> 2009 Karl Kasischke WCC INP 150 Winter

28 <strike> </strike> Renders text with a line through it Better approach: There is a CSS property that does this 2009 Karl Kasischke WCC INP 150 Winter

29 <s> </s> Renders text with a line through it Better approach: There is a CSS property that does this 2009 Karl Kasischke WCC INP 150 Winter

30 Renders text with an underline Users expect underlined text to be a link Better approach: There is a CSS property that does this 2009 Karl Kasischke WCC INP 150 Winter

31 Practice with Inline Elements 2009 Karl Kasischke WCC INP 150 Winter

Certified HTML Designer VS-1027

Certified HTML Designer VS-1027 VS-1027 Certification Code VS-1027 Certified HTML Designer Certified HTML Designer HTML Designer Certification allows organizations to easily develop website and other web based applications which are