1. Introduction to HTML

2. Today’s Discussion What is HTML ? What is HTML ? What is Web Page ? What is Web Page ? Web Server Web Server Web Browser Web Browser What is Internet ? What is Internet ? Services Provided by Internet Services Provided by Internet e-mail, ftp, wiki-pedia, blogs, java applets e-mail, ftp, wiki-pedia, blogs, java applets Tools used in creating Web Pages Tools used in creating Web Pages HTML coding …… using an editor HTML coding …… using an editor

3. What is HTML ? Hyper Text Markup Language Hyper Text Markup Language Web authoring software language Web authoring software language Specifically created to make World Wide Web pages Specifically created to make World Wide Web pages The inventor of HTML - Tim Berners-Lee The inventor of HTML - Tim Berners-Lee

4. What is HTML ? HTML files HTML files Text files Text files Contain mark-up tags Contain mark-up tags Tags direct how page is to be displayed by browser Tags direct how page is to be displayed by browser Can be created from a simple text editor Can be created from a simple text editor File extension “.htm ” or “.html ” File extension “.htm ” or “.html ”

5. What is Web Page ? Web page : Single disk file with a single file name – composed of: Web page : Single disk file with a single file name – composed of: Text, Images, Animations, Hyperlinks, etc. Text, Images, Animations, Hyperlinks, etc. Home page : First page of a website Home page : First page of a website Web site: A collection of one or more web pages Web site: A collection of one or more web pages Static Website Static Website Dynamic Website Dynamic Website

6. What is Web Server ? A system on the internet containing one or more web sites. A system on the internet containing one or more web sites. It a software which enabling Internet services. It a software which enabling Internet services. Personal Web Server (PWS) Personal Web Server (PWS) Internet Information Server (IIS) Internet Information Server (IIS) Apache Server Apache Server Tomcat Server Tomcat Server

7. What is Web Browser ? A client software which is used to render web pages. A client software which is used to render web pages. Internet Explorer Internet Explorer Mozilla Firefox Mozilla Firefox Windows Chrome Windows Chrome Netscape Navigator Netscape Navigator Mosaic Mosaic

8. Web Browser and Web Server - Client and Server User uses HTTP client (Web Browser) User uses HTTP client (Web Browser) It has a URL (e.g. http://www.yahoo.com/) It has a URL (e.g. http://www.yahoo.com/) Makes a request to the server Makes a request to the server Server sends back data (the response) Server sends back data (the response) User clicks on the client side... User clicks on the client side... request (URL) response (HTML, …)ClientServer

9. What is Internet ? The largest network of networks in the world The largest network of networks in the world

10. What is Internet ? A network of networks, joining many government, university and private computers together and providing an infrastructure for the use of E-mail, bulletin boards, file archives, hypertext documents, databases and other computational resources. A network of networks, joining many government, university and private computers together and providing an infrastructure for the use of E-mail, bulletin boards, file archives, hypertext documents, databases and other computational resources. Continue……

11. What is Internet ? The vast collection of computer networks which form and act as a single huge network for transport of data and messages across distances which can be anywhere from the same office to anywhere in the world. The vast collection of computer networks which form and act as a single huge network for transport of data and messages across distances which can be anywhere from the same office to anywhere in the world. Continue……

12. Services provided by Internet Electronic Mail (e-mail) Electronic Mail (e-mail) World Wide Web World Wide Web Telnet Telnet File Transfer Protocol (FTP) File Transfer Protocol (FTP) Internet Telephone Internet Telephone Web TV/Radio Web TV/Radio Internet Relay Chat Internet Relay Chat News Groups News Groups

13. Electronic Mail (e-mail) Distributes e-mail messages and attached files to one or more electronic mailboxes. Distributes e-mail messages and attached files to one or more electronic mailboxes. Eg:- e-mail addresses Eg:- e-mail addresses thomas@mes.edu.in thomas@mes.edu.in murugan@mesmarampally.org murugan@mesmarampally.org

14. Electronic Mail (e-mail) thomas @ mes. edu. in murugan @ mesmarampally. org Continue…… Organization Type of Organization Name of Person Country

15. Electronic Mail (e-mail) Different e-mail service providers Different e-mail service providers G-Mail G-Mail Yahoo Mail Yahoo Mail Hot Mail Hot Mail Continue……

21. W IKIPEDI A A wiki is a publishing platform on which many people can contribute new content and revise existing content. A wiki is a publishing platform on which many people can contribute new content and revise existing content. The content benefits from the collective knowledge of the contributors, so wikis can be very beneficial for group projects. The content benefits from the collective knowledge of the contributors, so wikis can be very beneficial for group projects. Some businesses and organizations use wikis to maintain documents. Some businesses and organizations use wikis to maintain documents.

25. Blog An online diary for expressing our thoughts and passion. Also called Weblogs Blogging – The activity of creating blog. Client (Browser) defines the appearance Font preferences, window width, … Pours into Browser (PDAs, Bigger/Smaller)

26. HTML Characteristics Just a Text File! + Portable + Human Readable/Writable HTML Defines the Structure (not Appearance) of the Document Client (Browser) defines the appearance Font preferences, window width, …

27. HTML Characteristics HTML is a set of instructions – called Elements. These elements are grouped into sections: HEAD elements section Only elements that are allowed in the HEAD section of the document. BODY elements section Only elements that are allowed in the BODY section of the document. Continue……

28. Naming Convention All elements are enclosed in brackets. Most elements require a start tag and end tag. Eg:- My First Web Page The end tag has a forward slash (/). Elements names are not case sensitive.

29. Document Structure My First Web Page A Paragraph of Text.

30. Nested Tags Like a tree, each element is contained inside a parent element Each element may have any number of attributes...... other stuff...... This is some text!

31. Basic Tags My First Web Page A Paragraph of Text.

32. HTML Elements Elements Elements It encloses the entire HTML document. It encloses the entire HTML document. Starting tag Starting tag Ending tag Ending tag It encloses the head section of the document. It encloses the head section of the document. Starting tag Starting tag Ending tag Ending tag

33. HTML Elements Elements Elements Found only in head section. Found only in head section. Denotes the title of the document. Denotes the title of the document. Starting tag Starting tag Ending tag Ending tag It encloses the body section of the document. It encloses the body section of the document. Starting tag Starting tag Ending tag Ending tag

34. HTML Elements Elements Elements Denotes the first level headline of an HTML document. Denotes the first level headline of an HTML document. Starting tag Starting tag Ending tag Ending tag To make characters bold. To make characters bold. Starting tag Starting tag Ending tag Ending tag

35. HTML Elements Elements Elements For start of a new paragraph. For start of a new paragraph. To add hyper link to the document. To add hyper link to the document. Tutorials Tutorials

36. Basic Tags horizontal rule new line... bold... italicize text in between

37. Lists Unordered Lists Apples Oranges Ordered Lists One Two Can be nested o Apples 1. Fuji 2. Granny Smith o Oranges

38. Image Files

39. Tables...... for each row... for each element in a row … for header row

40. Table Example <tr> row 1, cell 1 row 1, cell 1 row 1, cell 2 row 1, cell 2 </tr><tr> row 2, cell 1 row 2, cell 1 row 2, cell 2 row 2, cell 2 </tr></table>

41. Comments <!-- This paragraph, is also a comment...-->

42. Special HTML < →< > → > & → & → space

43. Anchor Tag (Links) Absolute HREFs specify fully qualified URLs. Yahoo! In this directory! In sub-directory a! Relative HREFs are relative to the directory containing the current HTML file.

44. What is the WWW? A hypertext system that runs on top of the Internet, based on Three Main Standards URL HTTP HTML