„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
(Új oldal, tartalma: „{{GlobalTemplate|Villanyalap|LaborBeugro20080227}} * 1. Egy HTTP kommunikációban milyen felek vesznek részt és mi a feladatuk? Résztvesz egyrészt egy kliens, ak…”)
 
a
 
(12 közbenső módosítás, amit egy másik szerkesztő végzett, nincs mutatva)
1. sor: 1. sor:
−
{{GlobalTemplate|Villanyalap|LaborBeugro20080227}}
+
{{Vissza|Informatika 2}}
  
−
* 1. Egy HTTP kommunikációban milyen felek vesznek részt és mi a feladatuk?
+
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.<br>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 [https://www.aut.bme.hu/Upload/Course/VIAUA203/hallgatoi_segedletek/HTML-CSS-Hallgat%C3%B3i_120213164036.pdf 2. gyakorlat segédlet címen] (2013 tavasz).
  
−
Résztvesz egyrészt egy kliens, aki lekéréseket (query) küld a szervernek, és egy szerver, aki azokat fogadja és megválaszolja. A szerver a válasz elküldésén kívül még egyéb műveleteket is végrehajthat, pl. egy FORM elküldésekor generálódó POST lekérés hatására módosíthat valamit egy adatbázisban.
+
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.
  
−
* 2. A HTTP kommunikáció során hogyan állapodnak meg a felek a használandó HTTP protokoll verzióban?
+
'''''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.'''''
  
−
A legnagyobb olyan verziót használják, amit mindkét résztvevő támogat.
+
'''Kérlek szerkesszétek, aktualizáljátok!'''
  
−
* 3. A HTTP protokollban a kliens hogyan jelzi a kérés fejlécének végét?
+
__TOC__
  
−
Két CR-LF sorozattal (0x0D 0x0A 0x0D 0x0A byteok).
+
== Mire szolgál a HTML? ==
  
−
* 4. A HTTP GET kérés hogyan közli a lekérendő dokumentum nevét és elérhetőségét?
+
*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.
  
−
A küldött parancs (pl. GET) után egy szóközzel elválasztva következik a dokumentum helye a szerver gyökérkönyvtárához képest. Pl. a www.google.com szervernek küldött GET / HTTP/1.0 lekérés magát a gyökérkönyvtárat kéri le (perjel).
+
== Hogyan lehet egy dokumentumban sortöréseket megadni? ==
  
−
* 5. A web szerver hogyan jelzi, ha hiba történt a dokumentum lekérése során?
+
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.
  
−
A válasz tartalmaz egy státuszkódot, ha ennek első számjegye 4-es, az kliensoldali hibát jelent (pl. 404 Not found), ha 5-ös, az szerveroldali hiba (pl. 500 Internal Server Error). A (HTTP 1.1-es) válaszkódok bővebben megtalálhatóak itt: http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html
+
Egy hosszabb szöveget a p (paragraph) elem segítségével tagolhatunk bekezdésekre. Példa: '''< p> Első bekezdés </p>'''
  
−
* 6. A web szerver milyen két módon jelezheti a dokumentum méretét (végét)?
+
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 />'''
  
−
A fejlécben előre elküldheti a méretét (pl. Content-Length fejléc mező), vagy, amikor befejezte az átvitelt, simán bonthatja a kapcsolatot.
+
== Hogyan lehet egy dokumentumban címsorokat megadni? ==
  
−
* 7. Írjon C nyelvű kódrészletet, amely megkeresi az str karakter tömbben tárolt szöveg második szavát, és az str2 tömbben visszaadja!
+
A bekezdések közé címsorokat tehetünk, méghozzá hat méretben, melyeket a h1..h6 (heading) elemekkel jelölhetünk:
  
−
* 8. Írjon C nyelvű kódrészletet, amely megvizsgálja, hogy az str karakter tömbben tárolt szöveg első szava "GET"-e, és ha igen, akkor a második szavát az str2 tömbben visszaadja!
+
'''< h1>Főcím</h1>'''<br>
 +
'''< h2>Alcím</h2>'''
  
−
* 9. Írjon C nyelvű kódrészletet, amely egy állományt binárisan megnyit, majd bezár! Ha a megnyitás sikertelen, akkor jelezze a hibát!
+
== Hogyan lehet egy dokumentumba képeket ágyazni? ==
  
−
* 10. Írjon C nyelvű kódrészletet, amely az str karakter tömbben tárolt szöveget elküldi az s leíróval reprezentált kliens socketen keresztül!
+
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? ==
  
 
<pre>
 
<pre>
−
#include <sys/types.h>
+
  <table summary="2x3-as táblázat">
−
#include <sys/socket.h>
+
      <thead>
−
#include <netinet/in.h>
+
        <tr>
−
#include <arpa/inet.h>
+
            <th>1. oszlop fejléce</th>
−
#include <stdio.h>
+
            <th>2. oszlop fejléce</th>
−
#include <stdlib.h>
+
            <th>3. oszlop fejléce</th>
−
#include <string.h>
+
        </tr>
−
#include <strings.h>
+
      </thead>
−
#include <unistd.h>
+
      <tfoot>
−
 
+
        <tr>
−
int main () {
+
            <td>1. oszlop lábléce</td>
−
 
+
            <td>2. oszlop lábléce</td>
−
char str[]="GET /index.html HTTP/1.0\x0d\x0a\x0d\x0a";
+
            <td>3. oszlop lábléce</td>
−
char str2[20];
+
        </tr>
−
char temp[20];
+
      </tfoot>
−
FILE *file;
+
      <tbody>
−
SOCKET s;
+
        <tr>
−
sockaddr_in addr;
+
            <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>
  
−
/* 7 */
+
== Mire szolgál a CSS? ==
  
−
sscanf(str, "%*[^ ] %[^ ]", str2);
+
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.
  
−
/* 8 */
+
== Milyen lehetőségeket ismer egy böngészőben megjelenítendő szöveg formázására? ==
  
−
sscanf(str, "%[^ ]", str2);
+
*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.
−
if (strcmp(str2, "GET")==0) sscanf(str, "%*[^ ] %[^ ]", str2);
+
*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.
−
else str2[0]='<verbatim></verbatim>';
+
*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.
  
−
/* 9 */
+
== Mi a probléma a táblázatokra épülő oldalelrendezésekkel? ==
  
−
file=fopen("temp.bin", "rb");
+
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.
−
if (file==NULL) printf("hiba a file megnyitasakor\n");
 
−
else fclose(file);
 
  
−
/* 10 */
+
== Mire szolgál a div elem? ==
  
−
addr.sin_family = AF_INET;
+
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.
−
addr.sin_addr.s_addr = inet_addr("152.66.28.13"); /* a neptun címe :D */
 
−
addr.sin_port = htons(80);
 
  
−
x=connect(s, (struct sockaddr *)addr, sizeof(addr));
+
== Mire szolgálnak a CSS szelektorok? ==
−
if (x<0) {
 
−
printf("kapcsolodasi hiba\n");
 
−
return 1;
 
−
}
 
−
 
 
−
x=send(s, (const void *)str, strlen(str), 0); //figyelem!! sizeof() fordítási időben értékelődik ki, ezért a pointer méretét írja be, nem a tömbhosszát
 
−
if (x<0) printf("irasi hiba\n");
 
−
else printf("%d byte elkuldve\n", x);
 
−
closesocket(s);
 
−
return 0;
 
−
}
 
−
</pre>
 
  
 +
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.
  
−
-- [[KisGergelyG|G]] - 2008.02.26.
+
== Hogyan lehet CSS-ben előírni, hogy minden főcím piros színnel jelenjen meg? ==
−
* {{InLineFileLink|Villanyalap|LaborBeugro20080227|WebSzerver.pdf|WebSzerver.pdf}}: A beugró maga
 
  
 +
h1 {color: red;}
  
−
[[Category:Villanyalap]]
+
[[Kategória:Villamosmérnök]]

A lap jelenlegi, 2014. március 13., 16: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="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;}
A lap eredeti címe: „https://wiki.sch.bme.hu/index.php?title=Informatika_2_-_HTML,_CSS_-_böngészők_programozása_labor&oldid=179558”