„Informatika 2 - HTML, CSS - böngészők programozása labor” változatai közötti eltérés

A VIK Wikiből
Ugrás a navigációhoz Ugrás a kereséshez
a
a
12. sor: 12. sor:
  
 
== Mire szolgál a HTML? ==
 
== 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? ==
 
== 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 </p>'''
 +
 +
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? ==
 
== 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</h1>'''<br>
 +
'''< h2>Alcím</h2>'''
  
 
== Hogyan lehet egy dokumentumba képeket ágyazni? ==
 
== 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? ==
 
== Hogyan lehet egy dokumentumban 2x3 méretű táblázatot megadni? ==
 +
 +
<pre>
 +
  <table summary="Kiadások">
 +
      <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>
 +
</pre>
  
 
== Mire szolgál a CSS? ==
 
== Mire szolgál a CSS? ==

A lap 2013. március 3., 03:21-kori változata

← 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="Kiadások">
      <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?

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

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

Mire szolgál a div elem?

Mire szolgálnak a CSS szelektorok?

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