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

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

V. előadás HTML nyelv fontosabb elemei II. Weboldal építése blokkokból (div) A <head>-ről bővebben (metaadatok) Formázás, stílusozás I. (CSS, class, ID) Reszponzív design Margin és padding

További tag-ek I. 3 <hr> horizontális vonal, tartalmi elválasztásra szokták használni nincs záró tag-je (esetleg magában lezárás <hr/>) <pre> formázott szöveg megjelenítésére, ahol fontos, hogy a space-k és az új sorok megjelenjenek <br> sortörés hr-hez hasonlóan nincs lezárótag-je <div> Egységet/blokkot képvisel, amelyet általában több HTML elem összefogására használnak

További tag-ek II. 4 <table> táblázat amely sorokból és oszlopokból áll <tr> -el jelezzük az új sor kezdetét <td> -el jelezzük a soron belüli cellát (a cellák egymás alatt pedig alkotják majd az oszlopot) <th> olyan mint a <td>, viszont ez esetben táblázat fejlécről beszélünk Továbbá, számos stilisztikailag fontos tag létezik még, amelyek főként a HTML 5-ös verziójával jöttek be. Ezek mára már a böngészők teljes támogatását élvezhetik, így nyugodtan lehet őket használni. Elsősorban cikkekben van fontos értelmük (pld. index-es cikkek esetén). Ezekről bővebben a W3C oldalán olvashattok: https://www.w3schools.com/html/

További tag-ek II. 5

További tag-ek III. 6 <iframe> Oldalon belüli oldal Egy tároló, amelybe egy másik külső weboldalt (=tartalmat) tudunk beletölteni, és az fog ott megjelenni. Gyakran látott és alkalmazott példa: Facebook post beágyazása, egy Facebook-tól független weboldalon. Igen sok problémát tud okozni, így használata a példával szemléltetett eseteken kívül nem nagyon fordul elő. Részletesen az általa okozható támadásokról a Web Security témájú előadáson lesz szó. Elöljáróban: igen kevés oldalt lehet már iframe-ba betölteni.

További tag-ek III. 7 iframe használata Facebook post-ok beágyazásához

További tag-ek III. 8

További tag-ek III. 9

Weboldal építés (div) 11 Régen táblázatos elven (a tartalom/mak 1-1 táblázat cellában foglaltak helyet) Manapság div-eket használnak, miért jobb ez? Funkcionalitást tekintve így van értelme. De ez miért fontos?» Google keresőrobotok, stb.

Weboldal építés (grid) 12 A div teljesen jó, de macerás tud lenni bonyolultabb struktúrák kiépítése Megoldás / újítás: GRID (~2017) Előnye, hogy konkrétan blokkosíthatjuk vele az egész felépítését az oldalnak egyszerűbben

Weboldal építés (grid) 13 Látható, hogy itt is div az építőelem, a grid csak értelmezésbéli különbség.

Példa struktúra I. 14

Példa struktúra II. 15

A <head> bővebben I. 17 Nem összekeverendő a <header> -rel! Metadata adatok összefogására van. Ide megjelenítendő tartalmat NEM teszünk! (metadata = az adatokról szóló adat, amely a működést határozza meg) Meta-adat például a dokumentum címe, karakterkódolás típusa, szerzői adatok, stb. Plusz, az oldalhoz szükséges dolgok (pl. külső css, webes font-ok, stb.)

A <head> bővebben II. (karakterkódolás) 18 Karakterkódolás A karakterkódolási rendszerek az informatikában módszert jelentenek betűk, számok és hasonló adatok (más szavakkal karakterek) megjelenítésére, amelyben egy karaktergyűjtemény minden karakteréhez egy-egy egyedi számot rendelünk hozzá. Például az ASCII karaktergyűjteményben az A betűhöz a 65-ös, a B betűhöz a 66-os, a C betűhöz a 67-es kódot rendelték hozzá.

A <head> bővebben II. (UTF-8) 19 8-bit Unicode Transformation Format, 8 bites Unicode átalakítási formátum Változó hosszúságú Unicode karakterkódolási eljárás, melyet Rob Pike és Ken Thompson alkotott meg. Bármilyen Unicode karaktert képes reprezentálni, ugyanakkor visszafelé kompatibilis a 7 bites ASCII szabvánnyal. Emiatt egyre inkább az internetes karakterkódolás standardjává válik. Egyes Windows-os programok a fájl elejére írt 0xEF,0xBB,0xBF bájtsorozattal jelzik, hogy UTF-8 kódolású fájlról van szó; ezt néha UTF-8 BOM kódolásnak hívják. UTF-8 BOM nélkül

A <head> bővebben III. (author, description) 20 Mivel a HTML egy leíró nyelv, ezért találhatók benne olyan részek amelyek a dokumentum eredetiségéhez kapcsolhatók. Author» szerző Description» dokumentum leírása MS Word esetén ilyen adatok ugyan úgy megtalálhatók.

