A MathWikiből

(Változatok közti eltérés)

Ugrás: navigáció, keresés

A lap 2006. december 11., 12:24-kori változata

Tartalomjegyzék

1 Ez egy fontos címsor
- 1.1 Ez már nem annyira
2 Ez egy fontos címsor
- 2.1 Ez már nem annyira
3 Ez egy fontos címsor

Ez egy fontos címsor

Ez már nem annyira

Ez pedig a legkevésbé fontos

</pre> </blockquote>

Minden bekezdést a paranccsal kezdünk, és a paranccsal zárunk le.

<p>Ez egy bekezdés.</p>
<p>Ez itt egy másik.</p>

Sortörés

Ha szövegünkben sortörést szeretnénk kikényszeríteni, használhatjuk a parancsot. (Ügyeljünk arra, hogy - mivel ennek a parancsnak sincs lezáró tagja, ne felejtsük el a "/"-jelet!)

Ebben a sorban itt<br/> egy sortörés lesz.

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 és parancsok közé írjuk.

Ebben a szövegben <em>ez a néhány szó</em> ki lesz emelve.

Képek beillesztése

Képeket az <img> 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:

<img src="kutya.jpg" width="300" height="150" alt="Ez egy kutya"/>

(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):

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.

Elõformázott szöveg

Ha azt szeretnék, hogy pontosan úgy jelenjen meg a szöveg, ahogy azt mi beírtuk, érdemes a <pre>...</pre> parancsok közé írnunk. Például akkor, ha egy ehhez hasonló programkód-mintát szeretnénk megjeleníteni:

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:

Táblázat készítése

Táblázatot a ...

parancs segítségével készíthetünk. Egy egyszerû példa:

<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>

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.

Ez egy fontos címsor

Ez már nem annyira

Ez pedig a legkevésbé fontos

</pre> </blockquote>

Minden bekezdést a paranccsal kezdünk, és a paranccsal zárunk le.

<p>Ez egy bekezdés.</p>
<p>Ez itt egy másik.</p>

Sortörés

Ha szövegünkben sortörést szeretnénk kikényszeríteni, használhatjuk a parancsot. (Ügyeljünk arra, hogy - mivel ennek a parancsnak sincs lezáró tagja, ne felejtsük el a "/"-jelet!)

Ebben a sorban itt<br/> egy sortörés lesz.

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 és parancsok közé írjuk.

Ebben a szövegben <em>ez a néhány szó</em> ki lesz emelve.

Képek beillesztése

Képeket az <img> 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:

<img src="kutya.jpg" width="300" height="150" alt="Ez egy kutya"/>

(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):

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.

Elõformázott szöveg

Ha azt szeretnék, hogy pontosan úgy jelenjen meg a szöveg, ahogy azt mi beírtuk, érdemes a <pre>...</pre> parancsok közé írnunk. Például akkor, ha egy ehhez hasonló programkód-mintát szeretnénk megjeleníteni:

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:

Táblázat készítése

Táblázatot a ...

parancs segítségével készíthetünk. Egy egyszerû példa:

<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>

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.

Ez egy fontos címsor

Ez már nem annyira

Ez pedig a legkevésbé fontos

</pre> </blockquote>

Minden bekezdést a paranccsal kezdünk, és a paranccsal zárunk le.

<p>Ez egy bekezdés.</p>
<p>Ez itt egy másik.</p>

Sortörés

Ha szövegünkben sortörést szeretnénk kikényszeríteni, használhatjuk a parancsot. (Ügyeljünk arra, hogy - mivel ennek a parancsnak sincs lezáró tagja, ne felejtsük el a "/"-jelet!)

Ebben a sorban itt<br/> egy sortörés lesz.

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 és parancsok közé írjuk.

Ebben a szövegben <em>ez a néhány szó</em> ki lesz emelve.

Képek beillesztése

Képeket az <img> 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:

<img src="kutya.jpg" width="300" height="150" alt="Ez egy kutya"/>

(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):

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.

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.:

Ebben a szövegben a <a name="tartalom">tartalom</a> szót jelöltük meg.

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:

Ha kíváncsi vagy a tartalomjegyzékre, kattints <a href="#tartalom">ide</a>!

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:

Ha <a href="http://www.valaki.hu/#tartalom">ide</a> kattintasz, megtekitheted egy honlap tartalmát.

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 <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> környezetbe foglaljuk:

Ez egy rendezett lista:
<ol>
  <li>az elsõ listaelem</li>
  <li>a második listaelem</li>
  <li>a harmadik listaelem</li>
</ol>

Ez egy rendezetlen lista:
<<ul>
  <li>az elsõ listaelem</li>
  <li>a második listaelem</li>
  <li>a harmadik listaelem</li>
