Informatika 2 - HTML, CSS - böngészők programozása labor

← Vissza az előző oldalra – Informatika 2

Ez az oldal az Informatika 2 című tárgy - HTML, CSS - böngészők programozása labor beugrókérdéseinek kidolgozását tartalmazza.
Az aktuális segédlet az aktuális (ajánlott) beugrókérdésekkel bejelentkezés után megtalálható a tanszéki honlapon a 2. gyakorlat segédlet címen (2013 tavasz).

Jelenleg még elég hiányos a kidolgozás, továbbá évről évre kismértékben változhatnak beugrókérdések. A tanszéki honlapról mindig elérhető az aktuális mérési útmutató, mely az aktuális beugrókérdéseket tartalmazza.

FONTOS: Ezektől eltérő kérdések is előfordulhatnak a beugrókban! Ezek csak irányadó kérdések, így ajánlott a segédlet alapos áttanulmányozása is.

Kérlek szerkesszétek, aktualizáljátok!

Mire szolgál a HTML?

• A dokumentum ne csak egyszerű szöveg legyen, hanem a tartalmat hordozó részt lássuk el címkékkel, melyek kiegészítő információkat (metaadatokat) adnak a szöveghez. Hasonló célú egyszerűbb jelöléseket a nyomdatechnikában már korábban is használtak (pl. egyszeres aláhúzás: dőlt, kettős aláhúzás: félkövér betű), itt a nagy újdonság a formalizmus és címkekészlet megalkotása volt, így jött létre a HTML mint jelölőnyelv (markup language).
• A dokumentumok „mutassanak túl” önmagukon, azaz olyan hiperszövegeket (hypertext) tartalmazzanak, amelyek bármely részlete egy másik dokumentumra hivatkozhat. Ez az, amit ma úgy ismerünk, hogy egy weboldalon rákattinthatunk hivatkozásokra (linkekre), aminek hatására betöltődik egy másik weboldal.

Hogyan lehet egy dokumentumban sortöréseket megadni?

Ha egy HTML dokumentumban rendezni, formázni szeretnénk a szöveget, akkor ezt kizárólag HTML elemekkel tehetjük meg. Azaz hiába teszünk sortöréseket a HTML kódba, vagy hiába teszünk egymás után sok szóközt, a böngészőben csak egyetlen szóköz fog megjelenni helyette. Ha másként szeretnénk, erre szolgáló címkéket kell használnunk.

Egy hosszabb szöveget a p (paragraph) elem segítségével tagolhatunk bekezdésekre. Példa: < p> Első bekezdés

Ha egy bekezdésen belül új sort szeretnénk kezdeni, akkor azt a br (break) elemmel tehetjük meg. A br elem önállóan áll, nincs sem záró címkéje, sem pedig attribútumai, mindössze ennyi: < br />

Hogyan lehet egy dokumentumban címsorokat megadni?

A bekezdések közé címsorokat tehetünk, méghozzá hat méretben, melyeket a h1..h6 (heading) elemekkel jelölhetünk:

< h1>Főcím
< h2>Alcím

Hogyan lehet egy dokumentumba képeket ágyazni?

Az a elemen belül tetszőleges elem állhat, például ha egy képet szeretnénk kattinthatóvá tenni, akkor a kép megjelenítésére szolgáló img elemet tehetjük a link belsejébe:

<a href="http://www.bme.hu">
<img src="logo.gif" />
</a>

Hogyan lehet egy dokumentumban 2x3 méretű táblázatot megadni?

   <table summary="2x3-as táblázat">
      <thead>
         <tr>
            <th>1. oszlop fejléce</th>
            <th>2. oszlop fejléce</th>
            <th>3. oszlop fejléce</th>
         </tr>
      </thead>
      <tfoot>
         <tr>
            <td>1. oszlop lábléce</td>
            <td>2. oszlop lábléce</td>
            <td>3. oszlop lábléce</td>
         </tr>
      </tfoot>
      <tbody>
         <tr>
            <td>1. sor 1. adat</td>
            <td>1. sor 2. adat</td>
            <td>1. sor 3. adat</td>
         </tr>
         <tr>
            <td>2. sor 1. adat</td>
            <td>2. sor 2. adat</td>
            <td>2. sor 3. adat</td>
         </tr>
      </tbody>
   </table>

Mire szolgál a CSS?

Cascading Style Sheets stíluslapokkal dolgozva a beállításokat attribútum név – attribútum érték párosokkal adhatjuk meg. Az attribútumok neve és értéktartománya rögzített, és gyakorlatilag az összes megjelenéssel kapcsolatos területet (méretek, távolságok, színek, pozíciók stb.) lefedik, így az ide vonatkozó HTML attribútumokra már nincs is szükség. Ezáltal úgy lehet formázni az oldalt, hogy maga a HTML kód áttekinthető és egyszerű marad, hiszen a formázási attribútumokat egy külön CSS fájl tartalmazza.

Milyen lehetőségeket ismer egy böngészőben megjelenítendő szöveg formázására?

• A HTML-ben egyes elemek tartalmazhatnak megjelenítésre vonatkozó attribútumokat (pl. align: igazítás), vagy például a font elemmel megadhatjuk a betűtípust, betűméretet és a színt.
• Használhatunk úgynevezett inline stílust, ekkor a formázandó HTML elem style attribútumába kell írnunk a CSS attribútumokat és azok értékeit.
• Egy másik lehetőség a CSS kód elhelyezésére a stílus blokk használata. Ebben az esetben tipikusan a HTML oldal head elemében hozunk létre egy style elemet, és oda írjuk a CSS kódunkat.
• A harmadik megoldás, amikor nem a HTML fájlban helyezzük el a CSS kódot, hanem egy külső fájlban, aminek tipikusan a .css kiterjesztést szoktuk adni. Ekkor a HTML oldal head elemében egy link elemmel hivatkozhatunk az oldalhoz tartozó stíluslapra.

Mi a probléma a táblázatokra épülő oldalelrendezésekkel?

A táblázat alapú oldalelrendezés nagyon sok HTML kódot eredményez, mely nemcsak az oldal letöltését és betöltését lassítja, hanem ráadásul nagyon nehezen átlátható, azaz nehezen tudunk később belejavítani.

Mire szolgál a div elem?

Ha az oldalnak egy nagyobb részét (például fejléc, jobb hasáb, friss hírek blokk stb.) szeretnénk formázni, akkor használhatjuk a div (division) elemet. A div után alapértelmezés szerint bekerül egy sortörés, ezzel is jelezve, hogy ott egy újabb nagyobb blokk következik. A div szinte bármilyen HTML elemnek lehet a szülő eleme, így akár bekezdéseket vagy további div és span elemeket is tartalmazhat. A div szigorúbb, például spanbe vagy p elembe nem ágyazhatjuk.

Mire szolgálnak a CSS szelektorok?

Meg kell adnunk, hogy egy CSS-ben definiált stílus pontosan melyik HTML elemre vagy elemekre vonatkozzon. Erre szolgálnak a CSS szelektorok (CSS selectors). A négy (*, elem, id, class) a leggyakrabban használt szelektor típus.

Hogyan lehet CSS-ben előírni, hogy minden főcím piros színnel jelenjen meg?

h1 {color: red;}