A honlap egy szöveges fájl, melyet akár jegyzettömbben (szerintem ebben érdemes) vagy akármilyen más egyszerű szövegszerkesztőben megírhatunk. A formázási és egyéb parancsokat < és > jelek közé írjuk és tageknek (címkéknek) nevezzük őket. A tagekben a kis és nagybetűket nem kell megkülönböztetni, bár hagyományosan csupa nagybetűvel írjuk mindegyiket. A tagek nagy részéhez tartozik záró tag, a nyitó és záró tag között érvényes a html parancs. Pl <font> - </font>.A fájl első sora minden esetben ez: <html>
A második sor pedig a legtöbb esetben a <body> tag. Ezen a tagen belül több formázási paramétert is megadhatunk:
* BGCOLOR - a honlap háttérszíne
* LINK - a link szövegének színe
* ALINK - a link szövegének színe akkor, mikor rákattintunk
* VLINK - link szövegének színe, miután rákattintottunk
(a linkekről - hiperhivatkozásokról - majd később lesz szó)
A szöveget a <font> tagben formázhatjuk, ennek paraméterei:
* size - a betűméret 1-től 7-ig
* face - a betűtípus
* color - a betűszín
* align - a szöveg igazítását állítja (lehet left, center vagy right)
A szöveg stílusát más tagekkel állítjuk:
* <u> és </u> között: aláhúzott a szöveg
* <i> és </i> között: dőlt a szöveg
* <b> és </b> között: félkövér a szöveg
Tehát a fentiek alapján egy olyan honlap, mely kék alapon sárga betűkkel kiír középre, aláhúzottan egy szöveget:
<html>
<body bgcolor="blue">
<font color="blue" align=center> <u>Ide jön a szöveg </u></font>
</body>
</html>
Egyéb alap tag-ek:
* <br>: ez a sortörés
* <title> és </title> közti szöveg kerül a böngésző fejlécébe, ez a tag a <html> és a <body> tag között helyezkedik el
* <hr>: ez egy vízszintes vonalat rajzol ki, paraméterei:
align: ez az igazítás, lehet left, center vagy right
width: ez a szélesség, %-ban adjuk meg általában (pl width="70%")
Képek
Ha az oldal hátterének egy képet akarunk beállítani, akkor azt a body tag background paraméterével tehetjük meg. A képnek egy jpg, gif vagy bmp fájlnak kell lennie. A fájlnév meghatározása relatív hivatkozással történik, ami a következőt jelenti:
Ha pl. a fájlnév pelda.jpg és ugyanabban a mappában van, mint a html fájl, akkor background="pelda.jpg". Ha a fájl a html fájl mappájának egyik alkönyvtárában van, pl a "képek" almappában, akkor background="kepek/pelda.jpg". A kép forrása URL-el is törénhet, pl background="http://www.freeweb.hu/ebenceweb/pic/Lens_orbit.jpg".
A honlapunkra bárhova beilleszthetünk képet az <img> taggel, melynek paraméterei:
* src: ennek értéke lesz a kép forrása, az értékadás szintén relatív hivatkozással történik, a fentiekben leírtaknak megfelelően.
* alt: ennek értéke látszik a böngészőben, ha a kép fölé visszük az egeret, ill. szöveges böngészőkben ez a szöveg jelenik meg.
* align: ez a kép igazítását állítja, értéke left, center és right lehet.
* border: a kép kerete, képpontokban megadva. Érettségin szokott szerepelni, amúgy ritkán használjuk.
Linkek
a linkeket a <a> taggel jelöljük, a <a> és </a> közti szöveg lesz a link szövege.
a <a> tag paraméterei:
* href: az oldalnak a címe, amire mutat a link. Ezt is relatív hivatkozással adjuk meg.
* target: ezt a paramétert frame-es szerkezetű honlapoknál használjuk, de olyan még soha nem volt érettségin, ezért itt nem is tárgyaljuk részletesen. Elég annyi, hogy ha azt akarjuk, hogy a link által mutatott oldal új böngészőablakban jelentjen meg, akkor ennek a paraméternek az értéke "blank".
Ha a link egy másik honlapra mutat (nem olyan oldalra, melyre relatívan lehet hivatkozni), akkor mindig be kell írni a http://-t. A href paraméternek egy speciális alkalmazása a mailto parancs. Pl az hogy <a href="mailto:gyilkoskaralabe@skizo.hu"> email küldése </a> azt jelenti, hogy ha rákattintunk az "email küldése" szövegre (a link szövegére), akkor elindul az outlook és a címzett mezőben a "gyilkoskaralabe@skizo.hu" lesz. Ez a funkció majdnem minden érettségi feladatban kell.
Példák:
* <a href="http://www.prog.hu"> prog.hu </a> eredménye: prog.hu
* <a href="http://www.google.hu" target="blank"> google </a> eredménye: google
* <a href="mailto:gyilkoskaralabe@skizo.hu"> Email küldése </a> eredménye: Email küldése
* <a href="pic/Lens_orbit.jpg"> <img src="pic/small/Lens_orbit.jpg"> </a> eredménye:
Táblázatok
A táblázat a <table> taggel kezdődik. Ennek paraméterei:
* align: a táblázat igazítása, szintén left, center vagy rigth lehet.
* width: a táblázat szélessége, %-ban vagy képpontban megadva.
* border: a táblázat kerete képpontban megadva.
* bgcolor: a táblázat háttérszíne.
A táblázat sorainak tartalma <tr> (table row) és </tr> tagek között helyezkedik el, a cellák tartalma pedig a <td> (table data) és </td> tagek között. Ennek illusztrálására egy egyszerű példa:
<table bgcolor="lightblue" align="center" width="70%" border=1>
<tr>
<td> 1. sor 1. cella </td>
<td> 1. sor 2. cella </td>
<td> 1. sor 3. cella </td>
</tr>
<tr>
<td> 2. sor 1. cella </td>
<td> 2. sor 2. cella </td>
<td> 2. sor 3. cella </td>
</tr>
<tr>
<td> 3. sor 1. cella </td>
<td> 3. sor 2. cella </td>
<td> 3. sor 3. cella </td>
</tr>
</table>
Eredmény:
1. sor 1. cella 1. sor 2. cella 1. sor 3. cella
2. sor 1. cella 2. sor 2. cella 2. sor 3. cella
3. sor 1. cella 3. sor 2. cella 3. sor 3. cella
Z-index
Az egymást takaró elemek láthatóságát alapértelmezetten a HTML-kódban elfoglalt sorrendjük határozza meg. A kódban később található HTML elem eltakarja az előzőeket.
A láthatósági sorrend módosítható a z-index tulajdonság segítségével. A z-index növelésével adott elem (a z-tengely mentén) közelíthető a látogató felé. Eltakarja a kisebb z-indexszel rendelkező elemeket.
A z-index csökkentésével az adott elem távolítható. Ilyenkor a többi elem takarásába kerül.
Lebegés (float) és tisztítás (clear)
float: Egy kép körbevétele szöveggel egyszerűbben nem is mehet, mint a float elem. A lenti példában egy jobb oldalon lévő képet írunk körbe szöveggel:
img {
float: right;
margin: 0 0 10px 10px;
}
Megjegyzés: nagyon erősen javasolt a kép pontos méreteinek megadása már a HTML-kódban!
clear: A képet (vagy egyéb elemet) körbevevő szöveg tulajdonságainak megadása. Lásd: htmlpelda44.html.
Clear
clearfix: Ha egy belső elem magasabb, mint az őt tartalmazó, akkor érdemes használni a clearfix-et ami felülírja a tartalmazó elem méreteit az „overflow: auto;” segítségével. Példa:
.clearfix {
overflow: auto;
}
A visibility
A visibility tulajdonság segítségével az elemek láthatóságát állíthatjuk be.
Értékek:
hidden: láthatatlanná teszi az elemet. Ügyeljünk arra, hogy attól, hogy az elem láthatatlanná válik, az oldal elrendezésére még hatással lesz, a helyét a böngésző ki fogja hagyni. Ha nem ez a célunk, hanem az elem teljes eltüntetése, akkor a display:none; beállítást kell alkalmaznunk.
visible: láthatóvá teszi az elemet.
inherit: az érték a szülő elemtől öröklődik.
Tábla elemekre alkalmazva a collapse érték eltüntet egy sort vagy oszlopot anélkül, hogy a tábla megjelenése megváltozna. Ekkor a sor vagy oszlop által elfoglalt hely más tartalom számára rendelkezésre áll. Ez az érték a nem tábla elemeken hidden értékként funkcionál.
A visibility tulajdonságok értékei öröklődnek.
Forrás;
https://tferi.hu/weblapkeszites-html-alapokon-1/css-4-resz?showall=&start=3
http://tamop412.elte.hu/tananyagok/weblapkeszites/lecke15_lap2.html
http://info.berzsenyi.hu/halozatok/weblapok-formazasa-css-segitsegevel
http://atomfizika.elte.hu/informatika/docs/html
http://www.w3schools.com/html/
http://www.w3schools.com/css/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://atomfizika.elte.hu/informatika/docs/html#test
http://atomfizika.elte.hu/informatika/docs/html#keret
http://atomfizika.elte.hu/informatika/docs/html#html
http://atomfizika.elte.hu/informatika/docs/html#css
http://atomfizika.elte.hu/informatika/docs/html#style
http://atomfizika.elte.hu/informatika/docs/html#hexa
HTML fájlok szerkezete
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
<title>Oldal címe</title>
</head>
<body>
<h1>Címsor</h1>
<p>Bekezdés</p>
</body>
</html>
HTML és CSS szintaxis ellenőrzése
A weboldalunk kódját a következő oldalakon ellenőrizhetjük:
1. HTML: http://validator.w3.org/
2. CSS: http://jigsaw.w3.org/css-validator/
Ha az oldalunk helyes, az alábbi módon egy erre utaló "pecsétet" tehetünk rá, amelyre kattintva bárki láthatja, tényleg jó-e a szintaxisunk:
1. HTML: <a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-html401.png" alt="Valid HTML4"></a>
2. CSS: <a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://www.w3.org/Icons/valid-css.png" alt="Valid CSS"></a>
3. Ezek a következőképpen néznek majd ki:
HTML címkék
Főcím <h1></h1>
Alcím <h2></h2>
Bekezdés <p></p> vagy <div></div>
Sortörés <br> (nincs záró címke!)
Beillesztett kép <img src="kep.png" alt="leírás"> (1: Nincs záró címke! 2: A képet ugyanabban a könyvtárban kell elhelyezni.)
Külső/belső link <a href="http://elte.hu">szöveg</a>, <a href="fajl.html">szó</a>
Hivatkozási pont (#name) <a name="pont"></a>
Számozott lista <ol>
<li>Valami</li>
<li>Valami2</li>
</ol>
Számozatlan lista <ul>
<li>Valami</li>
<li>Valami2</li>
</ul>
Táblázat <table>
<tr><td>Bal fent</td><td>Jobb fent</td></tr>
<tr><td>Bal lent</td><td>Jobb lent</td></tr>
</table>
Űrlap <form name="input" action="oldal.html" method="get">
<label>Vezetéknév</label>
<input type="text" name="vnev">
<label>Keresztnév</label>
<input type="text" name="knev">
<input type="submit" value="Mehet">
</form>
Stílustulajdonságok
Adott elem stílusának megadása: <div style=" ... ">szöveg...szöveg</div>
Szín color: red; vagy color: #ff00ff;
Háttérszín background: blue; vagy background: #00ff00;
Háttérkép background-image: url('kepfajl.png');
Keret border-style:solid/dashed/dotted;
border-width:5px; border-color:black;
Méret width: 10px; height: 100px;
Betűtípus font-family: Arial/Courier/Times
font-size: 12px; font-style: italic;font-weight: bold;
Margó/behúzás margin: 10px; padding: 20px;
Szöveg igazítása text-align: center/right/justify;
Kép középre igazítása display: block; margin-left: auto; margin-right: auto;
Úsztatás float: right/left;
Stílustulajdonságok megadása CSS fájlban
Készíteni kell egy valami.css nevű fájlt, és a HTML fájl fejlécét így kell módosítani, hogy tudjon az elkészített valami.css fájlról (csak a módosítandó sort írtam vastag piros betűvel)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
<link rel="stylesheet" href="valami.css" type="text/css">
<title>Oldal címe</title>
</head>
A CSS fájl (valami.css) tartalma a következőhöz hasonló lehet:
body {
background: #ff0ff0;
color: #00ff00;
}
h1 {
background: #00ff00;
color: #ff0ff0;
}
a {
text-decoration: none;
font-weight: bold;
background: #00ff00;
color: #ff0ff0;
}
a:hover {
background: #ff0ff0;
color: #00ff00;
}
.kiemeles {
color: red;
background: yellow;
}
• 1. megjegyzés: az utolsó előtti elem (a:hover { ... }) azt a lehetőséget mutatja, hogy ha felhasználó az egérrel a link fölé megy, arra az esetre más stílust is meg lehet adni. Ez a gyakran használt stílus-elem a linkek kiemelését segíti.
• 2. megjegyzés: az utolsó elem (.kiemeles { ... } - figyeljünk a kezdő pontra) azt jelenti, hogy ezt a stílust (piros betű, sárga háttér) bármely elemre alkalmazhatjuk az oldalunkon. Tegyük fel, hogy egy adott szöveget ezzel a stílussal akarunk ellátni (kiemelni), ezt a következőképpen tehetjük meg a HTML fájlban:
<p class="kiemeles">Szöveg ... szöveg ... </p>
Ha csak a szöveg egy részére akarjuk alkalmazni:
<p>Normál szöveg ... <span class="kiemeles">kiemelt szó</span> ... </p>
Hasonlóképpen bármely CSS stíluselemet megadhatunk a fenti módon, és alkalmazhatjuk azt egy tetszőleges HTML elemre.
A második sor pedig a legtöbb esetben a <body> tag. Ezen a tagen belül több formázási paramétert is megadhatunk:
* BGCOLOR - a honlap háttérszíne
* LINK - a link szövegének színe
* ALINK - a link szövegének színe akkor, mikor rákattintunk
* VLINK - link szövegének színe, miután rákattintottunk
(a linkekről - hiperhivatkozásokról - majd később lesz szó)
A szöveget a <font> tagben formázhatjuk, ennek paraméterei:
* size - a betűméret 1-től 7-ig
* face - a betűtípus
* color - a betűszín
* align - a szöveg igazítását állítja (lehet left, center vagy right)
A szöveg stílusát más tagekkel állítjuk:
* <u> és </u> között: aláhúzott a szöveg
* <i> és </i> között: dőlt a szöveg
* <b> és </b> között: félkövér a szöveg
Tehát a fentiek alapján egy olyan honlap, mely kék alapon sárga betűkkel kiír középre, aláhúzottan egy szöveget:
<html>
<body bgcolor="blue">
<font color="blue" align=center> <u>Ide jön a szöveg </u></font>
</body>
</html>
Egyéb alap tag-ek:
* <br>: ez a sortörés
* <title> és </title> közti szöveg kerül a böngésző fejlécébe, ez a tag a <html> és a <body> tag között helyezkedik el
* <hr>: ez egy vízszintes vonalat rajzol ki, paraméterei:
align: ez az igazítás, lehet left, center vagy right
width: ez a szélesség, %-ban adjuk meg általában (pl width="70%")
Képek
Ha az oldal hátterének egy képet akarunk beállítani, akkor azt a body tag background paraméterével tehetjük meg. A képnek egy jpg, gif vagy bmp fájlnak kell lennie. A fájlnév meghatározása relatív hivatkozással történik, ami a következőt jelenti:
Ha pl. a fájlnév pelda.jpg és ugyanabban a mappában van, mint a html fájl, akkor background="pelda.jpg". Ha a fájl a html fájl mappájának egyik alkönyvtárában van, pl a "képek" almappában, akkor background="kepek/pelda.jpg". A kép forrása URL-el is törénhet, pl background="http://www.freeweb.hu/ebenceweb/pic/Lens_orbit.jpg".
A honlapunkra bárhova beilleszthetünk képet az <img> taggel, melynek paraméterei:
* src: ennek értéke lesz a kép forrása, az értékadás szintén relatív hivatkozással történik, a fentiekben leírtaknak megfelelően.
* alt: ennek értéke látszik a böngészőben, ha a kép fölé visszük az egeret, ill. szöveges böngészőkben ez a szöveg jelenik meg.
* align: ez a kép igazítását állítja, értéke left, center és right lehet.
* border: a kép kerete, képpontokban megadva. Érettségin szokott szerepelni, amúgy ritkán használjuk.
Linkek
a linkeket a <a> taggel jelöljük, a <a> és </a> közti szöveg lesz a link szövege.
a <a> tag paraméterei:
* href: az oldalnak a címe, amire mutat a link. Ezt is relatív hivatkozással adjuk meg.
* target: ezt a paramétert frame-es szerkezetű honlapoknál használjuk, de olyan még soha nem volt érettségin, ezért itt nem is tárgyaljuk részletesen. Elég annyi, hogy ha azt akarjuk, hogy a link által mutatott oldal új böngészőablakban jelentjen meg, akkor ennek a paraméternek az értéke "blank".
Ha a link egy másik honlapra mutat (nem olyan oldalra, melyre relatívan lehet hivatkozni), akkor mindig be kell írni a http://-t. A href paraméternek egy speciális alkalmazása a mailto parancs. Pl az hogy <a href="mailto:gyilkoskaralabe@skizo.hu"> email küldése </a> azt jelenti, hogy ha rákattintunk az "email küldése" szövegre (a link szövegére), akkor elindul az outlook és a címzett mezőben a "gyilkoskaralabe@skizo.hu" lesz. Ez a funkció majdnem minden érettségi feladatban kell.
Példák:
* <a href="http://www.prog.hu"> prog.hu </a> eredménye: prog.hu
* <a href="http://www.google.hu" target="blank"> google </a> eredménye: google
* <a href="mailto:gyilkoskaralabe@skizo.hu"> Email küldése </a> eredménye: Email küldése
* <a href="pic/Lens_orbit.jpg"> <img src="pic/small/Lens_orbit.jpg"> </a> eredménye:
Táblázatok
A táblázat a <table> taggel kezdődik. Ennek paraméterei:
* align: a táblázat igazítása, szintén left, center vagy rigth lehet.
* width: a táblázat szélessége, %-ban vagy képpontban megadva.
* border: a táblázat kerete képpontban megadva.
* bgcolor: a táblázat háttérszíne.
A táblázat sorainak tartalma <tr> (table row) és </tr> tagek között helyezkedik el, a cellák tartalma pedig a <td> (table data) és </td> tagek között. Ennek illusztrálására egy egyszerű példa:
<table bgcolor="lightblue" align="center" width="70%" border=1>
<tr>
<td> 1. sor 1. cella </td>
<td> 1. sor 2. cella </td>
<td> 1. sor 3. cella </td>
</tr>
<tr>
<td> 2. sor 1. cella </td>
<td> 2. sor 2. cella </td>
<td> 2. sor 3. cella </td>
</tr>
<tr>
<td> 3. sor 1. cella </td>
<td> 3. sor 2. cella </td>
<td> 3. sor 3. cella </td>
</tr>
</table>
Eredmény:
1. sor 1. cella 1. sor 2. cella 1. sor 3. cella
2. sor 1. cella 2. sor 2. cella 2. sor 3. cella
3. sor 1. cella 3. sor 2. cella 3. sor 3. cella
Z-index
Az egymást takaró elemek láthatóságát alapértelmezetten a HTML-kódban elfoglalt sorrendjük határozza meg. A kódban később található HTML elem eltakarja az előzőeket.
A láthatósági sorrend módosítható a z-index tulajdonság segítségével. A z-index növelésével adott elem (a z-tengely mentén) közelíthető a látogató felé. Eltakarja a kisebb z-indexszel rendelkező elemeket.
A z-index csökkentésével az adott elem távolítható. Ilyenkor a többi elem takarásába kerül.
Lebegés (float) és tisztítás (clear)
float: Egy kép körbevétele szöveggel egyszerűbben nem is mehet, mint a float elem. A lenti példában egy jobb oldalon lévő képet írunk körbe szöveggel:
img {
float: right;
margin: 0 0 10px 10px;
}
Megjegyzés: nagyon erősen javasolt a kép pontos méreteinek megadása már a HTML-kódban!
clear: A képet (vagy egyéb elemet) körbevevő szöveg tulajdonságainak megadása. Lásd: htmlpelda44.html.
Clear
clearfix: Ha egy belső elem magasabb, mint az őt tartalmazó, akkor érdemes használni a clearfix-et ami felülírja a tartalmazó elem méreteit az „overflow: auto;” segítségével. Példa:
.clearfix {
overflow: auto;
}
A visibility
A visibility tulajdonság segítségével az elemek láthatóságát állíthatjuk be.
Értékek:
hidden: láthatatlanná teszi az elemet. Ügyeljünk arra, hogy attól, hogy az elem láthatatlanná válik, az oldal elrendezésére még hatással lesz, a helyét a böngésző ki fogja hagyni. Ha nem ez a célunk, hanem az elem teljes eltüntetése, akkor a display:none; beállítást kell alkalmaznunk.
visible: láthatóvá teszi az elemet.
inherit: az érték a szülő elemtől öröklődik.
Tábla elemekre alkalmazva a collapse érték eltüntet egy sort vagy oszlopot anélkül, hogy a tábla megjelenése megváltozna. Ekkor a sor vagy oszlop által elfoglalt hely más tartalom számára rendelkezésre áll. Ez az érték a nem tábla elemeken hidden értékként funkcionál.
A visibility tulajdonságok értékei öröklődnek.
Forrás;
https://tferi.hu/weblapkeszites-html-alapokon-1/css-4-resz?showall=&start=3
http://tamop412.elte.hu/tananyagok/weblapkeszites/lecke15_lap2.html
http://info.berzsenyi.hu/halozatok/weblapok-formazasa-css-segitsegevel
http://atomfizika.elte.hu/informatika/docs/html
http://www.w3schools.com/html/
http://www.w3schools.com/css/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://atomfizika.elte.hu/informatika/docs/html#test
http://atomfizika.elte.hu/informatika/docs/html#keret
http://atomfizika.elte.hu/informatika/docs/html#html
http://atomfizika.elte.hu/informatika/docs/html#css
http://atomfizika.elte.hu/informatika/docs/html#style
http://atomfizika.elte.hu/informatika/docs/html#hexa
HTML fájlok szerkezete
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
<title>Oldal címe</title>
</head>
<body>
<h1>Címsor</h1>
<p>Bekezdés</p>
</body>
</html>
HTML és CSS szintaxis ellenőrzése
A weboldalunk kódját a következő oldalakon ellenőrizhetjük:
1. HTML: http://validator.w3.org/
2. CSS: http://jigsaw.w3.org/css-validator/
Ha az oldalunk helyes, az alábbi módon egy erre utaló "pecsétet" tehetünk rá, amelyre kattintva bárki láthatja, tényleg jó-e a szintaxisunk:
1. HTML: <a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-html401.png" alt="Valid HTML4"></a>
2. CSS: <a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="http://www.w3.org/Icons/valid-css.png" alt="Valid CSS"></a>
3. Ezek a következőképpen néznek majd ki:
HTML címkék
Főcím <h1></h1>
Alcím <h2></h2>
Bekezdés <p></p> vagy <div></div>
Sortörés <br> (nincs záró címke!)
Beillesztett kép <img src="kep.png" alt="leírás"> (1: Nincs záró címke! 2: A képet ugyanabban a könyvtárban kell elhelyezni.)
Külső/belső link <a href="http://elte.hu">szöveg</a>, <a href="fajl.html">szó</a>
Hivatkozási pont (#name) <a name="pont"></a>
Számozott lista <ol>
<li>Valami</li>
<li>Valami2</li>
</ol>
Számozatlan lista <ul>
<li>Valami</li>
<li>Valami2</li>
</ul>
Táblázat <table>
<tr><td>Bal fent</td><td>Jobb fent</td></tr>
<tr><td>Bal lent</td><td>Jobb lent</td></tr>
</table>
Űrlap <form name="input" action="oldal.html" method="get">
<label>Vezetéknév</label>
<input type="text" name="vnev">
<label>Keresztnév</label>
<input type="text" name="knev">
<input type="submit" value="Mehet">
</form>
Stílustulajdonságok
Adott elem stílusának megadása: <div style=" ... ">szöveg...szöveg</div>
Szín color: red; vagy color: #ff00ff;
Háttérszín background: blue; vagy background: #00ff00;
Háttérkép background-image: url('kepfajl.png');
Keret border-style:solid/dashed/dotted;
border-width:5px; border-color:black;
Méret width: 10px; height: 100px;
Betűtípus font-family: Arial/Courier/Times
font-size: 12px; font-style: italic;font-weight: bold;
Margó/behúzás margin: 10px; padding: 20px;
Szöveg igazítása text-align: center/right/justify;
Kép középre igazítása display: block; margin-left: auto; margin-right: auto;
Úsztatás float: right/left;
Stílustulajdonságok megadása CSS fájlban
Készíteni kell egy valami.css nevű fájlt, és a HTML fájl fejlécét így kell módosítani, hogy tudjon az elkészített valami.css fájlról (csak a módosítandó sort írtam vastag piros betűvel)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2">
<link rel="stylesheet" href="valami.css" type="text/css">
<title>Oldal címe</title>
</head>
A CSS fájl (valami.css) tartalma a következőhöz hasonló lehet:
body {
background: #ff0ff0;
color: #00ff00;
}
h1 {
background: #00ff00;
color: #ff0ff0;
}
a {
text-decoration: none;
font-weight: bold;
background: #00ff00;
color: #ff0ff0;
}
a:hover {
background: #ff0ff0;
color: #00ff00;
}
.kiemeles {
color: red;
background: yellow;
}
• 1. megjegyzés: az utolsó előtti elem (a:hover { ... }) azt a lehetőséget mutatja, hogy ha felhasználó az egérrel a link fölé megy, arra az esetre más stílust is meg lehet adni. Ez a gyakran használt stílus-elem a linkek kiemelését segíti.
• 2. megjegyzés: az utolsó elem (.kiemeles { ... } - figyeljünk a kezdő pontra) azt jelenti, hogy ezt a stílust (piros betű, sárga háttér) bármely elemre alkalmazhatjuk az oldalunkon. Tegyük fel, hogy egy adott szöveget ezzel a stílussal akarunk ellátni (kiemelni), ezt a következőképpen tehetjük meg a HTML fájlban:
<p class="kiemeles">Szöveg ... szöveg ... </p>
Ha csak a szöveg egy részére akarjuk alkalmazni:
<p>Normál szöveg ... <span class="kiemeles">kiemelt szó</span> ... </p>
Hasonlóképpen bármely CSS stíluselemet megadhatunk a fenti módon, és alkalmazhatjuk azt egy tetszőleges HTML elemre.
Nincsenek megjegyzések:
Megjegyzés küldése