HTML – fejléc, leírás, kulcsszavak

október 10th, 2009 No comments »

Az oldalunkról megadhatunk  információkat a keresőknek ( Google, Yahoo, Bing, stb… ), hogy milyen az adott oldal témája, mivel foglalkozik és melyek legyenek azok a kulcsszavak, melyeket a látogatónk a keresőbe ír, akkor jó eséllyel a mi oldalunkat dobja elsőnek, ez persze nagyon sok mindentől függ :)
A meta adatokkal megadhatjuk a böngészőnek, hogy a weboldalunk milyen kódolású vagy típusú és még sok kiegészítő információt.
<html>
<head>

<meta name="Keywords" content="kulcsszó1, kulcsszó2, kulcsszó3" />
<meta name="Description" content="Leírás..." />

</head>
<body>
Szöveg…
</body>
</html>

Fontos megjegyezni, hogy ezek a meta adatok csak tájékoztató jellegűek a böngészők és keresőrobotok számára, de mindenképpen fontos, hogy ki legyenek töltve.

HTML – Lista, Űrlap

szeptember 15th, 2009 No comments »

Elérkeztünk ahhoz a fontos részhez amikor is megtanulunk listát készíteni és megjeleníteni a már szépen designolt weboldalunkon egy Listát.
==============
Lista beillesztése:
==============

Definiálása:
<ul>
<li>Tej</li>
<li>Kenyér</li>
<li>Hertz szalámi</li>
</ul>
Az <ul> tag-el jelezzük, hogy itt most bizony egy lista fog következni és a listaelemeket pedig a <li> tag-ek közé helyezzük.
Íme:

  • Tej
  • Kenyér
  • Hertz szalámi

Van lehetőség változtatni a felsorolás szimbólumán is például ha számokkal szeretnénk  akkor:

<ol>
<li>Tej</li>
<li>Kenyér</li>
<li>Hertz szalámi</li>
</ol>

Az eredmény:

  1. Tej
  2. Kenyér
  3. Hertz szalámi

Ha mindez nem elég, akkor definiálhatunk saját listát is:

<dl>
<dt>Tej</dt>
<dd>Mizo</dd>
<dt>Kávé</dt>
<dd>Karaván</dd>
</dl>

Saját kis listánk :->

Tej
Mizo
Kávé
Karaván

==================
Űrlapok beillesztése:
==================

Fontos szerepe van az űrlapoknak abban, hogy interaktívabbá tegyük az oldalunkat és dinamikus tartalmakat készíthessünk. Ezek segítségével küldhet a felhasználó adatokat, melyeket aztán szerver oldalon fel tudunk dolgozni többféleképpen, például PHP segítségével. Nézzünk egy egyszerű és gyakori példát, ahol bekérjük a látogatótól a felhasználónevét és jelszavát. ( hogy ellenőrizzük regisztrált-e már Nálunk. )

Definiálása:
<form>
Felhasználónév:
<input type=”text” name=”username” />
<br />
Jelszó:

<input type=”text” name=”password” />
</form>

És ahogy megjelenik:

Felhasználónév:

Jelszó:

A <form> tagek közé zárjuk az ‘input boxokat’.
Megadhatjuk a típusát is az input boxoknak és ezek határozzák meg a fő megjelenési formát.
A ‘name’ tulajdonság a későbbiekben lesz fontos, mivel ezekkel hivatkozunk az egyes ‘input boxokra’ amikor lekezeljük szerver oldalon a kapott adatokat.
Más típusok:

- Rádió gombok

<form>
<input type=”radio” name=”neme” value=”férfi” /> Férfi
<br />
<input type=”radio” name=”neme” value=”nő” /> Nő
</form>

Férfi


Itt azt a fő különbséget kell észrevenni  – mert még a vak is látja – , hogy megjelent  egy ‘value’ attributum, amivel rögzítettük az értékeket, így csak ki kell választania a kedves látogatónak a megfelelő gombocskát és a hozzá tartozó érték már meg is van.

- Jelölő négyzet

<form>
<input type=”checkbox” name=”neme” value=”férfi” /> Férfi
<br />
<input type=”checkbox” name=”neme” value=”nő” /> Nő
</form>

->

Férfi

Egy kis ízelítőt kaphattatok az űrlapok alapelemeinek létrehozásáról, de a későbbiekben leírom, miként lehet a beírt adatokat elmenteni, felhasználni, hogy valódi űrlapként működjön.
Üdv: Wolfrain ;)

PHP (PHP: Hypertext Preprocessor)

augusztus 27th, 2009 No comments »

A PHP a Programmable Hypertext Preprocesszor rövidítése, de mindenki csak PHP néven ismeri.

A PHP egy szkriptnyelv, mely nyílt forráskódú és legtöbb esetben dinamikus weboldalak, weblapok elkészítésére használják. A program forráskódja a web-server-en értelmeződik és hajtódik végre, ezért a PHP-t általában szerver oldalon használják.

Rasmus Lerdorf alkotta meg a nyelvet 1994-ben, de mára a PHP Group tartja karban, fejleszti és felügyeli.

A PHP-t a mai napig rengetegen használják, bár az újabb programnyelvek megjelenése miatt ez az arány manapság csökken.

A legfrissebb PHP verzió az 5.3.0 verziószámú, mely 2009. június 30-án jelent meg.

Üdv.: Csehpi

HTML – Kép, link és táblázat

augusztus 27th, 2009 No comments »

A következőkben megtanuljuk az <img> tag használatát, aminek segítségével képet illeszthetünk be a weboldalunkba.
==============
Kép beillesztése:
==============

Definiálása:
<img src=”képek/csillag.jpg” alt=”Szép csillag” />
Az src-ben lévő útvonallal hivatkozunk a képre amit meg szeretnénk jeleníteni, a fenti kódban a képek mappában levő csillag nevű és JPG formátumú képet szeretnénk megjeleníteni.
Az alt tulajdonság akkor nyújt segítséget, ha valamilyen oknál fogva nem jelenik meg a képünk és csak egy fehér keret fogadna minket, e helyett az fog megjelenni amit az alt-hoz írtunk:
Szép csillag :
logo
Bővíthetjük az attribútumokat, például a szélesség és a magasság megadásával:

<img src=”képek/csillag.jpg” alt=”Szép csillag” width=”150″ height=”150″/>

==============
Link beillesztése:
==============

Definiálása:
<a href=”http://www.starwebpage.hu“>Ide kattints!</a>

Azt is megadhatjuk, hogy egy másik ablakban ugorjon fel az ablak vagy ugyanazon a lapon maradjon a target attribútummal:
<a href=”http://www.starwebpage.hu
target=”_blank”>Ide kattints!</a>

  • _blank
  • _self
  • _top
  • _parent

Ide kattints!

==================
Táblázat beillesztése:
==================
Definiálása:
<table border=”1″ bgcolor=”green” width=”100″ height=”100″>
<tr>
<td>Első sor, Szöveg 1 </td> <td>Első sor, Szöveg 2 </td>
</tr>
<tr>
<td>Második sor, Szöveg 3 </td> <td>Második sor, Szöveg 4 </td>
</tr>
</table>

A <table> taggel kezdjük és új sort a <tr> -el kezdünk, melybe tetszőleges számú oszlopot tehetünk a <td> taggel.
A fenti példában két sort definiáltam és mindegyik sorban két oszlopot helyeztem el.
A bgcolor tulajdonsággal megadhatjuk a táblázat háttérszínét a width és a height már nem újdonság.
Íme a feni kód:

Első sor, Szöveg 1 Első sor, Szöveg 2
Második sor, Szöveg 3 Második sor, Szöveg 4

Ezekkel az eszközökkel már egész szép és hasznos weblapokat készíthetünk, persze még nagyon sok okosságot találhattok a w3 schools oldalán.
Hamarosan jön az újabb cikk!

Üdv: Wolfrain ;)

HTML – HyperText Markup Language

augusztus 6th, 2009 1 comment »

A legalapvetőbb weboldal készítési eszköz a HTML tag-ek alkalmazása.

Ezekkel készíthetünk egyszerű statikus oldalakat, melyek célja valamilyen tartalom közlése, egy téma, cég, vállalkozás bemutatása. Ezzel olyan weboldalakat tudunk készíteni, melynek tartalmát később csak a HTML kódba “belenyúlva” tudunk módosítani és nincs lehetőség dinamikus felületen keresztül frissíteni a tartalmat.
Használata:

Fontos, hogy a HTML tag-eket szabályosan alkalmazzuk, hiszen így nem érjük el a kívánt hatást. Minden tag-et meg kell nyitni és le is kell zárni. Minden HTML oldalt ez a tag kezdi és zárja keretbe:
Például:    nyitó:  <html>
záró:  </html>

Ezzel meghatározzuk, hogy egy HTML oldalt fogunk készíteni és ezek közé jöhet az oldal tartalma, amit a <body> ( törzs) tag-el kezdünk és bővítjük a kódunkat:

<html>
< body > Ide jön amit látni szeretnénk az oldalon  < /body >
</html>

Természetesen lehetőség van formázni is a bevitt tartalmat, például a Címsoros kiemelés tag-je: <h1> </h1>

<html>
<body><h1> Ide jön amit látni szeretnénk az oldalon </h1></body>
</html>

Ezzel azt érhetjük el, hogy weboldalunkon a kívánt tartalom vastagítottan és nagyobb betűmérettel jelenik meg.
Ha eggyel kisebb címsort szeretnénk alkalmazni, akkor használjuk a <h2> </h2> tag-et.

Bekezdésekre is tagolhatjuk szövegünket, így a kódba a <p> -taget kell beilleszteni

<html>
<body>

<h1> Ide jön amit látni szeretnénk az oldalon </h1>

<p> Új tartalom egy új bekezdésben </p>

</body>
</html>

Középre igazítani és fekete (tetszőleges) háttérszínt beállítani is lehet a weboldalon a következő módosításokkal:

<body> helyett:  <body align=”center” bgcolor=”black”>
Ha ezt a kódot beilleszted egy jegyzettömbe és elmented index.html néven, akkor megjelenik a böngésződben az első általad készített weboldal :)

Itt ellenőrizhetitek le, hogy az általatok készített weboldal Valid, azaz megfelel a HTML szabványnak:
http://validator.w3.org/

Remélem hasznos információkat találtatok itt és sikerült elkészíteni az első oldalatokat.
A  következőkben mélyebben belemegyünk a HTML tag-ek használatába, képet illesztünk az oldalba, táblázatot készítünk, linket helyezünk el az oldalon és még sok mást :)

Üdv:  Wolfrain ;)

Weboldal készítési alapismeretek

július 29th, 2009 No comments »

Hamarosan weblap készítési alapokkal ismertetünk meg Titeket, hogy közelebb kerüljetek a weblap készítés fortélyaihoz és lehetőségeihez. Sajnos mostanában nagyon elfoglaltak vagyunk, de ígérjük bepótoljuk!
A következők várhatók :)

Főbb honlapszerkesztési technikák:

  • HTML, XHTML
  • Cascading Sytle Sheets ( CSS )
  • PHP
  • MYSQL
  • Javascript