HTML (HyperText) Markup Language – Hiperszöveges jelölőnyelv

Slides:



Advertisements
Hasonló előadás
A számítógépes hálózatok és az Internet
Advertisements

HTML nyelv Hiper-Text Markup Language 1. óra.
HTML nyelv.
Hálózati és Internet ismeretek
avagy a hálózatok hálózata
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,
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.
Információ és kommunikáció
Internetes böngészőprogram használata, beállításai
Leírónyelvek: HTML és XHTML
Abonyi-Tóth Andor, ELTE IK
WEBOLDALFEJLESZTÉS
WebStarter ECDL W e b k e z d ő ECDL Webkezdő mintafeladat.
WSDL alapismeretek A WSDL (Web Services Description Language – Web szolgáltatások leíró nyelv) egy XML-alapú nyelv a Web szolgáltatások leírására és azok.
A HTML alapjai Havlik Barnabás Készítette:
Számítógépes hálózatok világa Készítette: Orbán Judit ORJPAAI.ELTE.
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.
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.
Levelezés, és a többiek Takács Béla Irodalom Bodnár –Magyari: Az Internet használata I. (Kiskapu) Bodnár –Magyari: Az Internet használata.
Domain Name System – DNS keresése az interneten.
Internet ismeretek.
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.
DOKUMENTUMOK KÉSZÍTÉSE WORD 2007 SZÖVEGSZERKESZTŐVEL II. rész.
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
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.
Az Internet alkalmazásának lehetőségei Áttekinté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.
World Wide Web Szabó Péter Számítástechnika-technika IV. évfolyam.
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
Hálózat menedzsment Óravázlat Készítette: Toldi Miklós.
13.tétel Mutassa be a honlap készítésére alkalmas szoftvereket! Hasonlítsa össze a Macromedia Dreamweaver és Microsoft Office Frontpage programokat!
Html nyelv (HyperText Markup Language)
Weblap-szerkesztés. Információs hálózati szolgáltatások Internet fontosabb szolgáltatásai (szóbeli) Elektronikus levelezési rendszer használata (szóbeli)
Számítógép hálózatok.
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
14. Szóbeli középszintű informatika tétel:
A weblapkészítés alapjai
Az XML nyelv (Extensible Markup Language). XML  XML: leíró nyelv (metanyelv)  XML alkalmazás: egy megalkotott nyelv  XML dokumentum: egy új nyelv egy.
Java web programozás 2..
Bevezetés az informatikába 11. előadás Internet. Egyetlen nagy egységes elveken működő világhálózat hálózatok összekapcsolása nagy világhálóvá csomagkapcsolt.
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.
Assoc. Prof. Ján Gunčaga, PhD. Faculty of Education Catholic University in Ružomberok Nyílt forráskódú szoftverek és IKT az oktatásban.
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.
Hálózatos programok készítése
A HTML alapjai Az internet és a web.
A HTML alapjai Az internet és a web.
Fülemüle informatika tehetségkutató verseny
Internet és kommunikáció
Internet és kommunikáció
Internet és kommunikáció
Internet és kommunikáció
Információtechnológiai alapismeretek
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.
Előadás másolata:

HTML (HyperText) Markup Language – Hiperszöveges jelölőnyelv Az SGML (Standard Generalized Markup Language – Szabványos kiterjesztett Jelölőnyelv) egy specifikusan a Web számára átalakított módozata. A nyelv lehetőséget nyújt a normál információs szövegben bizonyos jelölő blokkok, ún. tag – ek elhelyezésére, melyek információkat és utasításokat tartalmaznak a böngészők számára a dokumentumok tartalmával, megjelenítésével és viselkedésével kapcsolatban.

A HTML története A HTML –t 1990-óta használják a weben a honlapok megjelenítéséhez. Azóta 5 fő állomása volt a HTML történetében (most tartunk a 6.-on) Nulladik – HTML 1.0 Itt alakult ki az alapvető szerkezet, a nyitó és záró cimkék <html> és </html>, a fejléc, <head> és </head> éa a törzs, azaz a <body> és </body>. Ezeknek a az elemeknek a zárócímkéje nem volt elhanyagolható már akkor sem. Már itt lehetőség volt dokumentum típus deklarációra. (DTD)

Első szint – HTML 2 Ez nem hozott túl sok változást, de innentől különül el a böngésző által szabályozott és a dokumentum szerkezetében létrehozott formázás. Új formázási lehetőség volt pl.: <code> ami forráskód jelölésére szolgált, az <em> ami a kiemelésre szolgált. A karakterformázási lehetőség is kibővült: a <b> a félkövér karaktert, az <i> a dőlt karaktert és a <tt> az azonos betűszélességet jelenti.