</ul>

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>

Persze a különbözõ listatípusokat kedvünk szerint egymásba is ágyazhatjuk. Például:

<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>

Elõformázott szöveg

Ha azt szeretnék, hogy pontosan úgy jelenjen meg a szöveg, ahogy azt mi beírtuk, érdemes a <pre>...</pre> parancsok közé írnunk. Például akkor, ha egy ehhez hasonló programkód-mintát szeretnénk megjeleníteni:

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:

Táblázat készítése

Táblázatot a ...

parancs segítségével készíthetünk. Egy egyszerû példa:

<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>

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 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 (angol)
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 (haladóbb megoldások)
http://www.w3c.hu/forditasok/sikos/bevezet/style.htm (a stílusok használatáról)

--Szabov 2006. december 10., 17:12 (CET)

@@ 1. sor: / 1. sor: @@
 __TOC__
-==Honlapszerkesztés==
-===Bevezetés===
-Ha az egyetem Matematika Intézetét&#337;l kaptál egy jelszót, azzal együtt honlap is jár. Például, ha a jelszavad "epszilon", akkor a http://www.math.bme.hu/~epszilon lesz a webcímed.
-===Az elsõ lépés===
-Mielõtt honlapot kezdenénk szerkeszteni, elõször hozzunk létre a saját mappánkban egy public_html nevû almappát, és azon belül egy index.html nevû fájlt (ha még nincsen). Sok szövegszerkesztõt használhatunk a honlapunk elkészítéséhez. (Én az [http://www.gnu.org/software/emacs/emacs.html Emacs] nevût ajánlom). Például a honlapunk kinézhet valahogy így is:
-<blockquote>
-<pre>
-<html>
-Ide írhatsz néhány sort magadról.
-Ide beilleszthetsz egy képet.
-Ide jöhet egy hivatkozás.
-</html>
-</pre>
-</blockquote>
-Az alábbiakban arról lesz szó, hogy hogyan tudjuk mindezt véghezvinni. El&#337;tte azonban fontos szót ejtenünk egy fontos dologról.
-===Olvasási jog megadása===
-El&#337;fordulhat, hogy hiába készítettük el a honlapunkat, de nem lesz látható a világhálón, mert nem adtunk rá olvasási jogot. Ezt a problémát a következ&#337;képp orvosolhatjuk:
-Lépjünk be a terminálablakba, és gépeljük be az alábbi három parancssort:
-<blockquote>
-<pre>
-chmod "a+x" ~
-chmod "a+x" ~/public_html
-chmod "a+r" ~/public_html/index.html
-</pre>
-</blockquote>
-Megjegyzés: minden fájl, kép, ill. másik honlap olvasási jogának megadásához az "a+r" parancsot használjuk.
-===Cím, címsorok, bekezdések===
-A címet a <nowiki><title> és a </title></nowiki> parancs közé írva adhatjuk meg a következõképpen (egyébként a legtöbb utasítást a <nowiki><parancs> és </parancs></nowiki> közé kell írni):
-<blockquote>
-<pre>
-<title>Ide jön a cím</title>
-</pre>
-</blockquote>
-A HTML-ben összesen 6 különbözõ szintû címsort írhatunk, kezdve a legfontosabbtól a legkevésbé fontosig. Mindezt a <nowiki><h1>, <h2>,...<h6></nowiki> parancsokkal érhetjük el (persze itt se feledkezzünk el a parancsot lezáró <nowiki></h1> stb. </h6></nowiki>-ról! Példa:
-<blockquote>
-<pre>
 <h1>Ez egy fontos címsor</h1>
 <h2>Ez már nem annyira</h2>

Honlapszerkesztés

A lap 2006. december 11., 12:24-kori változata

Tartalomjegyzék

Ez egy fontos címsor

Ez már nem annyira

Ez pedig a legkevésbé fontos

Sortörés

Kiemelés

Képek beillesztése

Hivatkozások

Hivatkozás külsõ webhelyre

Elõformázott szöveg

Táblázat készítése

Ez egy fontos címsor

Ez már nem annyira

Ez pedig a legkevésbé fontos

Sortörés

Kiemelés

Képek beillesztése

Hivatkozások

Hivatkozás külsõ webhelyre

Elõformázott szöveg

Táblázat készítése

Ez egy fontos címsor

Ez már nem annyira

Ez pedig a legkevésbé fontos

Sortörés

Kiemelés

Képek beillesztése

Hivatkozások

Hivatkozás külsõ webhelyre

Hivatkozás weblap közepére

Felsorolás-típusok

Elõformázott szöveg

Táblázat készítése

Érvényesítés

Egyéb weboldalak

Nézetek

Személyes eszközök

Navigáció

Keresés

Eszközök