Előadást letölteni
Az előadás letöltése folymat van. Kérjük, várjon
1
Web Technológiák HTML 4.01 World Wide Web Consortium
W3C Recommendation 24 December 1999 Standard Generalized Markup Language (SGML) ISO 8879:1986 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> <head> <title> First HTML </title> </head> <body> <p> Hello World! </body> </html>
2
Web Technológiák XHTML 1.1 A Reformulation of HTML 4 in XML 1.0
W3C Recommendation 26 January 2000, revised 1 August 2002 Extensible Markup Language (XML) first published 10 February 1998 ”The Extensible Markup Language (XML) is a subset of SGML that is completely described in this document. Its goal is to enable generic SGML to be served, received, and processed on the Web in the way that is now possible with HTML”
3
Web Technológiák SGML vs. XML
Az SGML és az XML hasonlítanak egymásra, céljük az információcsere és információleírás platformfüggetlen megvalósítása. SGML-ben viszont sokkal több nyelvi elem megengedett, mint XML-ben. pl. nincs különbség a kis- és nagybetűk között, az attribútumokat nem kell mindig idézőjelbe tenni, az elemeket nem kell mindig lezárni
4
Web Technológiák XML 1.0 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE greeting [ <!ELEMENT greeting (#PCDATA)> ]> <greeting> Hello, world! </greeting> <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE greeting SYSTEM "hello.dtd"> <greeting> Hello, world! </greeting> pl. vers.dtd: <!DOCTYPE vers [ <!ELEMENT vers (szerzo,cim,versszak+,hely,ido)> <!ELEMENT szerzo (#PCDATA) > <!ELEMENT cim (#PCDATA) > <!ELEMENT versszak (sor+)> <!ELEMENT sor (#PCDATA) > <!ELEMENT hely (#PCDATA) > <!ELEMENT ido (#PCDATA) > ]>
5
Web Technológiák XML 1.0 <vers> <szerzo>József Attila</szerzo> <cim>Tiszta szívvel</cim> <versszak> <versszak> <sor>Nincsen apám, se anyám,</sor> <sor>Hogyha nem kell senkinek,</sor> <sor>se istenem, se hazám,</sor> <sor>hát az ördög veszi meg.</sor> <sor>se bölcsőm, se szemfedőm,</sor> <sor>Tiszta szívvel betörök,</sor> <sor>se csókom, se szeretőm.</sor> <sor>ha kell, embert is ölök.</sor> </versszak> </versszak> <versszak> <versszak> <sor>Harmadnapja nem eszek,</sor> <sor>Elfognak és felkötnek,</sor> <sor>se sokat, se keveset.</sor> <sor>Áldott földdel elfödnek</sor> <sor>Húsz esztendőm hatalom,</sor> <sor>s halált hozó fű terem</sor> <sor>húsz esztendőm eladom.</sor> <sor>gyönyörűszép szívemen.</sor> </versszak> </versszak> <hely> Szeged </hely> <ido> március 25. </ido> </vers>
6
Web Technológiák XHTML
Jelenleg 1.1, a 2.0 még csak munkavázlat (2010. dec.16 óta) A HTML 4.01-et és az XHTML 1.x-et hivatott leváltani. Azonban vele párhuzamosan fejlesztik a HTML 5-öt, aminek jelenleg nagyobb támogatottsága van a böngészőgyártók körében. A HTML5 megpróbál kompatibilis lenni a HTML 4.01-gyel és az XHTML 1.x verziókkal is, miközben az XHTML 2.0 egy teljesen új koncepciót tükröz, ami viszont teljesen inkompatibilis a régebbi verziókkal. Egy hibátlan XHTML oldalnak két kritériumnak kell megfelelnie: legyen jól formázott (well-formed) és legyen érvényes (valid)
7
Web Technológiák HTML4.01 vs. XHTML 1.1
MIME-típus: text/html application/xhtml+xml Well-formed <strong><u> nem jó </strong></u> <strong><u> jó </u></strong> HTML XHTML1.1 <ul> <ul> <li> xxx <li> xxx </li> <li> yyy <li> yyy </li> </ul> </ul> <br> <br /> vagy <br/> vagy <br></br> <img src=”valami.gif”> <img src=”valami.gif” /> Elemeket, attribútumokat kisbetűvel kell írni <P> <p></p> <IMG SRC=”valami.png”> <img src=”valami.png” />
8
Web Technológiák HTML4.01 vs. XHTML 1.1
Karakterkódolás <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <?xml version="1.0" encoding="utf-8"?> Stíluslap csatolása <link href="style.css" rel="stylesheet" type="text/css"> <?xml-stylesheet type="text/css" href="style.css"?> Nyelv beállítása <html lang="hu"> <html xmlns=" xml:lang="hu"> Kompatibilis? W3C szerint igen, de … HTML-ben a következő kódrészlet <p>Lorem<br />ipsum</p> ekvivalens ezzel: <p>Lorem<br>>ipsum</p> És így kellene megjelenítenie a böngészőnek: Lorem >ipsum
9
Web Technológiák HTML4.01 vs. XHTML 1.1
Karakterkódolás <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <?xml version="1.0" encoding="utf-8"?> Stíluslap csatolása <link href="style.css" rel="stylesheet" type="text/css"> <?xml-stylesheet type="text/css" href="style.css"?> Nyelv beállítása <html lang="hu"> <html xmlns=" xml:lang="hu"> Kompatibilis? W3C szerint igen, de … HTML-ben a következő kódrészlet <p>Lorem<br />ipsum</p> ekvivalens ezzel: <p>Lorem<br>>ipsum</p> És így kellene megjelenítenie a böngészőnek: Lorem >ipsum
10
Web Technológiák HTML5 Szerzői változat W3C Working Draft 25 October 2012 Szerkesztői változat W3C Working Draft 11 October 2012 A különböző böngészők még nem egyforma mértékben támogatják és folyamatosan változik..
11
Web Technológiák HTML5 http://hu.wikipedia.org/wiki/HTML5
”A HTML5 HTML-nek (Hypertext Markup Language, a web fő jelölőnyelvének) a korábbi verizóihoz képest átdolgozott változata. A kifejlesztésének egyik fő célja, hogy a webes alkalmazásokhoz ne legyen szükség pluginek (pl. Adobe Flash, Microsoft Silverlight, Oracle JavaFX) telepítésére.” ”A HTML5 bevezet jó néhány új elemet (címkét) és tulajdonságot, amelyek a modern weblapokon jellemzően alkalmazott szerkezetekre kínálnak új megoldást. Néhány változtatás szemantikai jellegű, például az általánosan használt <div> és a soron belüli részek formázását biztosító <span> helyett a <nav> (a weboldal navigációs területe) és a <footer> (lábléc). Más elemek új funkciók elérését biztosítják szabványosított felületen, mint az <audio> és a <video> elemek.”
12
Web Technológiák <!DOCTYPE html> <html lang="hu"> <head> <title> Oldal neve </title> <link rel="stylesheet" type="text/css" href="elérésiút" /> <script type="text/javascript"> Javaszkript, ha kell. </script> </head> <body> <header id="fejlec"> <img src="elérésiút" alt="logo, kép" /> <h4 id="szlogen"> Szlogen </h4> </header> <section id="tartalom"> <nav id="menusav"> <a href="">Menü1</a> <a href="">Menü2</a> <a href="">Menü3</a> <a href="">Menü4</a> <a href="">Menü5</a> </nav> <div id="lenyeg"> <p> Ez a tartalom, ide lehet írni, amit akarsz. </p> </div> </section> <footer> <p> Levédő szöveg, esetleg linkkel </p> </footer> </body> </html>
13
Web Technológiák HTML4.01 vs. HTML5
14
Web Technológiák CSS2 vs. CSS3
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Recommendation 07 June 2011 CSS Text Level 3 W3C Working Draft 14 August 2012
15
Web Technológiák XSLT http://en.wikipedia.org/wiki/XSLT
”XSLT (Extensible Stylesheet Language Transformations) is a language for transforming XML documents into other XML documents,[1] or other objects such as HTML for web pages, plain text or into XSL Formatting Objects which can then be converted to PDF, PostScript and PNG.” ”Typically, input documents are XML files, but anything from which the processor can build an XQuery and XPath Data Model can be used, for example relational database tables, or geographical information systems.”
16
Web Technológiák XSLT Sample of incoming XML document
<?xml version="1.0" ?> <persons> <person username="JS1"> <name>John</name> <family-name>Smith</family-name> </person> <person username="MI1"> <name>Morka</name> <family-name>Ismincius</family-name> </person> </persons>
17
Web Technológiák XSLT (transforming XML to XML)
<?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl=" version="1.0"> <xsl:output method="xml" indent="yes"/> <xsl:template match="/persons"> <root> <xsl:apply-templates select="person"/> </root> </xsl:template> <xsl:template match="person"> <name <xsl:value-of select="name" /> </name> </xsl:template> </xsl:stylesheet>
18
Web Technológiák XSLT Its evaluation results in a new XML document, having another structure: <?xml version="1.0" encoding="UTF-8"?> <root> <name username="JS1">John</name> <name username="MI1">Morka</name> </root> És az XHTML is XML..
Hasonló előadás