Második szint Ez a HTML 2 kiegészítése. Bevezetésre kerültek az űrlapok, az ezen belüli többsoros szövegbevitel, és a kiválasztható opciók. Ez a verzió szabvány lett, és a későbbi fejlesztések alapjául szolgált. Harmadik szint – HTML 3.2 Ezt a verziót 1996-ban fogadta el a W+C, ami jelentős változásokat hozott. Innentől van lehetőségünk Java appletek, és scriptek beágyazására. Megjelent a style elem is, csekély haszonnal és ígéretszinten. Lehetőségünk van táblázat készítésére, a betűtípus beállítására.

Negyedik szint – HTML 4. 1997 nyarán tette hivatalos ajánlássá a W3C. Ez már igazából egy SGML alkalmazás. Fejlesztéskor szem elött tartották a csökkent képességűek érdekeit, és a nemzetközi karakter készletet. Tovább fejlesztették az űrlapok és a táblázatok használhatóságát, a keretek (frame-ek) használata hivatalossá vált. Gyarapodtak a formázóelemek, és elvetettek pá korábbi elemet.

Ötödik szint – XHTML 1.0 Hatodik szint – HTML 5 Az XHTML a jelenlegi és a jövőbeli dokumentum típusok, és modulok családjába tartozik, amik kiegészítik, kiterjesztik a HTML 4-et. Lényegében ez annyit tesz, hogy megfogták a HTML 4-et, és az XML-t és összegyúrták. Hatodik szint – HTML 5 A HTML 5 a 2010-es év új szabványa. Rengeteg új lehetőséggel bővült ki a HTML nyelv, azonban napjainkban még elég sok körülötte a zürzavar, és kevés böngésző támogatja, de a jövő mindenképp e HTML 5-é lesz.

SGML (Standard Generalized Markup Language – Szabványos Általános jelölőnyelv) Egy ISO szabványos jelölőnyelv dokumentum formátumok leírására. XHTML (Extensible HyperText Markup Language – Kiterjeszthető Hyperszöveges jelölőnyelv) A HTML megfogalmazása XML-ben. Gyakorlatilag nincs jelentős eltérés a két nyelv között, csak a formai követelmények lettek szigorúbbak.

XML (Extensible Markup Language – Kiterjeszthető Leíró nyelv) Szabályok gyűjteménye, melyek segítségével olyan szöveges formátumokat állíthatunk elő, amelyek alkalmasak adatok strukturált leírására. A HTML állomány Egy olyan szöveges állomány, amely különböző jelző blokkokat (tag-eket) és a megjelenítendő, letöltendő, stb. objektumokra mutató hivatkozásokat tartalmaz. Manapság a különböző formázási lehetőségeket nem HTML, hanem CSS (Cascading STYle Sheets – Kaszkádolt Stíluslapok) segítségével oldják meg.

HTTP protokoll (HyperText Transfer Protocol – Hiperszöveg Átviteli protokoll) A Web kliens-szerver architektúrát alkalmaz az információk megosztására és terjesztésére. A rendszer működése során a felhasználó gépén futtatott kliens program (böngésző) kérést intéz az Internetre rákapcsolt web-szerverhez, ami az üzenetet értelmezi és a kért dokumentumot, ill. kiegészítő információkat küld vissza a kliens felé. A megkapott fájlt aztán értelmezi a browser és annak tartalmától függően megjeleníti, lemezre menti vagy éppenséggel elkezdi futtatni azt a felhasználó gépén. A két gép között az információ csere a HTTP protokoll segítségével zajlik. A HTTP protokoll a 80-as portot használja

A kliens-szerver architektúra

Protokoll Az informatikában a protokoll egy egyezmény, vagy szabvány, amely leírja, hogy a hálózat résztvevői miképp tudnak egymással kommunikálni. Ez többnyire a kapcsolat felvételét, kommunikációt, adat továbbítást jelent. Port A hálózati port a programozásban egy olyan logikai pont, amely meghatározza azt a módot, ahogyan egy kliens program kiválaszt egy kapcsolódási pontot egy szerverprogramhoz, amely a hálózat egyik gépén fut.

HTTPS protokoll HyperText Transfer Protokol Secure – Biztonságos Hiperszöveg Átviteli Protokoll A HTTP protokollnak titkosított, biztonságos hitelesítést lehetővé tévő változata. Ezzel a protokollal gyakran találkozunk web áruházak, banki megoldások, illetve internetes levelezőszerverek esetén, vagyis mindenhol, ahol fontos, hogy az adatforgalomból illetéktelenek ne csapolhassanak le bizalmas információkat. A HTTPS protokoll a 443-as portot használja.

FTP protokoll FILE Transfer Protokol Secure – Fájl Átviteli Protokoll Az egyik legrégebbi Internet protokoll egyike. Legelső változatát még 1971-ben dolgozták ki. A protokoll feladata a számítógépek közötti fájl-csere biztosítása: a különböző platformok fájl-rendszereinek eltéréseit elrejtve, az állományok ellenőrzött és biztos átvitele az Internetre kaocsolt bármely két egység között. A 21-es portot használja.

