1. CSCE 102 - Chapters 1 and 2 CSCE 102 - General Applications Programming 2015-10-3 Benito Mendoza 1 By Benito Mendoza Department of Computer Science & Engineering Introduction to Internet Creating a Basic Web Pages

2. CSCE 102 - Chapters 1 and 2 2015-10-3 Benito Mendoza 2 We will use Vidal’s slides to illustrate it. The InternetThe Internet by José Vidal The evolution Services Introduction to Internet Creating a Basic Web Pages

3. CSCE 102 - Chapters 1 and 2 Basic Services FTP – File Transfer Protocol (sftp) Moves files from computer to computer TELNET (ssh) Connect to remote computer as if a local user Early 70’s Ray Tomlinson Hacked FTP to pass messages to users E-Mail was born World-wide use of Internet The other reason for explosion in use of Internet is due to… The evolution Services Introduction to Internet Creating a Basic Web Pages

4. CSCE 102 - Chapters 1 and 2 The Web Timothy Berners-Lee 1989 Trying to share documents between research groups at CERN Hypertext Markup language – formatting Transfer protocol – send/receive marked-up document The evolution Services Introduction to Internet Creating a Basic Web Pages

5. CSCE 102 - Chapters 1 and 2 Basic Services HTML – Hypertext Markup Language HTTP – Hypertext Transfer Protocol Browser W W W – World Wide Web Hypertext – reference to another article of information URLURL – Uniform Resource Locator URIURI – Uniform Resource Identifier The evolution Services Introduction to Internet Creating a Basic Web Pages

6. CSCE 102 - Chapters 1 and 2 Basic Services First browsers were text-based 1993 @ U. Illinois, MOSAIC created GUI Browser – Graphical User Interface Mosaic  Netscape The evolution Services Introduction to Internet Creating a Basic Web Pages

7. CSCE 102 - Chapters 1 and 2 Client-Server Computing Client Server Web page access Document is delivered at the client Comm. Connection is broken after document arrives at client The evolution Services Introduction to Internet Creating a Basic Web Pages

8. CSCE 102 - Chapters 1 and 2 “Surfing” Click hyperlink Browser requests document from server Server returns document requested Browser displays document The HTML Source Document Creating a Source Document HTML, XML, XHTML Introduction to Internet Creating a Basic Web Pages

9. CSCE 102 - Chapters 1 and 2 Source Code Document contains HTML source code Describes content and layout of Web page Content: what to display Layout: How it will look How it will behave The HTML Source Document Creating a Source Document HTML, XML, XHTML Introduction to Internet Creating a Basic Web Pages

10. CSCE 102 - Chapters 1 and 2 HTML Document HTML documents are text-only What you’d see on a keyboard Layout specified by “elements” or “tags” Specify the structure of the page Classify the contents “This content is a heading” “This content is just some text” The HTML Source Document Creating a Source Document HTML, XML, XHTML Introduction to Internet Creating a Basic Web Pages

11. CSCE 102 - Chapters 1 and 2 Tags Heading tags Some text goes here 1 – 6 Most important – least important Paragraph tag The paragraph goes here The HTML Source Document Creating a Source Document HTML, XML, XHTML Introduction to Internet Creating a Basic Web Pages

12. CSCE 102 - Chapters 1 and 2 HTML Structure 4 main elements of HTML source code html head title body The HTML Source Document Creating a Source Document HTML, XML, XHTML Introduction to Internet Creating a Basic Web Pages

13. CSCE 102 - Chapters 1 and 2 Use plain-text editors (Notepad) Other types of editors (like MS WORD) use hidden formatting codes Filename.htm (or.html) No spaces (underscore character instead) Enclose in quotes when using Notepad File – Open … Drag icon into open browser window Does indentation matter? Do multiple CR ’ s affect the text? The HTML Source Document Creating a Source Document HTML, XML, XHTML Introduction to Internet Creating a Basic Web Pages

14. CSCE 102 - Chapters 1 and 2 Nest Properly Chapter 2 Chapter 2 Correct Incorrect Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

15. CSCE 102 - Chapters 1 and 2 HTML Browsers: Evaluate from the top down Ignore whitespace Tabs, extra spaces, line breaks Make your HTML code easily read by humans but without human formatting Does HTML code have to be lower case? Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

16. CSCE 102 - Chapters 1 and 2 HTML Browsers developed along diverging paths Netscape Explorer Features were added – not always in the same way 1994 - W3C created Create an “official” version of HTML Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

17. CSCE 102 - Chapters 1 and 2 HTML PCs – not much of a problem Handheld devices – HUGE problem Need: A standardized version of HTML Compatible with all types of devices PCs, handhelds, others? HTML development stopped at V4 Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

18. CSCE 102 - Chapters 1 and 2 XML XML – Extensible Markup Language Specifies a universal, structured format Data is classified by its meaning Users could create custom tags Car dealer: Very strict syntax rules ensure universality Case matters! Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

19. CSCE 102 - Chapters 1 and 2 XHTML XHTML – Extensible HTML Official release January 2000 XHTML is not XML but it is based on XML Inherits rules and benefits of XML Thus, XHTML is case-sensitive: ≠ ≠ ≠ Why? Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

20. CSCE 102 - Chapters 1 and 2 XHTML Exceptions imply complexity Software cannot be written simply It must account for each exception individually Programs must therefore be larger and more difficult to maintain Complexity requires Additional processing (slower) an More memory (larger and more expensive) Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

21. CSCE 102 - Chapters 1 and 2 XHTML How to make HTML into XHTML? Before add: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitioinal.dtd"> 1 st line: XML Declaration 2 nd line: Document Type Definition Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

22. CSCE 102 - Chapters 1 and 2 Also, change tag itself: “Tags defined in this document conform to the W3C definitions found at...” Start using the new standards NOW XML namespace Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

23. CSCE 102 - Chapters 1 and 2 Meta tag describes document content Useful for search engines Optional, goes in section Attributes: Name: “keywords”, “description” Content Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

24. CSCE 102 - Chapters 1 and 2 Paragraphs and Line Breaks Can’t use whitespace to format document HTML uses elements (tags) and only elements to define document’s structure Paragraph tag Classifies a block of text as a paragraph Preceded and followed by a blank line (usually) Can add other attributes (Chapter 3) Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

25. CSCE 102 - Chapters 1 and 2 Paragraphs and Line Breaks Break tag Generates a line break Without inserting a blank line like the tag. “Empty” tag – no needed instead (space optional) / required by XHTML to indicate an empty element Ch02-Ex-05 Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

26. CSCE 102 - Chapters 1 and 2 Browsers are Idiot Proof Try to compensate for errors. Different browsers handle html errors differently. Follow rules to try and avoid future complications. Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

27. CSCE 102 - Chapters 1 and 2 XHTML DTD Strict Use this DTD when you want clean markup, free of presentational clutter. Use this together with Cascading Style Sheets (CSS) Transitional Use this DTD when you need to use XHTML's presentational features because your readers don't have browsers that support Cascading Style Sheets (CSS) Frameset Use this DTD when you want to use frames! Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

28. CSCE 102 - Chapters 1 and 2 Block-Level Elements Define a complete section or block of text. Browser puts blank line before and after block. Does not need to get line blank. Example: Heading elements, Blockquote element Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

29. CSCE 102 - Chapters 1 and 2 Inline Elements Used to define structure of a sequence of characters within a line of text. Example: and elements Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

30. CSCE 102 - Chapters 1 and 2 Font Size Inline elements and Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML

31. CSCE 102 - Chapters 1 and 2 Code Summary Refer to end of Chapter 2. Page 48 Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML