Honlapszerkesztés

A MathWikiből
(Változatok közti eltérés)
(Honlapszerkesztés)
 
(3 szerkesztő 20 közbeeső változata nincs mutatva)
1. sor: 1. sor:
Szerkesztés alatt...
+
==Honlapszerkesztés==
  
__TOC__
+
===Bevezetés===
  
 +
Ha az egyetem Matematika Intézetétől kaptál egy felhasználói nevet és jelszót, azzal együtt honlap is jár. Például, ha a felhasználói neved "epszilon", akkor a http://www.math.bme.hu/~epszilon lesz a webcímed.
  
 +
===Az első lépés===
  
<h1>Ez egy fontos címsor</h1>
+
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:
 
+
 
+
<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>
 
<blockquote>
 
<pre>
 
<pre>
<p>Ez egy bekezdés.</p>
+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//HU">
<p>Ez itt egy másik.</p>
+
<html>
</pre>
+
<head>
</blockquote>  
+
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
 
+
<title>Ez XY honlapja, ez kerül a böngésző címsorába</title>
<blockquote>
+
</head>
<pre>
+
Ide írhatsz néhány sort magadról.<br>
 
+
Ide beilleszthetsz egy képet, például <img src="kep.jpeg"><br>
 +
Ide jöhet egy hivatkozás, például egy másik oldalra: <a href="http://www.google.com">A legismerebb kereső</a><br>
 +
</html>
 
</pre>
 
</pre>
 
</blockquote>
 
</blockquote>
  
<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.
<pre>
+
  
</pre>
+
===Olvasási jog megadása===
</blockquote>
+
  
<blockquote>
+
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:
<pre>
+
Lépjünk be a terminálablakba, és gépeljük be az alábbi három parancssort:
 
+
</pre>
+
</blockquote>
+
  
 
<blockquote>
 
<blockquote>
 
<pre>
 
<pre>
 
+
chmod "a+x" ~
 +
chmod "a+x" ~/public_html
 +
chmod "a+r" ~/public_html/index.html
 +
chmod "a+r" ~/public_html/kep.jpeg
 
</pre>
 
</pre>
 
</blockquote>  
 
</blockquote>  
  
<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.
<pre>
+
  
</pre>
+
===Cím, címsorok, bekezdések===
</blockquote>
+
  
<blockquote>
+
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):
<pre>
+
 
+
</pre>
+
</blockquote>  
+
  
 
<blockquote>
 
<blockquote>
 
<pre>
 
<pre>
 
+
<title>Ide jön a cím</title>
 
</pre>
 
</pre>
 
</blockquote>  
 
</blockquote>  
  
<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:
<pre>
+
 
+
</pre>
+
</blockquote>  
+
  
 
<blockquote>
 
<blockquote>
 
<pre>
 
<pre>
 
</pre>
 
</blockquote>
 
 
<blockquote>
 
<pre>
 
 
</pre>
 
</blockquote>
 
 
<blockquote>
 
<pre>
 
 
</pre>
 
</blockquote>
 
 
<blockquote>
 
<pre>
 
 
</pre>
 
</blockquote>
 
 
 
<h1>Ez egy fontos címsor</h1>
 
<h1>Ez egy fontos címsor</h1>
 
<h2>Ez már nem annyira</h2>
 
<h2>Ez már nem annyira</h2>
101. sor: 62. sor:
 
</blockquote>  
 
</blockquote>  
  
Minden bekezdést a <nowiki><p> paranccsal kezdünk, és a </p><nowiki> paranccsal zárunk le.
+
 
 +
Minden bekezdést a <nowiki><p> paranccsal kezdünk, és a </p></nowiki> paranccsal zárunk le.
  
 
<blockquote>
 
<blockquote>
110. sor: 72. sor:
 
</blockquote>  
 
</blockquote>  
  
<blockquote>
+
===Sortörés===
<pre>
+
  
</pre>
+
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>
+
  
 
<blockquote>
 
<blockquote>
 
<pre>
 
<pre>
 
+
Ebben a sorban itt<br/> egy sortörés lesz.
 
</pre>
 
</pre>
 
</blockquote>  
 
</blockquote>  
  
<blockquote>
+
===Kiemelés===
<pre>
+
  
</pre>
+
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>  
+
  
 
<blockquote>
 
<blockquote>
 
<pre>
 
<pre>
 
+
Ebben a szövegben <em>ez a néhány szó</em> ki lesz emelve.
 
</pre>
 
</pre>
</blockquote>  
+
</blockquote>
  
<blockquote>
+
===Képek beillesztése===
<pre>
+
  
</pre>
+
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).
</blockquote>  
+
  
<blockquote>
+
Íme egy példa a saját mappánkban lévő, 300x150 képpontú kutya.jpg nevű fájl beillesztésére:
<pre>
+
 
+
</pre>
+
</blockquote>
+
  
 
<blockquote>
 
<blockquote>
 
<pre>
 
<pre>
 
+
<img src="kutya.jpg" width="300" height="150" alt="Ez egy kutya"/>
 
</pre>
 
</pre>
</blockquote>  
+
</blockquote>
  
<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.)
<pre>
+
  
</pre>
+
===Hivatkozások===
</blockquote>
+
  
<blockquote>
+
A honlapunkon alapvetően kétféle hivatkozástípust különböztetünk meg. Hivatkozhatunk:
<pre>
+
  
</pre>
+
#külső webhelyre
</blockquote>
+
#weblap közepére
  
<blockquote>
+
====Hivatkozás külső webhelyre====
<pre>
+
  
</pre>
+
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>  
+
  
 
<blockquote>
 
<blockquote>
 
<pre>
 
<pre>
 
+
Ez egy link <a href="teszt.html>egy belső honlapra</a> mutat.
</pre>
+
Ez pedig egy <a href="http://www.kulso.hu>másik weblapra</a>.
</blockquote>  
+
Erre a képre kattintva <a href="http://www.bme.hu><img src="bme.gif" alt="bme"></a> a BME honlapjára jutsz.
 
+
<blockquote>
+
<pre>
+
 
+
 
</pre>
 
</pre>
 
</blockquote>
 
</blockquote>
  
<h1>Ez egy fontos címsor</h1>
+
====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.:
<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>
 
<blockquote>
 
<pre>
 
<pre>
<p>Ez egy bekezdés.</p>
+
Ebben a szövegben a <a name="tartalom">tartalom</a> szót jelöltük meg.
<p>Ez itt egy másik.</p>
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
 
</pre>
 
</pre>
 
</blockquote>
 
</blockquote>
  
<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:
<pre>
+
 
+
</pre>
+
</blockquote>
+
  
 
<blockquote>
 
<blockquote>
 
<pre>
 
<pre>
 
+
Ha kíváncsi vagy a tartalomjegyzékre, kattints <a href="#tartalom">ide</a>!
 
</pre>
 
</pre>
</blockquote>  
+
</blockquote>
  
<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:
<pre>
+
 
+
</pre>
+
</blockquote>
+
  
 
<blockquote>
 
<blockquote>
 
<pre>
 
<pre>
 
+
Ha <a href="http://www.valaki.hu/#tartalom">ide</a> kattintasz, megtekitheted egy honlap tartalmát.
 
</pre>
 
</pre>
</blockquote>  
+
</blockquote>
  
<blockquote>
+
===Felsorolás-típusok===
<pre>
+
  
</pre>
+
Alapvetően háromféle típust különböztethetünk meg:
</blockquote>
+
  
<blockquote>
+
#rendezett (ordered),
<pre>
+
#rendezetlen (unordered) és
 +
#definíciós lista (definition list).
  
</pre>
+
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>  
+
  
 
<blockquote>
 
<blockquote>
 
<pre>
 
<pre>
 
+
Ez egy rendezett lista:
</pre>
+
<ol>
</blockquote>  
+
  <li>az első listaelem</li>
 
+
  <li>a második listaelem</li>
<blockquote>
+
  <li>a harmadik listaelem</li>
<pre>
+
</ol>
 
+
</pre>
+
</blockquote>  
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>  
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>  
+
 
+
<blockquote>
+
<pre>
+
 
+
 
</pre>
 
</pre>
 
</blockquote>
 
</blockquote>
 
<h1>Ez egy fontos címsor</h1>
 
 
 
<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>
 
<blockquote>
 
<pre>
 
<pre>
<p>Ez egy bekezdés.</p>
+
Ez egy rendezetlen lista:
<p>Ez itt egy másik.</p>
+
<<ul>
</pre>
+
  <li>az első listaelem</li>
</blockquote>  
+
  <li>a második listaelem</li>
 
+
  <li>a harmadik listaelem</li>
<blockquote>
+
</ul>
<pre>
+
 
+
 
</pre>
 
</pre>
 
</blockquote>
 
</blockquote>
298. sor: 185. sor:
 
<blockquote>
 
<blockquote>
 
<pre>
 
<pre>
 +
Ez pedig egy definíciós lista:
 +
<dl>
 +
  <dt>az első kifejezés</dt>
 +
  <dd>ennek definíciója</dd>
  
</pre>
+
  <dt>a második kifejezés</dt>
</blockquote>  
+
  <dd>ennek definíciója</dd>
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
  
 +
  <dt>a harmadik kifejezés</dt>
 +
  <dd>ennek definíciója</dd>
 +
</dl>
 
</pre>
 
</pre>
 
</blockquote>
 
</blockquote>
  
<h1>Ez egy fontos címsor</h1>
+
Persze a különböző listatípusokat kedvünk szerint egymásba is ágyazhatjuk. Például:
<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>
 
<blockquote>
 
<pre>
 
<pre>
<p>Ez egy bekezdés.</p>
+
<ol>
<p>Ez itt egy másik.</p>
+
  <li>az első listaelem</li>
</pre>
+
  <li>
</blockquote>  
+
    a második listaelem
 
+
    <ul>
<blockquote>
+
      <li>az első beágyazott elem</li>
<pre>
+
      <li>a második beágyazott elem</li>
 
+
    </ul>
 +
  </li>
 +
  <li>a harmadik listaelem</li>
 +
</ol>
 
</pre>
 
</pre>
 
</blockquote>
 
</blockquote>
  
<blockquote>
+
===Előformázott szöveg===
<pre>
+
  
</pre>
+
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>  
+
  
 
<blockquote>
 
<blockquote>
 
<pre>
 
<pre>
 
+
HAT := proc(x)
</pre>
+
  if type(x, numeric) then
</blockquote>
+
      if x<=0 then 0;
 
+
      elif x<=1 then x;
<blockquote>
+
      elif x<=2 then 2-x;
<pre>
+
      else 0;
 
+
      fi;
</pre>
+
    else
</blockquote>
+
      'HAT'(x);
 
+
    fi;
<blockquote>
+
end:
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
 
</pre>
 
</pre>
 
</blockquote>
 
</blockquote>
  
<h1>Ez egy fontos címsor</h1>
+
===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:
<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>
 
<blockquote>
 
<pre>
 
<pre>
<p>Ez egy bekezdés.</p>
+
<table border="1" cellpadding="10" cellspacing="10" width="80%">
<p>Ez itt egy másik.</p>
+
<tr><th>Év</th><th>Eladások</th></tr>
</pre>
+
<tr><td>2000</td><td>18M Ft</td></tr>
</blockquote>  
+
<tr><td>2001</td><td>25M Ft</td></tr>
 
+
<tr><td>2002</td><td>36M Ft</td></tr>
<blockquote>
+
</table>
<pre>
+
 
+
 
</pre>
 
</pre>
 
</blockquote>
 
</blockquote>
  
<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.
<pre>
+
  
</pre>
+
==Érvényesítés==
</blockquote>
+
  
<blockquote>
+
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).
<pre>
+
  
</pre>
+
==Egyéb weboldalak==
</blockquote>
+
  
<blockquote>
+
Ha felkeltette az érdeklődésed a honlapszerkesztés, látogass el a következő honlapokra:
<pre>
+
  
</pre>
+
*[http://www.w3schools.com/ http://www.w3schools.com] (angol)
</blockquote>
+
*[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)
  
<blockquote>
+
--[[User:Szabov|Szabov]] 2006. december 13., 09:40 (CET)
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+
 
+
<blockquote>
+
<pre>
+
 
+
</pre>
+
</blockquote>
+

A lap jelenlegi, 2007. február 6., 01:05-kori változata

Tartalomjegyzék

Honlapszerkesztés

Bevezetés

Ha az egyetem Matematika Intézetétől kaptál egy felhasználói nevet és jelszót, azzal együtt honlap is jár. Például, ha a felhasználói neved "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 Emacs nevűt ajánlom). Például a honlapunk kinézhet valahogy így is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//HU">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Ez XY honlapja, ez kerül a böngésző címsorába</title>
</head>
Ide írhatsz néhány sort magadról.<br>
Ide beilleszthetsz egy képet, például <img src="kep.jpeg"><br>
Ide jöhet egy hivatkozás, például egy másik oldalra: <a href="http://www.google.com">A legismerebb kereső</a><br>
</html>

Az alábbiakban arról lesz szó, hogy hogyan tudjuk mindezt véghezvinni. Előtte azonban fontos szót ejtenünk egy fontos dologról.

Olvasási jog megadása

Elő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őképp orvosolhatjuk: Lépjünk be a terminálablakba, és gépeljük be az alábbi három parancssort:

chmod "a+x" ~ 
chmod "a+x" ~/public_html 
chmod "a+r" ~/public_html/index.html
chmod "a+r" ~/public_html/kep.jpeg

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 <title> és a </title> parancs közé írva adhatjuk meg a következőképpen (egyébként a legtöbb utasítást a <parancs> és </parancs> közé kell írni):

<title>Ide jön a cím</title>

A HTML-ben összesen 6 különböző szintű címsort írhatunk, kezdve a legfontosabbtól a legkevésbé fontosig. Mindezt a <h1>, <h2>,...<h6> parancsokkal érhetjük el (persze itt se feledkezzünk el a parancsot lezáró </h1> stb. </h6>-ról! Példa:

<h1>Ez egy fontos címsor</h1>
<h2>Ez már nem annyira</h2>
<h6>Ez pedig a legkevésbé fontos</h6>


Minden bekezdést a <p> paranccsal kezdünk, és a </p> 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 <br/> 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 <em> és </em> 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:

  1. külső webhelyre
  2. 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:

  1. rendezett (ordered),
  2. rendezetlen (unordered) és
  3. 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:

--Szabov 2006. december 13., 09:40 (CET)

Személyes eszközök