Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

A weblapkészítés technikája (HTML5, CSS3) és ergonómiája / HTML-bevezető /A kód tördelése, megjegyzések a kódban

HTML-bevezető

A kód tördelése, megjegyzések a kódban

A HTML oldalak készítésénél meg kell szoknunk azt, hogy a HTML-kód tördelése (mennyi üres helyet teszünk, hol nyomunk entert) a legtöbb esetben nem befolyásolja az oldal megjelenését. Ez alól kivételt jelent, ha például a <pre> taget használjuk, vagy a stíluslapban megadjuk, hogy előre formázott szövegként akarunk valamit megjeleníteni.

Interaktív példa

A <pre> tag tartalmaként megadott szöveget a böngésző azonos szélességű betűkkel jeleníti meg. Hagyományos szöveg írásához ne használjuk, de például programkód megjelenítésére jó lehet.

Amennyiben a programkódban megjegyzést szeretnénk elhelyezni (ahogy tettük ezt a 12. sorban), akkor azt a <!-- karakterlánccal vezessük be, és a --> karakterlánccal zárjuk le. Az így elhelyezett szöveg nem jelenik meg a képernyőn, csak a forráskódban lesz olvasható.

Attól, hogy a programkód tördelése – a fenti kivételtől eltekintve – nincs hatással a megjelenésre, érdemes a HTML tageket a térközökkel elválasztani és beljebb húzni aszerint, hogy milyen szinten vannak egymásba ágyazva. Ez elősegíti a kód jobb átláthatóságát, így a módosítás is gyorsabbá válhat.

Megjegyzés

A kódszintű szerkesztőprogramok (egy része) képes arra, hogy automatikusan átformázza a forráskódot a tagek egymásba ágyazása alapján, így a kód átláthatóbbá válik.

Speciális karakterek és ékezetes betűk

Problémafelvetés: tegyük fel, hogy egy HTML-tag szerepét akarjuk elmagyarázni egy weblapon. Mondjuk így:

Példa

A <p> tag-et akkor használhatjuk, ha bekezdést akarunk létrehozni.

Az alábbi kódban ezt látjuk.

Interaktív példa

Ha megtekintjük az eredményt, tapasztaljuk, hogy a <p> tag-et nem írta ki a böngésző, hanem végrehajtotta, vagyis az "A" betű utáni szöveg egy új bekezdésbe került. Ahhoz hogy a <p> karakterláncot a böngésző kiírja, egy trükkhöz kell folyamodnunk. A < és > jelet speciális kódokkal kell helyettesítenünk. A < jel helyett a &lt; az > helyett a &gt; kódot kell használnunk. Vagyis a következő kódot kell a forráskódban elhelyeznünk:

Forráskód
<p>A &lt;p&gt; taget akkor használhatjuk, ha bekezdést akarunk létrehozni.</p>

A leggyakrabban használt speciális karakterek (pl. paragrafus jel, ezrelék jel, gondolatjel, stb.) mindegyikének van ilyen kódja, amelyek közül néhányat az alábbi táblázatban is feltüntettünk.

Gyakran használt speciális karakterek
Karakter HTML kód unicode Karakter HTML kód unicode
´ &acute; &#180; < &lt; &#60;
& &amp; &#38; ? &macr; &#175;
| &brvbar; &#166; ? &micro; &#181;
. &bull; &#8226; &nbsp; &#160;
c &cent; &#162; ? &not; &#172;
© &copy; &#169; ? &para; &#182;
° &deg; &#176; ? &permil; &#8240;
? &euro; &#8364; ? &plusmn; &#177;
÷ &divide; &#247; " &quot; &#34;
? &frac12; &#189; ® &reg; &#174;
? &frac14; &#188; > &raquo; &#187;
? &frac34; &#190; § &sect; &#167;
> &gt; &#62; ¨ &uml; &#168;
! &iexcl; &#161; × &times; &#215;
? &iquest; &#191; &trade; &#8482;
< &laquo; &#171; o &oslash &#248;

A speciális karaktereket az úgynevezett Unicode-kód segítségével is megjeleníthetjük. Amennyiben az oldalainkon az írásjeleket is precízen szeretnénk használni, szükségünk lesz ezen kódokra, gondoljunk csak a speciális idézőjelek, a különböző hosszúságú gondolatjelek használatára!

Egy bővebb listát találunk a következő webcímen: http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Feladat

A fenti táblázat alapján írjuk le HTML nyelven az alábbi példákat:

© ELTE Informatikai Kar

A forrásban lévő víz hőmérséklete 100 °C.

103. § (1) A határidőket napok, hónapok vagy évek szerint kell számítani.

A szállás díja: 120 €

Interaktív példa

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.