1. INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 sunny.shi@senecacollege.ca SENECA COLLEGE

2. 22 Outline Zenit account HTML5 structure HTML5 tags Next class: More HTML

3. Zenit account Available on Blackboard Note: this account is only for course INT222 It is temporary that will be closed after the semester is over Backup your stuff to your local machine Your instructor is able to access your account, so only put the course-related stuff there. 3

4. Zenit Account Web access: https://zenit.senecac.on.ca/~login e.g., https://zenit.senecac.on.ca/~e.g., https://zenit.senecac.on.ca/~int222_153a01 You are prompted for username and password Username: int222_153a01 Pswd: 8 characters 4

5. Zenit Account Server access Use an SSH client program. Putty - free download http://www.putty.orghttp://www.putty.org WinSCP - free download http://www.winscp.nethttp://www.winscp.net Note: changing password on zenit will not change the web access password. 5

6. Thimble https://thimble.mozilla.org/ online code environment Easy to learn and practice HTML, CSS & JavaScript.HTMLCSS JavaScript Project of CDOT at Seneca with Mozilla.

7. 7 Basic HTML5 Document Structure INT222 HTML5 Document Structure This is a paragraph ICT Seneca College

8. HTML5 tag HTML tags are enclosed in angle brackets - e.g.,,. Most html tags come in pairs - e.g. and A few tags are not paired - these tags are known as empty tags, e.g.,,. 8

9. HTML tags category Block-level: – creates large blocks of content like tables or page divisions, e.g.,. – They start new lines of text – can contain other block tags as well as inline tags and text. 9

10. HTML tags category Inline-level: – Defines text or data in the document. – Do not start new lines – Generally only contain other inline tags and text or data. 10

11. HTML tags category Empty: – Does not contain any text. – Simply used as markers. – Do not have closing tags. – E.g.:,,. 11

12. Tags vs. elements, are referred to as tags. Some text is referred to as an element. 12

13. Basic HTML5 Document Template Example html tags.... html tags.... 13

14. html tagDescription Specifies the document type Specifies an html document Specifies information about the document Specifies the document title Specifies meta information Specifies a resource reference Specifies a script Specifies a style definition Specifies the body element Specifies a comment 14 HTML tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

15. HTML heading tags Specifies a heading level 1 Specifies a heading level 2 Specifies a heading level 3 Specifies a heading level 4 Specifies a heading level 5 Specifies a heading level 6 15 Eg. Headings.html

16. Presentation Tags -,,,, Specifies a paragraph Defines a section [within a document] that is quoted from another source. It will indent the right and left margins both on the display and in printed form, but this may be overridden by (CSS). Specifies preformatted text Inserts a single line break Specifies a horizontal rule 16 Eg. blocktags.html

17. Presentation Tags Specifies bold text Specifies emphasized text Specifies italic text Specifies text to be underlined Specifies subscripted text Specifies superscripted text 17 Eg. presentation1.html presentation2.html

18. Grouping Tags -  no special meaning, but to group HTML elements into sections.  to perform an action on multiple elements in the same group. 18

19. HTML List tags Unordered lists...... Defines an unordered list Specifies a list item Ordered lists...... Specifies an ordered list Specifies a list item Definition lists...... Specifies a definition list Specifies a definition term Specifies a definition description 19

20. Nested List list item one sub for item one list item two list item three list item four 20 ulist.html olist.html dlist.html nestlist.html

21. 21 Hyperlinks & Anchor Text/ image hyperlink: text/ image element, when clicked, take you to another place of the current document/ page, or a new document/page. tag two functions: (1) hyperlink tag: create a link to another document,using href attribute, text - defines a hyperlink to another Web page. (2) named anchor: create a bookmark inside a document, using name attribute. - defines an anchor within the page. - used to create "table of contents" in a large document. bottom of the page - Link to a particular section in the current page go bottom

22. 22 Email Link: Sunny Absolute url: Google Relative url: Text...text Image link Target Link: select where to display the content of the link. More often with frames or multiple windows. If names exist, display there, otherwise, display in a new window Text...Text navigation.html

23. Next Class More HTML 23

24. Thank you!