Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Chapter 1: Intro Internet & Chapter 2
Document related concepts
Transcript
Introduction to Internet Creating a Basic Web Pages CSCE 102 - General Applications Programming By Benito Mendoza Department of Computer Science & Engineering 2017/5/23 Benito Mendoza CSCE 102 - Chapters 1 and 2 1 Introduction to Internet Creating a Basic Web Pages The evolution Services We will use Vidal’s slides to illustrate it. The Internet by José Vidal 2017/5/23 Benito Mendoza CSCE 102 - Chapters 1 and 2 2 Introduction to Internet Creating a Basic Web Pages The evolution Services 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… CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages The evolution Services 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 CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages The evolution Services Basic Services HTML – Hypertext Markup Language HTTP – Hypertext Transfer Protocol Browser W W W – World Wide Web Hypertext – reference to another article of information URL – Uniform Resource Locator URI – Uniform Resource Identifier CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages The evolution Services Basic Services First browsers were text-based 1993 @ U. Illinois, MOSAIC created GUI Browser – Graphical User Interface Mosaic Netscape CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages The evolution Services Client-Server Computing Client Server Web page access Document is delivered at the client Comm. Connection is broken after document arrives at client CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages “Surfing” The HTML Source Document Creating a Source Document HTML, XML, XHTML Click hyperlink Browser requests document from server Server returns document requested Browser displays document CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages Source Code The HTML Source Document Creating a Source Document HTML, XML, XHTML 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 CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages HTML Document The HTML Source Document Creating a Source Document HTML, XML, XHTML 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” CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages Tags The HTML Source Document Creating a Source Document HTML, XML, XHTML Heading tags <h1>Some text goes here</h1> 1–6 Most important – least important Paragraph tag <p>The paragraph goes here</p> CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages HTML Structure The HTML Source Document Creating a Source Document HTML, XML, XHTML 4 main elements of HTML source code <html> html head title body <head> <title> </title> </head> <body> </body> </html> CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML 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? CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages Nest Properly Correct Incorrect The HTML Source Document Creating a Source Document HTML, XML, XHTML <head> <title>Chapter 2</title> </head> <head> <title>Chapter 2 </head> </title> CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages HTML The HTML Source Document Creating a Source Document HTML, XML, XHTML 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? CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages HTML The HTML Source Document Creating a Source Document HTML, XML, XHTML 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 CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages HTML The HTML Source Document Creating a Source Document HTML, XML, XHTML 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 CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages XML The HTML Source Document Creating a Source Document HTML, XML, XHTML XML – Extensible Markup Language Specifies a universal, structured format Data is classified by its meaning Users could create custom tags Car dealer: <make> <model> <year> Very strict syntax rules ensure universality Case matters! CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages XHTML The HTML Source Document Creating a Source Document HTML, XML, 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: <body> ≠ <BODY> ≠ <Body> ≠ <BoDy> Why? CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages XHTML The HTML Source Document Creating a Source Document HTML, XML, 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) CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages XHTML The HTML Source Document Creating a Source Document HTML, XML, XHTML How to make HTML into XHTML? Before <html> add: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitioinal.dtd"> 1st line: XML Declaration 2nd line: Document Type Definition CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML Also, change <html> tag itself: <html xmlns=“http://www.w3.org/1999/xhtml”> XML namespace “Tags defined in this document conform to the W3C definitions found at ...” Start using the new standards NOW CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages Meta The HTML Source Document Creating a Source Document HTML, XML, XHTML <meta> tag describes document content Useful for search engines Optional, goes in <head> section Attributes: Name: “keywords”, “description” Content <meta name=“keywords” content=“coffee, tea, imported” /> CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML 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 <p> Classifies a block of text as a paragraph Preceded and followed by a blank line (usually) Can add other attributes (Chapter 3) CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML Paragraphs and Line Breaks Break tag <br> Generates a line break Without inserting a blank line like the <p> tag. “Empty” tag – no </br> needed <br /> instead (space optional) / required by XHTML to indicate an empty element Ch02-Ex-05 CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML Browsers are Idiot Proof Try to compensate for errors. Different browsers handle html errors differently. Follow rules to try and avoid future complications. CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages XHTML DTD The HTML Source Document Creating a Source Document HTML, XML, XHTML 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! CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages The HTML Source Document Creating a Source Document HTML, XML, XHTML Block-Level Elements Define a complete section or block of text. Browser puts blank line before and after block. Does not need <p> to get line blank. Example: Heading elements, Blockquote element CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages Inline Elements The HTML Source Document Creating a Source Document HTML, XML, XHTML Used to define structure of a sequence of characters within a line of text. Example: <em> and <strong> elements CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages Font Size The HTML Source Document Creating a Source Document HTML, XML, XHTML Inline elements <big> and <small> CSCE 102 - Chapters 1 and 2 Introduction to Internet Creating a Basic Web Pages Code Summary The HTML Source Document Creating a Source Document HTML, XML, XHTML Refer to end of Chapter 2. Page 48 CSCE 102 - Chapters 1 and 2
