keszites.com

Grafikai tervezés  -  Webdesign  -  Honlapkészítés | Websablon | Wordpress

Grafika Online Színkör Tervező Weblap kód Designer Fontpár Tervező



HTML trükkök

Kategóriák : HTML, HTML5

HTML trükkök – tutorial




• Bevezető
HTML-ben olyan technikákat mutatok meg, amelyekre ritkábban vagy gyakorta szükségünk van, hogy megfelelő honlapokat készíthessünk.

• HTML szerkesztő – editor
HTML programunkat szerkeszthetjük egy editor IDE használatával. A célnak kitűnően megfelel http://www.pspad.com/ oldalról letölthető editor. Többféle programozási nyelvet támogat, webfejlesztésre abszolút megfelelő.

• Szintaktika
A HTML nyelvben tagokat használunk a programkód megírása során. Egy nyitó elemet egy záró elemnek kell követnie, de nem minden nyitó elemnek van egy záró tagja. Ez utóbbi tag például a
<img border=0 src=”kép.jpg” />. A tag ” />”-ra végződik, amely azt jelöli, hogy egyedül szerepel, párja nincsen.
Egy egyszerű HTML forrás fájl így néz ki : <html><body> Weblap törzse…</body></html>

• Táblázatok – a weboldal tagolása
Hogy minden pontosan tagolható legyen az oldalon, használjunk táblázatokat. A táblázatnak vannak sorai és oszlopai. Három hasábos weboldal esetén a program elejére és végére rakhatjuk a táblázatot, amely körülfogja az összes kódot. A tagokat egymásba ágyazhatjuk, tehát ez azt jelenti, hogy egy táblázatban akármennyi táblázatot deklarálhatunk. Cellákat egyesítéséhet a táblázat, ha colspan=2 rowspan=2 paramétereket használjuk. Az előző esetben egy olyan cellát deklarálunk, ahol a oszlopok száma kettő, illetve a sorok száma kettő. Igényeink szerint építhetjük egymásba a táblázatokat :

<table border=0 cellspacing=0 cellpadding=0>
  <tr>
   <td>
    <table border=0 cellspacing=0 cellpadding=0>
     <tr>
      <td>
      Egymásba ágyazott elemek
      </td>
     </tr>
    </table>
   </td>
  </tr>
</table>


• Formázás – CSS a forráskódban
CSS formázást a style paraméterben adhatjuk meg, közvetlenül a HTML kódban. Utoljára kerülnek kiértékelésre style paraméterben megadott értékek a CSS formázások közül. Következésképpen, ha egy tagra előírtunk formázást egy CSS állományban, akkor a style paraméterben felvett attribútum felülírja a CSS fájlban beállított értéket. A style-ban pontosvesszővel választjuk el az attribútumokat egymástól. <input type=”text” id=”input1″ name=”input1″ value=”” style=”width: 200px; color: #888888;” />


• Különböző böngészők
Érdemes a kész programot több böngészőn lefuttatni. Különösen ajánlott megnézni Internet Explorer és Firefox alatt. Javaslom még az Opera böngészőt is, mivel utóbbi beépíthető a mobiltelefon készülékekbe is. Ha weboldalunk formázásában mind a 3 böngészőn eltérés nem mutatkozik, akkor a forráskód megjelenítése is nagyjából egyezni fog. Ajánlott minden elemre előírni az id és a name paramétereket, mivel egy javascript forráskód értelmezésében altérések adódhatnak, ha weboldalunkon javascriptet alkalmazunk.

• CSS trükk – kép ismétlése háttérként
.leftsideimg {
background-position: right top;
background-image:url(„img/brt1_40.jpg”);
background-color : #6be0ea;
background-repeat: repeat-y;
}
Ezzel a class állománnyal beállítjuk egy kép darabját az elfoglalt terület jobb széléhez, és azt y irányban megismételjük. A kép részlete lehet egy csík vagy egy színátmenetes kép, amelyet y irányban ismétlünk. Ezt a trükköt a http://www.agytrubo.eu oldalon láthatjuk. Az egész oldal egy táblázat, amelynek középső oszlopa a képernyő felbontásától függetlenül mindig középre igazodik. Bal és jobb szélen pedig a megadott CSS formázással színátmenetet képezünk. A színátmenet szélének színét pedig background-color-ként állítjuk be.

• INPUT lista mező
<select class=reginpt size=”10″>
Ha a legördülő listának vagy más néven combobox-nak size paramétert adunk, amellyel megadjuk, hogy listadobozunk hány soros legyen, akkor ez a legördülő lista egy sima lista dobozzá alakul.


Weblap kód Designer