URL protokoll Uniform Resource Locator – Egységes erőforrás helymeghatározó Másnéven webcím. Az interneten található különböző erőforrásokra (weboldalakra, e-mail címekre, letölthető fájlokra, stb.) az URL-ek segítségével hivatkozhatunk. Az URL tartalmazza az erőforrás eléréséhez szükséges kommunikációs protokoll nevét (pl. HTTP, HTTPS, FTP, MAILTO, NEWS, TENET) a 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ó.

ftp://ftp.freebsd.org/pub/FreeBSD/doc/ URL felépítése: protokoll://tartománynév:portszam/elérési_utvonal Példák: http://origo.hu/ https://www.cia.gov/ ftp://ftp.freebsd.org/pub/FreeBSD/doc/ http://lib.nyme.hu:8080/corvinal/opac/wpac.cgi

Browser (Böngésző) (5 legnépszerűbb?) Az a program ami a HTML kódot értelmezi, és megjeleníti. Nem mindegyik támogatja ugyanolyan mértékben a szabványokat, és maguk sem felelnek meg a szabványoknak. Ha elkészítünk egy honlapot, előfordul, hogy mást látunk a különböző böngészőkben. Ez fokozottan igaz, ha CSS-t, JavaScript-et is használunk. Érdemes mindegyik böngészőt feltelepíteni és tesztelni a honlapunkat. Itt érdemes megjegyezni, hogy a böngésző verziója is sokaz számít.

Szerkesztőprogramok A HTML szerkesztőknek két fő típusát különböztetjük meg. A grafikus, avagy WYSIWYG (What You See Is What You Get – Azt kapod amit látsz) szerkesztők, és a kód szerkesztők Grafikus szerkesztővel szinte rajzolva szerkeszthetjük meg a honlapot, és legenerálják nekünk a forráskódot. Hátrányuk, hogy a kód katasztrofálisan pocsék, és nem tanulunk semmit a HTML szerkesztésről. Kódszerkesztők a HTML kódot mi magunk írjuk. Tanulás során mindenképpen szöveges kódszerkesztőt használjunk.

XHTML oldal szerkezete Minden oldalt egy alkalmazandó dokumentum típus (DOCTYPE, vagy DTD) megadásával kezdünk. Ez a böngészőnek nyújt információt, hogy milyen szabvány szerint készítettük el a weboldalunkat. Walidátorral ellenőrizhető (on-line W3C validator) a szabványnak való megfelelés, ezt a folyamatot pedig validálásnak nevezzük. Firefox alá letölthetjük a HTML Validator nevü plug-in-t.

3 fajta dokumentumtípus közül választhatunk. XHTML 1.0 Strict XHTML 1.0 esetében 3 fajta dokumentumtípus közül választhatunk. XHTML 1.0 Strict Akkor alkalmazzuk, ha az XHTML prezentációs lehetőségeit nem akarjuk használni, és a különféle formázásokat Stíluslapok (CSS) segítségével oldjuk meg. A szükséges kód: <!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/xhtml1/DTD/xhtml1-strict.dtd” > XHTML 1.0 Transitional Akkor alkalmazzuk, ha ki akarjuk használni az XHTML prezentációs lehetőségeit vagy olyan böngészőre fejlesztünk, amely nem ismeri a stíluslapokat. (Ez utóbbi már elég ritka.) A szükséges kód: <!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/xhtml1/TR/xhtml1-transitional.dtd” >

XHTML 1.0 Frameset Akkor alkalmazzuk, ha az oldalt több keretre (frame) akarjuk felosztani. A szükséges kód: <!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Frameset//EN” ”http://www.w3.org/xhtml1/TR/xhtml1-frameset.dtd” > A DTD megadása után kezdhetjük el írni a XHTML kódot. A kód a <html> tag-gel kezdődik, a zárópárja pedig a </html> tag. E között a két tag között kell megírnunk a honlapunk kódját. XHTML esetében a <html> tag-en belül meg kell adnunk egy úgynevezett xmlns-t, (Extensible Markup language Name Space) azaz a XML névteret: Xmlns=HTTP://WWW.W3.ORG/1999/XHTML xml:lang=„hu” (Az XML nyelvezet beállítása) Lang=”hu” (Az oldal nyelvezeténak beállítása)

Egy alap XHTML dokumentum felépítése <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN>” ”http://www.w3.org/xhtml1/TR/xhtml1-transitional.dtd” > <html xmlns=http://www.w3.org/1999/xhtml xml:lang=”hu” lang=”hu> <head> <title></title> </head> <body> </body> </html> Hasznos oldalak http://www.w3schools.com (angol) http://w3.org (angol) http://weblabor.hu (Webfejlesztéssel kapcsolatos, magyar) http://www.seotools.hu (Keresőoptimalizálás, magyar) http://webni.innen.hu (Keresőoptimalizálás, magyar) http://www.fabio.hu/meta-tag-generator (Ingyenes, magyar) https://adwords.google.hu/select/KeywordToolExternal (Hasznos, magyar)