A <head> bővebben III. (keywords) 21 Ahogy a description is a háttérinformációk tárolására alkalmas, úgy a keywords is. Keywords segítségével az oldalhoz kapcsolódó kulcsszavakat lehet megadni. Cicákkal foglalkozó oldal esetén releváns kulcsszavak lehetnek: Cica, macska, macskakaja, macskatáp, macskaeledel, állateledel, stb. Google keresőrobotok Mit csinálnak?» Az interneten fellelhető oldalakat bejárják, és elemzik. Hogy működnek?» Sok összetett és bonyolult algoritmus alapján (PageRank) Sok probléma volt vele, ezért mára már nem nézi az algoritmus. (minden kulcsszó felsorolása, csak hogy előrébb soroljon a Google a keresések között» káoszhoz vezet)

A <head> bővebben IV. (favicon) 22 Favicon segítségével a pici kis ikont lehet megadni, amely a böngésző lapfülén jelenik meg. Nem szükségszerű, de jól mutat. 16 x 16 pixeles kép szokott lenni, rendszerint.ico kiterjesztésben. Localhost-on nem megy, csak éles szerverről futtatva!

A <head> bővebben V. (viewport) 23 Viewport metatag segítségével a a böngészőt lehet utasítani, hogy az oldal méretezését hogyan kezelje. Viewport = a felhasználó által látott terület Ennek nagysága függ az eszköz méretétől, böngésző beállításától (nagyítás), stb. HTML5-ben jelent meg

A <head> bővebben (kitekintő) 24 Tehát, amikor egy kép mérete pl. 3MB akkor nem csak maga a képet felépítő pixelek vannak eltárolva, hanem egyéb metaadatok is. Szélesség Magasság Felbontás GPS koordináták Stb. iphone image metadata viewer macos Mojave

Formázás I. 26 Alapból található minden HTML elemen formázás (default preset), de ez a legminimálisabb dolgokat tartalmazza (pl. betűméret, térköz, stb.). Már a web korai szakaszában elindult, hogy amit készítünk ne csak a tartalomról szóljon, de szép is legyen, pláne, ha az esztétikusság a tartalom megértését szolgálja! Mikor formázzunk és mikor ne? A mai internetsebességek, és olyan okostelefonok mellett, amelyeken majdnem korlátlan internetelérés van, nem érdemes ezen spórolni. (Semmibe nem kerül egy 230 kbyte-os plusz CSS file-t letöltenie a készüléknek.) A mai letisztult és mondhatni minimalista standardok mellett, viszonylag kis munkával szép és esztétikus oldalak hozhatók létre. Korábban gond volt, amikor elterjedt, hogy mindenféle gif és egyéb képekkel tűzdeljünk tele mindent... (kb. 90-es évek vége).

Formázás I. 27

Formázás I. 28 Tehát, van lehetőség arra, hogy egy adott oldalnak n db megjelenést biztosítsunk, mialatt a tartalom nem változik.

Formázás II. 29 Inline styling Tag-be ágyazott stílus Internal styling Head részben kifejtett External styling Különálló stíluslap alkalmazása Régebbi módszer, de Ma is használatos kivételes esetekben HTML emailekben (csak így lehet) Régebbi weboldalak esetén CMS rendszerekben Dinamikus tartalmakban (ahol JS változtatja a HTML tartalmat) Újabb és kifinomultabb módszer Nagy rendszerekben a skálázhatóság, átláthatóság és (kód)újrafelhasználhatóság miatt más nem működik

Formázás III. (inline, internal) 30

Formázás III. (external) 31

A CSS fejlődése 32 Hasonlóan a HTML verziókhoz, úgy a CSS is már több verzióban jött ki. Minden verzió értelemszerűen egy fejlődési lépés volt. Jelenleg a CSS3-nál tartunk, amely drasztikusan sok újítást, eye-candy látványosságot és egyéb dolgot hozott magával. Pár fontosabb: Media query-k Animációk Átmenetek (transition) Selectors

Class I. 33 Mi történik akkor, ha az első 3 bekezdést sárga háttérrel szeretnénk, az összes többit pedig naranccsal? Jelenlegi tudásunk alapján csak a p tag-re tudunk hivatkozni CSS-ben... Megoldás: különböző jelölők használata (class és id) CLASS akkor használandó, ha egy stílushalmazt több mindenre szeretnénk értelmezni Ahogy egy osztályba több diák jár, úgy egy osztály több bele tartozó tag-et tud kezelni Ennek értelmében egy html oldalon belül többször is szerepelhet a class= xy kifejezés (Megjegyzés: id-nél ez másképp fog működni) Formai felépítés: class = tetszoleges-megnevezes-ahogyhivatkozunkra

Class I. (kód szinten) 34

Class II. 35 Lehetőség van több class-t használni egy tag-re. Miért jó ez? Lehetőségünk van szeparálni a különböző stílusrészleteket osztályokra Mikor fontos ez? Kódújrafelhasználhatóság szemléletnél Ipari szemléletnél Logikailag és nagyobb mértékben jobb így (átláthatóság, karbantarthatóság) Formai felépítés: class = elsomegnevezes masodik-megnevezes Példa: jó az előző színezés, de (csak) az első bekezdésbe fontos dolgot akarunk írni, amire felfigyel mindenki. Legyen tehát a szöveg színe piros!

