1. Introduction to Computer CC111 Week 11 Introduction To HTML 1

2. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. Intended Learning Objectives Getting Started.. What is HTML? How to create and View an HTML document? Basic HTML Document Format The HTML Basic tags and Attributes: –DOCUMENT:,,,, –FONT,,,, –PARAGRAPHS & LISTS,,,,,,,, –MULTIMEDIA, LINKS,,

3. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. What the following terms mean? 4Web server: a system on the internet contains one or more web site(s) 4Web site: a collection of one or more web page(s) 4Web page: single disk file with a single file name 4Home page: first page in a website Think about the followings before working your Web pages. 4Think about the sort of information(content) you want to put on the Web. 4Set the goals for the Web site. 4Organize your content into main topics. 4Come up with a general structure for pages and topics.

4. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part.

5. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 5 World Wide Web WWW is a service on the Internet WWW links information so that the user can easily go from one piece of information to another related piece. WWW is based on HTML

6. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 6 Web Browser It is a computer program which is used to view a Web page. Browser implements the following functions: Search and access to a Web-server; Loading, formatting, and displaying HTML-document; Hyperlink detection and moving from one document to another; Standard support tools.

7. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 7 Hypertext Mark-up Language (HTML) HTML is the standard mark-up language used to create and organize documents on the World Wide Web; HTML lets users to format text, add graphics, sound, video, and save it all in a TextOnly or ASCII format that any computer can read.

8. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. What is Markup? Markup is the act of inserting additional text into a document which is not usually visible to the reader, and is not part of the content, but enhances the document in some way, such as capturing document structure or adding hypertext capability. Markup also refers to the additional text, also known as tags, which are inserted in the document.

9. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. Basic HTML Document Format 9 WENT'99 Went'99 WENT'99 Went'99 See what it looks like:

10. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. How to Create and View an HTML document? 1.Use an text editor such as Editpad to write the document. 2.Save the file as “filename.html” on a PC. This is called the Document Source. 3.Open any browser “Off-Line” 5.Click on File, Open File and browse to select the “filename.html” document that you just created. 6.Your HTML page should now appear just like any other Web page in a browser.

11. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 7.You may now switch back and forth between the Source and the HTML Document switch to Notepad with the Document Source make changes save the document again switch back to the browser click on RELOAD and view the new HTML Document switch to Notepad with the Document Source......

12. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 12 HTML Features Hypertext, that allows to create a link in a Web page that leads to any other pages on the Web. Hence information on the Web can be accessed from many different locations Universality means that any computer can read a Web page regardless of platforms or operating systems

13. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 13 HTML Files Must be saved as text files with extension html or htm. The extension tells the browser that file is to be interpreted according to HTML standards Have relatively small sizes

14. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 14 HTML Building Blocks HTML tags are command words written between symbols, that indicate how browser should display the text. Tags may have opening and closing version Text is placed in a container (or HTML element), which starts with opening tag and ends with closing. Bold text

15. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 15 HTML Rules Case insensitive Spacing: Browsers ignore extra spaces Block-level tags include automatic line brakes – Examples: P, H1, UL, TABLE

16. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 16 Tag Attributes Attributes offer a variety of options Attributes are entered between command word and final symbol > A single tag may have a few attributes Attributes are placed one after the other in any order

17. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 17 Attribute Values Attributes can accept the values of particular types Values of attributes should be enclosed in straight quotation marks “” may be omitted if the value contains only letters, digits, hyphen (-), and period (.)

18. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 18 Nesting Tags Correct: Information System Incorrect: Information System  Hierarchy – tags that affect entire paragraph may contain tags affecting individual words or letters  Order – the current closing tag should correspond to the last unclosed opening tag

19. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. HTML Document-wide tags … …

20. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. HTML Comment A comment is not parsed by the browser and doesn’t affect the rendering of the page. Web pages designers use comments to explain their code, which can help in later editing by the same designer or another.

21. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. Title of your page goes here The HEAD Section... -- The head contains "meta" information about the page, information that the browser needs before rendering.... -- puts text on the browser's title bar.

22. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 22 The BODY Section Bulk of your content here. The body contains the actual content of the page.

23. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. Headings … Level 1 Level 2 Level 3 Level 4 Level 5 Level 6

24. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. Text Elements is used to group collections of document structures together such as headings, paragraphs and tables describing a single concept or representing a chapter or logical section. is intended to mark paragraphs. The paragraph end tag is optional, although it is good practice to insert it. is the preformatted text tag. There are a variety of uses for the preformatted text tag. It can be used to retain formatted ASCII text such as newsletters, calendars, spreadsheets or statistical data in columns. Avoid using tabs in preformatted text - use spaces instead. Here is a brief example: World Wide Web Stats January February Document 1 752 697 Document 2 134 232 has as its content sections of text included from other sources

25. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. Text Flow Tags However, you should use an ALIGN="CENTER" attribute with a document text structure instead. Here are some examples: You can control the size of the rule line with a WIDTH attribute, if desired: Example: specifies that the rule be half the size of the current window

26. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 26 Changing the Font Text goes here FONTNAME specifies the font SIZE defines the size N=3 corresponds to default value Value of n1234567 Size in pt.8101214182436

27. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. Style Tags … …

28. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. Lists Create a List – Unordered list : – Ordered list: – You can Nest list as you need.

29. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. Ordered List … TYPE, START are optional X=A, a, I, i, 1 ( X=1 is default value) n – initial value for list items Will Display: 1.Apples 2.Oranges Example: Apples Oranges

30. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 30 Unordered List … TYPE is optional, shape represents the kind of bullet, like circle, square… Will Display: Apples Oranges Example: Apples Oranges

31. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 31 Uniform Resource Locator (URL) “http://www.atkinson.yorku.ca/~marina/itec.htm” URL can be Absolute – contains all parts of URL; Relative – presents path and file name relatively current file. Scheme Server namePathFile name

32. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 32 Scheme http – Hypertext Transfer Protocol to access Web- pages ftp – File Transfer Protocol to download the file from the net mailto – to send electronic mail File – to access file on a local hard disk (File scheme uses ///). and others…

33. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 33 Absolute URL (examples) http://www.site.com/dir/hpage.html ftp://ftp.site.com/common/prog.exe mailto:marina@yorku.ca file:///Cdisk/ITEC1010/COL.html

34. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 34 Relative URL (examples) A file from the same folder as current file: “file.htm” A file from a subfolder of current folder: “images/picture.gif” A file from another folder at the same hierarchical level: “../info/data.htm”

35. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 35 External Link is a reference to another page Label text Label text will be underlined or highlighted, click upon it will bring visitors to the page with given URL

36. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 36 Internal link Is a reference to a particular part of the same page. Click upon the internal link will bring a visitor to the particular part of the same page. To create an internal link: – Create an anchor – Add a hyperlink to the anchor

37. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 37 Creating Anchors Place the cursor in the desirable part of a page, where the link should bring visitors Create an anchor Label text Label text is a text or image that should be referenced.

38. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 38 Link to a specific anchor Within a document Label text To a separate document Label text

39. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. Link to E-mail address Say HELLO!!! Click on hypertext “Say HELLO!!!” will invoke the default mail client application such as MS Outlook to send E-mail to the address name@website.ext.

40. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. 40 Images SRC – source of the image (file address) Another attributes: BORDER=n, n-thickness of the border in pixels ALT – alternative text WIDTH – width of an image in pixels HEIGHT – height of an image in pixels ALIGN – position on a page <IMG SRC=“images/pic1.bmp” WIDTH=30 HEIGHT=30 ALT=“Digimon” ALIGN=“left” >

41. © 2013 Cengage Learning. All Rights Reserved. This edition is intended for use outside of the U.S. only, with content that may be different from the U.S. Edition. May not be scanned, copied, duplicated, or posted to a publicly accessible website, in whole or in part. How to make colours change? Hexadecimal number –Changing the Background color –Changing Text color –Spot color WENT'99 Color names Image Background 41