Posts Subscribe to Revolution ChurchComments

HTML alapok 2.


HTML alapok 2.

Megjegyzések a kódban
Elválasztó vonal használata <hr>
Listák használata <ol><ul><li>
Egyszerű felsoroláslista <ul><li>
Sorszámozott lista <ol><li>
Meghatározás (vagy definíciós) lista <dl><dt><dd>
Hiperlinkek, hivatkozások <a>
A lap tulajdonságainak beállítása
Speciális karakterek, ékezetes betűk
Az &nbsp; karakter
Vissza

Megjegyzések a kódban

Ha megjegyzéseket (komment) szeretnénk elhelyezni a HTML kódban, akkor azt a <!--  és --> jelek közé kell tennünk. Ezeket (és a tartalmukat) a böngészőprogram nem jeleníti meg.
Interaktív példa
Vissza

Elválasztó vonal használata <hr>

Ha az oldalon lévő elemek közé egy vízszintes elválasztó vonalat szeretnénk tenni, használhatjuk a <hr> taget.
<hr> tag paraméterei
Paraméter Érték Leírás Megj.
align left|center|right A vonal igazítását állíthatjuk be.
left: balra
center: középre
right: jobbra		 Elavult loose
CSS alternatíva
margin-left
margin-right
Internet explorer text-align		 Balra igazítás:
margin-left: 0; margin-right: auto; Internet explorer text-align: left;
Jobbra igazítás:
margin-left: auto; margin-right: 0;
Internet explorer text-align: right;
Középre igazítás:
margin-left: auto; margin-right: auto;

Internet explorer text-align: center;		 Az igazítást a bal és jobb oldali margók beállításával oldhatjuk meg.
Internet explorerben ez nem vezet eredményre, itt a text-align paramétert használhatjuk, bár nem igazán erre szánták a szabvány készítői.		 CSS
noshade   Ezzel megszüntethetjük vonal árnyékolását. Elavult loose
CSS alternatívacolor szín |  színkód Ha megadjuk a színt, nem fogja árnyékolni a vonalat a böngésző. CSS
size érték A vonal magassága képpontokban. Elavult loose
CSS alternatívaheight érték Az elem magassága képpontokban. CSS
width érték [képpont, vagy %] Beállíthatjuk a vonal szélességét képpontokban, vagy a rendelkezésre álló hely százalékában. Elavult loose
CSS alternatívawidth érték [képpont px, vagy %] Az elem szélessége képpontokban, vagy százalékban. CSS
Példák
Kód <hr width="250" align="center">
<hr width="250" align="center" size="5">
<hr width="60%" align="right" noshade>
Eredmény
Kód <hr style="width:250px; margin-left: auto; margin-right: auto; text-align:center">
<hr style="width:250px; margin-left: auto; margin-right: auto; text-align:center; height:5px">
<hr style="width:60%; margin-left: auto; margin-right: 0; text-align: right; color:#555555">
Eredmény
Vissza

Listák használata <ol><ul><li>

A HTML nyelv lehetőséget ad arra, hogy különböző listákat (felsorolás, sorszámozott, meghatározás) hozzunk létre.
Vissza

Egyszerű felsoroláslista <ul><li>

Egyszerű felsorolás esetén az <ul> és </ul> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. A </li> záróelem használata opcionális, de mi javasoljuk, hogy mindig rakjuk ki.
Példa
Kód <ul>
  <li>első elem
  <li>második elem
  <li>harmadik elem
</ul>
Eredmény
  • első elem
  • második elem
  • harmadik elem
Vissza

Sorszámozott lista <ol><li>

Sorszámozott lista esetén az <ol> és </ol> tagek közé kell elhelyeznünk a listaelemeket.
Példa
Kód <ol>
   <li>megérett a meggy
   <li>csipkebokor vessző
    <li>te vagy az én párom
</ol>
Eredmény
  1. megérett a meggy
  2. csipkebokor vessző
  3. te vagy az én párom
Vissza

Meghatározás (vagy definíciós) lista <dl><dt><dd>

Meghatározás lista esetén az <dl> és </dl> tagek közé kell elhelyeznünk a listaelemeket, amelyek a fogalom megadásából (<dt> tag vezeti be) és a magyarázatából (<dd> tag vezeti be) állnak.
Példa
Kód <dl>
  <dt>1. fogalom</dt> <dd>az első fogalom magyarázata</dd>
  <dt>2. fogalom</dt> <dd>a második fogalom magyarázata</dd>
