a html nyelv alapjai - users.atw.huusers.atw.hu/kolcsey-info/tananyag/web/html.pdf · rövid...

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>


<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 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


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 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 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

a html nyelv alapjai - users.atw.huusers.atw.hu/kolcsey-info/tananyag/web/html.pdf · rövid...

Documents