A webprogramozás alapjai. Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter

Méret: px

Mutatás kezdődik a ... oldaltól:

Download "A webprogramozás alapjai. Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter"

Ágoston Mészáros
5 évvel ezelőtt
Látták:

1 1 A webprogramozás alapjai Óbudai Egyetem Neumann János Informatikai Kar 2018/19/1 szemeszter

2 IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása, HTML írása

3 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ó

4 Nyelv típusok 4 Leíró nyelv XML HTML TeX Stb. HTML 1991 HTML HTML HTML XHTML 2000 HTML Programozó nyelv JavaScript PHP nodejs C# Stb. Stíluslap nyelv CSS 1 CSS 2 CSS 2.1 CSS 3

írni Struktúra példa: Szakdolgozat (tartalmi összefoglaló,

5 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

6 Definiálható struktúra 6 head body footer

7 Definiálható struktúra 7 head body footer

Leírás 8 Leírás TAG-ek segítségével tehető meg

.. </tagname> Fontosabb tag-ek Címsorok (h1,

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

9 HTML elemek (tag) 9

10 Tag felépítése 10 tartalom

11 IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása, HTML írása

12 Fontosabb tag-ek I. 12 Címsor <h1> Címsor_1 </h1> Félkövér Döntött Aláhúzott félkövér szöveg dőlt szöveg aláhúzott szöveg Paragrafus tetszőleges hosszú szöveg, amely akár több soros is lehet

13 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

belül, figyelve a mappaszerkezetre (lásd később). Külső forrásokat használva, lásd lentebbi példa.

14 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= > kattints ide </a> +attribútum <a href= target= _blank > kattints ide </a>

15 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

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

17 Tag-ek egymásba ágyazása I. 17 Példa 1: Kedvenc tantárgyam a webprog alapjai, jelesre akarok teljesíteni!

18 Tag-ek egymásba ágyazása II. 18 Példa 2: Képet szeretnénk megjeleníteni, amely link-ként funkcionál. (logó)

19 IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása, HTML írása

Egy mappába berakva mindent káosz lesz, keresgélni kell» fejlesztőnek hátráltató Amiket forrásként szeretnénk

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

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

22 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

23 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

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

/css/style.css helyen van. A behivatkozott kép a./kepek/alma.jpghelyen van.

25 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 ) ;

26 IV. előadás Nyelv típusok HTML nyelv fontosabb elemei I. Mappaszerkezet és file struktúra Szerkesztők bemutatása, HTML írása

(problémás) Fejlettebb szövegszerkesztőkben van: syntax

27 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++

számítógépes program (böngésző ami számunkra fontos) Tehát, ez esetben minden html tag

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

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

30 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

31 Syntax highlight 31

Feladat 32 1. Szövegszerkesztő megtekintése 2. Alap index.html file írása 3.

32 Feladat 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 33

34 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?

35 Köszönöm a figyelmet! Kérdés esetén ben szívesen állok rendelkezésre. Sipos Miklós sipos.miklos@nik.uni-obuda.hu

Hasonló dokumentumok

HTML. Dr. Nyéki Lajos 2016

HTML. Dr. Nyéki Lajos 2016 HTML Dr. Nyéki Lajos 2016 HTML és SGML HTML (Hypertext Markup Language) SGML (Standard Generalized Markup Language) ISO 8879:1986 A HTML nyelven készült dokumentumok kiterjesztése - az Internet szerveren:.html;