|
|
1. sor: |
1. sor: |
| __TOC__ | | __TOC__ |
− |
| |
− |
| |
− |
| |
− | <h1>Ez egy fontos címsor</h1>
| |
− | <h2>Ez már nem annyira</h2>
| |
− | <h6>Ez pedig a legkevésbé fontos</h6>
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | Minden bekezdést a <nowiki><p> paranccsal kezdünk, és a </p></nowiki> paranccsal zárunk le.
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | <p>Ez egy bekezdés.</p>
| |
− | <p>Ez itt egy másik.</p>
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | ===Sortörés===
| |
− |
| |
− | Ha szövegünkben sortörést szeretnénk kikényszeríteni, használhatjuk a <nowiki><br/></nowiki> parancsot. (Ügyeljünk arra, hogy - mivel ennek a parancsnak sincs lezáró tagja, ne felejtsük el a "/"-jelet!)
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | Ebben a sorban itt<br/> egy sortörés lesz.
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | ===Kiemelés===
| |
− |
| |
− | A HTML-ben egyszerűen úgy végezhetjük el a kiemelést, ha a hangsúlyozni kívánt szövegrészt a <nowiki><em> és </em></nowiki> parancsok közé írjuk.
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | Ebben a szövegben <em>ez a néhány szó</em> ki lesz emelve.
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | ===Képek beillesztése===
| |
− |
| |
− | Képeket az <nowiki><img></nowiki> paranccsal illeszthetünk be. Az "src" nevű parancs után írjuk a kép pontos nevét (ha nem a saját public_html mappánkban van, akkor az elérési utat is), a kép szélességét, magasságát (képpontokban mérve), és egy "alt" nevű parancs után adjunk egy rövid címet a képünknek. Ez utóbbi azért fontos, mert így azok is kapnak információt a képről, akik nem látják (mert pl. mobilon böngésznek).
| |
− |
| |
− | Íme egy példa a saját mappánkban lévő, 300x150 képpontú kutya.jpg nevű fájl beillesztésére:
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | <img src="kutya.jpg" width="300" height="150" alt="Ez egy kutya"/>
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | (Megjegyzés: a parancs végén lévő /-jel azért szükséges, mert az "img" parancsnak - a szokásostól eltérően - nincs lezáró tagja.)
| |
− |
| |
− | ===Hivatkozások===
| |
− |
| |
− | A honlapunkon alapvetően kétféle hivatkozástípust különböztetünk meg. Hivatkozhatunk:
| |
− |
| |
− | #külső webhelyre
| |
− | #weblap közepére
| |
− |
| |
− | ====Hivatkozás külső webhelyre====
| |
− |
| |
− | Ezt a <a> kezdetű paranccsal végezhetjük el. Ha egy, a saját mappánkban lévő weblapra hivatkozunk, elég a fájl nevét feltüntetnünk, de ha egy másik weblapra, meg kell adnunk a teljes webcímet. A <a>, </a> parancsok közé pedig a hivatkozás feliratát írjuk a következőképpen (ez, mint látni fogjuk, nem csak szöveg, hanem kép is lehet):
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | Ez egy link <a href="teszt.html>egy belső honlapra</a> mutat.
| |
− | Ez pedig egy <a href="http://www.kulso.hu>másik weblapra</a>.
| |
− | Erre a képre kattintva <a href="http://www.bme.hu><img src="bme.gif" alt="bme"></a> a BME honlapjára jutsz.
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | ====Hivatkozás weblap közepére====
| |
− |
| |
− | Ahhoz, hogy a saját weblapunkon belüli hivatkozást létrehozzunk, előbb meg kell jelölnünk a szövegben egy helyet, ahova szeretnénk, hogy a link mutasson. Ezt úgy tehetjük meg, hogy az adott részt a <a name="azonosító">...</a> parancs közé zárjuk. Pl.:
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | Ebben a szövegben a <a name="tartalom">tartalom</a> szót jelöltük meg.
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | Később, a weblap tetszőleges részén elhelyezhetünk egy linket a "href" paranccsal, ami az azonosítóval ellátott szövegrészre mutat:
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | Ha kíváncsi vagy a tartalomjegyzékre, kattints <a href="#tartalom">ide</a>!
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | Ha ez a célszövegrész nem ugyanazon a weblapon van, akkor a parancsot ki kell egészíteni az azonosító elérési útjával:
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | Ha <a href="http://www.valaki.hu/#tartalom">ide</a> kattintasz, megtekitheted egy honlap tartalmát.
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | ===Felsorolás-típusok===
| |
− |
| |
− | Alapvetően háromféle típust különböztethetünk meg:
| |
− |
| |
− | #rendezett (ordered),
| |
− | #rendezetlen (unordered) és
| |
− | #definíciós lista (definition list).
| |
− |
| |
− | A rendezetlen listát <nowiki><ol>...</ol>, a rendezetlent <ul>...</ul>, továbbá egy adott lista elemeit a <li>...</li> parancsok közé zárjuk. A definíciós listát <dl>-lel kezdjük, </dl>-lel zárjuk le, és a kifejezéseket <dt>...</dt>, a definíciókat <dd>...<dd></nowiki> környezetbe foglaljuk:
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | Ez egy rendezett lista:
| |
− | <ol>
| |
− | <li>az első listaelem</li>
| |
− | <li>a második listaelem</li>
| |
− | <li>a harmadik listaelem</li>
| |
− | </ol>
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | Ez egy rendezetlen lista:
| |
− | <<ul>
| |
− | <li>az első listaelem</li>
| |
− | <li>a második listaelem</li>
| |
− | <li>a harmadik listaelem</li>
| |
− | </ul>
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | Ez pedig egy definíciós lista:
| |
− | <dl>
| |
− | <dt>az első kifejezés</dt>
| |
− | <dd>ennek definíciója</dd>
| |
− |
| |
− | <dt>a második kifejezés</dt>
| |
− | <dd>ennek definíciója</dd>
| |
− |
| |
− | <dt>a harmadik kifejezés</dt>
| |
− | <dd>ennek definíciója</dd>
| |
− | </dl>
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | Persze a különböző listatípusokat kedvünk szerint egymásba is ágyazhatjuk. Például:
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | <ol>
| |
− | <li>az első listaelem</li>
| |
− | <li>
| |
− | a második listaelem
| |
− | <ul>
| |
− | <li>az első beágyazott elem</li>
| |
− | <li>a második beágyazott elem</li>
| |
− | </ul>
| |
− | </li>
| |
− | <li>a harmadik listaelem</li>
| |
− | </ol>
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | ===Előformázott szöveg===
| |
− |
| |
− | Ha azt szeretnék, hogy pontosan úgy jelenjen meg a szöveg, ahogy azt mi beírtuk, érdemes a <nowiki><pre>...</pre></nowiki> parancsok közé írnunk. Például akkor, ha egy ehhez hasonló programkód-mintát szeretnénk megjeleníteni:
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | HAT := proc(x)
| |
− | if type(x, numeric) then
| |
− | if x<=0 then 0;
| |
− | elif x<=1 then x;
| |
− | elif x<=2 then 2-x;
| |
− | else 0;
| |
− | fi;
| |
− | else
| |
− | 'HAT'(x);
| |
− | fi;
| |
− | end:
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | ===Táblázat készítése===
| |
− |
| |
− | Táblázatot a <table>...</table> parancs segítségével készíthetünk. Egy egyszerű példa:
| |
− |
| |
− | <blockquote>
| |
− | <pre>
| |
− | <table border="1" cellpadding="10" cellspacing="10" width="80%">
| |
− | <tr><th>Év</th><th>Eladások</th></tr>
| |
− | <tr><td>2000</td><td>18M Ft</td></tr>
| |
− | <tr><td>2001</td><td>25M Ft</td></tr>
| |
− | <tr><td>2002</td><td>36M Ft</td></tr>
| |
− | </table>
| |
− | </pre>
| |
− | </blockquote>
| |
− |
| |
− | A "border" attribútum a keretszélességet adja meg pixelben. A "tr" elemmel a táblázat sorait különíthetjük el egymástól, a "th" a címsorok, a "td" az adatcellákat különbözteti meg. A "cellpadding" attribútummal a cella tartalma és a cellák széle közti, míg a "cellspacing"-gel az egyes cellák közti távolságot adhatjuk meg. A "width" paranccsal a cellák méreteit arányosan tudjuk változtatni.
| |
− |
| |
− | ==Érvényesítés==
| |
− |
| |
− | Fontos, hogy miután elkészítettük honlapunkat, ellenőriztessük a [http://validator.w3.org W3C] hivatalos oldalán tehetjük meg úgy, hogy megadjuk a weblapunk hivatalos elérési útját. Az esetleges hibák kijavítása után büszkén kitehetjük a cég logóját a honlapunkra (a validátor segít ebben).
| |
− |
| |
− | ==Egyéb weboldalak==
| |
− |
| |
− | Ha felkeltette az érdeklődésed a honlapszerkesztés, látogass el a következő honlapokra:
| |
− |
| |
− | *[http://www.w3schools.com/ http://www.w3schools.com] (angol)
| |
− | *[http://www.w3c.hu/forditasok/sikos/bevezet/start.htm http://www.w3c.hu/forditasok/sikos/bevezet/start.htm] (magyar - nagyjából ez e cikk forrása is...)
| |
− | *[http://www.w3c.hu/forditasok/sikos/bevezet/advanced.htm http://www.w3c.hu/forditasok/sikos/bevezet/advanced.htm] (haladóbb megoldások)
| |
− | *[http://www.w3c.hu/forditasok/sikos/bevezet/style.htm http://www.w3c.hu/forditasok/sikos/bevezet/style.htm] (a stílusok használatáról)
| |
− |
| |
− | --[[User:Szabov|Szabov]] 2006. december 4., 17:37 (CET)
| |