Webszerkesztés Webszerkesztés
Alapfogalmak, érdekességek www – World Wide Web = világméretű hálózat = egymással kapcsolatban álló hypertext szerverek együttesét jelenti Az ilyen szervereken tárolt web oldalakat web böngésző programok segítségével lehet elérni. Webszerkesztés
Alapfogalmak, érdekességek hypertext – hiperszöveg = nem folytonos szöveg = olyan szöveg, amelynek bizonyos pontjáról egy másik szövegre hivatkozunk, ugrunk azaz hiperhivatkozást (hyperlink-et) tartalmaz. Webszerkesztés
Alapfogalmak, érdekességek Az internetet illetve az ősét nem a hétköznapi embereknek fejlesztették ki, hanem ez a hidegháború terméke volt Az internet elődjét az Amerikai Védelmi Minisztérium kutatóintézetében dolgozták ki az 1960-as években. (ARPANET) A HTML alapjainak megalkotója Tim Berners-Lee (ő készítette az első webszervert és tőle származik a www elnevezés, a html első leírását 1991-ben tette közzé) Webszerkesztés
Alapfogalmak, érdekességek A szövegtárolási formátum: HTML (HyperText Markup Language = hiperszöveges jelölőnyelv) Ez a szöveg tárolása mellett a dokumentum megjelenését, más dokumentumokhoz való kapcsolódását írja le Ehhez szorosan kapcsolódó HTTP (HyperText Transfer Protocol = hiperszöveg átviteli szabvány) A HTML formátumú dokumentumok továbbítását teszi lehetővé Webszerkesztés
Alapfogalmak, érdekességek Tim Berners-Lee által 1991-ben létrehozott weboldal (jelenleg az 1992-es változat látszik): http://info.cern.ch/hypertext/WWW/TheProject.html Webszerkesztés
Alapfogalmak, érdekességek Az első magyar honlap 1993-tól a www.fsz.bme.hu címen volt elérhető, jelenleg itt látható: http://www.fsz.bme.hu/www/other_h.html Webszerkesztés
Jó tanácsok HTML oldal készítéséhez Célszerű a mondanivalót szövegszerkesztőben megírni és a helyesírást ellenőrizni. A szavak elválasztása felesleges, mivel a sorok hossza függ a böngésző beállításától A nyitóoldal 1-2 képernyőnél ne legyen hosszabb Ne tartalmazzon túl sok szöveget, alkalmazz ugrópontokat (linkeket), a részekre bontáshoz Nagyobb méretű képek letöltését külön ugróponttal kelljen kérni, kedvcsinálónak készíts kis bélyegképet Jogsértés más munkáját sajátként feltüntetni! Néhány oldal látogatása vírusveszéllyel járhat Érdemes mások ötleteit tanulmányozni Webszerkesztés
Hogyan működik a böngészőnk? Gépünk böngészője a webszervertől megkapja az oldal kódját és a megjelenítéshez szükséges fájlokat (ezekből a „téglákból” építi fel, rakja össze böngészőnk a megjelenített oldalt) Különböző böngészők különbözően építhetik fel a megjeleníteni kívánt oldalt Pl.: nem biztos hogy a böngésző ismeri az adott karakterkészletet, amivel a szöveg meg lett formázva, ennek elkerülésére a díszesebb szövegeket képként szokták elhelyezni az oldalon Webszerkesztés
Leíró file-ok kiterjesztése htm és html: statikus, nem változó tartalomra utalnak, vagyis minden látogató ugyanazt az oldalt fogja látni php, asp, aspx: dinamikus tartalomra utalnak. Pl.: egy webáruház kosarának tartalmát megjelenítő lapnak, dinamikusan változónak kell lennie, hiszen mindenki más dolgot vásárol. Webszerkesztés
HTML alaputasítások A HTML dokumentumok a formázási utasításokat kódok formájában tartalmazzák, amelyek a szövegtől elkülönülnek Ezeket a címkéket (angolul tag-eket) < > jelek közé tesszük, ide parancsokat írunk Egy-egy ilyen parancsnak hatóköre van(/lehet): < > kezdettel és </ > jelcsoporttal végződik A parancsok paraméterezhetőek, ezzel pontosítva, egyértelművé téve jelentésüket A böngészőnk a <html> tagtől a </html> tagig dolgozza fel a dokumentumot A HTML dokumentumnak két fő része van: Fej (head): ide kerülnek a dokumentum fő jellemzői pl.: szerző neve, lap címe, készítéshez használt program neve Szövegtörzs (body): háttér, szövegszín beállítások és a lapon megjeleníteni kívánt elemek helyezkednek itt el Webszerkesztés
HTML tag-ek <TagNeve> közbülső rész, amire vonatkozik Általánosan, ha nincs paraméter (attributum): <TagNeve> közbülső rész, amire vonatkozik </TagNeve> Általánosan, ha vannak paraméterek (attributumok): <TagNeve paraméter_1="érték_1" paraméter_2="érték_2" …> Webszerkesztés
A HTML struktúra </HTML> <BODY> </BODY> <HTML> Ide kerül minden, ami a weblaphoz tartozik </HTML> <BODY> Ide kerül minden, amit a weblapon látni szeretnénk </BODY> Webszerkesztés
Bejelentkezés a szerverre Webszerkesztés
Első html oldal kódja <html> <body> Az első oldal tartalma Webszerkesztés
Második html oldal kódja <head> <title> Az oldal címe </title> </head> <body> Az első oldal tartalma </body> </html> Webszerkesztés
Harmadik html oldal kódja <head> <meta charset="utf-8"> <title> Az oldal címe </title> </head> <body> Az első oldal tartalma </body> </html> Webszerkesztés