HTML dokumentum felépítése <html> a dokumentum kezdete <head> fejléc <title> címmező, a dokumentumnév megadása (titulus) </title> (név) bezárás </head> fejléc bezárása <body> a dokumentum törzsének kezdete (ide kerülnek az utasítások, amelyet a böngésző megjelenít) Azok a parancsok, amelyekről tanulunk, mind ide a törzsbe kerülnek majd. (Csupán a címet kell a címmezőbe írni.) </body> a dokumentum törzsének vége </html> a dokumentum vége, lezárás
Hivatkozás egy html lapra <a href=masodik.html target=”tartalom”>TOVÁBB</a> <a href=2lecke.html target="also"></a> /frame használat esetén/ - a href azt jelenti: kapcsolat - 2lecke.html ahová lépni szeretnék - /a a parancs bezárása Egy dokumentumon belül is ugorhatunk, illetve egy másik dokumentum adott pontjára is ugorhatunk, ha megfelelő címkéket helyezünk el. <a name="CIMKE"> SZÖVEG </a> A "CIMKE" kifejezés egy tetszőleges karakteres kifejezés lehet. A cimkére így hivatkozhatunk. <a href="DOKUMENTUM#CIMKE"> SZÖVEG </a>
Háttérkép beillesztése Pl: a "hatter1.gif" beillesztése a következő: <body background=hatter1.gif> Háttérszín megadása <body bgcolor=yellow>
Színek megadása A színek hatjegyű kódszámát a # - jel után kell írni! Az RGB színvilágot, (azt jelenti, Red-Green-Blue=vörös-zöld-kék,) ami nem azonos a hagyományos festékszínekkel, hatjegyű, 16-os számrendszerbeli számokkal lehet leírni. Többmillió színt lehet így megadni. A tíz számjegyen kívül, (0 - 9) még az a, b, c, d, e, f, betűk használatosak. A három főszín számára két-két karakter áll rendelkezésre. (Így lesz a kód hatjegyű.) Fények esetében a színek legerősebb árnyalata:00, a leggyengébb=ff. (pl: fekete=#000000, fehér=#ffffff, a tűzpiros=#00ffff, a zöld=#ff00ff, a kék=#0000ff) Érdemes kipróbálni, mindenféle számokat, betűket: pl: a #3f90a2 kód... ILYEN... A parancsot így add meg: <body bgcolor=#3f90a2>
Betűk megadása A betűket (font) 3 dolog jellemzi: 1. Típus (face) 2. Méret (size) 3. Szín (color) Parancsa: <font> - </font> 1.) Típus -- Példa: <font face=Times New Roman> - </font> 2.) A betűk méretezését kétféleképpen tehetjük: • a betűnagyság megadásával (pl: font size=4) • (az alapértelmezett) betűméret növelésével (pl: font size=+2) 3.) A betűk színét a már megismert módszerrel adhatjuk meg. Példa: font color=#ff0000 eredménye: piros betűk. Ha a betűk minden tulajdonságát egyszerre szeretnénk megadni, akkor a <font>utasítást elegendő egyszer leírni. Példa: <font face=ARIAL size=+2 color=#33ff88>
Szövegformázás A szövegformázás elemei lehetnek a következők: 1. Fejlécek 2. Szöveg rendezése o jobbra align=right o balra left o középre center 3. Szöveg tagolása o bekezdések <p> o soremelés <br> o szóköz
FEJLÉCEK: Azt is mondhatnánk, főcímek, melyek a lap tetejére (is), középre kerülnek. A HTML-nyelv ebből hatot automatikusan megformáz. A parancs: <h1>, <h2>, <h3>...<h6> illetve azok lezárása, </h1>, </h2>, </h3>...</h6> A h1 a legnagyobb, a h6 a legkisebb betűkkel formáz. A szöveg elrendezése: angol szavakkal kell megadni a parancsokat: <right> <left> <center> és azok lezárása közé írjuk a szöveget. </right> </left> </center> A hosszú, egybefüggő szöveg unalmas és fárasztó, ezért vannak a "tördelő" parancsok: • sortörtés (sor vége, új sor) <br> Nem kell lezárni! • bekezdés <p> Nem kell lezárni! • szóköz egymás után többet beillesztve nő a két szó közti távolság. Nincs "kacsacsőr” és nincs mit lezárni sem!
Számozott sor, lista Ahogy az kitűnik a felsorolásból a HTML-nyelv több "szinten" képes a listát rendezni. Az egyes szintekhez tartozó parancsok a következők: • <ol> számozott sorok • <ul> jelzett sorok • <li> az egyes sorok elemei (nem kell lezárni!) • </ul> jelzett sorok lezárása • </ol> számozott sorok lezárása Arra kell ügyelni a parancsok begépelésénél, hogy a megnyitások sorrendjében zárjuk az utasításokat.
Az elemek egymással tetszőlegesen variálhatók, íme két változat, utána neked kell gyakorolni a listakészítést: Számozott listában jelzett sorok <ol> <li> az első számozott sor <ul> <li> első eleme <li> második eleme <li> harmadik eleme </ul> <li> a második számozott sor <ul> <li> első eleme <li> második eleme <li> harmadik eleme </ul> <li> a harmadik számozott sor </ol> Jelzett listában számozott és jelzett sorok <ul> <li> az első főelem <ol> <li> első számozott sora <li> a második számozott sora <ul> <li> első eleme <li> második eleme </ul> <li> a harmadik számozott sora </ol> <li> a második főelem <li> a harmadik főelem </ul>
Táblázat készítés A táblázat: sorokból és oszlopokból áll. A HTML lap összeállításához pedig elengedhetetlenül szükséges, ha igazán szép, rendezett lapot akarunk készíteni. A kiadandó parancssor a következő: 2 soros - 3 oszlopos tábla (2 X 3) <table width=”800px” border=1> táblázat eleje <tr> a táblázat első sora <td align=center valign=center> az 1. sor első eleme </td> <td bgcolor=yellow> az 1. sor második eleme </td> <td width=100px> az 1. sor harmadik eleme </td> </tr> a táblázat első sorának vége <tr> a táblázat második sora <td> a 2. sor első eleme </td> <td> a 2. sor második eleme </td> <td> a 2. sor harmadik eleme </td> </tr> a táblázat második sorának vége </table> a táblázat vége
További formázó utasítások táblázatra: 1.) A táblázat helyzetét a már ismert left, center, right utasításokkal adhatjuk meg. 2.) Megadhatjuk a táblázat méretét. (általában csak a szélességet szoktuk, a magasság úgyis a tartalomtól függ.) Parancsa: <table width=800> a képenyő teljes szélessége <table width=400> a képenyő szélességének fele ...stb. A HTML dokumentum bármely elemének méretét megadhatod a width=szélesség, ill. a height= hosszúság parancsokkal.
3.) A cellák egymástól való távolságát, illetve a cellabélést. cellspacing= a cellák távolsága cellpadding= a cellabélés (ha meg van adva 2-3 egység a cellabélésre, a betűk nem érnek egészen a cella széléig, és így nem folyik össze az írás.) 4.) Meghatározhatjuk legyn-e keret (border), vagy sem, ha igen milyen széles legyen. border= keret (bordűr) Ha szöveget formázunk táblázattal (hasábokat, bekezdéseket, stb.) a border=0 - át válasszuk, azaz nem fog látszani a táblázat szegélye.
5.) A táblázatnak, vagy egyes celláknak megadhatjuk a háttérszínét. Teljesen ugyanúgy járunk el, mint a törzs (body) hátterénél: Ha az egész táblát színezzük: <table> bgcolor=#...... <table> background= ha a cellát: <td bgcolor=#...... <td background= Ezzel az is láthatóvá vált, hogy az egyes cellákon belül is lehet a betűtípusokat, betűszíneket, formázásokat (jobbra, balra, középre) végrehajtani, mint bárhol a dokumentum törzsében!
<table border=1> <caption>név felül </caption> A táblázatnak nevet is adhatunk, melyet a <caption> </caption> (caption=felirat) szimbólumok közé kell elhelyeznünk. Azt, hogy a név a táblázat alá vagy fölé kerüljön az align=top illetve align=bottom opcióval dönthetjük el. (align=elrendezés, top=felül, bottom=alul). Ha az alignt nem tüntetjük fel, az alaphelyzetben top. Az alábbi példák egy 1x2-es táblázatot állítanak elő alsó és felső feliratozással: <table border=1> <caption>név felül </caption> <tr><td>1. elem</td><td>2. elem</td></tr> </table>
<table border=1> <tr><td>cellaelem</td><td>cellaelem</td></tr> <tr><td align=center>közép</td><td align=right>jobb</td></tr> </table>
<table border=1> <tr><th>1.</th><th>2.</th></tr> <tr><td>cellaelem</td><td>cellaelem</td></tr> </table>
<table border=1> <tr><td>az első cellaelem egy viszonylag hosszú szöveg, így egészen biztosan nem fér el egy sorban</td> <td valign=top>felül</td> <td valign=bottom>alul</td> <td>alaphelyzet</td> </tr> </table>
Képek beillesztése Képeket bárhonnan (CD-ről, az Internetről, scanner-ről...stb.) beilleszthetsz, de előbb MÁSOLD BE a honlapot tartalmazó mappába! A beillesztő parancs nagyon egyszerű: <img src= képfájl (image) beillesztése Például: <center><img src=noci.jpg width=”100px” border=2> height=20% </center>