Abonyi-Tóth Andor, ELTE IK

Slides:



Advertisements
Hasonló előadás
Szerver oldali programozás
Advertisements

Alapfogalmak a Web-fejlesztés témakörben
Weblapkészítési tudnivalók 2: Útmutató az elnevezésekhez Pék Ágnes © 2009.
Zenetár a webszerverünkön, avagy XML használata PHP 5 alatt. Ercsey Balázs (laze) – netpeople.hu.
HTML nyelv Hiper-Text Markup Language 1. óra.
HTML nyelv.
Hálózati és Internet ismeretek
Weblap szerkesztés HTML oldal felépítése Nyitó tag Záró tag Nyitó tag Záró tag oldalfej tözs.
1 Internet. 2 WWW  World Wide Web  Hivatkozásokkal összekötött hipermédia dokumentumok rendszere  Dokumentumok -> Weboldalak  A weboldalak hipertext.
Az internet és a web A HTML alapjai.  „Úgy gondoljuk, hogy a világpiacon talán öt darab számítógépet tudnánk eladni.” (Thomas Watson, az IBM elnöke,
DFAN-INF-524 és DFAL-INF-524 kurzus hallgatói számára
Extensible Markup Language
2010/2011.Huszár István1. dia Weboldalak tervezése II. (X)HTML.
A web és működése A Világháló három szabványra épül:
Amit a HTML-ről érdemes tudni
Böngészők Internet Explorer Mozilla Firefox
HTML nyelv.
Leírónyelvek: HTML és XHTML
Készítette: Rummel Szabolcs
HTML (HiperText Mark-Up Language)
Hernyák Zoltán XML validálás.
WEBOLDALFEJLESZTÉS
WebStarter ECDL W e b k e z d ő ECDL Webkezdő mintafeladat.
XML alapok 2. XML hibaellenőrzés XML a böngészőkben XML parser
A HTML alapjai Havlik Barnabás Készítette:
 Az Apache webszervernek semmi köze az Apache indiánokhoz, akik az Egyesült Államok dél-nyugati részén élõ õslakók. A név egy szójáték: "a patchy server”,
Előadó Abonyi-Tóth Andor Műszaki tanár 1117 Budapest, XI. kerület, Pázmány Péter sétány 1/C, Tel: (1) /8466 abonyita.inf.elte.hu 2012/2013-as.
Önleíró adatok: XML INFO ÉRA, Békéscsaba
Vizuális és web programozás II.
Google earth és a térinformatika kapcsolata
Webszerkesztés Stíluslapok (CSS).
SOAP alapismeretek A SOAP egy egyszerű XML alapú protokoll, ami lehetővé teszi, hogy az alkalmazások információt cseréljenek a HTTP-én keresztül. Forrás:
FTP File Transfer Protocol. Mi az FTP? Az FTP egy olyan protokoll, amely fájlok interneten keresztül végzett átvitelére szolgál. A felhasználók többsége.
CSS.
Buris Katalin V. földrajz - informatika
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.
Korpásné Szűcs Melinda web-referens DEENK Korpásné Szűcs Melinda web-referens DEENK.
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 –
HTML nyelv.
A protokoll A protokoll fogalma.
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ő.
Hálózati alapismeretek
Számítógépes alapismeretek 3. gyakorlat
Illés Zoltán ELTE Informatikai Kar
XML adatkezelés 1. témakör Az XML szabvány.
Java web programozás 11..
Az Internet alkalmazásai
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
Az NVU webszerkesztő program
Html nyelv (HyperText Markup Language)
Illés Zoltán ELTE Informatikai Kar
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
14. Szóbeli középszintű informatika tétel:
Weblapkészítés alapjai
Webprogramozó tanfolyam
Java web programozás 2..
Illés Zoltán ELTE Informatikai Kar
A böngészőprogram használata. A böngészők értelmezik a html nyelvet, a javascript kódokat és a php kódokat is. Majd ezeket lefuttatja, és azok alapján.
A Mozilla magyar nyelvű szerkesztőjének használata
Előadássorozat a Független Pedagógiai Intézetben fupi.hu Az internet: miért, hogyan? 2 / 10. Csada Péter Csada Bt. cspc.hu.
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.
A HTML alapjai Az internet és a web.
Webprogramozó tanfolyam
HTML (HyperText) Markup Language – Hiperszöveges jelölőnyelv
Fülemüle informatika tehetségkutató verseny
Számítógépes alapismeretek 3. gyakorlat
Internet és kommunikáció
Internet és kommunikáció
Előadás másolata:

Abonyi-Tóth Andor, ELTE IK HTML alapok Abonyi-Tóth Andor, ELTE IK

Fontos szabványok

HTTP protokoll Protokoll = szabályrendszer HTTP HyperText Transfer Protocol (Hiperszöveg Átviteli Protokoll) a webböngésző (kliens) adatokat kérhet le a kiszolgálóról (szerver), illetve adatokat küldhet a kiszolgálóra A kérést a kliens kezdeményezi

HTTPS protokoll A https séma szintaktikailag megegyezik a http sémával, de jelzi a böngészőnek, hogy használni kell az SSL/TSL titkosító réteget az adatforgalom védelme érdekében.

URL, URN, URI, stb.. Hálózati erőforrásokra (weboldalakra, e-mail címekre, letölthető fájlokra, stb.) az URL-ek (Uniform Resource Locator - Egységes erőforrás helymeghatározó) segítségével hivatkozunk. Tartalmazza: eléréshez szükséges kommunikációs protokoll nevét (pl. HTTP, HTTPS, FTP, MAILTO, NEWS, TELNET) számítógép, vagy tartomány nevét (vagy IP címét), egy hálózati port számot, amelyen az adott szolgáltatás elérhető, és azt az elérési utat, amelyen az erőforrás megtalálható. URL: protokoll://tartománynév:portszám/elérési_útvonal

URL példák http://www.elte.hu/ https://etr.elte.hu/etrweb/login.asp ftp://ftp.externet.hu/.lib/disk5/pub/win/ssh/putty. exe http://lib.nyme.hu:8080/corvina/opac/wpac.cgi

URN Ne csak hálózati erőforrásoknak legyen azonosítója, hanem absztrakt erőforrásoknak is (könyv, folyóirat, stb.) URN (Uniform Resource Name - Egységes erőforrás név) Gondok az URL-el Állandóan változhatnak Az URL tartalma is változhat

URN Példa: urn:isbn:0-520-02356-0 A név nem változik A név világviszonylatban egyedi Az URN kiadása ellenőrzött folyamat Az URL-re továbbra is szükség van

URI URI: Uniform Resource Identifier (Egységes erőforrás azonosító) URL+URN=URI Az URI1 az erőforrást kétféleképp azonosíthatja: hely szerint (URL) vagy név szerint (URN). URI URL URN 1: http://hu.wikipedia.org/wiki/URI

A HTML nyelv HyperText Markup Language - Hiperszöveg jelölőnyelv SGML (Standard Generalized Markup Language - szabványos, kiterjesztett jelölő nyelv) –en alapul (1986-os szabvány) Szöveges állomány .html vagy .htm kiterjesztéssel Tartalmaz Tag (formázóutasítás) pl. <b>félkövér</b> Objektumhivatkozásokat pl. "../kepek/logo.gif” A weboldalon megjelenő szöveget formázatlanul

HTML történet 1995 november: HTML 2.0 HTML 3.0 1997 január: HTML 3.2 képek szöveggel történő körbefolyatása, táblázatok, matematikai képletek használata. nem lett belőle hivatalos szabvány (túl komplex) 1997 január: HTML 3.2 1997 december: HTML 4.0 kliens oldali scriptnyelvek (pl. javascript) Stíluslapok használata 1999 december: HTML 4.01 Javításokat tartalmaz Ez az utolsó (SGML-en alapuló) verzió HTML 5: jelenleg fejlesztés alatt !!!

XHTML Igény: webes adatbázisok közti kommunikációt lehetővé tévő, bővíthető nyelv => XML (eXtensible Markup Language - Bővíthető jelölőnyelv) XHTML A HTML 4.01 XML alapokon történő megvalósítása 2000. január: XHTML 1.0 2001. május: XHTML 1.1 XHTML 2.0: leállt a fejlesztés, az erőforrásokat a HTML 5 fejlesztésére fordítják !!!

A táblázatnak ugyanaz a kódja, a CSS dönti el a kinézetét Baj a HTML-el A dokumentum tartalmának leírására lenne jó Összemosódik a tartalom és a megjelenés Megoldás: CSS - Cascading Style Sheets (lépcsőzetes stíluslapok) Szétválasztható a tartalom és a megjelenés A táblázatnak ugyanaz a kódja, a CSS dönti el a kinézetét

Dokumentum típus (DTD) HTML Struktúra Dokumentum típus (DTD) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Oldalcím</title> </head> <body> tartalom </body> </html> Fej Törzs

HTML példa <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head>    <title>Első weblapom</title> </head> <body> <p>Ez az első próbálkozásom. <b>Remélem sikerül!</b></p> </body> </html>

Néhány gyakran használt HTML tag Bekezdés létrehozás: <p> </p> Sortörés: <br> 1-es szintű címsor: <h1> </h1> Erősen kiemelt szöveg: <strong> </strong> Hiperhivatkozás: <a href="…"> </a> Kép beszúrása: <img src="…">

HTML 4.01 dokumentumtípusok HTML 4.01 Strict Ezt akkor ajánlatos használni, amikor tiszta (prezentációs lehetőségektől mentes) kódot állítunk elő, és stíluslapokat használunk. A szükséges kód: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" http://www.w3.org/TR/html4/strict.dtd>

HTML 4.01 dokumentumtípusok HTML 4.01 Transitional (Loose) Ha ki akarjuk használni a HTML prezentációs lehetőségeit, vagy amikor olyan böngészőre fejlesztünk, amely nem ismeri a stíluslapokat, ezt a dokumentumtípust használhatjuk. A szükséges kód: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd>

HTML 4.01 dokumentumtípusok HTML 4.01 Frameset A nevéből is következik, hogy ezt akkor használjuk, ha az ablakot több keretre (frame) akarjuk felosztani. Ezzel majd a keretekről szóló fejezetben foglalkozunk. A szükséges kód: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd"> M E n ü Tar- ta- lom

Validálás Ellenőrizhető, hogy az oldalunk megfelel-e a szabványnak => validálás (érvényesség vizsgálat) Ellenőrzés: http://validator.w3.org/

Validálás a Firefox böngészőprogramban Telepítsük a HTML validator kiterjesztést a http://users.skynet.be/mgueury/mozilla/ címről! (rövidített url: http://bit.ly/qLVIX6) Ezek után a böngészőprogram jobb alsó sarkában látjuk, hogy a megtekintett oldal valid-e. Nem mindig ugyanazt az eredményt adja, mint a W3C validátora!

Elavult tagek, paraméterek A HTML 4.01 szabványban sok tag/paraméter elavultként van megjelölve Ezek kiválthatók a stíluslapok alkalmazásával <p align="left">Szia</p> <p style="text-align: left;"> Szia </p> Részlet a Web-fejlesztés I. tananyagból

Stílusok külső állományban A stílusok kivihetők külső állományba Teljesen szétválasztható a HTML kód és a megjelenés Később részletesen megnézzük

Honlapszerkesztés eszközei szövegszerkesztő program (egyszerű szövegként (txt) képes menteni)

Honlapszerkesztés eszközei Kódszintű szerkesztőprogram

Honlapszerkesztés eszközei WYSIWYG (alakhű) programok

Ajánlott szerkesztőprogram Notepad++ http://notepad-plus.sourceforge.net/hu/site.htm asztali és hordozható változata is van

Fejlesztőkörnyezet kialakítása (ha szerveroldali technológiákra is szükség van) XAMPP telepítőcsomag http://www.apachefriends.org/en/xampp.html Multiplatform XAMPP 1.7.4 tartalmazza Apache 2.2.17 MySQL 5.5.8 PHP 5.3.5 phpMyAdmin 3.3.9 FileZilla FTP Server 0.9.37 Tomcat 7.0.3

XAMPP portable Nem kell telepíteni, pendriveról is működik Lépések Mappa létrehozása XAMPP ZIP változatának letöltése, kitömörítése a mappába setup_xampp.bat elindítása xampp-control.exe elindítása és a vezérlőpulton elindítható a kívánt szolgáltatás

HTML és XHTML különbségei

XHTML XHTML (XML+HTML „házasság”) Mindkét szabvány erősségeit magában foglalja, bővíthető, az XML miatti megkötések miatt jobban kell figyelnie a web-fejlesztőknek A tartalmat bármilyen XML kompatibilis program képes megjeleníteni, feldolgozni

XHTML XHTML: eXtensible HTML Előnyök Az XHTML dokumentumok XML alapúak, könnyen áttekinthetők, szerkeszthetők, érvényesíthetők (validálhatók) standard XML eszközökkel. Az XHTML oldalak a HTML 4.0 szabványt támogató szerkesztőprogramokkal is szerkeszthetők. Az XHTML dokumentumban használhatunk olyan alkalmazásokat (appletek, szkriptek), amelyek futtatásához szükséges a HTML Document Object Model (DOM) vagy az XML DOM. Az XHTML "család" fejlődésével az XHTML 1.0 kritériumainak megfelelő dokumentumok egyre inkább együtt tudnak működni egymással a különböző XHTML környezetekben.

!!!

HTML, XHTML különbségek Az elemek egymásbaágyazásánál ügyelnünk kell a sorrendre <b><u>Vastag, aláhúzott szöveg</b></u> <b><u>Vastag, aláhúzott szöveg</u></b>

HTML, XHTML különbségek Jól formázott (well formed) dokumentumot kell létrehozni minden elemet a <html> elemen belül kell elhelyezni. Minden elemnek lehetnek további beágyazott elemei. Ezek az elemek páronként kerülnek megadásra, és ügyelni kell arra, hogy a szülő elembe szabályosan kerüljön beágyazásra

HTML, XHTML különbségek A tag neveket kis betűkkel kell írnunk. az XML szabvány megkülönbözteti a kis- és nagybetűket a <br> és <BR> tag két különböző dolgot jelölhet

HTML, XHTML különbségek Minden XHTML elemet kötelező lezárni. <p>Első bekezdés <p>Második bekezdés <p>Első bekezdés</p> <p>Második bekezdés</p> Azon elemek végére, amelyeknek a HTML szabványban nincs záró párjuk (area, base, bgsound, br, col, frame, hr, img, input, isindex, keygen, link, meta, option, param), / karaktert kell tennünk. <br> <br /> <img src="kep.gif"> <img src="kep.gif" /> Ahhoz, hogy a dokumentum kompatibilis legyen a jelenlegi böngészőkkel, space karakter kell a / jel elé

HTML, XHTML különbségek A paramétereket kis betűvel kell írni. <table WIDTH="250"> <table width="250">

HTML, XHTML különbségek A paraméterek értékeit "" jelek közé kell zárnunk <table WIDTH=250> <table width="250">

HTML, XHTML különbségek Az attribútumok minimalizálása, rövidítése tiltott <input checked> <input checked="checked" /> HTML és XHTML attribútumok HTML XHTML  compact compact="compact" ismap ismap="ismap" checked checked="checked" nohref nohref="nohref" declare declare="declare" noshade noshade="noshade" readonly readonly="readonly" nowrap nowrap="nowrap" disabled disabled="disabled" multiple multiple="multiple" selected selected="selected" noresize noresize="noresize"

HTML, XHTML különbségek A name attribútumok helyett id attribútumot kell használni <img src="kep.gif" name="kep1" /> <img src="kep.gif" id="kep1" /> A régebbi böngészők miatt érdemes egy ideig mindkét attribútumot szerepeltetni, ugyanazon értékkel. <img src="kep.gif" name="kep1" id="kep1" />

HTML, XHTML különbségek Az xml:lang elem szerepeltetése <div lang="hu" >Hajrá Magyarok</div> <div lang="hu" xml:lang="hu">Hajrá Magyarok</div>

HTML, XHTML különbségek Kötelező XHTML elemek Minden XHTML dokumentumnak rendelkezni kell DOCTYPE deklarációval. A html, head és body elemeknek szerepelniük kell, a title elemnek pedig a head elemen belül kell elhelyezkednie. <!DOCTYPE ide jön a dokumentumtípus> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Oldalcím</title> </head> <body> Ide jön a tartalom. </body> </html>

DOCTYPE XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML -> XHTML konverzió? HTML Tidy http://tidy.sourceforge.net/#binaries Parancsmódban használható program tidy -help Paraméter Magyarázat -out file a kimeneti állomány megadása -modify az eredeti állományt módosítja -asxhtml a HTML állományt jól formázott XHTML állománnyá konvertálja - f file a feldolgozás során jelentkező hibák kiírása a megadott állományba -latin1 ISO-8859-1 karakterkódolás használata -utf8 UTF8 karakterkódolás használata -utf16 UTF16 karakterkódolás használata

HTML -> XHTML konverzió? tidy -f hiba.txt -asxhtml -utf8 -o pelda2.html pelda.html Eredeti kód Konvertált kód <html> <head> <meta http-equiv="Content-Language" content="hu"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> </head> <body> <p>Csak az teszteljük,<br> hogy mi történik az átalakítás során....</p> </body> </html>   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="generator" content= "HTML Tidy for Windows (vers 1st December 2004), see www.w3.org" /> <meta http-equiv="Content-Language" content="hu" /> <meta http-equiv="Content-Type" content= "text/html; charset=utf-8" /> <title></title> </head> <body> <p>Csak az teszteljďż˝k,<br /> hogy mi tďż˝rtďż˝nik az ďż˝talakďż˝tďż˝s sorďż˝n....</p> </body> </html>

VÉGE