</dl>
Eredmény
1. fogalom
az első fogalom magyarázata
2. fogalom
a második fogalom magyarázata
Vissza

Hiperlinkek, hivatkozások <a>

A hiperhivatkozásokkal (röviden link) hozhatunk létre kapcsolatot a különböző oldalak  (objektumok) között. A böngészők a linkeket általában aláhúzással, illetve eltérő színnel jelölik, de persze ezek a beállítások megváltoztathatók. Később bemutatjuk, hogy hogyan.  Oldalon belüli hivatkozásokat is létrehozhatunk, az ott elhelyezett "könyvjelzőre".
Az <a> tag paraméterei
Paraméter Érték Leírás Megj.
name azonosító Ezzel a paraméterrel nevet adhatunk a  hivatkozásnak, így egy "könyvjelzőt" hozhatunk létre. A szövegnek betűvel kell kezdődnie, ezt betű, szám és néhány speciális karaktert is követheti, mint a kötőjel vagy aláhúzás jel.
példa: <a name="hobby" ></a>		  
href webcím (URI) Itt kell megadnunk a hivatkozás webcímét.Példa:
href= "http://www.weblabor.hu/"
href= "ftp://ftp.winzip.com/winzip70.exe"
href= "mailto:gipszjakab@freemail.hu"
Ha egy könyvjelzőre akarunk linkelni, akkor a lap címe után #könyvjelző paramétert kell használnunk.
Példa:
<a href= "magamrol.html#hobby"> Hobby</a>		  
target név A célkeret neve, ahova az oldalt be akarjuk tölteni. Ezzel később (a keretekről szóló részben) részletesen foglalkozunk. loose
title szöveg Információt helyezhetünk el a linkkel kapcsolatban. Ez a szöveg általában buboréksúgóként (tool tip) jelenik meg a böngészőprogramokban.  
hreflang nyelvkód Itt adhatjuk meg a hivatkozott oldal nyelvét. Akkor érdemes megadni, ha az adott nyelvi kontextustól eltérő nyelvi oldalakra hivatkozunk. Gyakran használt nyelvkódok:
en: angol
en-us: angol (amerikai)
en-gb: angol (brit)
fr: francia
de: német
hu: magyar
Nyelvkódok listája		  
charset karakterkód Ebben a paraméterben a hivatkozott oldal szövegkódolását írhatjuk be.  
Tipp!
A hreflang és a charset attribútumok megmutatják, hogy a  hivatkozott dokumentum milyen nyelvű és milyen szövegkódolást használ. Az intelligensebb képernyőolvasó -beszédmotor együttesekben az ilyen linkek aktiválása is kiváltja a megfelelő nyelvű beszédprogram aktiválását.
Példa
Kód <a href="http://www.elte.hu/">Ez az ELTE honlapja</a>
Eredmény Ez az ELTE honlapja
Kód <a href="ftp://ftp.winzip.com/winzip70.exe">A winzip letölthető erről a címről</a>
Eredmény A winzip letölthető erről a címről
Kód <a href="mailto:gipszjakab@freemail.hu">Itt írhat nekem levelet</a>
Eredmény Itt írhat nekem levelet
Azonban a hivatkozásokat nem csak abszolút módon (a gépnév és teljes útvonal megadásával), hanem az aktuális dokumentum elérhetőségéhez képest relatívan is megadhatjuk. Nézzük a következő honlap struktúrát.
  • index.html
  • hobby.html
  • kepek könyvtár
    • bicikli.jpg
    • sziklamaszas.jpg
    • onarckep.jpg
  • galeria könyvtár
    • lap1.html
    • lap2.html
