Bok, Jong Soon

Transcription

1 HTML 5 Grouping Contents Bok, Jong Soon jongsoon.bok@gmail.com

2 <p> Defines a paragraph. Browsers automatically add some space (margin) before and after each <p> element. Differences Between HTML 4.01 and HTML5 The align attribute is deprecated in HTML 4.01, and is no longer supported in HTML5.

3 Lab1 : Paragraph Tag Web Browsers IE10, Firefox, Google Chrome, Opera, Safari Text Editors Notepad++ or Editplus Files p.html

4 Lab1 : p.html

5 Lab1 : Result

6 <hr> Is used to separate content (or define a change) in an HTML page. Differences Between HTML 4.01 and HTML5 In HTML5, the <hr> tag defines a thematic break. In HTML 4.01, the <hr> tag represents a horizontal rule. However, the <hr> tag may still be displayed as a horizontal rule in visual browsers.

7 <hr> (Cont.)

8 <pre> Defines preformatted text. Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. Differences Between HTML 4.01 and HTML5 The width attribute is deprecated in HTML 4.01, and is not supported in HTML5.

9 <pre> (Cont.)

10 Lab2 : Preformatted text Tag Web Browsers IE10, Firefox, Google Chrome, Opera, Safari Text Editors Notepad++ or Editplus Files pre.html

11 Lab2 : pre.html

12 Lab2 : Result

13 <blockquote> Specifies a section that is quoted from another source. Browsers usually indent <blockquote> elements.

14 <blockquote> (Cont.) Attributes cite Specifies the source of the quotation. URL

15 Lab3 : Block Quote Tag Web Browsers IE10, Firefox, Google Chrome, Opera, Safari Text Editors Notepad++ or Editplus Files blockquote.html

16 Lab3 : blockquote.html

17 Lab3 : Result

18 <ol> Defines an ordered list. An ordered list can be numerical or alphabetical. Use the <li> tag to define list items. Differences Between HTML 4.01 and HTML5 The reversed attribute is new in HTML5. The compact attribute was deprecated in HTML 4.01, and is not supported in HTML5.

19 <ol> (Cont.) Attributes reversed Specifies that the list order should be descending (9,8,7...) start Specifies the start value of an ordered list Number type Specifies the kind of marker to use in the list Specifies the kind of marker to use in the list 1 A a I i

20 <ol> (Cont.)

21 <ul> Defines an unordered (bulleted) list. Use the <ul> tag together with the <li> tag to create unordered lists. Differences Between HTML 4.01 and HTML5 The compact and type attributes are deprecated in HTML 4.01, and are not supported in HTML5.

22 <ul> (Cont.)

23 <li> Defines a list item. Is used in ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu> <menu>). Differences Between HTML 4.01 and HTML5 The type attribute was deprecated in HTML 4.01, and is NOT supported in HTML5.

24 <li> (Cont.) Attributes value Sets the value of a list item. The following list items will increment from that number. The value must be a number and can only be used in ordered lists (<ol>).

25 Lab4 : List Tag Web Browsers IE10, Firefox, Google Chrome, Opera, Safari Text Editors Notepad++ or Editplus Files list.html

26 Lab4 : list.html

27 Lab4 : Result

28 <dl> Defines a description list. Is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name).

29 <dt> Defines a term/name in a description list.

30 <dd> Is used to describe a term/name in a description list. Inside a <dd> tag you can put paragraphs, line breaks, images, links, lists, etc..

31 Lab5 : Definition Tag Web Browsers IE10, Firefox, Google Chrome, Opera, Safari Text Editors Notepad++ or Editplus Files definition.html

32 Lab5 : definition.html

33 Lab5 : Result

34 <figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

35 <figcaption> Defines a caption for a <figure> element. Can be placed as the first or last child of the <figure> element.

36 Lab6 : Figure Tag Web Browsers IE10, Firefox, Google Chrome, Opera, Safari Text Editors Notepad++ or Editplus Files figure.html images/googlechrome.png images/firefox.png Images/IE10.png Images/Opera.png Images/safari.png

37 Lab6 : figure.html

38 Lab6 : Result

39 <div> Defines a division or a section in an HTML document. Is used to group block-elements to format them with CSS. Differences Between HTML 4.01 and HTML5 The align attribute not supported in HTML5.

40 <div> (Cont.)