1 / 23

Web Development

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)

maryellenm
Download Presentation

Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Development CS 105

  2. 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.

  3. 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

  4. 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)

  5. 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

  6. 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>.

  7. 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)

  8. 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

  9. 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>

  10. 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

  11. 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>

  12. 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.

  13. 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

  14. XML and HTML • XML and HTML complement each other. XML describes the data. HTML displays the data.

  15. eXtensible Markup Language • eXtensible • Markup • Language • XML is supported by many platforms and many tools. • A lot of web applications are using XML now.

  16. XML vs. HTML <HTML> <BODY> <UL> <LI> 1 kg apple <LI> 1/2 Sugar <LI> 1 kg white flour <LI> 250 g butter </UL> <P> Place apples in a bowl. Toss with flour until covered. then, ... </BODY> </HTML> <RECIPE> <INGREDIENTS> <INGREDIENT> 1Kg apple </INGREDIENT> <INGREDIENT> 1/2Kg Sugar </INGREDIENT> <INGREDIENT> 1 kg white flour </INGREDIENT> <INGREDIENT> 250 g butter </INGREDIENT> </INGREDIENTS> <INSTRUCTIONS> <INSTRUCTION> Place apples in a bowl. </INSTRUCTION> <INSTRUCTION> Toss with flour until covered. </INSTRUCTION> …. </INSTRUCTIONS> </RECIPE>

  17. XML • Labels the data • Structures the data • Example

  18. 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, all-enclosing “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)

  19. 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

  20. 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.

  21. Good, Bad and Unparsable • Bad example: <TVGuide> <channel>…</channel> <time>…</time> <title>…</title> <description>…</description> <channel>…</channel> <time>…</time> <title>…</title> <description>…</description> </TVGuide>

  22. 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>

  23. 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

More Related