Class II. (kód szinten) 36

ID 37 Az ID val ugyan azt lehet megtenni, mint a class-okkal. Tehát nincs olyan, hogy a class kevesebbet tud mint az id! Formai felépítés nagyon hasonló: id = tetszoleges-megnevezesvalami Két fontos eltérés van: Egyetlen tag csak egyetlen id-val rendelkezhet Egyetlen id csak egyszer jelenhet meg, azonos html oldalon belül

ID (kód szinten) 38

Class és ID egyszerre 39

Class & ID (összegzés) 40 CLASS ID Nem egyedi Egy class használható több elemre is Több class használható egy elemen is. tal hivatkozunk rá (CSS-ben) Egyedi Egy elem csak egy id-val rendelkezhet Egy html tartományon belül nem szerepelhet egy id kétszer # tel hivatkozunk rá (CSS-ben)

Több stíluslap használata 41 Lehetőség van a nagy CSS fájlunkat több részre szeparálni (célszerű is). Előnyök Minden a maga helyén van kezelve Tipográfiai dolgok Menüvel kapcsolatos dolgok Stb.

Külső stíluslap használata 42 Lehetőség van előre definiált stíluslapok használatára (Bootstrap, PureCSS, stb.). Ezeknek akkor van értelme, ha nem annyira jó a grafikus érzékünk, vagy nincs idő ennek kidolgozására. Ha ilyen használunk még van lehetőség továbbra is saját stíluslapokat használni, viszont figyelni kell az ütközésekre/felülírásokra!

Színek kezelése 43 Színek kezelésének több módja van RGB megadás HEX megadás Szín nevének megadása Hasznos színkereső eszköz: http://html-color-codes.info/

Betűk kezelése 44 Fontosabb CSS stílusok letter-spacing: 5px; font-size: font-family: color: font-weight: font-style: 1em; sans-serif; #E860EB; bold; italic; % PX EM Méret megadása PX abszolút mértékegység» fixen annyi, amennyit megadunk EM relatív mértékegység» a user beállításaihoz mérten (browser default font-size) % percentage, relatív mértékegység

Tipográfia 45

Reszponzív design I. 47 Megjelenésének oka? Okostelefonok, vagy legalábbis sok-sok internet eléréssel rendelkező eszköz, melyek kijelző mérete eltérő volt. Lényege? Különböző kijelzőkön optimális megjelenés biztosítása! Példák: https://responsivedesign.is/examples/

Reszponzív design II. 48 Hogyan érhető el ez kód alapján? Egyszerűen kezeljük le külön-külön a különböző méreteket! @media screen szabállyal megadható, hogy a kijelző milyen nagyságú szélessége esetén milyen stílusokat alkalmazzunk Példák @media query-kre: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Reszponzív design III. 49 1 2 Mobilra tervezünk először Asztali gépre tervezünk először

Margin-padding I. 51 Minden elemnek van egy magassága/szélessége. Mai standard-ok alapján, a szellős és tágas hatás az, ami jól mutat. Ennek fő alapja a MARGIN és PADDING használata.

Margin-padding II. 52 Táblázat lekerekített szegélyekkel (1) Cellák (td) padding-olva 10 pixellel (2) 1 2

Margin-padding III. 53 Padding megadásának módjai számos alakban megjelenhetnek: Külön felső, jobb, alsó, bal (4) Egymást követően de külön mindegyiket (3), ekkor tudni kell a sorrendet (F, J, A, B) Egyben» ekkor mind a négy oldalra értendő (1) Párban (felső-alsó & jobb-bal) (2) 4 1 2 3

Margin-padding IV. 54 Szemléltetés egy <p> elemen.

Border, border-radius 57 A margin és paddinghoz hasonlóan, itt is 4 különböző részről beszélhetünk, csak nem oldalak, hanem sarkok tekintetében. Ezek megadása ugyan olyan variációkban történhetnek, ahogy láttuk. Sorrend: bal felső, jobb felső, jobb alsó, bal alsó. 100 300 Hasznos tool: http://border-radius.com/ 2 40

Felkészült segítő kérdések (vizsga) 59 Mi a különbség a table és a div elemekből felépített weboldal között? Melyiket mikor érdemes használni? Mi e két elem funkciója a HTML5 szerint? Mire használható egy iframe? Miért fontos a head szerepe? Ismertessen pár fontos head-en belül található elemet, amely a HTML dokumentum meghatározására szolgál (hasonlóan a word-höz). Mit jelent a metaadat kifejezés? Hogyan kapcsolódik a metaadat a head-hez? Ismertesse röviden az UTF8 szabványt! Mi a keywords eredeti célja, valamint hátránya manapság? Mi az a formázás és erre milyen eszközt ismer? Ismertesse a formázás 3 típusát, azok előnyeit/hátrányait! Mi az a class és mire használható? Class-hoz képest az ID mivel másabb? Mutassa be a betűk kezelésére használt mértékegységeket, és azok előnyét. Mit jelent a reszponzív design?

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