Itt azt látjuk, hogy a gyökér könyvtárban két állomány található (index.html, hobby.html), valamint van egy kepek és egy galeria könyvtár is további állományokkal.
Hogyan hivatkozhatunk az index.html oldalról a galeria könyvtár lap1.html oldalára? Egyszerű, megadjuk, hogy az a galeria könyvtárból nyílik, teszünk egy / jelet és megadjuk a fájl nevét, ami most lap1.html.
Példa:  Nézd meg a Galéria <a href="galeria/lap1.html"> első lapját </a> is!
És ha a lap1.html oldalról hivatkozni akarunk a kepek könyvtárban lévő sziklamaszas.jpg képre? Ekkor meg kell adnunk, hogy az egy szinttel feljebb lévő könyvtárból (amit két ponttal [..] jelölünk) nyíló kepek könyvtárban található sziklamaszas.jpg legyen a hivatkozott állomány.
Példa: A képet megtekintheted <a href="../kepek/sziklamaszas.jpg"> nagyobb méretben </a> is.
Amennyiben a példánkban szereplő gyökérkönyvtár ténylegesen a webszerver gyökérkönyvtára, akkor máshogy is hivatkozhatunk az állományokra. Ehhez kihasználjuk, hogy a gyökér könyvtárra a / jellel hivatkozhatunk. Vagyis a fenti példa szerint a következő kód is megfelelő lesz.
 Példa: A képet megtekintheted <a href="/kepek/sziklamaszas.jpg"> nagyobb méretben </a> is.
Vissza

A lap tulajdonságainak beállítása

