Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML and XML
Document related concepts
Transcript
Web Development CS 105 Building Blocks of the Web • HTML – The language of the web, and every web developer should have a basic understanding of it. • XML and XSL – XML is a tool for describing data. – XSL is a tool for transforming data. • CSS (style sheet) – Styles define how HTML elements are displayed. How does www work • Web information is stored in documents called Web Pages • Web Pages are files stored on computers called Web servers • Web clients view the pages with a program called a Web browser • Popular browsers are IE and Netscape, Firefox World Wide Web • The Web is a network of computers all over the world • All computers in the Web can communicate with each other • All the computers use a communication standard called HTTP (hyper text transfer protocol) • Sometimes you see HTTPS (secure HTTP) How does the browser fetch the pages • A browser fetches a Web page from a server by a request • A request is a standard HTTP request containing a page address • A page address looks like this: http://www.cs.umb.edu/cs105 How does the browser display the pages • All web pages contain instructions for display • The browser displays the page by reading these instructions • The most common display instructions are called HTML tags • HTML tags look like this <p>This is a Paragraph</p>. Who is making the Web standards • The Web standards are not made up by Netscape or Microsoft • The rule-making body of the Web is the W3C • W3C stands for the World Wide Web Consortium • W3C puts together specifications for Web standards • The most essential Web standards are HTML (hypertext markup language), CSS (cascading style sheets) and XML (extensible markup language) What is an HTML file • An HTML file is a text file containing small markup tags • The markup tags tell the web browser how to display the page • An HTML file must have an htm or html file extension • An HTML file can be created using a simple text editor HTML Elements • HTML Tags – Tags are used to mark-up HTML elements – Tags are surrounded by “<“ and “>” (angle brackets) – Tags normally come in pairs like <html> and </html> – The text between the start and end tags is the element content – Tags are not case sensitive, <b> is the same as <B> HTML Elements • Tag Attributes – Tags can have attributes to provide additional information about the HTML elements on your page. – <body bgcolor=“red”> … </body> will show a red background – Attributes are always added to the start tag of an HTML element – Attributes values should always be enclosed in quotes Page Structure • HTML elements control the details of how a page gets displayed. • Every HTML document has the following basic structure: <HTML> <HEAD> … </HEAD> <BODY> … </BODY> </HTML> Page Structure • The HTML element surrounds the entire page description and identifies it to the browser as an HTML document. • The HEAD element contains relatively few elements that provide the browser information about the document. • The BODY element contains all of the text to be displayed and elements that control its display on the page. XML and HTML • XML is not a replacement for HTML • XML was designed to describe data in a format that you want and to focus on what data is. • HTML was designed to display data in a format that you prefer. • HTML is about displaying information, while XML is about describing information XML and HTML • XML and HTML complement each other. XML describes the data. HTML displays the data. eXtensible Markup Language • • • • eXtensible Markup Language XML is supported by many platforms and many tools. • A lot of web applications are using XML now. XML vs. HTML <RECIPE> <HTML> <INGREDIENTS> <BODY> <INGREDIENT> 1Kg apple </INGREDIENT> <UL> <INGREDIENT> 1/2Kg Sugar </INGREDIENT> <LI> 1 kg apple <INGREDIENT> 1 kg white flour </INGREDIENT> <LI> 1/2 Sugar <INGREDIENT> 250 g butter </INGREDIENT> <LI> 1 kg white flour </INGREDIENTS> <LI> 250 g butter <INSTRUCTIONS> </UL> <INSTRUCTION> Place apples in a bowl. <P> Place apples in a bowl. </INSTRUCTION> Toss with flour until <INSTRUCTION> Toss with flour until covered. covered. then, ... </INSTRUCTION> </BODY> …. </HTML> </INSTRUCTIONS> </RECIPE> XML • Labels the data • Structures the data • Example Rules for Well-Formatted XML • Every XML document must have a special tag: <?xml version=“1.0”?> to tell web browser it is an xml file • Every XML document must have a single, allenclosing “root tag” • Every XML element must have a corresponding closing tag • Just as HTML, XML elements must be properly nested • XML tags are case sensitive, <FOOD> and <food> are different • The value of an attribute must appear in quotation marks (either double or single quotation marks work) XML Element Names • Names can contain letters, numbers and other characters • Names cannot begin with a number or an underscore • Names cannot begin with the prefix “XML” or “xml” or “xML” etc. • Names cannot contain spaces Good, Bad, and Unparsable • Common errors in XML: misspelling tag names, have more than one root-level element, forgetting to close an open quote • If XML file is well-formed, the browser will display the file in a hierarchical fashion, otherwise, cannot load the file • The XML file could be designed poorly although it is well-formed. Good, Bad and Unparsable • Bad example: <TVGuide> <channel>…</channel> <time>…</time> <title>…</title> <description>…</description> <channel>…</channel> <time>…</time> <title>…</title> <description>…</description> </TVGuide> Good, Bad and Unparsable • Solution: <TVGuide> <program> <channel>…</channel> <time>…</time> <title>…</title> <description>…</description> </program> <program> <channel>…</channel> <time>…</time> <title>…</title> <description>…</description> </program> </TVGuide> Design Tips • Think logically and design accordingly Ex. Use <CD>…</CD> for cd collections • If you want it, tag it Ex. Don’t use <Time>10:00pm <name>..</name> </Time> Use <Time> <slot>10:00pm</slot> <name>…</name> </Time> • Think generically Ex. Don’t use <NBC>…</NBC> <ABC>…</ABC> to group different networks Use <name>NBC</name><name>ABC</name> • Think hierarchically Start with a meaningful root element and work downward to successive levels of detail
