Weboldalak készítése
Egy webes feladatot általában nem egyetlen ember készít el. Vannak azok, akik a tartalmi elemeket tudják, a szakértők, vannak, akik az interakcióban jó, ők a webes programozók, és vannak a kinézetért felelősek, ők a webdesignerek. Itt az iskolában nem minden szerepkört tudunk megtanulni, de bepillantást nyerhetünk…
HTML kódolás
A html fájl tartalmazza a tartalmi elemeket. A www.w3.org webcímen a teljes dokumentációt megnézheted, a www.w3schools.com-on egy jó összeállítást, és itt lentebb a minimumot, magyar nyelven.
Főbb HTML kódok
A HTML egy olyan szöveges dokumentum, mely utalásokat tartalmaz más dokumentumokra, és az utasításokat jelölő nyelven közli. Ezeket az angol szakirodalom TAG-eknek hívja. Egy jelölő mindig < jellel kezdődik, és > jellel végződik. A legtöbb jelölőnek (például táblázat, felsorolás, stb…) van kezdete, és vége. A vége ugyanaz a kód, csak / jel előzi meg. Például a bekezdés kódja a P. Ez HTML nyelven tehát így néz ki, ha a “Ez egy bekezdés” szöveget bekezdésben szeretnénk foglalni:
<P> Ez egy bekezdés. </P>
Azoknál a kód elemeknél, melyeknek nincs kezdete és vége, mert a dokumentum egy adott pontjára szúrjuk be (mint például a vízszintes vonal), önmagát záró kódot alkalmazunk. Tehát a HR kód, ami a vízszintes vonalat jelöli így néz ki HTML kódban:
<HR/>
A kódoknál a kis- és nagybetű nem számit. A kódban a többszörös szóközök nem számítanak. A TAB és az Enter nem számít. Ha valaki mindenképpen szóközt szeretne írni, akkor a szóköznek is van külön kódja, ami nem HTML jelölő, hanem csak karakterkód: (Felismerted a non-breaking space -nem törhető szóköz- szavakat, amit a WORD-ben is láthattál a Beszúrás-> Szimbólum -> Speciális karakterek részben?)
| Kód | Mire való |
| <HTML> | Itt kezdődik a HTML oldal |
| <HEAD> | Az oldal azon része, amely általános információkat tartalmaz (pl.lapcím, kódolás, kulcsszavak, …) |
| <TITLE> | Lapcím, mely a böngésző keretén jelenik meg |
| <BODY> | Az oldal azon része, amely megjelenik a böngészőben |
| <P> | Bekezdés |
| <BR/> | Sortörés |
| <H1>…<H6> | Címsor1…Címsor6 |
| <OL> | Számozás |
| <UL> | Felsorolás |
| <LI> | Számozás/felsorolás egy eleme |
| <TABLE> | Táblázat |
| <TR> | Táblázat sora |
| <TD> | Táblázat oszlopa/cellája |
| <TH> | Fejléc cella |
| <IMG/> | Kép. A kép elérését meg kell adni. pl: <IMG SRC=”fenykep.jpg”/> |
| <HR/> | vízszintes vonal |
| <A> | Hivatkozás. A hivatkozás célját meg kell adni, pl: <A HREF=”masiklap.html”>Ugrás a másik lapra! </A> |
| <DIV> | Egy téglalap alakú terület a weblapon |
| <SPAN> | Szöveg megjelölésére szolgál |
CSS kódolás
A .css lap a formázási lehetőségeket tartalmazza. Egy weboldalon egy elem formázását három szinten érhetjük el. Meg tudjuk adni egy külső fájlban (ezt kapjuk a designertől 
), vagy a lapon belül is készíthetünk stílusokat, vagy magát a HTML jelölőt is formázhatjuk. Ez utóbbit mindenképpen kerüljük el. Nem a szakértő feladata a kinézet meghatározása, és utólag sokkal nehezebb javítani.
Stílusok használatánál nem használunk sem szóközt, sem ékezetes karaktereket!
HTML jelölők formázása
Szükség lehet egy lapon minden HTML elem egyidejű formázására. Például elhatározom, hogy minden Címsor1-em középre lesz igazítva. Ilyenkor a H1 tag-et (jelölőt) formázzuk meg:
h1 {
text-align:center
}
Ez ugyanígy működne a P, vagy a TD jelölőkkel is. Ilyenkor a weboldalon az Összes H1-gyel jelölt szöveg (a címsor1-ek) középre igazodnak.
Saját stílus létrehozása
Amennyiben egy stílust . karakterrel kezdünk, saját stílust hozunk létre.
A
.kozepre {
text-align:center
}
egy kozepre nevű stílust hoz létre, amelyet utána tetszőleges blokkra alkalmazhatunk. Amennyiben a HTML oldalunkon egy H1 elemet és egy H2 elemet szeretnénk középre igazítani, akkor azt így tudjuk megtenni.
<H1 class=”kozepre”> A legfontosabbakról </H1>
<H2 class=”kozepre”> A majdnem legfontosabbakról </H2>
Figyeld meg, hogy itt az osztály (class) megnevezésekor már nincs ‘.’ karakter.
Hogyan alkalmazzunk egyszerre több stílust?
Szóközzel.
Ha van a fenti kozepre nevű stílusunk, és van egy szövegszínt alkalmazó stílusunk:
.piros
{
color:red
}
Akkor egy középre igazított piros színű címsor2 így néz ki:
<H2 class=”kozepre piros”> A majdnem legfontosabbakról </H2>
Egyéni stílus létrehozása
Amennyiben az oldalon csak egyetlen elemet szeretnénk megformázni (például középre igazítani), akkor ezt így tehetjük meg:
#kozepre_igazitott {
text-align:center
}
Ilyenkor a HTML jelölőnk így néz ki. Például Bekezdés esetén:
<P id=”kozepre_igazitott”> Csak ez a bekezdés megy középre</P>
egyfajta id csak egy lehet egy oldalon.