Láttuk, hogy a szöveg tulajdonságát hogyan kell beállítani (például a színt is), de mi van akkor, ha az egész lap háttérszínét, margóját akarom megváltoztatni. Ehhez meg kell ismerkednünk a <body> tag paramétereivel, hiszen ezeket a tulajdonságokat ennél a tagnél kell megadnunk.
A <body> tag fontosabb paraméterei
Paraméter Érték Leírás Megj.
background a háttérkép webcíme Ezzel adhatjuk meg az oldal háttérképét, amelyet a böngésző mozaikszerűen fog elrendezni.Példa:
<body background="kepek/hatter.gif">		 Elavult loose
CSS alternatívabackground-image
background-repeat
background-position		 background-image esetén
url(webcím)
background-repeat esetén:
repeat |
repeat-x | repeat-y |
no-repeat
background-position esetén:
[top | center | bottom]
[left | center | right]		 A backgound-image paraméterrel az elem hátterét adhatjuk meg.Példa:
<body style= "background-image: url('kepek/hatter.gif')">
Ebben az esetben mi adhatjuk meg, hogy a háttérkép milyen módon kerüljön a háttérre. Ehhez a background-repeat paramétert kell használnunk.
Értékei:
repeat: vízszintes és függőleges ismétlődés (mozaikszerű megjelenítés)
repeat-x: csak vízszintesen ismétlődik
repeat-y: csak függőlegesen ismétlődik
no-repeat: nincs ismétlődés
Amennyiben azt állítjuk be, hogy ne legyen ismétlődés, a background-position paraméterrel lehetőségünk van a kép pozíciójának beállítására is.
Függőlegesen:
top: felülre
center: középre
bottom: alulra
Vízszintesen:
left: balra
center: középre
right: jobbra
Lehetőleg ebben a sorrendben adjuk meg az értékeket.
Példa:
<body style="background-image: url('kepek/hatter.gif'); background-position: top center" >		 CSS
bgcolor szín | színkód A háttérszín megadására szolgál.Példa:
<body bgcolor="#F0F0F0">		 Elavult loose
CSS alternatívabackground-color szín | transparent Az elem háttérszínének megadására szolgál. Alapértelmezett értéke a transparent (átlátszó).Példa:
<body style="background-color: #F0F0F0"> 		CSS
text szín | színkód A szöveg alapértelmezett színét állíthatjuk be. <body text="#000066"> Elavult loose
CSS alternatívacolor szín Az elemhez tartozó szöveg színét állíthatjuk be.Példa
<body style="color:#000066">		 CSS
link szín Az oldalon található linkek alapértelmezett színét állíthatjuk be. (A linkek általában kék színnel vannak jelölve)Példa
<body link="#000066">		 Elavult loose
CSS alternatívaa:link látszólagos osztály   A stíluslappal történő megadásnál az oldal head részében kell elhelyezni az alábbi kódot. (ez már nem in-line megadás, hanem az oldalra vonatkozó stílusdefiníció)<style type="text/css">
<!--
a:link {color: #000066}
-->
</style>
Természetesen itt nem csak a szín, bármely más tulajdonság megadására is lehetőség van.		 CSS
alink   Az aktív (éppen kiválasztott) linkek alapértelmezett színének beállítására jó. (Az aktív linkek általában piros színnel vannak jelölve)Példa:
<body alink="#FF00FF">		 Elavult loose
CSS alternatívaa:active látszólagos osztály   Hasonlóan kell eljárnunk, mint az a:link esetén, csak most az a:active látszólagos osztályt kell használnunk.Példa:
<style type="text/css">
<!--
a:link {color: #000066}
a:active {color:#FF00FF }
-->
</style>		 CSS
vlink   A már látogatott linkek alapértelmezett színének beállítására alkalmas. (A látogatott linkek általában sötétlila színnel vannak jelölve) Elavult loose
CSS alternatívaa:visited látszólagos osztály   Hasonlóan kell eljárnunk, mint előzőkben, csak most az a:visited látszólagos osztályt kell használnunk. CSS
A dokumentum bal és felső margójának beállítására a HTML 4.01 szabványban nincs lehetőség. Vannak persze böngészőfüggő megoldások (leftmargin, topmargin, marginwidth, marginheight), de ezek használatáról lebeszéljük az olvasót. Használhatjuk viszont a margin-left, margin-right, margin-top, margin-bottom paramétereket az elem bal oldali, jobb oldali, felső, vagy alsó margójának beállításához.
Például: <body style="margin-left:10px; margin-top:15px">
Az alábbi példában HTML paraméterekkel állítjuk be az oldal tulajdonságait.
Interaktív példa
Itt viszont stíluslapokat használunk.
Interaktív példa
Itt pedig a stílus in-line megadása helyett a HEAD részbe írjuk a stílusdefiníciót.
Interaktív példa
Vissza

Speciális karakterek, ékezetes betűk

Amennyiben ékezetes karaktereket szeretnénk megjeleníteni az oldalon, akkor azt HTML kódokkal is megtehetjük, néhány kompromisszummal (az ő helyett hullámos õ, az ű helyett kalapos û karakter jelenik meg.
Ékezetes betűk kódja
&aacute;= á &Aacute;= Á &ouml;= ö &Ouml;= Ö
&eacute;= é &Eacute;= É &uuml;= ü &Uuml;= Ü
&iacute;= í &Iacute;= Í &otilde;= ő &Otilde;= Ő
&oacute;= ó &Oacute;= Ó &ucirc;= ű &Ucirc;= Ű
&uacute;= ú &Uacute;= Ú  
Tehát ha pl. az árvíztűrő tükörfúrógép szöveget akarjuk megjeleníteni, akkor a következő kódokat kell(ene) használnunk:
&aacute;rv&iacute;zt&ucirc;r&otilde; t&uuml;k&ouml;rf&uacute;r&oacute;g&eacute;p
Mi azonban nem ezt javasoljuk. Inkább a dokumentum fejlécében adjuk meg, hogy milyen karakterkódolást használunk. Ezt egy úgynevezett meta taggel adhatjuk meg. A meta tageknek külön fejezetet szentelünk a tananyagban, elöljáróban annyit érdemes tudnunk, hogy az ékezetes karakterek helyes megjelenítéséhez a <head> és </head> tagek között helyezzük el a következő kódot:
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-2">
Előfordulhat, hogy az oldalon speciális jeleket szeretnénk megjeleníteni. Speciális jelnek számít már a < és a > jel is, hiszen gondoljunk bele, ha a forráskódban használjuk ezeket a jeleket, akkor a böngésző úgy értelmezi, hogy valamilyen taget akarunk megadni, és nem fogja megjeleníteni azt. Ebben az esetben speciális karaktereket kell használnunk.
Ezeket HTML kód, vagy az úgynevezett unicode segítségével is megjeleníthetjük.
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;
¢ &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; ø &oslash &#248;
Interaktív példa
Vissza

Az &nbsp; karakter

Alapesetben ha két szó között üres hely (space) van, akkor a böngésző a jobb helykihasználás érdekében a két szót külön sorba tördelheti. Ez nem mindig előnyös, ezért ha ezt el szeretnénk kerülni, akkor az &nbsp; (non-breaking space) kódot kell alkalmaznunk. Ez olyan üres helyet jelöl, amelyet a böngésző nem törhet meg.
Nem törhető üres hely - példa ez az alap tördelés
Itt a "bizonyos szavakat" között nem egyszerű üres hely van, hanem &nbsp; kód, ezért a böngésző nem tördeli külön a szavakat.
Majd látni fogjuk, hogy az &nbsp; karakternek a táblázatok készítésénél is lesz egy kis szerepe.
Feliratkozás: Bejegyzések (Atom)
 

Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com