informatika 1 internet, html, csssandbox.hlt.bme.hu/~gaebor/ea_anyag/info1/e04_18i1_hun.pdf ·...
TRANSCRIPT
![Page 1: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/1.jpg)
Informatika 1Internet, HTML, CSS
Wettl Ferenc és Kovács Kristófprezentációjának felhasználásával
Budapesti Műszaki és Gazdaságtudományi Egyetem
2018-10-04
Borbély Gábor Internet
![Page 2: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/2.jpg)
Hálózat – IP címInternet Protocol
Az internetre kötött gépek azonosítására szolgáló cím az IP cím(IP address), ami
IPv4 szabvány: nnn.nnn.nnn.nnn alakú (32 bites, 4 db8-bites szám decimális alakban) – 2015 nyarán kifogyottIPv6 szabvány: xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx alakú(128 bit, 8 db 16 bites hexadecimálisan ábrázolt szám)
típus cím honnan tudom meg?
IPv4 152.66.83.241 http://miazipcimem.hu/IPv6 2001:738:2001:2010:891b:efb:2b36:5447
http://whatismyipaddress.com/lokális hálózat 192.168.xxx.xxx ifconfig (WIN ipconfig)lokális ipV6 fe80:: Reserved IP addressesEzeket a címeket decentralizált internet hatóságok osztják ki.Adott címtartományt kapnak a kontinensek, akik eldöntik, hogymilyen címtartományokat kapnak az országok és így tovább.
Borbély Gábor Internet
![Page 3: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/3.jpg)
Hálózat – IP címInternet Protocol
Az internetre kötött gépek azonosítására szolgáló cím az IP cím(IP address), ami
IPv4 szabvány: nnn.nnn.nnn.nnn alakú (32 bites, 4 db8-bites szám decimális alakban) – 2015 nyarán kifogyottIPv6 szabvány: xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx alakú(128 bit, 8 db 16 bites hexadecimálisan ábrázolt szám)
típus cím honnan tudom meg?
IPv4 152.66.83.241 http://miazipcimem.hu/IPv6 2001:738:2001:2010:891b:efb:2b36:5447
http://whatismyipaddress.com/lokális hálózat 192.168.xxx.xxx ifconfig (WIN ipconfig)lokális ipV6 fe80:: Reserved IP addresses
Ezeket a címeket decentralizált internet hatóságok osztják ki.Adott címtartományt kapnak a kontinensek, akik eldöntik, hogymilyen címtartományokat kapnak az országok és így tovább.
Borbély Gábor Internet
![Page 4: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/4.jpg)
Hálózat – IP címInternet Protocol
Az internetre kötött gépek azonosítására szolgáló cím az IP cím(IP address), ami
IPv4 szabvány: nnn.nnn.nnn.nnn alakú (32 bites, 4 db8-bites szám decimális alakban) – 2015 nyarán kifogyottIPv6 szabvány: xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx:xxxx alakú(128 bit, 8 db 16 bites hexadecimálisan ábrázolt szám)
típus cím honnan tudom meg?
IPv4 152.66.83.241 http://miazipcimem.hu/IPv6 2001:738:2001:2010:891b:efb:2b36:5447
http://whatismyipaddress.com/lokális hálózat 192.168.xxx.xxx ifconfig (WIN ipconfig)lokális ipV6 fe80:: Reserved IP addressesEzeket a címeket decentralizált internet hatóságok osztják ki.Adott címtartományt kapnak a kontinensek, akik eldöntik, hogymilyen címtartományokat kapnak az országok és így tovább.
Borbély Gábor Internet
![Page 5: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/5.jpg)
IP – port
Egy internetcímen is folyhat párhuzamos kommunikáció aportokon keresztül
Port azonosító: 16 bit-es előjel nélküli szám (0-65535-ig)Ezekre van pár konvenció, pl a honlapokat a 80, 8000 vagy8080-as porton szoktuk nézegetni.
Borbély Gábor Internet
![Page 6: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/6.jpg)
IP – port
Egy internetcímen is folyhat párhuzamos kommunikáció aportokon keresztülPort azonosító: 16 bit-es előjel nélküli szám (0-65535-ig)
Ezekre van pár konvenció, pl a honlapokat a 80, 8000 vagy8080-as porton szoktuk nézegetni.
Borbély Gábor Internet
![Page 7: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/7.jpg)
IP – port
Egy internetcímen is folyhat párhuzamos kommunikáció aportokon keresztülPort azonosító: 16 bit-es előjel nélküli szám (0-65535-ig)Ezekre van pár konvenció, pl a honlapokat a 80, 8000 vagy8080-as porton szoktuk nézegetni.
Borbély Gábor Internet
![Page 8: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/8.jpg)
A ping
A ping egy rendszerprogram (utility), mely eldönti, hogy egyadatcsomag hibátlanul eljut-e a megadott IP címre.
Ha a ping parancs után nem IP cím áll, hanem egy név, aDNS (Domain Name System) szolgáltatással megtudja, hogya szerver nevéhez (host name) milyen IP-cím tartozik, majdegy PING üzenetet küld a címre.PING jelentése "Send a packet to a computer and wait for itsreturn (Packet INternet Groper)" (groper – molesztáló)A domain neveket internet hatóságok osztják ki, náluk lehetberegisztrálni.
Borbély Gábor Internet
![Page 9: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/9.jpg)
A ping
A ping egy rendszerprogram (utility), mely eldönti, hogy egyadatcsomag hibátlanul eljut-e a megadott IP címre.Ha a ping parancs után nem IP cím áll, hanem egy név, aDNS (Domain Name System) szolgáltatással megtudja, hogya szerver nevéhez (host name) milyen IP-cím tartozik, majdegy PING üzenetet küld a címre.
PING jelentése "Send a packet to a computer and wait for itsreturn (Packet INternet Groper)" (groper – molesztáló)A domain neveket internet hatóságok osztják ki, náluk lehetberegisztrálni.
Borbély Gábor Internet
![Page 10: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/10.jpg)
A ping
A ping egy rendszerprogram (utility), mely eldönti, hogy egyadatcsomag hibátlanul eljut-e a megadott IP címre.Ha a ping parancs után nem IP cím áll, hanem egy név, aDNS (Domain Name System) szolgáltatással megtudja, hogya szerver nevéhez (host name) milyen IP-cím tartozik, majdegy PING üzenetet küld a címre.PING jelentése "Send a packet to a computer and wait for itsreturn (Packet INternet Groper)" (groper – molesztáló)
A domain neveket internet hatóságok osztják ki, náluk lehetberegisztrálni.
Borbély Gábor Internet
![Page 11: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/11.jpg)
A ping
A ping egy rendszerprogram (utility), mely eldönti, hogy egyadatcsomag hibátlanul eljut-e a megadott IP címre.Ha a ping parancs után nem IP cím áll, hanem egy név, aDNS (Domain Name System) szolgáltatással megtudja, hogya szerver nevéhez (host name) milyen IP-cím tartozik, majdegy PING üzenetet küld a címre.PING jelentése "Send a packet to a computer and wait for itsreturn (Packet INternet Groper)" (groper – molesztáló)A domain neveket internet hatóságok osztják ki, náluk lehetberegisztrálni.
Borbély Gábor Internet
![Page 12: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/12.jpg)
A ping
A ping egy rendszerprogram (utility), mely eldönti, hogy egyadatcsomag hibátlanul eljut-e a megadott IP címre.Ha a ping parancs után nem IP cím áll, hanem egy név, aDNS (Domain Name System) szolgáltatással megtudja, hogya szerver nevéhez (host name) milyen IP-cím tartozik, majdegy PING üzenetet küld a címre.PING jelentése "Send a packet to a computer and wait for itsreturn (Packet INternet Groper)" (groper – molesztáló)A domain neveket internet hatóságok osztják ki, náluk lehetberegisztrálni.
Borbély Gábor Internet
![Page 13: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/13.jpg)
A ping
A ping egy rendszerprogram (utility), mely eldönti, hogy egyadatcsomag hibátlanul eljut-e a megadott IP címre.Ha a ping parancs után nem IP cím áll, hanem egy név, aDNS (Domain Name System) szolgáltatással megtudja, hogya szerver nevéhez (host name) milyen IP-cím tartozik, majdegy PING üzenetet küld a címre.PING jelentése "Send a packet to a computer and wait for itsreturn (Packet INternet Groper)" (groper – molesztáló)A domain neveket internet hatóságok osztják ki, náluk lehetberegisztrálni.
Borbély Gábor Internet
![Page 14: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/14.jpg)
Jelölőnyelv
Jelölőnyelv (markup language) feliratokkal, jegyzetekkel lát elegy dokumentumot, úgy hogy az szintaktikailag elkülönül adokumentum szövegétől.
Előzmények a számítógép előtti időkből: az írógéppel írtszöveg jelölése a nyomda számára, a kefelenyomatkorrektúrajelei, az első elektronikus nyomdagépek nyelve,. . .Szedési információkat jelölő nyelvek pl. a troff (AT&T Unix-raírt dokumentumkezelője), TEX, LATEX (matematikai tartalmúdokumentumokra), strukturális jelölést ad az XML (általánoscélú leíró nyelv, speciális célú leíró nyelvek létrehozására).
Borbély Gábor Internet
![Page 15: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/15.jpg)
Jelölőnyelv
Jelölőnyelv (markup language) feliratokkal, jegyzetekkel lát elegy dokumentumot, úgy hogy az szintaktikailag elkülönül adokumentum szövegétől.Előzmények a számítógép előtti időkből: az írógéppel írtszöveg jelölése a nyomda számára, a kefelenyomatkorrektúrajelei, az első elektronikus nyomdagépek nyelve,. . .
Szedési információkat jelölő nyelvek pl. a troff (AT&T Unix-raírt dokumentumkezelője), TEX, LATEX (matematikai tartalmúdokumentumokra), strukturális jelölést ad az XML (általánoscélú leíró nyelv, speciális célú leíró nyelvek létrehozására).
Borbély Gábor Internet
![Page 16: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/16.jpg)
Jelölőnyelv
Jelölőnyelv (markup language) feliratokkal, jegyzetekkel lát elegy dokumentumot, úgy hogy az szintaktikailag elkülönül adokumentum szövegétől.Előzmények a számítógép előtti időkből: az írógéppel írtszöveg jelölése a nyomda számára, a kefelenyomatkorrektúrajelei, az első elektronikus nyomdagépek nyelve,. . .Szedési információkat jelölő nyelvek pl. a troff (AT&T Unix-raírt dokumentumkezelője), TEX, LATEX (matematikai tartalmúdokumentumokra), strukturális jelölést ad az XML (általánoscélú leíró nyelv, speciális célú leíró nyelvek létrehozására).
Borbély Gábor Internet
![Page 17: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/17.jpg)
Jelölőnyelv (markup)
Legegyszerűbb példák a könnyű leíró (lightweight markup)vagy markdown nyelvek: ember által könnyen írható,olvasható, más jelölő nyelvekre programmal könnyenkonvertálható nyelvek. Pl. az intézeti wiki (vagy a Wikipédia)nyelve ilyen:= Cím 1 === Cím 2 ==
Bekezdés, benne ’’dőlt’’, ’’’félkövér’’’ szöveg.
Borbély Gábor Internet
![Page 18: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/18.jpg)
World Wide Web
Ábra: Sir Tim Berners-Lee (bal) és Robert Cailiau (jobb)
Sir Tim Berners-Lee és Robert Cailliau 1990-ben a CERN-bentervezték meg a WWW-t, hogy egy olyan hálózatot hozzanak létreamelyben bárki hozzáférhet adott információkhoz.
Borbély Gábor Internet
![Page 19: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/19.jpg)
World Wide Web
Még 1990 végén elkészítették az első böngészőt, majd1991-ben lett ténylegesen publikus a WWW az interneten.
Hogy ez effektíven működhessen bevezették az
URL-t (Uniform Resource Locator), ami az elérési címeketegységesíti,és a HTTP-t (HyperText Transfer Protocol), ami a gépek(böngészés közbeni) kommunikációját szabványosítja,és a HTML-t (HyperText Markup Language), ami az oldalaktartalmának formátumát írja le.
A CERN 1993-ban bejelentette, hogy a Web ingyenes leszmindenkinek, majd később ebben az évben elkészült az elsőigazán elterjedt böngésző, a Mosaic.
Borbély Gábor Internet
![Page 20: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/20.jpg)
World Wide Web
Még 1990 végén elkészítették az első böngészőt, majd1991-ben lett ténylegesen publikus a WWW az interneten.Hogy ez effektíven működhessen bevezették az
URL-t (Uniform Resource Locator), ami az elérési címeketegységesíti,és a HTTP-t (HyperText Transfer Protocol), ami a gépek(böngészés közbeni) kommunikációját szabványosítja,és a HTML-t (HyperText Markup Language), ami az oldalaktartalmának formátumát írja le.
A CERN 1993-ban bejelentette, hogy a Web ingyenes leszmindenkinek, majd később ebben az évben elkészült az elsőigazán elterjedt böngésző, a Mosaic.
Borbély Gábor Internet
![Page 21: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/21.jpg)
World Wide Web
Még 1990 végén elkészítették az első böngészőt, majd1991-ben lett ténylegesen publikus a WWW az interneten.Hogy ez effektíven működhessen bevezették az
URL-t (Uniform Resource Locator), ami az elérési címeketegységesíti,
és a HTTP-t (HyperText Transfer Protocol), ami a gépek(böngészés közbeni) kommunikációját szabványosítja,és a HTML-t (HyperText Markup Language), ami az oldalaktartalmának formátumát írja le.
A CERN 1993-ban bejelentette, hogy a Web ingyenes leszmindenkinek, majd később ebben az évben elkészült az elsőigazán elterjedt böngésző, a Mosaic.
Borbély Gábor Internet
![Page 22: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/22.jpg)
World Wide Web
Még 1990 végén elkészítették az első böngészőt, majd1991-ben lett ténylegesen publikus a WWW az interneten.Hogy ez effektíven működhessen bevezették az
URL-t (Uniform Resource Locator), ami az elérési címeketegységesíti,és a HTTP-t (HyperText Transfer Protocol), ami a gépek(böngészés közbeni) kommunikációját szabványosítja,
és a HTML-t (HyperText Markup Language), ami az oldalaktartalmának formátumát írja le.
A CERN 1993-ban bejelentette, hogy a Web ingyenes leszmindenkinek, majd később ebben az évben elkészült az elsőigazán elterjedt böngésző, a Mosaic.
Borbély Gábor Internet
![Page 23: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/23.jpg)
World Wide Web
Még 1990 végén elkészítették az első böngészőt, majd1991-ben lett ténylegesen publikus a WWW az interneten.Hogy ez effektíven működhessen bevezették az
URL-t (Uniform Resource Locator), ami az elérési címeketegységesíti,és a HTTP-t (HyperText Transfer Protocol), ami a gépek(böngészés közbeni) kommunikációját szabványosítja,és a HTML-t (HyperText Markup Language), ami az oldalaktartalmának formátumát írja le.
A CERN 1993-ban bejelentette, hogy a Web ingyenes leszmindenkinek, majd később ebben az évben elkészült az elsőigazán elterjedt böngésző, a Mosaic.
Borbély Gábor Internet
![Page 24: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/24.jpg)
World Wide Web
Még 1990 végén elkészítették az első böngészőt, majd1991-ben lett ténylegesen publikus a WWW az interneten.Hogy ez effektíven működhessen bevezették az
URL-t (Uniform Resource Locator), ami az elérési címeketegységesíti,és a HTTP-t (HyperText Transfer Protocol), ami a gépek(böngészés közbeni) kommunikációját szabványosítja,és a HTML-t (HyperText Markup Language), ami az oldalaktartalmának formátumát írja le.
A CERN 1993-ban bejelentette, hogy a Web ingyenes leszmindenkinek, majd később ebben az évben elkészült az elsőigazán elterjedt böngésző, a Mosaic.
Borbély Gábor Internet
![Page 25: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/25.jpg)
Böngésző és webszerver
Böngésző WebszerverInternet
A böngészőt összeköti az internet egy webszerverrel.
Borbély Gábor Internet
![Page 26: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/26.jpg)
Böngésző és webszerver
Böngésző WebszerverRequest
Küld a böngésző egy kérést (request) a webszervernek, hogy melyikadott oldalt szeretné lekérdezni, meg még küld egyéb dolgokat is
mellette.
Borbély Gábor Internet
![Page 27: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/27.jpg)
Böngésző és webszerver
Böngésző WebszerverResponse
Kap erre egy választ (response), ami tartalmazza a HTML-t amitmajd a böngésző megjelenít a felhasználónak.
Borbély Gábor Internet
![Page 28: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/28.jpg)
Böngésző és webszerver
Böngésző Webszerver
Request
Response
Így folytatódik a böngészés, akárhányszor új oldalra akar lépni afelhasználó a böngésző küld egy kérést, majd erre válaszol a
webszerver.
Borbély Gábor Internet
![Page 29: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/29.jpg)
Sütik (cookies)
Egy webszerver másodpercenként több ezer kérést kaphat, ezegy statikus oldalnál nem jelent gondot, de mi a helyzetpéldául egy közösségi oldallal?
A felhasználó be tud jelentkezni és utána bejelentkezve ismarad, de honnan tudja a webszerver, hogy ki kicsoda?Egy webszerver válaszként nem csak HTML kódot küldhet,többek közt sütiket is. (fortune cookie)A süti egy ideiglenes élettartalmú minimális szövegfájl, melyegy adott weboldalhoz tartozik, melyet a webszerver küld és afelhasználó számítógépére a kereső menti egy erre kijelöltkönyvtárba.Amikor kérést küld a böngésző egy weboldalnak, elküldi azoldalhoz tartozó sütiket is, innen tudja a webszerver, hogy„ki” küldte a kérést.
Borbély Gábor Internet
![Page 30: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/30.jpg)
Sütik (cookies)
Egy webszerver másodpercenként több ezer kérést kaphat, ezegy statikus oldalnál nem jelent gondot, de mi a helyzetpéldául egy közösségi oldallal?A felhasználó be tud jelentkezni és utána bejelentkezve ismarad, de honnan tudja a webszerver, hogy ki kicsoda?
Egy webszerver válaszként nem csak HTML kódot küldhet,többek közt sütiket is. (fortune cookie)A süti egy ideiglenes élettartalmú minimális szövegfájl, melyegy adott weboldalhoz tartozik, melyet a webszerver küld és afelhasználó számítógépére a kereső menti egy erre kijelöltkönyvtárba.Amikor kérést küld a böngésző egy weboldalnak, elküldi azoldalhoz tartozó sütiket is, innen tudja a webszerver, hogy„ki” küldte a kérést.
Borbély Gábor Internet
![Page 31: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/31.jpg)
Sütik (cookies)
Egy webszerver másodpercenként több ezer kérést kaphat, ezegy statikus oldalnál nem jelent gondot, de mi a helyzetpéldául egy közösségi oldallal?A felhasználó be tud jelentkezni és utána bejelentkezve ismarad, de honnan tudja a webszerver, hogy ki kicsoda?Egy webszerver válaszként nem csak HTML kódot küldhet,többek közt sütiket is. (fortune cookie)
A süti egy ideiglenes élettartalmú minimális szövegfájl, melyegy adott weboldalhoz tartozik, melyet a webszerver küld és afelhasználó számítógépére a kereső menti egy erre kijelöltkönyvtárba.Amikor kérést küld a böngésző egy weboldalnak, elküldi azoldalhoz tartozó sütiket is, innen tudja a webszerver, hogy„ki” küldte a kérést.
Borbély Gábor Internet
![Page 32: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/32.jpg)
Sütik (cookies)
Egy webszerver másodpercenként több ezer kérést kaphat, ezegy statikus oldalnál nem jelent gondot, de mi a helyzetpéldául egy közösségi oldallal?A felhasználó be tud jelentkezni és utána bejelentkezve ismarad, de honnan tudja a webszerver, hogy ki kicsoda?Egy webszerver válaszként nem csak HTML kódot küldhet,többek közt sütiket is. (fortune cookie)A süti egy ideiglenes élettartalmú minimális szövegfájl, melyegy adott weboldalhoz tartozik, melyet a webszerver küld és afelhasználó számítógépére a kereső menti egy erre kijelöltkönyvtárba.
Amikor kérést küld a böngésző egy weboldalnak, elküldi azoldalhoz tartozó sütiket is, innen tudja a webszerver, hogy„ki” küldte a kérést.
Borbély Gábor Internet
![Page 33: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/33.jpg)
Sütik (cookies)
Egy webszerver másodpercenként több ezer kérést kaphat, ezegy statikus oldalnál nem jelent gondot, de mi a helyzetpéldául egy közösségi oldallal?A felhasználó be tud jelentkezni és utána bejelentkezve ismarad, de honnan tudja a webszerver, hogy ki kicsoda?Egy webszerver válaszként nem csak HTML kódot küldhet,többek közt sütiket is. (fortune cookie)A süti egy ideiglenes élettartalmú minimális szövegfájl, melyegy adott weboldalhoz tartozik, melyet a webszerver küld és afelhasználó számítógépére a kereső menti egy erre kijelöltkönyvtárba.Amikor kérést küld a böngésző egy weboldalnak, elküldi azoldalhoz tartozó sütiket is, innen tudja a webszerver, hogy„ki” küldte a kérést.
Borbély Gábor Internet
![Page 34: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/34.jpg)
Sütik tartalma
Név: A süti neveÉrték: Az adat amit tárolTulajdonságok:
Lejárati idő: mikor kell a böngészőnek törölnie a sütitDomain: melyik weboldalhoz tartozik a sütistb.
A böngésző ezek közül csak a süti nevét és értékét küldi el akérésben, a többi a böngészőre tartozik.
Borbély Gábor Internet
![Page 35: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/35.jpg)
Sütik biztonsága
A süti nem tartalmazhatja egyszerűen a felhasználónevet, hiszekkor nagyon könnyen hamisítható lenne.
A süti nem vírus, nincs benne futtatható program.Tipikusan egy hosszú kulcsot (karaktersorozatot) tartalmaz,melyet a webszerver is tárol és összekapcsolja a felhasználóval.Így a felhasználó nem tudja, hogy másokhoz milyen kulcstartozik, a webszerver viszont tudja, hogy melyik kulcs melyikfelhasználóé.Példa: a keresők nagy része a keresési eredményeit személyreszabja és bejelentkezés nélkül is odafigyel a felhasználópreferenciáira.
Borbély Gábor Internet
![Page 36: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/36.jpg)
Sütik biztonsága
A süti nem tartalmazhatja egyszerűen a felhasználónevet, hiszekkor nagyon könnyen hamisítható lenne.A süti nem vírus, nincs benne futtatható program.
Tipikusan egy hosszú kulcsot (karaktersorozatot) tartalmaz,melyet a webszerver is tárol és összekapcsolja a felhasználóval.Így a felhasználó nem tudja, hogy másokhoz milyen kulcstartozik, a webszerver viszont tudja, hogy melyik kulcs melyikfelhasználóé.Példa: a keresők nagy része a keresési eredményeit személyreszabja és bejelentkezés nélkül is odafigyel a felhasználópreferenciáira.
Borbély Gábor Internet
![Page 37: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/37.jpg)
Sütik biztonsága
A süti nem tartalmazhatja egyszerűen a felhasználónevet, hiszekkor nagyon könnyen hamisítható lenne.A süti nem vírus, nincs benne futtatható program.Tipikusan egy hosszú kulcsot (karaktersorozatot) tartalmaz,melyet a webszerver is tárol és összekapcsolja a felhasználóval.
Így a felhasználó nem tudja, hogy másokhoz milyen kulcstartozik, a webszerver viszont tudja, hogy melyik kulcs melyikfelhasználóé.Példa: a keresők nagy része a keresési eredményeit személyreszabja és bejelentkezés nélkül is odafigyel a felhasználópreferenciáira.
Borbély Gábor Internet
![Page 38: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/38.jpg)
Sütik biztonsága
A süti nem tartalmazhatja egyszerűen a felhasználónevet, hiszekkor nagyon könnyen hamisítható lenne.A süti nem vírus, nincs benne futtatható program.Tipikusan egy hosszú kulcsot (karaktersorozatot) tartalmaz,melyet a webszerver is tárol és összekapcsolja a felhasználóval.Így a felhasználó nem tudja, hogy másokhoz milyen kulcstartozik, a webszerver viszont tudja, hogy melyik kulcs melyikfelhasználóé.
Példa: a keresők nagy része a keresési eredményeit személyreszabja és bejelentkezés nélkül is odafigyel a felhasználópreferenciáira.
Borbély Gábor Internet
![Page 39: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/39.jpg)
Sütik biztonsága
A süti nem tartalmazhatja egyszerűen a felhasználónevet, hiszekkor nagyon könnyen hamisítható lenne.A süti nem vírus, nincs benne futtatható program.Tipikusan egy hosszú kulcsot (karaktersorozatot) tartalmaz,melyet a webszerver is tárol és összekapcsolja a felhasználóval.Így a felhasználó nem tudja, hogy másokhoz milyen kulcstartozik, a webszerver viszont tudja, hogy melyik kulcs melyikfelhasználóé.Példa: a keresők nagy része a keresési eredményeit személyreszabja és bejelentkezés nélkül is odafigyel a felhasználópreferenciáira.
Borbély Gábor Internet
![Page 40: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/40.jpg)
HTML jelölő nyelv – címke (tag), attribútum (attribute)
Egy speciális XML (eXtensible Markup Language), amicímkékből (tag-ek) áll.
Szövegszerkesztőben szerkeszthető, programmal könnyengenerálható.A HTML-kód elemén a kód egy címkével megjelölt részétértjük.Ennek formája <címke_neve>tartalom</címke_neve>, havalamilyen tartalomra vonatkozik és <címke_neve> vagy<címke_neve />, ha önmagában áll.Például <em>szöveg</em> jelöli, hogy a szöveg kiemeltfontosságú, míg <br> vagy <br /> egy sortörést eredményez.A címkéknek (tag-eknek) lehetnek paraméterei/attribútumai.Ezek formája attribútum_név="tulajdonság" alakú,példáulItt az <a href="orarend.html">órarendem</a>.Megjegyzés a kódban:<!-- akármi van itt nem látszik -->
Borbély Gábor Internet
![Page 41: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/41.jpg)
HTML jelölő nyelv – címke (tag), attribútum (attribute)
Egy speciális XML (eXtensible Markup Language), amicímkékből (tag-ek) áll.Szövegszerkesztőben szerkeszthető, programmal könnyengenerálható.
A HTML-kód elemén a kód egy címkével megjelölt részétértjük.Ennek formája <címke_neve>tartalom</címke_neve>, havalamilyen tartalomra vonatkozik és <címke_neve> vagy<címke_neve />, ha önmagában áll.Például <em>szöveg</em> jelöli, hogy a szöveg kiemeltfontosságú, míg <br> vagy <br /> egy sortörést eredményez.A címkéknek (tag-eknek) lehetnek paraméterei/attribútumai.Ezek formája attribútum_név="tulajdonság" alakú,példáulItt az <a href="orarend.html">órarendem</a>.Megjegyzés a kódban:<!-- akármi van itt nem látszik -->
Borbély Gábor Internet
![Page 42: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/42.jpg)
HTML jelölő nyelv – címke (tag), attribútum (attribute)
Egy speciális XML (eXtensible Markup Language), amicímkékből (tag-ek) áll.Szövegszerkesztőben szerkeszthető, programmal könnyengenerálható.A HTML-kód elemén a kód egy címkével megjelölt részétértjük.
Ennek formája <címke_neve>tartalom</címke_neve>, havalamilyen tartalomra vonatkozik és <címke_neve> vagy<címke_neve />, ha önmagában áll.Például <em>szöveg</em> jelöli, hogy a szöveg kiemeltfontosságú, míg <br> vagy <br /> egy sortörést eredményez.A címkéknek (tag-eknek) lehetnek paraméterei/attribútumai.Ezek formája attribútum_név="tulajdonság" alakú,példáulItt az <a href="orarend.html">órarendem</a>.Megjegyzés a kódban:<!-- akármi van itt nem látszik -->
Borbély Gábor Internet
![Page 43: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/43.jpg)
HTML jelölő nyelv – címke (tag), attribútum (attribute)
Egy speciális XML (eXtensible Markup Language), amicímkékből (tag-ek) áll.Szövegszerkesztőben szerkeszthető, programmal könnyengenerálható.A HTML-kód elemén a kód egy címkével megjelölt részétértjük.Ennek formája <címke_neve>tartalom</címke_neve>, havalamilyen tartalomra vonatkozik és <címke_neve> vagy<címke_neve />, ha önmagában áll.
Például <em>szöveg</em> jelöli, hogy a szöveg kiemeltfontosságú, míg <br> vagy <br /> egy sortörést eredményez.A címkéknek (tag-eknek) lehetnek paraméterei/attribútumai.Ezek formája attribútum_név="tulajdonság" alakú,példáulItt az <a href="orarend.html">órarendem</a>.Megjegyzés a kódban:<!-- akármi van itt nem látszik -->
Borbély Gábor Internet
![Page 44: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/44.jpg)
HTML jelölő nyelv – címke (tag), attribútum (attribute)
Egy speciális XML (eXtensible Markup Language), amicímkékből (tag-ek) áll.Szövegszerkesztőben szerkeszthető, programmal könnyengenerálható.A HTML-kód elemén a kód egy címkével megjelölt részétértjük.Ennek formája <címke_neve>tartalom</címke_neve>, havalamilyen tartalomra vonatkozik és <címke_neve> vagy<címke_neve />, ha önmagában áll.Például <em>szöveg</em> jelöli, hogy a szöveg kiemeltfontosságú, míg <br> vagy <br /> egy sortörést eredményez.
A címkéknek (tag-eknek) lehetnek paraméterei/attribútumai.Ezek formája attribútum_név="tulajdonság" alakú,példáulItt az <a href="orarend.html">órarendem</a>.Megjegyzés a kódban:<!-- akármi van itt nem látszik -->
Borbély Gábor Internet
![Page 45: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/45.jpg)
HTML jelölő nyelv – címke (tag), attribútum (attribute)
Egy speciális XML (eXtensible Markup Language), amicímkékből (tag-ek) áll.Szövegszerkesztőben szerkeszthető, programmal könnyengenerálható.A HTML-kód elemén a kód egy címkével megjelölt részétértjük.Ennek formája <címke_neve>tartalom</címke_neve>, havalamilyen tartalomra vonatkozik és <címke_neve> vagy<címke_neve />, ha önmagában áll.Például <em>szöveg</em> jelöli, hogy a szöveg kiemeltfontosságú, míg <br> vagy <br /> egy sortörést eredményez.A címkéknek (tag-eknek) lehetnek paraméterei/attribútumai.Ezek formája attribútum_név="tulajdonság" alakú,példáulItt az <a href="orarend.html">órarendem</a>.
Megjegyzés a kódban:<!-- akármi van itt nem látszik -->
Borbély Gábor Internet
![Page 46: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/46.jpg)
HTML jelölő nyelv – címke (tag), attribútum (attribute)
Egy speciális XML (eXtensible Markup Language), amicímkékből (tag-ek) áll.Szövegszerkesztőben szerkeszthető, programmal könnyengenerálható.A HTML-kód elemén a kód egy címkével megjelölt részétértjük.Ennek formája <címke_neve>tartalom</címke_neve>, havalamilyen tartalomra vonatkozik és <címke_neve> vagy<címke_neve />, ha önmagában áll.Például <em>szöveg</em> jelöli, hogy a szöveg kiemeltfontosságú, míg <br> vagy <br /> egy sortörést eredményez.A címkéknek (tag-eknek) lehetnek paraméterei/attribútumai.Ezek formája attribútum_név="tulajdonság" alakú,példáulItt az <a href="orarend.html">órarendem</a>.Megjegyzés a kódban:<!-- akármi van itt nem látszik -->
Borbély Gábor Internet
![Page 47: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/47.jpg)
Példa oldal (HTML 5 szabvány)<!DOCTYPE html> <!-- oldal típusa --><html lang="hu"><head> <!-- címkék, meta-adatok ... --><meta charset="utf-8" /> <!-- karakter kódolás --></head><body>
... <!-- az oldal "teste" -->
</body></html>
Borbély Gábor Internet
![Page 48: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/48.jpg)
Speciális karakterek
karakter html-ben (angol) megnevezés
< < less-than> > greater-than" " quotation mark& & ampersand
non-breaking spacec© © copyrightR© ® registered trademark
TM ™ trademark
Borbély Gábor Internet
![Page 49: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/49.jpg)
A fontosabb címkék
<h1>Cím</h1> (heading)<h6>Al...alcím</h6> (heading)<p>Bekezdés</p> (paragraph)<em>Kiemel</em> (emphasize)<strong>Erősen kiemel</strong> (strong)<a>Horgony (link)</a> (anchor)<ul>Számozatlan lista</ul> (unordered list)<ol>Számozott lista</ol> (ordered list)<li>Listaelem</li> (list item)<blockquote>Idézet</blockquote> (blockquote)<div>Rész</div> (division)<span>Sorközi csoportosítás, arasznyi</span>(span)<img> (image)
Borbély Gábor Internet
![Page 50: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/50.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:
<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezéséről
A div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 51: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/51.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)
<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezéséről
A div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 52: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/52.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)
<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezéséről
A div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 53: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/53.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)
<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezéséről
A div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 54: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/54.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)
<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezéséről
A div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 55: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/55.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)
<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezéséről
A div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 56: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/56.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)
<br /> (line brake)A tartalom szervezéséről
A div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 57: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/57.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezéséről
A div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 58: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/58.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezéséről
A div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 59: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/59.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezésérőlA div és a span a szemantikai összetartozást jelölik.
A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 60: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/60.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezésérőlA div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.
A span soron belül végzi ezt.A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 61: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/61.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezésérőlA div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 62: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/62.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezésérőlA div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztása
A <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 63: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/63.jpg)
A tartalom és a vizuális megjelenítés
Néhány nem tartalmi (vizuális) címke:<i>Kurzív (dőlt)</i> (italic)<b>Félkövér</b> (bold)<sub>Alsó index</sub> (subscript)<sup>Felső index</sup> (superscript)<pre>Előformázott</pre> (preformatted)<hr /> (horizontal rule)<br /> (line brake)
A tartalom szervezésérőlA div és a span a szemantikai összetartozást jelölik.A div nagyobb szövegrészt zár magába, felette lehet akár mégegy div, mely div-eket zár össze egy részbe.A span soron belül végzi ezt.
A tartalom és a külalak elválasztásaA <p "stilus attribútumok ...">tartalom</p>
Borbély Gábor Internet
![Page 64: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/64.jpg)
CSS
CSS: Cascading Style Sheets (cascading: több helyen lehet astílus megadva, lépcsőzetesen a legáltalánosabb szabálytólhaladva speciális felé dönt a megjelenítésről.)
Cél: a tartalom és a megjelenítés szétválasztásaFizikai szétválasztás lehetősége: stílus .css-fájl(ok)banHTML elemeinek formázására szolgálElőnyei: újrafelhasználhatóság és könnyű módosíthatóságForrás tanuláshoz: www.w3schools.com/css,Validálás: jigsaw.w3.org/css-validator/Csak szórakoztatásul a lehetőségekről, nem követendő: CSSZen Garden
Borbély Gábor Internet
![Page 65: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/65.jpg)
CSS
CSS: Cascading Style Sheets (cascading: több helyen lehet astílus megadva, lépcsőzetesen a legáltalánosabb szabálytólhaladva speciális felé dönt a megjelenítésről.)Cél: a tartalom és a megjelenítés szétválasztása
Fizikai szétválasztás lehetősége: stílus .css-fájl(ok)banHTML elemeinek formázására szolgálElőnyei: újrafelhasználhatóság és könnyű módosíthatóságForrás tanuláshoz: www.w3schools.com/css,Validálás: jigsaw.w3.org/css-validator/Csak szórakoztatásul a lehetőségekről, nem követendő: CSSZen Garden
Borbély Gábor Internet
![Page 66: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/66.jpg)
CSS
CSS: Cascading Style Sheets (cascading: több helyen lehet astílus megadva, lépcsőzetesen a legáltalánosabb szabálytólhaladva speciális felé dönt a megjelenítésről.)Cél: a tartalom és a megjelenítés szétválasztásaFizikai szétválasztás lehetősége: stílus .css-fájl(ok)ban
HTML elemeinek formázására szolgálElőnyei: újrafelhasználhatóság és könnyű módosíthatóságForrás tanuláshoz: www.w3schools.com/css,Validálás: jigsaw.w3.org/css-validator/Csak szórakoztatásul a lehetőségekről, nem követendő: CSSZen Garden
Borbély Gábor Internet
![Page 67: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/67.jpg)
CSS
CSS: Cascading Style Sheets (cascading: több helyen lehet astílus megadva, lépcsőzetesen a legáltalánosabb szabálytólhaladva speciális felé dönt a megjelenítésről.)Cél: a tartalom és a megjelenítés szétválasztásaFizikai szétválasztás lehetősége: stílus .css-fájl(ok)banHTML elemeinek formázására szolgál
Előnyei: újrafelhasználhatóság és könnyű módosíthatóságForrás tanuláshoz: www.w3schools.com/css,Validálás: jigsaw.w3.org/css-validator/Csak szórakoztatásul a lehetőségekről, nem követendő: CSSZen Garden
Borbély Gábor Internet
![Page 68: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/68.jpg)
CSS
CSS: Cascading Style Sheets (cascading: több helyen lehet astílus megadva, lépcsőzetesen a legáltalánosabb szabálytólhaladva speciális felé dönt a megjelenítésről.)Cél: a tartalom és a megjelenítés szétválasztásaFizikai szétválasztás lehetősége: stílus .css-fájl(ok)banHTML elemeinek formázására szolgálElőnyei: újrafelhasználhatóság és könnyű módosíthatóság
Forrás tanuláshoz: www.w3schools.com/css,Validálás: jigsaw.w3.org/css-validator/Csak szórakoztatásul a lehetőségekről, nem követendő: CSSZen Garden
Borbély Gábor Internet
![Page 69: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/69.jpg)
CSS
CSS: Cascading Style Sheets (cascading: több helyen lehet astílus megadva, lépcsőzetesen a legáltalánosabb szabálytólhaladva speciális felé dönt a megjelenítésről.)Cél: a tartalom és a megjelenítés szétválasztásaFizikai szétválasztás lehetősége: stílus .css-fájl(ok)banHTML elemeinek formázására szolgálElőnyei: újrafelhasználhatóság és könnyű módosíthatóságForrás tanuláshoz: www.w3schools.com/css,
Validálás: jigsaw.w3.org/css-validator/Csak szórakoztatásul a lehetőségekről, nem követendő: CSSZen Garden
Borbély Gábor Internet
![Page 70: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/70.jpg)
CSS
CSS: Cascading Style Sheets (cascading: több helyen lehet astílus megadva, lépcsőzetesen a legáltalánosabb szabálytólhaladva speciális felé dönt a megjelenítésről.)Cél: a tartalom és a megjelenítés szétválasztásaFizikai szétválasztás lehetősége: stílus .css-fájl(ok)banHTML elemeinek formázására szolgálElőnyei: újrafelhasználhatóság és könnyű módosíthatóságForrás tanuláshoz: www.w3schools.com/css,Validálás: jigsaw.w3.org/css-validator/
Csak szórakoztatásul a lehetőségekről, nem követendő: CSSZen Garden
Borbély Gábor Internet
![Page 71: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/71.jpg)
CSS
CSS: Cascading Style Sheets (cascading: több helyen lehet astílus megadva, lépcsőzetesen a legáltalánosabb szabálytólhaladva speciális felé dönt a megjelenítésről.)Cél: a tartalom és a megjelenítés szétválasztásaFizikai szétválasztás lehetősége: stílus .css-fájl(ok)banHTML elemeinek formázására szolgálElőnyei: újrafelhasználhatóság és könnyű módosíthatóságForrás tanuláshoz: www.w3schools.com/css,Validálás: jigsaw.w3.org/css-validator/Csak szórakoztatásul a lehetőségekről, nem követendő: CSSZen Garden
Borbély Gábor Internet
![Page 72: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/72.jpg)
CSS szintaxis
A CSS a következő alapvető szintaxist követi:kiválasztó {tulajdonság: érték; tulajdonság2: érték2;}
Pl:p {color: red;}
vagy több deklaráció áttekinthetően szedve:p {
color:#f00;background: white;
}
Több elem stílusa egyszerre megadható:h1, h2 {color: red;}
Megjegyzés (comment):/* Ide bármit írhatok, akár több sorban is. */
Borbély Gábor Internet
![Page 73: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/73.jpg)
CSS szintaxis
A CSS a következő alapvető szintaxist követi:kiválasztó {tulajdonság: érték; tulajdonság2: érték2;}
Pl:p {color: red;}
vagy több deklaráció áttekinthetően szedve:p {
color:#f00;background: white;
}
Több elem stílusa egyszerre megadható:h1, h2 {color: red;}
Megjegyzés (comment):/* Ide bármit írhatok, akár több sorban is. */
Borbély Gábor Internet
![Page 74: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/74.jpg)
CSS szintaxis
A CSS a következő alapvető szintaxist követi:kiválasztó {tulajdonság: érték; tulajdonság2: érték2;}
Pl:p {color: red;}
vagy több deklaráció áttekinthetően szedve:p {
color:#f00;background: white;
}
Több elem stílusa egyszerre megadható:h1, h2 {color: red;}
Megjegyzés (comment):/* Ide bármit írhatok, akár több sorban is. */
Borbély Gábor Internet
![Page 75: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/75.jpg)
CSS szintaxis
A CSS a következő alapvető szintaxist követi:kiválasztó {tulajdonság: érték; tulajdonság2: érték2;}
Pl:p {color: red;}
vagy több deklaráció áttekinthetően szedve:p {
color:#f00;background: white;
}
Több elem stílusa egyszerre megadható:h1, h2 {color: red;}
Megjegyzés (comment):/* Ide bármit írhatok, akár több sorban is. */
Borbély Gábor Internet
![Page 76: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/76.jpg)
CSS szintaxis
A CSS a következő alapvető szintaxist követi:kiválasztó {tulajdonság: érték; tulajdonság2: érték2;}
Pl:p {color: red;}
vagy több deklaráció áttekinthetően szedve:p {
color:#f00;background: white;
}
Több elem stílusa egyszerre megadható:h1, h2 {color: red;}
Megjegyzés (comment):/* Ide bármit írhatok, akár több sorban is. */
Borbély Gábor Internet
![Page 77: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/77.jpg)
CSS kód elhelyezése
Inline (szövegközi):<p style="......CSS kódok.....">bekezdés szövege</p>
Beágyazott, ez a html head részebe megy:<style>
CSS formázás kódolása</style>
Külső stílusfile (ez a legelterjedtebb), szintén a headbe:<link rel="stylesheet" href=".......css">
Legerősebb az inline, majd a beágyazott és végül a külső.A html kódban csoportosíthatjuk a címkéinket (tageinket).Egyedi nevet adhatunk nekik, vagy egy közös osztálybarakhatjuk őket.
Ezekre így hivatkozhatunk a CSS-ben:(tag)(.class)(#id){ ... }
Borbély Gábor Internet
![Page 78: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/78.jpg)
CSS kód elhelyezése
Inline (szövegközi):<p style="......CSS kódok.....">bekezdés szövege</p>
Beágyazott, ez a html head részebe megy:<style>
CSS formázás kódolása</style>
Külső stílusfile (ez a legelterjedtebb), szintén a headbe:<link rel="stylesheet" href=".......css">
Legerősebb az inline, majd a beágyazott és végül a külső.A html kódban csoportosíthatjuk a címkéinket (tageinket).Egyedi nevet adhatunk nekik, vagy egy közös osztálybarakhatjuk őket.
Ezekre így hivatkozhatunk a CSS-ben:(tag)(.class)(#id){ ... }
Borbély Gábor Internet
![Page 79: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/79.jpg)
CSS kód elhelyezése
Inline (szövegközi):<p style="......CSS kódok.....">bekezdés szövege</p>
Beágyazott, ez a html head részebe megy:<style>
CSS formázás kódolása</style>
Külső stílusfile (ez a legelterjedtebb), szintén a headbe:<link rel="stylesheet" href=".......css">
Legerősebb az inline, majd a beágyazott és végül a külső.A html kódban csoportosíthatjuk a címkéinket (tageinket).Egyedi nevet adhatunk nekik, vagy egy közös osztálybarakhatjuk őket.
Ezekre így hivatkozhatunk a CSS-ben:(tag)(.class)(#id){ ... }
Borbély Gábor Internet
![Page 80: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/80.jpg)
CSS kód elhelyezése
Inline (szövegközi):<p style="......CSS kódok.....">bekezdés szövege</p>
Beágyazott, ez a html head részebe megy:<style>
CSS formázás kódolása</style>
Külső stílusfile (ez a legelterjedtebb), szintén a headbe:<link rel="stylesheet" href=".......css">
Legerősebb az inline, majd a beágyazott és végül a külső.
A html kódban csoportosíthatjuk a címkéinket (tageinket).Egyedi nevet adhatunk nekik, vagy egy közös osztálybarakhatjuk őket.
Ezekre így hivatkozhatunk a CSS-ben:(tag)(.class)(#id){ ... }
Borbély Gábor Internet
![Page 81: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/81.jpg)
CSS kód elhelyezése
Inline (szövegközi):<p style="......CSS kódok.....">bekezdés szövege</p>
Beágyazott, ez a html head részebe megy:<style>
CSS formázás kódolása</style>
Külső stílusfile (ez a legelterjedtebb), szintén a headbe:<link rel="stylesheet" href=".......css">
Legerősebb az inline, majd a beágyazott és végül a külső.A html kódban csoportosíthatjuk a címkéinket (tageinket).Egyedi nevet adhatunk nekik, vagy egy közös osztálybarakhatjuk őket.
Ezekre így hivatkozhatunk a CSS-ben:(tag)(.class)(#id){ ... }
Borbély Gábor Internet
![Page 82: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/82.jpg)
CSS kód elhelyezése
Inline (szövegközi):<p style="......CSS kódok.....">bekezdés szövege</p>
Beágyazott, ez a html head részebe megy:<style>
CSS formázás kódolása</style>
Külső stílusfile (ez a legelterjedtebb), szintén a headbe:<link rel="stylesheet" href=".......css">
Legerősebb az inline, majd a beágyazott és végül a külső.A html kódban csoportosíthatjuk a címkéinket (tageinket).Egyedi nevet adhatunk nekik, vagy egy közös osztálybarakhatjuk őket.
Ezekre így hivatkozhatunk a CSS-ben:(tag)(.class)(#id){ ... }
Borbély Gábor Internet
![Page 83: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/83.jpg)
Link megjelenítései
Linkeknél vannak még speciális kijelölő elemek, ezekkelmondhatjuk meg, hogy hogyan nézzen ki egy link
alaphelyzetben (link),ha már látogatott oldalra mutat (visited),ha épp fölé visszük az egeret (hover),amikor épp rákattintunk (active).
Például (LoVe-HAte sorrendben):a:link {
color: green;text-decoration: underline;
}a:visited { color: purple; }a:hover {
color: blue;text-decoration: none;
}a:active { color:red; }
Borbély Gábor Internet
![Page 84: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/84.jpg)
Link megjelenítései
Linkeknél vannak még speciális kijelölő elemek, ezekkelmondhatjuk meg, hogy hogyan nézzen ki egy link
alaphelyzetben (link),
ha már látogatott oldalra mutat (visited),ha épp fölé visszük az egeret (hover),amikor épp rákattintunk (active).
Például (LoVe-HAte sorrendben):a:link {
color: green;text-decoration: underline;
}a:visited { color: purple; }a:hover {
color: blue;text-decoration: none;
}a:active { color:red; }
Borbély Gábor Internet
![Page 85: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/85.jpg)
Link megjelenítései
Linkeknél vannak még speciális kijelölő elemek, ezekkelmondhatjuk meg, hogy hogyan nézzen ki egy link
alaphelyzetben (link),ha már látogatott oldalra mutat (visited),
ha épp fölé visszük az egeret (hover),amikor épp rákattintunk (active).
Például (LoVe-HAte sorrendben):a:link {
color: green;text-decoration: underline;
}a:visited { color: purple; }a:hover {
color: blue;text-decoration: none;
}a:active { color:red; }
Borbély Gábor Internet
![Page 86: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/86.jpg)
Link megjelenítései
Linkeknél vannak még speciális kijelölő elemek, ezekkelmondhatjuk meg, hogy hogyan nézzen ki egy link
alaphelyzetben (link),ha már látogatott oldalra mutat (visited),ha épp fölé visszük az egeret (hover),
amikor épp rákattintunk (active).Például (LoVe-HAte sorrendben):a:link {
color: green;text-decoration: underline;
}a:visited { color: purple; }a:hover {
color: blue;text-decoration: none;
}a:active { color:red; }
Borbély Gábor Internet
![Page 87: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/87.jpg)
Link megjelenítései
Linkeknél vannak még speciális kijelölő elemek, ezekkelmondhatjuk meg, hogy hogyan nézzen ki egy link
alaphelyzetben (link),ha már látogatott oldalra mutat (visited),ha épp fölé visszük az egeret (hover),amikor épp rákattintunk (active).
Például (LoVe-HAte sorrendben):a:link {
color: green;text-decoration: underline;
}a:visited { color: purple; }a:hover {
color: blue;text-decoration: none;
}a:active { color:red; }
Borbély Gábor Internet
![Page 88: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/88.jpg)
Link megjelenítései
Linkeknél vannak még speciális kijelölő elemek, ezekkelmondhatjuk meg, hogy hogyan nézzen ki egy link
alaphelyzetben (link),ha már látogatott oldalra mutat (visited),ha épp fölé visszük az egeret (hover),amikor épp rákattintunk (active).
Például (LoVe-HAte sorrendben):a:link {
color: green;text-decoration: underline;
}a:visited { color: purple; }a:hover {
color: blue;text-decoration: none;
}a:active { color:red; }
Borbély Gábor Internet
![Page 89: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/89.jpg)
A kód kinézete
HTML-ben az alábbiak azonosak:
<p>bekezdés <span>szó</span></p><p>
bekezdés <span>szó</span></p>az utóbbi a preferált
CSS-ben az alábbiak azonosak:
p{color:black;background-color:white;}p {
color: black;background-color: white;
}az utóbbi a preferált
ezt hívjuk kódkonvenciónak, minden nyelvnek megvannak aszabályai és konvenciói.Átláthatóbb az ember számára.Az identálás az, amikor az egymásba ágyazott elemeketbeljebb kezdjük.
Borbély Gábor Internet
![Page 90: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/90.jpg)
A kód kinézete
HTML-ben az alábbiak azonosak:<p>bekezdés <span>szó</span></p>
<p>bekezdés <span>szó</span>
</p>az utóbbi a preferált
CSS-ben az alábbiak azonosak:
p{color:black;background-color:white;}p {
color: black;background-color: white;
}az utóbbi a preferált
ezt hívjuk kódkonvenciónak, minden nyelvnek megvannak aszabályai és konvenciói.Átláthatóbb az ember számára.Az identálás az, amikor az egymásba ágyazott elemeketbeljebb kezdjük.
Borbély Gábor Internet
![Page 91: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/91.jpg)
A kód kinézete
HTML-ben az alábbiak azonosak:<p>bekezdés <span>szó</span></p><p>
bekezdés <span>szó</span></p>
az utóbbi a preferáltCSS-ben az alábbiak azonosak:
p{color:black;background-color:white;}p {
color: black;background-color: white;
}az utóbbi a preferált
ezt hívjuk kódkonvenciónak, minden nyelvnek megvannak aszabályai és konvenciói.Átláthatóbb az ember számára.Az identálás az, amikor az egymásba ágyazott elemeketbeljebb kezdjük.
Borbély Gábor Internet
![Page 92: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/92.jpg)
A kód kinézete
HTML-ben az alábbiak azonosak:<p>bekezdés <span>szó</span></p><p>
bekezdés <span>szó</span></p>az utóbbi a preferált
CSS-ben az alábbiak azonosak:
p{color:black;background-color:white;}p {
color: black;background-color: white;
}az utóbbi a preferált
ezt hívjuk kódkonvenciónak, minden nyelvnek megvannak aszabályai és konvenciói.Átláthatóbb az ember számára.Az identálás az, amikor az egymásba ágyazott elemeketbeljebb kezdjük.
Borbély Gábor Internet
![Page 93: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/93.jpg)
A kód kinézete
HTML-ben az alábbiak azonosak:<p>bekezdés <span>szó</span></p><p>
bekezdés <span>szó</span></p>az utóbbi a preferált
CSS-ben az alábbiak azonosak:
p{color:black;background-color:white;}p {
color: black;background-color: white;
}az utóbbi a preferált
ezt hívjuk kódkonvenciónak, minden nyelvnek megvannak aszabályai és konvenciói.Átláthatóbb az ember számára.Az identálás az, amikor az egymásba ágyazott elemeketbeljebb kezdjük.
Borbély Gábor Internet
![Page 94: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/94.jpg)
A kód kinézete
HTML-ben az alábbiak azonosak:<p>bekezdés <span>szó</span></p><p>
bekezdés <span>szó</span></p>az utóbbi a preferált
CSS-ben az alábbiak azonosak:p{color:black;background-color:white;}
p {color: black;background-color: white;
}az utóbbi a preferált
ezt hívjuk kódkonvenciónak, minden nyelvnek megvannak aszabályai és konvenciói.Átláthatóbb az ember számára.Az identálás az, amikor az egymásba ágyazott elemeketbeljebb kezdjük.
Borbély Gábor Internet
![Page 95: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/95.jpg)
A kód kinézete
HTML-ben az alábbiak azonosak:<p>bekezdés <span>szó</span></p><p>
bekezdés <span>szó</span></p>az utóbbi a preferált
CSS-ben az alábbiak azonosak:p{color:black;background-color:white;}p {
color: black;background-color: white;
}
az utóbbi a preferáltezt hívjuk kódkonvenciónak, minden nyelvnek megvannak aszabályai és konvenciói.Átláthatóbb az ember számára.Az identálás az, amikor az egymásba ágyazott elemeketbeljebb kezdjük.
Borbély Gábor Internet
![Page 96: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/96.jpg)
A kód kinézete
HTML-ben az alábbiak azonosak:<p>bekezdés <span>szó</span></p><p>
bekezdés <span>szó</span></p>az utóbbi a preferált
CSS-ben az alábbiak azonosak:p{color:black;background-color:white;}p {
color: black;background-color: white;
}az utóbbi a preferált
ezt hívjuk kódkonvenciónak, minden nyelvnek megvannak aszabályai és konvenciói.Átláthatóbb az ember számára.Az identálás az, amikor az egymásba ágyazott elemeketbeljebb kezdjük.
Borbély Gábor Internet
![Page 97: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/97.jpg)
A kód kinézete
HTML-ben az alábbiak azonosak:<p>bekezdés <span>szó</span></p><p>
bekezdés <span>szó</span></p>az utóbbi a preferált
CSS-ben az alábbiak azonosak:p{color:black;background-color:white;}p {
color: black;background-color: white;
}az utóbbi a preferált
ezt hívjuk kódkonvenciónak, minden nyelvnek megvannak aszabályai és konvenciói.
Átláthatóbb az ember számára.Az identálás az, amikor az egymásba ágyazott elemeketbeljebb kezdjük.
Borbély Gábor Internet
![Page 98: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/98.jpg)
A kód kinézete
HTML-ben az alábbiak azonosak:<p>bekezdés <span>szó</span></p><p>
bekezdés <span>szó</span></p>az utóbbi a preferált
CSS-ben az alábbiak azonosak:p{color:black;background-color:white;}p {
color: black;background-color: white;
}az utóbbi a preferált
ezt hívjuk kódkonvenciónak, minden nyelvnek megvannak aszabályai és konvenciói.Átláthatóbb az ember számára.
Az identálás az, amikor az egymásba ágyazott elemeketbeljebb kezdjük.
Borbély Gábor Internet
![Page 99: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/99.jpg)
A kód kinézete
HTML-ben az alábbiak azonosak:<p>bekezdés <span>szó</span></p><p>
bekezdés <span>szó</span></p>az utóbbi a preferált
CSS-ben az alábbiak azonosak:p{color:black;background-color:white;}p {
color: black;background-color: white;
}az utóbbi a preferált
ezt hívjuk kódkonvenciónak, minden nyelvnek megvannak aszabályai és konvenciói.Átláthatóbb az ember számára.Az identálás az, amikor az egymásba ágyazott elemeketbeljebb kezdjük.
Borbély Gábor Internet
![Page 100: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/100.jpg)
Kérdések
Milyen szolgáltatást nyújt a DNS?
Mit jelentenek: URL, HTTP, HTML?Mi a jelölőnyelv?Mik a sütik és mire valók?Melyik címkével (tag-gel) tudunk képet behelyezni az oldalra?Melyik címkével tudunk linket behelyezni az oldalra?Melyik attribútummal adhatunk meg inline CSS formázást?Soroljunk fel néhány, a HTML-ben speciális karaktert!Hogyan választható szét a tartalom és a forma (megjelenítés)a HTML-ben?Milyen állapotai vannak egy linknek? Adjunk egy példát, aholCSS kód segítségével mindegyiken változtatunk valamit!Mi a különbség a class és az id között? Példával mutassuk bemelyiket hogyan használjuk!
Borbély Gábor Internet
![Page 101: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/101.jpg)
Kérdések
Milyen szolgáltatást nyújt a DNS?Mit jelentenek: URL, HTTP, HTML?
Mi a jelölőnyelv?Mik a sütik és mire valók?Melyik címkével (tag-gel) tudunk képet behelyezni az oldalra?Melyik címkével tudunk linket behelyezni az oldalra?Melyik attribútummal adhatunk meg inline CSS formázást?Soroljunk fel néhány, a HTML-ben speciális karaktert!Hogyan választható szét a tartalom és a forma (megjelenítés)a HTML-ben?Milyen állapotai vannak egy linknek? Adjunk egy példát, aholCSS kód segítségével mindegyiken változtatunk valamit!Mi a különbség a class és az id között? Példával mutassuk bemelyiket hogyan használjuk!
Borbély Gábor Internet
![Page 102: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/102.jpg)
Kérdések
Milyen szolgáltatást nyújt a DNS?Mit jelentenek: URL, HTTP, HTML?Mi a jelölőnyelv?
Mik a sütik és mire valók?Melyik címkével (tag-gel) tudunk képet behelyezni az oldalra?Melyik címkével tudunk linket behelyezni az oldalra?Melyik attribútummal adhatunk meg inline CSS formázást?Soroljunk fel néhány, a HTML-ben speciális karaktert!Hogyan választható szét a tartalom és a forma (megjelenítés)a HTML-ben?Milyen állapotai vannak egy linknek? Adjunk egy példát, aholCSS kód segítségével mindegyiken változtatunk valamit!Mi a különbség a class és az id között? Példával mutassuk bemelyiket hogyan használjuk!
Borbély Gábor Internet
![Page 103: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/103.jpg)
Kérdések
Milyen szolgáltatást nyújt a DNS?Mit jelentenek: URL, HTTP, HTML?Mi a jelölőnyelv?Mik a sütik és mire valók?
Melyik címkével (tag-gel) tudunk képet behelyezni az oldalra?Melyik címkével tudunk linket behelyezni az oldalra?Melyik attribútummal adhatunk meg inline CSS formázást?Soroljunk fel néhány, a HTML-ben speciális karaktert!Hogyan választható szét a tartalom és a forma (megjelenítés)a HTML-ben?Milyen állapotai vannak egy linknek? Adjunk egy példát, aholCSS kód segítségével mindegyiken változtatunk valamit!Mi a különbség a class és az id között? Példával mutassuk bemelyiket hogyan használjuk!
Borbély Gábor Internet
![Page 104: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/104.jpg)
Kérdések
Milyen szolgáltatást nyújt a DNS?Mit jelentenek: URL, HTTP, HTML?Mi a jelölőnyelv?Mik a sütik és mire valók?Melyik címkével (tag-gel) tudunk képet behelyezni az oldalra?
Melyik címkével tudunk linket behelyezni az oldalra?Melyik attribútummal adhatunk meg inline CSS formázást?Soroljunk fel néhány, a HTML-ben speciális karaktert!Hogyan választható szét a tartalom és a forma (megjelenítés)a HTML-ben?Milyen állapotai vannak egy linknek? Adjunk egy példát, aholCSS kód segítségével mindegyiken változtatunk valamit!Mi a különbség a class és az id között? Példával mutassuk bemelyiket hogyan használjuk!
Borbély Gábor Internet
![Page 105: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/105.jpg)
Kérdések
Milyen szolgáltatást nyújt a DNS?Mit jelentenek: URL, HTTP, HTML?Mi a jelölőnyelv?Mik a sütik és mire valók?Melyik címkével (tag-gel) tudunk képet behelyezni az oldalra?Melyik címkével tudunk linket behelyezni az oldalra?
Melyik attribútummal adhatunk meg inline CSS formázást?Soroljunk fel néhány, a HTML-ben speciális karaktert!Hogyan választható szét a tartalom és a forma (megjelenítés)a HTML-ben?Milyen állapotai vannak egy linknek? Adjunk egy példát, aholCSS kód segítségével mindegyiken változtatunk valamit!Mi a különbség a class és az id között? Példával mutassuk bemelyiket hogyan használjuk!
Borbély Gábor Internet
![Page 106: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/106.jpg)
Kérdések
Milyen szolgáltatást nyújt a DNS?Mit jelentenek: URL, HTTP, HTML?Mi a jelölőnyelv?Mik a sütik és mire valók?Melyik címkével (tag-gel) tudunk képet behelyezni az oldalra?Melyik címkével tudunk linket behelyezni az oldalra?Melyik attribútummal adhatunk meg inline CSS formázást?
Soroljunk fel néhány, a HTML-ben speciális karaktert!Hogyan választható szét a tartalom és a forma (megjelenítés)a HTML-ben?Milyen állapotai vannak egy linknek? Adjunk egy példát, aholCSS kód segítségével mindegyiken változtatunk valamit!Mi a különbség a class és az id között? Példával mutassuk bemelyiket hogyan használjuk!
Borbély Gábor Internet
![Page 107: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/107.jpg)
Kérdések
Milyen szolgáltatást nyújt a DNS?Mit jelentenek: URL, HTTP, HTML?Mi a jelölőnyelv?Mik a sütik és mire valók?Melyik címkével (tag-gel) tudunk képet behelyezni az oldalra?Melyik címkével tudunk linket behelyezni az oldalra?Melyik attribútummal adhatunk meg inline CSS formázást?Soroljunk fel néhány, a HTML-ben speciális karaktert!
Hogyan választható szét a tartalom és a forma (megjelenítés)a HTML-ben?Milyen állapotai vannak egy linknek? Adjunk egy példát, aholCSS kód segítségével mindegyiken változtatunk valamit!Mi a különbség a class és az id között? Példával mutassuk bemelyiket hogyan használjuk!
Borbély Gábor Internet
![Page 108: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/108.jpg)
Kérdések
Milyen szolgáltatást nyújt a DNS?Mit jelentenek: URL, HTTP, HTML?Mi a jelölőnyelv?Mik a sütik és mire valók?Melyik címkével (tag-gel) tudunk képet behelyezni az oldalra?Melyik címkével tudunk linket behelyezni az oldalra?Melyik attribútummal adhatunk meg inline CSS formázást?Soroljunk fel néhány, a HTML-ben speciális karaktert!Hogyan választható szét a tartalom és a forma (megjelenítés)a HTML-ben?
Milyen állapotai vannak egy linknek? Adjunk egy példát, aholCSS kód segítségével mindegyiken változtatunk valamit!Mi a különbség a class és az id között? Példával mutassuk bemelyiket hogyan használjuk!
Borbély Gábor Internet
![Page 109: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/109.jpg)
Kérdések
Milyen szolgáltatást nyújt a DNS?Mit jelentenek: URL, HTTP, HTML?Mi a jelölőnyelv?Mik a sütik és mire valók?Melyik címkével (tag-gel) tudunk képet behelyezni az oldalra?Melyik címkével tudunk linket behelyezni az oldalra?Melyik attribútummal adhatunk meg inline CSS formázást?Soroljunk fel néhány, a HTML-ben speciális karaktert!Hogyan választható szét a tartalom és a forma (megjelenítés)a HTML-ben?Milyen állapotai vannak egy linknek? Adjunk egy példát, aholCSS kód segítségével mindegyiken változtatunk valamit!
Mi a különbség a class és az id között? Példával mutassuk bemelyiket hogyan használjuk!
Borbély Gábor Internet
![Page 110: Informatika 1 Internet, HTML, CSSsandbox.hlt.bme.hu/~gaebor/ea_anyag/Info1/e04_18i1_hun.pdf · 2018-10-08 · Informatika1 Internet,HTML,CSS WettlFerencésKovácsKristóf prezentációjánakfelhasználásával](https://reader034.vdocuments.site/reader034/viewer/2022042401/5f1013c67e708231d447554e/html5/thumbnails/110.jpg)
Kérdések
Milyen szolgáltatást nyújt a DNS?Mit jelentenek: URL, HTTP, HTML?Mi a jelölőnyelv?Mik a sütik és mire valók?Melyik címkével (tag-gel) tudunk képet behelyezni az oldalra?Melyik címkével tudunk linket behelyezni az oldalra?Melyik attribútummal adhatunk meg inline CSS formázást?Soroljunk fel néhány, a HTML-ben speciális karaktert!Hogyan választható szét a tartalom és a forma (megjelenítés)a HTML-ben?Milyen állapotai vannak egy linknek? Adjunk egy példát, aholCSS kód segítségével mindegyiken változtatunk valamit!Mi a különbség a class és az id között? Példával mutassuk bemelyiket hogyan használjuk!
Borbély Gábor Internet