Web Technológiák HTML 4.01 World Wide Web Consortium

Slides:



Advertisements
Hasonló előadás
Zenetár a webszerverünkön, avagy XML használata PHP 5 alatt. Ercsey Balázs (laze) – netpeople.hu.
Advertisements

HTML nyelv.
Felhasználói felületek és üzleti logika Bollobás Dávid ASP.NET
Extensible Markup Language
2010/2011.Huszár István1. dia Weboldalak tervezése II. (X)HTML.
Bemutatkozik az XML.
Amit a HTML-ről érdemes tudni
HTML nyelv.
Leírónyelvek: HTML és XHTML
WEBOLDALFEJLESZTÉS
OLDALSZERKEZET ELEMEK 1. A TAG A header taggel fejléc adható meg. Ez a rész tartalmaz bevezető információt a weboldalról vagy annak egy részéről (pl..)
XML alapok 2. XML hibaellenőrzés XML a böngészőkben XML parser
Entity framework Krizsán Zoltán
Közös kinézet Mester oldal, témák, skin-ek, css Webalkalkalmazás fejlesztése ASP.NET-ben Krizsán Zoltán.
Mobiltelefonokra optimalizált árfolyamlista és pénzváltó kivitelezése IX. VMTDK Témavezető: Dr. PATAKI Éva Szerző: SZÉKEJ É. Krisztián, I. évfolyam, Szegedi.
Microsoft szoftverek a szakképzésben
Kliensoldali Programozás
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Tananyag: 2. konzultáció CSSJavaScript.
ESzabványok Workshop 1. előadás: Bevezető, eAdatmodell október 13.
XML támogatás adatbázis-kezelő rendszerekben
CSS.
Webes Információs Rendszerek fejlesztése
Buris Katalin V. földrajz - informatika
JavaScript a gyakorlatban. 1.Gyakorlat Mi a JavaScript?  A JavaScript nem Java! JavaScript futtatása JavaScript beillesztése XHTML-be Változók kezelése.
XHTML 1. óra. Miért térjünk át HTML-ről XHTML- re? HTML-szabványban tartalom és forma összemosódott HTML 4.0 szabványban stíluslapok használatát javasolták.
WEB 2.0. Amiről szó lesz… Web átalakulóban, a WEB 2.0 –Újszerű weboldalak… –Első a tartalom! –A felhasználók hatalomátvétele?! –A Web mint platform –
CSS A CSS bemutatása.
Weboldalak tervezése (X)HTML.
Weboldal tervezés programozó szemmel. Alapok Minden webcím www. –tal kezdődikMinden webcím www. –tal kezdődik Webböngésző = Internet ExplorerWebböngésző.
Hernyák Zoltán XSLT transzformációk.
Érdekességek. Tudod-e? Mit jelent a „www”? A) Wild Windows Wave B) World Wide Web C) Wide World Web.
Alkalmazói programok Integrált felhasználói rendszerek Számítómunkahelyen szükséges felhasználói programokat egy csomagban, modulokban tartalmazza; az.
Párizs, a fények városa Szakdolgozatom témájának azért választottam Párizst, mert világ életemben csodáltam magát a várost, mindig is nagy vágyam volt,
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 10. Előadás Css Tananyag:Web-programozás.
Web-programozás Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 1. Előadás Tananyag: A WWW A HTML nyelv alapjai.
HTML 2. Űrlapok
XML Mi az XML?  Extensible Markup Language  Kiterjeszthető jelölő nyelv  Adatok, adatstruktúrák leírására szolgál  A HTML és az SGML tapasztalataira.
Készítette: Turócziné Kiscsatári Nóra
Blog Fülöp Dávid MCT, MCPD Egy blog sémája Use Case-ek – Blog áttekintése – Egy blogpost megtekintése – Blogpost írása – Blogpost.
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
Webprogramozó tanfolyam
Mobil alkalmazások fejlesztése Vonalkód leolvasó Symbian alapú mobiltelefonra Készítette: Tóth Balázs Viktor.
Java web programozás 2..
Mobil alkalmazások fejlesztése Vonalkód leolvasó Symbian alapú mobiltelefonra Készítette: Tóth Balázs Viktor.
IVSZ Konferencia 2006.december 1. Veres Zsolt KKV Kereskedelmi Igazgató SAP Közép Európa.
Webes tartalmakban alkalmazható szteganográfiai módszerek vizsgálata
Webszerkesztés. IP cím pl: Domain cím - DNS pl: ország nevehttp:// számítógép címe World Wide Web Webszerverre.
HTML5 A HTML4 tükrében.
Informatikai rendszerek
Alkalmazott Informatikai Tanszék
A HTML alapjai Az internet és a web.
Webprogramozó tanfolyam
Ez Az Én Művem Iskola: Kalmár Zsigmond Szakgimnázium és Szakközép Iskolája Készítette: $zabadi Károly Felkészítő tanár: Kiss Ágnes Hódmezővásárhely.
HTML (HyperText) Markup Language – Hiperszöveges jelölőnyelv
Maven és Ant Build eszközök bemutatása
HTML, XML szerkesztés Vezető: Majzik Zsuzsa
“Tudásmegosztás és szervezeti problémamegoldás a mesterséges intelligencia korában” Levente Szabados Technológiai Igazgató.
Fejlett Programozási Technikák 2.
Technológiák összehasonlítása J2EE - PHP
ResearcherID bemutatása
Test Automation Kurzus Intro
Web technológia alapjai
Fejlett Programozási Technikák 2.
Endnote Cite While You Write plugin 2013
Cascading Style Sheet.
JavaScript a böngészőben
Endnote Cite While You Write plugin 2015 Skultéti Attila
Manapság az internetes technológiákat körülbelül 1,4 milliárdan használják személyes, illetve üzleti célokra. Jelenleg kutatások zajlanak az internet technikai.
JavaScript a böngészőben
What’s new in Java 2019 Tömösvári Imre
Előadás másolata:

Web Technológiák HTML 4.01 World Wide Web Consortium W3C Recommendation 24 December 1999 http://www.w3.org/TR/REC-html40/ Standard Generalized Markup Language (SGML) ISO 8879:1986 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> First HTML </title> </head> <body> <p> Hello World! </body> </html>

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 http://www.w3.org/TR/xhtml1/ 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”

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 http://www.standardsmode.hu/html-css/xhtml/

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

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> 1925. március 25. </ido> </vers>

Web Technológiák XHTML Jelenleg 1.1, a 2.0 még csak munkavázlat (2010. dec.16 óta) http://www.w3.org/TR/xhtml2/ 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)

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> HTML4.01 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” />

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="http://www.w3.org/1999/xhtml" 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

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="http://www.w3.org/1999/xhtml" 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

Web Technológiák HTML5 Szerzői változat http://www.w3.org/TR/html5/single-page.html W3C Working Draft 25 October 2012 Szerkesztői változat http://dev.w3.org/html5/spec/single-page.html 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..

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

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>

Web Technológiák HTML4.01 vs. HTML5 http://dev.w3.org/html5/html4-differences/ http://www.w3schools.com/html/html5_intro.asp http://html5demos.com/ http://html5.ugyesen.com/

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

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

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>

Web Technológiák XSLT (transforming XML to XML) <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 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 username="{@username}"> <xsl:value-of select="name" /> </name> </xsl:template> </xsl:stylesheet>

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