View
1
Download
0
Category
Preview:
Citation preview
A HTML nyelv alapjai
Legalább mit kell ismernie egy webprogamozónak?
● Weblap tartalmának, szerkezetének kialakítása: HTML (HyperText Markup Language)
● Weblap formázása: CSS (Cascading Style Sheets)
● Kliensoldali szkriptnyelvek: JavaScript (EcmaScript)
● Szerveroldali szkriptnyelvek: PHP, Perl● Egyéb: MySQL, Java, AJAX, számítógépes
grafika stb.
Rövid történeti áttekintés 1.●1958: ARPA (Advanced Research Projects Agency, 'Fejlett Kutatási Projektek Ügynöksége') létrehozása●1965:
● a csomagkapcsolt adatátviteli protokoll (X.35) kifejlesztése
● Ted Nelson először használja a „hipertext” kifejezést●1969: ARPANET (1971: 15 intézmény)●1970: az IBM-nél Goldfarb, Mosher és Lone létrehozza a GML (Generalized Markup Language) jelölőnyelvet●1974: TCP/IP protokollcsalád megalkotása, az „internet” kifejezés első használata●1983: az ARPANET átáll a TCP/IP-re, miután kiválik belőle a katonai rész (MILNET)
Rövid történeti áttekintés 2.●1985: a National Science Foundation (Amerikai Tudományos Alapítvány) NSFNET néven TCP/IP alapú hálózatot hoz létre
●1986: a GML nyelv SGML (Standard Generalized Markup Language) néven ISO (International Standard Organization) szabvány lesz
●1988: az NFSNET és az ARPANET egyesítése és nyitás a kereskedelmi alkalmazások felé
●1989: az ARPANET formális megszűnése
Rövid történeti áttekintés 3.●1990 október: a svájci-francia határon lévő CERN-ben (Centre Européen pour la Recherche Nucléaire, 'Nukleáris Kutatások Európai Központja') elfogadják Tim Berners-Lee ötletét a World Wide Web létrehozására
● 1991 május: első webhely● 1991 augusztus: első webszerver
● első honlap webcíme volt:http://info.cern.ch/hypertext/WWW/TheProject.html
●1994: World Wide Web Consortium (W3C) létrehozása
● 1995: W3C Magyar Iroda létrehozása●1995: HTML 2.0●1997: HTML 3.2, HTML 4.0, CSS, PNG
Rövid történeti áttekintés 4.●2000: HTML 4.01, XHTML 1.0
● az alapját képező XML-t (eXtensible Markup Language) az Open Text Corporation az SGML egy egyszerűsített részhalmazaként fejlesztette ki
●2004: szakadás a W3C-n belül:● többség (Safari, Firefox, Opera gyártói): XHTML 2.0
fejlesztése● kisebbség: HTML fejlesztése → WHATWG (Web
Hypertext Applications Technology Working Group, 'Világháló Hiperszöveges Alkalmazási Technológiáinak Munkacsoportja')létrehozása
●2007: a böngészők nem támogatják az XHTML 2.0-t → a W3C átveszi a WHATWG eredményeit és HTML5 néven tovább folytatja●2009: XHTML 2.0 fejlesztésének befejezése
A HTML nyelvről általában 1.
● A weblap tartalmát és szerkezetét lehet vele kialakítani
● A címke (angolul: tag) vagy utasítás jelzi, hogy a tartalmat hogyan kell a böngészőnek értelmezni; két típusa van● páros címke: <címke>tartalom</címke>
– a páros címkék egymásba is ágyazhatók:<1. címke> 1. tartalom <2. címke> 2. tartalom </2. címke> 3. tartalom </1. címke>
● páratlan címke: 1. tartalom <címke> 2. tartalom
A HTML nyelvről általában 2.●Egy címkének (utasításnak, tag-nek) lehet jellemzője (attribute) és a jellemzőnek van értéke (value)
● Egy címkének több jellemzője is lehet, ezeket szóközzel kell egymástól elválasztani.
● A jellemző és az érték közé (szóköz nélkül) egyenlőségjelet kell tenni, az értéket (szintén szóköz nélkül) idézőjelbe kell tenni:<címke jellemző1=”érték1” jellemző2="érték2"> tartalom </címke>
●Elem: a címke, jellemző, érték és tartalom együtt● blokkszintű (tömbszerű) elem: az előző elem után új
sorban kezdődik és a következő elem is új sorban kezdődik
● inline (sorban elhelyezkedő) elem: az előző elem után ugyanabban a sorban kezdődik és a következő elem is ugyanabban a sorban folytatódik
A HTML nyelvről általában 3.
● Néhány általános (a legtöbb címkénél használható) jellemző:● accesskey="karakter": billentyűzetkód● class="osztálynév"● dir ="szövegirány": ltr (balról jobbra) vagy rtl
(jobbról balra)● id ="egyedi azonosító"● lang ="nyelvi kód"● style ="szövegközi (helyi) stílus definíciója"● title ="információk az elemről":
Egy szabványos HTML 5 weblap szerkezete
<!doctype html> <! dokumentumtípus meghatározás >
<html lang="hu"> <! a weblap kezdete és a fő nyelvnek a megadása >
<head> <! a weblap fejrészének a kezdete >
<meta charset="utf8"> <! karakterkódolás megadása >
<title></title> <! a weblap címe, ami a böngésző címsorában jelenik meg >
<link rel=”stylesheet” href=”fájlnév.css”> <! külső stíluslap csatolása >
<style> belső vagy beágyazott stílusok </style></head> <! a weblap fejrészének a vége >
<body> <! a weblap törzsének a kezdete >
<p></p> <! bekezdés, a szöveget célszerű legalább egy bekezdésbe tenni >
</body> <! a weblap törzsének a vége >
</html> <! a weblap vége >
Megjegyzések a weblap szerkezetéhez
● <! megjegyzés, ami a böngészőben nem jelenik meg > – Mivel a HTML kód a böngészőben megnézhető, ritkán alkalmazzák, főleg csak
olyankor, ha a weblap egy részét nem akarjuk ideiglenesen megjeleníteni.● A meta címke charset jellemzőjének az értéke az utf8on kívül lehet még
vagy windows1250 vagy iso88592 (ezek tartalmazzák a magyar ékezetes betűket).– Ha az adott karakterkészlet nem tartalmazza a kívánt karaktert, azt külön kódolva
kell megadni● Egy weblap fő részei:
– dokumentumtípusmeghatározás: a legelső sor, HTML 5nél: <doctype html>– fejrész: <head> … </head>– törzs: <body> … </body>
● A stíluslapok a weblap formázását végzik.● A html címke lang jellemzőjének a megadása a megjelenést nem befolyásolja, csak a
keresőprogramok hamarabb megtalálják a weblapot.
A tartalom tagolása 1.
<p>bekezdés (paragraph)</p>
<br>Egyszerű sortörés (break)
Címsorok:
<h1>egyes (legmagasabb) szintű címsor</h1>
<h2>kettes szintű címsor</h2>
<h3>hármas szintű címsor</h3>
<h4>négyes szintű címsor</h4>
<h5>ötös szintű címsor</h5>
<h6>hatos (legalacsonyabb) szintű címsor</h6>
A tartalom tagolása 2.
<hr> vízszintes osztóvonal (horizontal rule)
<q> rövid idézet (quotation) </q>
<blockquote>hosszú (esetleg több soros) idézet</blockquote>
● a <q> és a <blockquote> utasítás cite jellemzőjével lehet megadni az idézet forrását
<pre>a szóközökkel, tabulátorokkal és Enterekkel előre formázott (predefinied) szöveg</pre>
A tartalom tagolása 3.<div>dokumentum-részlet (division), általános tárolóelem, amely lehetővé teszi a weblap egy részének logikai egységként történő kezelését</div>
● az egyes div szakaszokat az id jellemzővel különböztetjük meg
● egyetlen blokkszintű elemet önmagában nem célszerű div-be helyezni, mert az id azonosítóval anélkül is önállóan formázhatóvá, kezelhetővé tehető
<span>dokumentum egy szakasza (span), amely lehetővé teszi egy vagy több karakter egy egységként történő kezelését</span><hgroup> címsorok csoportosítása </hgroup><address> a webmester elérhetőségei </address>
A tartalom tagolása 4.
<iframe> </iframe>: egy beágyazott keretben jelenít meg egy másik lapot vagy egy dokumentumot, néhány jellemzője:● height: magasság (%-ban vagy képpontban)● name: a keret neve● scrolling: a keret gördíthetősége (yes, no,
auto)● src a keret forrásának webcíme● width: szélesség (%-ban vagy képpontban)
A tartalom tagolása 5.<header> a weblap fejléce </header><nav> navigációs linkek </nav><article>cikk, idézet egy külső írásból </article>, speciális jellemzők:
● cite: az idézet webcíme● pubdate: az írás legelső publikálásának a dátuma
<section> a weblap egy része </section><aside> a weblap tartalma </aside><footer> a weblap lábléce </footer>
A weblap törzsének általános szerkezete
Szöveg jelentése<abbr title="eredeti kifejezés"> rövidítés (abbreviation)</abbr><bdo dir="szövegirány"> szöveg </bdo>
● a szövegirány lehet: rtl (right to left, 'jobbról balra') vagy ltr (left to right, 'balról jobbra')
<del cite="URL" datetime="éééé/hh/nn”> törölt szöveg </del>
● az URL annak a dokumentumnak a webcíme, ami miatt a törlés történt
● a datetime jellemző értéke: a törlés pontos dátuma<ins cite="URL" datetime="éééé/hh/nn”> beszúrt szöveg </ins>
● az URL annak a dokumentumnak a webcíme, ami megmagyarázza, hogy a szöveg miért lett beszúrva
● a datetime jellemző értéke: a beszúrás pontos dátuma<mark> kiemelt szöveg </mark>
● nem mindegyik böngésző támogatja<time> időpont, dátum </time>vagy<time datetime="éééé-hh-nn"> szöveg </time>
Karakterformázás
●<small>az előtte és mögötte lévőknél kisebb (small) méretű karakterek</small>●<strong> erősen kiemelt karakterek </strong>
● általában félkövér karakterként jelennek meg●<em> kiemelt karakterek </em>
● általában dőlt karakterként jelennek meg●<sup>felső index-beli szöveg (superscript)</sup>●<sub>alsó index-beli szöveg (subscript)</sub>
Különleges karakterekSzámkód: &#szám;
Névkód: &név;
néhány különleges karakter kódjai:karakter számkód névkód© © ©® ® ®° ° °
± ± &plusm;
< < <
> > >
Felsorolások, listák 1.
Felsorolás (rendezetlen lista, unordered list)<ul>
<li>első elem</li><li>második elem</li><li>harmadik elem</li>
</ul>Számozás (rendezett lista, ordered list)<ol>
<li>első elem</li><li>második elem</li><li>harmadik elem</li>
</ol>● start=”mennyiről indul a számozás”
(alapértelmezés: 1)● <li value=”ennek az elemnek a sorszáma”>...</li>
Felsorolások, listák 2.Meghatározás (definíciós lista)<dl>
<dt>első fogalom</dt><dd>első fogalom magyarázata (definiton
description)</dd><dt>második fogalom</dt>
<dd>második fogalom magyarázata</dd><dt>harmadik fogalom</dt>
<dd>harmadik fogalom magyarázata</dd></dl>Menü: <menu label="ez a menü címkéje">
<li>egyszerű (alapértelmezés szerinti) menüelem</li> <li type="context">tartalom típusú menüelem</li><li type="toolbar">eszköztár típusú menüelem</li><li type="list">lista típusú menüelem
(alapértelmezés)</li></menu>
Hiperhivatkozások, linkek●Cél: kapcsolat megteremtése két dokumentum vagy két dokumentumrész között●Általános alakja: <a href=”webcím#címke”>szöveg</a>
● a webcím lehet relatív vagy abszolút ● a relatív dokumentumot tartalmazó gépen levő fájlra, az abszolút pedig
tetszőleges másik gépen levő fájlra hivatkozik● a címkét előzőleg az id jellemző értékeként az adott helyen meg
kell adni● ha nincs címke, a hivatkozás a céldokumentum elejére mutat● ha a webcímben csak domain név van (tehát a honlapra mutat), az
oldal gyorsabban betöltődik, ha a domain név végére egy / jelet teszünk
● ha a webcím helyén a mailto:egy e-mail cím van, akkor a linkre kattintáskor elindul az alapértelmezett levelezőprogram, a címzett mezőben a beállított e-mail címmel● ha az e-mail cím után (szóköz nélkül) a ?subject=szöveg van,
akkor a levél beállított tárgya a szöveg lesz● az e-mailcím-gyűjtő spam robotok miatt célszerű a tényleges e-
mail cím karaktereit speciális karakterként szám- vagy névkóddal megadni
Alap URL az egész oldal számára
● <base href=”URL” target=”hely”>● meghatározza az egész oldalon belüli linkek,
képek és egyebek alapvető URL-jét (webcímét)
● a weblap fejrészében kell elhelyezni● kötelezően megadandó jellemzők:
– href: a webcím– target, amelynek lehetséges értékei: _blank (új
ablak vagy fül), _parent (szülő-dokumentum), _self (az eredeti ablak, ez az alapértelmezés), _top (az ablak teteje)
Képek
Kép elhelyezésének általános alakja:<img src=”URL” alt=”leírás” title=”magyarázat” width=”szélesség” height=”magasság”>– URL: a képfájl elérési útvonala
● a kép csak jpg, gif vagy png formátumú lehet– leírás: az a szöveg, ami akkor jelenik meg a kép helyén, ha a kép
nem jelenik meg● ha alt=”” módon adjuk meg (a két idézőjel közé semmi!), azt
jelezzük, hogy a kép nem a weblap tartalmának szerves része– magyarázat: az a szöveg, amelyik egy téglalapban jelenik meg, ha
a kép fölé visszük az egérkurzort (nem kötelező megadni)– a szélesség és magasság megadása nem kötelező, de célszerű (sok
képet tartalmazó weblap szerkezete azonnal megjelenik)● célszerű, ha a méretek a kép valódi méretével egyeznek meg
– egy kép lehet egy lista eleme vagy egy táblázatcella tartalma is<figure> több médiaelem (kép, diagram stb.) csoportosan kezelve </figure><figcaption>a médiaelem-csoport címe </figcaption>
Képlink, image map
● Képlink: olyan kép, amely teljes egészében egy hivatkozás● Megadásának általános alakja:
<a href=”URL#címke”><img src=”URL” alt=”leírás” title=”magyarázat”></a>
● Image map (kép alakú térkép): olyan kép, amelynek egyes részei máshova mutató hivatkozások● megadásának általános alakja:
<img src="..." height="..." width="..." alt="..." usemap="#név"> <map name="név"><area ...> …</map>
Image map<area>: aktív (kattintásra érzékeny) terület megadása a térképen belül, legfontosabb jellemzői:
● shape: az aktív terület alakja (értékei lehetnek:rect vagy rectangle: téglalapcirc vagy circle: körpoly vagy polygon: sokszög
● coords: az aktív terület adatai (egymástól vesszővel elválasztott számok):téglalapnál: bal felső csúcs x koordinátája, bal felső csúcs y koordinátája, jobb alsó csúcs x koordinátája, jobb alsó csúcs y koordinátájakörnél: középpont x koordinátája, középpont y koordinátája, sugársokszögnél: 1. csúcs x koordinátája, 1. csúcs y koordinátája, 2. csúcs x koordinátája, 2, csúcs y koordinátája, …● a koordináták kiindulópontja (az origó) a kép bal felső sarka, innen
jobbra az x, lefelé pedig az y koordináták növekszenek
Táblázatok 1.
● A táblázat elhelyezésének általános alakja:<table><caption>a táblázat neve, címe</caption><tr><td>1. sor 1. cella tartalma</td><td>1. sor 2. cella tartalma</td></tr><tr><td>2. sor 1. cella tartalma</td><td>2. sor 2. cella tartalma</td></tr></table>
Táblázatok 2.
● Az első sor vagy az első oszlop celláit úgy lehet kiemeltté alakítani, hogy a sorok első celláinál a <td>...</td> elem helyére a <th>...</th> elemet tesszük● A <td>...</td> esetén balra, a <th>...</th>
esetén középre van a cella tartalma igazítva, hacsak mást nem állítunk be
Táblázatok 3.
● Oszlopok ill. sorok átívelése (egyesítése) a <th>...</th> és a <td>...</td> elemek következő paramétereivel lehetséges:● rowspan: az adott cella ennyi sor magas
lesz. (cellák egyesítése, átívelése függőlegesen)
● colspan: az adott cella ennyi oszlop széles lesz (cellák egyesítése, átívelése vízszintesen)
Nagyméretű táblázatok
● <thead> táblázatfej </thead>● egy táblázatban csak egy lehet
● <tbody> táblázattörzs </tbody>● egy táblázatban több is lehet● nyomtatásnál minden oldal tetején a táblázatfej és az
oldal alján a táblázat lábléce lesz
● <tfoot> táblázat lábléce </tfoot>● egy táblázatban csak egy lehet● lehet benne egyszerű szöveg vagy táblázatsor
Beágyazott tartalmak 1.
hang beszúrása, lejátszása: <audio> szöveg, olyan böngészők esetén, amelyek nem támogatják ezt a címkét </audio>, néhány fontos jellemzője és azok értékei:
● autoplay="autoplay": a böngésző a lap betöltése után azonnal lejátssza az audio tartalmat
● controls="controls": a lejátszást vezérlő gombok megjelenítése
● preload="preload": az oldal betöltése alatt az audiotartalom letöltése● ha van autoplay jellemző, hatástalan
● src="a hangfájl elérési útvonala": a lejátszandó fájl
Beágyazott tartalmak 2.video beszúrása, megjelenítése, lejátszása: <video> szöveg, olyan böngészők esetén, amelyek nem támogatják ezt a címkét </video>, néhány fontos jellemzője és azok értékei:
● autoplay="autoplay": automatikus lejátszás● loop="loop": folyamatos lejátszás● height="pixelszám": a videóablak magassága● width="pixelszám": a videóablak szélessége● src="elérési útvonal": a videofájl elérési útvonala● preload="preload": a video az ablakkal együtt
betöltődik● hatástalan, ha van autoplay jellemző
● controls="controls": a vezérlőgombok megjelenítése
Beágyazott tartalmak 3.
audio vagy video forrása (az audio vagy video elem tartalmában): <source>, néhány fontos jellemzője és azok értékei
● src="elérési útvonal": a forrásfájl elérési útvonala
● media="eszköz vagy média": megadja, hogy mire van optimalizálva a tartalom (alapértelmezés: all)
● type="típusnév": az audio vagy videofájl típusa
Beágyazott tartalmak 4.
beágyazott objektum (kép, hang, flash-program, java-program, pdf dokumentum stb.): <object>, néhány fontos jellemzője és azok értékei
● data="elérési útvonal": a forrásfájl elérési útvonala
● height="képpontszám": az objektum magassága● width="képpontszám": az objektum szélessége● name="név": név, amivel hivatkozni lehet az
objektumra● type="típusnév": az objektum adattípusának a
neve● usermap="térképnév": az objektum által
használt kliens-oldali térkép neve
Beágyazott tartalmak 5.
beágyazott objektum paramétereinek (jellemzőinek) megadása: <param>a param jellemzői és azok értékei:
● name="név": az objektum jellemzőjének a neve
● value="érték": az objektum jellemzőjének az értéke
Beágyazott tartalmak 6.beépített külső tartalom mint egy plug-in (beépülő): <embed>néhány fontos jellemzője és azok értékei
● height="képpontszám": magasság● width="képpontszám": szélesség● src="webcím": a külső forrás webcíme● type="típusnév": a külső tartalom típusa
Keresőoptimalizálás 1.● Cél: Az internetes keresőrobotok, nagyobb
eséllyel találják meg a weblapunkat● Előzetes tennivalók: minden weblap
estén meghatározni azt a 2-3 kulcsszót, amely az oldal lényegét legjobban kiemeli
● A weblap címébe (a fejrészben található <title> és </title> közé) célszerű minél több kulcsszót beírni egy értelmes szövegbe
Keresőoptimalizálás 2.● A weblap fejrészébe elhelyezett <meta> elemekkel:
● <meta name="keywords" content="a kulcsszavak, egymástól vesszővel elválasztva" />
● <meta name="description" content="a weblap tartalmának rövid összefoglalása” />
● <meta name="author" content="a weblap készítője" />● <meta name="language" content="hu" />● <meta name="allow-search" content="yes" />: kereshet a
lapon a keresőrobot● <meta name="robots" content="index, follow" />: a
keresőrobot mindent indexelhet és követheti a hivatkozásokat is
Keresőoptimalizálás 3.● A weblap törzsében:
● A HTML kódban a kulcsszavakat kb. 3-4%-nyi részben kell beírni!
● A kulcsszavakat a szöveg elejébe tegyük!● A kulcsszavakat címsorokba (h1, … , h6) írjuk!● A képeknél (img elem) az alt paraméter értéke
a kép tartalmára is utaló kulcsszó legyen
Recommended