1 A webprogramozás alapjai Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter
IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása, HTML írása
Nyelv típusok 3 Leíró nyelv (markup language) Le tudjuk írni vele, hogy egy dokumentumban bizonyos részek funkcionálisan hova tartoznak. Ezek leírásához TAG-eket használunk, amelyek a dokumentum tartalmától (=szöveg) egyértelműen elkülöníthető. Kvázi: egy vázat tudunk képezni vele, pld. esszében a bevezetés-tárgyalás-befejezés Programozó nyelv (programming language) Funkcionális céllal rendelkeznek, programozói logikát valósíthatunk meg velük. Változók, ciklusok, elágazások használhatók Adatok manipulálhatók Bemenethatására kimenet produkálható
Nyelv típusok 4 Leíró nyelv XML HTML TeX Stb. HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014 Programozó nyelv JavaScript PHP nodejs C# Stb. Stíluslap nyelv CSS 1 CSS 2 CSS 2.1 CSS 3
Az internet 5 Szabályok és szabványok alapján, jól definiáltan működik (protokoll) szabvány definiálható struktúra le tudjuk írni Struktúra példa: Szakdolgozat (tartalmi összefoglaló, bevezetés, irodalomkutatás,...) Esszé: bevezetés, tárgyalás, befejezés
Definiálható struktúra 6 head body footer
Definiálható struktúra 7 head body footer
Leírás 8 Leírás TAG-ek segítségével tehető meg Mi a tag? Az egyes funkcionális elemeket megjelölő szövegrész <tagname> tartalom... </tagname> Fontosabb tag-ek Címsorok (h1, h2, h3, h4, h5, h6) Link (a) Paragrafus (p) Kép (img) Szövegformázások (b, i, u) Felsorolás (ul, ol, li)
HTML elemek (tag) 9
Tag felépítése 10 tartalom
IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása, HTML írása
Fontosabb tag-ek I. 12 Címsor <h1> Címsor_1 </h1> Félkövér Döntött Aláhúzott <b> félkövér szöveg </b> <i> dőlt szöveg </i> <u> aláhúzott szöveg </u> Paragrafus <p> tetszőleges hosszú szöveg, amely akár több soros is lehet </p>
Fontosabb tag-ek II. 13 Számozott lista <ol> <li> listaelem első </li> <li> listaelem második </li> 1. listaelem első 2. listaelem második </ol> Számozatlan lista <ul> </ul> <li> listaelem első </li> <li> listaelem második </li> listaelem első listaelem második
Fontosabb tag-ek III. (link) 14 A linkek (hiperhivatkozás) az internet alapja, legfontosabb eleme. Használható Weboldalon belüli navigálásra (bookmark) Weboldalak közötti navigálásra Saját weboldalon belül, figyelve a mappaszerkezetre (lásd később). Külső forrásokat használva, lásd lentebbi példa. Link <a href= www.oe.hu > kattints ide </a> +attribútum <a href= www.oe.hu target= _blank > kattints ide </a>
Fontosabb tag-ek III. (link) 15 Oldalon belüli navigálás esetén ID-kat kell használnunk (erről később). Látható, hogy a href után nincs sem www. sem http://!
Fontosabb tag-ek IV. (kép) 16 Kép lehet tartalmi elem (mondanivalót tartalmazó ábra, diagram, stb.) design elem (link icon, háttér, stb.) Minden esetben az src (source = forrás) után kell megadni a kép forrását, amely lehet: Sajátgépen / szerveren található kép. (mappaszerkezet itt is!) Külső szerveren található kép (amely az interneten keresztül, egy URL-lel elérhető). Kép +attribútum <img src= kgk.jpg > <img src= kgk.jpg height= 100 width= 40 alt= kep >
Tag-ek egymásba ágyazása I. 17 Példa 1: Kedvenc tantárgyam a webprog alapjai, jelesre akarok teljesíteni!
Tag-ek egymásba ágyazása II. 18 Példa 2: Képet szeretnénk megjeleníteni, amely link-ként funkcionál. (logó)
IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása, HTML írása
Mappaszerkezet használata I. 20 Minimális szinten, kis projektek (pár file) esetén fölöslegesnek tűnhet. Ipari vagy minimálisan is összetettebb projektek esetén elengedhetetlen. Egy mappába berakva mindent káosz lesz, keresgélni kell» fejlesztőnek hátráltató Amiket forrásként szeretnénk használni (pl. img src esetén) fontos, hogy tudjunk navigálni a mappaszerkezetben! Különben rossz helyen keresi a gép, és nem jelenik meg a kép / pdf melléklet nem letölthető, stb.
Mappaszerkezet használata II. 21 Kép forrás megadása (relatív útvonallal) Kép forrás megadása (abszolút útvonallal) A behivatkozást mindig onnan kell értelmezni, ahol az a fájl van, amiben megtesszük a hivatkozást! Tehát, ha az index.html-ben írjuk, akkor az azzal egy szinten lévő fájlok és mappák a kiindulási alap.
Mappaszerkezet használata II. 22 Az aktuális mappában megtalálható a logo.png fájl, amelyet behivatkozunk../ és annak elhagyása nélkül is működik, hiszen alapértelmezetten az aktuálisban keresi../ jelentése: aktuális mappából nézve../ jelentése: az aktuális mappából egyet feljebblépünk, és onnan nézve
Mappaszerkezet használata II. 23 Az aktuális mappában található a kepek mappa, és abban megtalálható a logo.png fájl, amelyet behivatkozunk../ és annak elhagyása nélkül is működik, hiszen alapértelmezetten az aktuálisban keresi../ jelentése: aktuális mappából nézve../ jelentése: az aktuális mappából egyet feljebblépünk, és onnan nézve
Mappaszerkezet használata II. 24./ jelentése: aktuális mappából nézve../ jelentése: az aktuális mappából egyet feljebblépünk, és onnan nézve Az aktuális mappából egy szintet feljebb lépünk, ahol a logo.png fájl már megtalálható és behivatkozzuk.../ elhagyása nélkül nem működne, hiszen az a parancsa az egy mappával feljebblépésnek! Ha elhagyjuk, akkor az első eset lépne érvénybe.
Mappaszerkezet használata III. 25 Tipikus eset, a CSS fájlunk egyikében hivatkozunk egy képre, ekkor: A CSS file a./css/style.css helyen van. A behivatkozott kép a./kepek/alma.jpghelyen van. Tehát, a style.css-ből (azzal megegyező szintről) egyet fel kell lépni (../) Ahonnan már elérhető a kepek mappa. background-image: url (../ kepek / alma.jpg ) ;
IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása, HTML írása
HTML írása I. (szerkesztők) 27 HTML kód írásához nincs szükség semmilyen bonyolult fejlesztőeszközre Windows esetén mezei notepad-ban is írható (problémás) Mac esetén mezei textedit-ben is írható (problémás) Fejlettebb szövegszerkesztőkben van: syntax highlight, auto complete, és egyéb fejlesztést gyorsító / segítő eszközök Javasolt szerkesztő: Sublime text & Notepad++
HTML írása II. (kiterjesztés) 28 Amint.html kiterjesztésbe tesszük a file-unkat, úgy annak megfelelően fogja értelmezni az összes számítógépes program (böngésző ami számunkra fontos) Tehát, ez esetben minden html tag értelmet nyer. Sima.txt kiterjesztés esetén, böngészőben megnyitva a weboldalt, az összes karakter megjelenik, tehát a html tag-ek nem nyernek értelmet.
HTML írása III. (kommentezés) 29 Minden kódban fontos, hogy a megjelenendő tartalom mellett lehessen, úgynevezett rejtett tartalmat is írni, ezt kommentnek nevezzük. Ezek a fejlesztő számára jelentenek fontos információkat. Úgy is felfoghatjuk, hogy jegyzetet írunk a kódba, de az csak nekünk jelenik meg. Két típust lehet meghatározni: Sima komment, ahol a nyitó és záró tag-ek között lévő rész nem jelenik meg. Feltételes komment, ahol valamilyen feltétel esetén fut le, a nyitó és záró tag-ek közti rész. A feltételes kommentet főleg a böngészők eltérősége miatt (kiemelten gondolva itt az Explorer / Edge szoftverekre) szokták használni. Például, ha az Explorer nem tud valamit kezelni, akkor azt így htmlben elkülönítve tudjuk megadni, hogy abban az esetben mi történjen.
HTML írása III. (kommentezés) 30 Sima komment Komment használata debuggolásra Feltételes komment, amelyben a taralom akkor fut le, ha IE9 nyitotta meg a weboldalt
Syntax highlight 31
Feladat 32 1. Szövegszerkesztő megtekintése 2. Alap index.html file írása 3. Böngészőben megnyitni 4. Készítsük el a következő képen látható mini oldalt
33
Felkészült segítő kérdések (vizsga) 34 Milyen nyelvtípusokat ismer? Hogyan definiálja, határolja el azokat egymástól? Mutassa be a fontosabb HTML tag-eket (6 db) Mi egy tag felépítése? Mutassa be rövid példával. Mi az az attribútum a tag-ek esetén? Ismertesse a tag-ekegymásbaágyazhatóságának lehetőségét. Miért fontos a mappaszerkezet használata weboldalak esetén? Milyen ideális mappastruktúrát ismer? Mire kell figyelni a mappastruktúrák használatakor? Hogyan tudunk egy adott mappából egy szintet feljebblépni? Mikor van szükség erre? Milyen eszközök szükségesek egy egyszerű HTML file írásához? Mi az a syntax highlight? Mire használunk kommentezést?
Köszönöm a figyelmet! Kérdés esetén e-mailben szívesen állok rendelkezésre. Sipos Miklós sipos.miklos@nik.uni-obuda.hu