3. What is HTML? Publish online documents with headings, text, tables, lists, photos, etc. Retrieve online information via hypertext links, at the click of a button. Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc. Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
4. CSS Language for describing the presentation of Web pages Colors, Layout, and Fonts Allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.
5. Example <title>My first HTML document</title> <h1>An important heading</h1> <h2>A slightly less important heading</h2> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p>
6. Example: Image and Link <imgsrc="peter.jpg" width="200" height="150"> <imgsrc="peter.jpg" width="200" height="150" alt="My friend Peter"> This a link to <a href="peter.html">Peter's page</a> This is a link to <a href="http://www.w3.org/">W3C</a> <a href="/"><imgsrc="logo.gif" alt="home page"></a>
7. Head and Body <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> replace with your document's title </title> </head> <body> replace with your document's content </body> </html>
9. What is XML? Extensible Lets you define your own tags, the order in which they occur, and how they should be processed or displayed. Markup Language XML is a language that’s very similar to HTML. It’s much more flexible than HTML because it allows you to create your own custom tags. It’s important to realize that XML is not just a language. XML is a meta-language: a language that allows us to create or define other languages. Example With XML we can create other languages, such as RSS, MathML (a mathematical markup language), and even tools like XSLT.
10. Address Example: External to HTML External Presentation: 정지훈 서울 관악구 신림동 서울대학교 HTML tags are still presentation-oriented HTML Markup: <em>정지훈</em> <br> 서울 관악구 신림동 <br> <strong>서울대학교</strong>
11. Address Example: HTML to XML HTML Markup: While not conveying any formal semantics: <em>정지훈</em> <br> 서울 관악구 신림동 <br> <strong>서울대학교</strong> XML tags are chosen for content-structuring needs XML Markup: <address> <name>정지훈</name> <street>서울 관악구 신림동</street> <town>서울대학교</town> </address>
12. Address Example: XML to External XML Markup: <address> <name>정지훈</name> <street>서울 관악구 신림동</street> <town>서울대학교</town> </address> XML stylesheets are, e.g., usable to generate different presentations External Presentations: 정지훈 서울 관악구 신림동 서울대학교 정지훈 서울 관악구 신림동 서울대학교 . . .
13. Document Type Tree: address name street town PCDATA PCDATA PCDATA Address Example:Document Type Definition Document Type Definition (DTD): Extended Backus-Naur Form (EBNF): <!ELEMENT address (name, street, town) > <!ELEMENT name (#PCDATA) > <!ELEMENT street (#PCDATA) > <!ELEMENT town (#PCDATA) > address ::= namestreettown name ::= PCDATA street ::= PCDATA town ::= PCDATA
14. A Complete XML Document Referring to an External DTD XML Instance Document Referring to DTD (via root element): <?xml version="1.0" standalone="no"?> <!DOCTYPE address SYSTEM "address.dtd"> <address> <name>정지훈</name> <street>서울 관악구 신림동</street> <town>서울대학교</town> </address> The XML declaration uses standalone attribute with "no" value: DTD import The DOCument TYPE declaration names the root element address and, after the SYSTEM keyword, refers to an external DTD at "address.dtd"