Hogyan legyek webdesigner?
2024-03-18 03:03
Elhatároztad magad, hogy webdesigner szeretnél lenni. Önállóan be tudod kapcsolni a számítógépet, be tudsz jelentkezni a postafiókodba, sőt talán némileg értesz az MS Wordhöz és Excelhez. Azonban az olyan mozaikszavak, mint HTML vagy CSS, akár a Hihetetlen Tetemes Mennyiségű Levest és Cézár Salátás Saslikot is jelenthetik számodra. Hogyan tovább?
Az az egyik legnagyobb előnye annak, hogy ebben a században élünk, hogy az információáramlás már nem lehet akadály a tanulásban. Nem kell feltétlenül kimozdulnunk otthonról ahhoz, hogy tudást szerezzünk. De mégis mire keressünk rá Google-ban? Honnan tudjam, hogy mit kell tudnom?
Általános ismeretek
Elsősorban érdemes egy átfogó, általános képet alkotni az internet világáról: megismerni az olyan fogalmakat, hogy HTTP (HyperText Transfer Protocol), FTP (File Transfer Protocol), webszerver, domainnév, URL, kiszolgáló, kliens, tárhely, CMS (Content Management System), Framework. Mi a különbség a PNG, JPEG, TIF, GIF kiterjesztésű képek között? Mi a különbség a leíró-, szkript- és objektumorientált nyelvek között? Nekem melyik nyelveket kell tudnom ahhoz, hogy honlapot szerkeszthessek? Mitől van .html és .php végű URL egyaránt? Mi a különbség a RGB és CMYK színtér között? A legtöbb választ megkaphatjuk a Wikipédiáról.
HTML, a leíró nyelv
Ezt követően máris célirányosan tanulmányozhatjuk a HTML nyelvet. Garantálhatom, hogy ez nem egy bonyolult nyelv, és egy kis gyakorlással pillanatok alatt összeállíthatod a honlapod vázát. A jelenlegi trendek megkövetelik, hogy az oldalad HTML5-ben készüljön el, ugyanis ennek validitása alapján értékel a Google. Egy jó webfejlesztőnek tisztában kell lennie a SEO alapjaival! Azzal párhuzamosan, hogy szép lassan elsajátítod, hogyan kell bekezdést, címsort, képet, hivatkozást, sortörést, táblázatot írni HTML-ben, meg kell jegyezned, hogy mire figyelj a weboldal felépítésénél a keresőoptimalizálás jegyében. Példaként a címsort hozom fel. Nem elég megtanulni, hogy a h1 a legnagyobb címsor. Használni kell: a Google az oldal indexálásakor végignézi, vannak-e a h1, h2, h3 címek, és ezek relevánsak-e az oldal profiljában. Ajánlom a HTML tanulmányozására ezt az oldalt: http://www.w3schools.com/ Ez a site nem csak ismerteti, hanem rögtön szemlélteti az egyes kódok és attribútumok működését, sőt te magad is kipróbálhatod. Ha már úgy érzed, összeállt a fejedben a HTML alapja, próbálj meg egy próba oldalt készíteni! Aztán még egyet és még egyet. A gyakorlás a siker kulcsa.
Feladatok a gyakorláshoz:
- készítsd el az önéletrajzodat HTML-ben: rendezd címsorokba az egyes blokkokat, formázd meg, és ha ügyes vagy, még egy képet is be tudsz szúrni magadról.
- készíts el egy több menüpontból álló oldalt: ha egy mappába rendezed a fájlokat, a hivatkozások is működni fognak.
- gyakorold a táblázatokat: rendezd cellákba egy oldal elrendezést (fejléc, fő tartalmi rész, oldalsáv, fejléc). Ne félj oszlopokat vagy sorokat összeolvasztani.
- készíts űrlapot: nem kell működnie, csak írj meg HTML-ben egy ajánlatkérő formot.
CSS, a profi dekoratőr
Miután feltérképezted, hogy működik a HTML, lássuk el a kódokat tulajdonságokkal. Első lépésként azt kell megtudnunk, hol jelenik meg a CSS. Ha külső fájlban, hogyan kell rá hivatkozni. Ezt követően keződhet a szépítés. Általános szabályokat is megadhatsz, de egyedi class-okhoz és id-khez is hozzárendelheted az egyes paramétereket. A lehetőségek tárháza szinte végtelen! Minek nézzünk elsősorban utána? Hogyan kell betűtípus-családot, betűvastagságot, betűkiterjesztést, betűstílust, betűméretet, betűszínt megadni? Hogy kell háttérszínt, sorközt, sortávolságot beállítani? Mi a különség a margin és a padding között? Hogyan kell keretet adni egy doboznak (divnek)? Hogyan állítsunk be szélességet és magasságot? Milyen mértékegységben? Hogyan lehet pozicionálni? Mit deklarálunk a display-jel? Milyen lehetőségeid vannak a képek formázásánál? És a formoknál?
Feladatok a gyakorláshoz:
- készíts el divekkel egy oldalt: a felépítése lehet ugyanolyan, mint a HTML-é, de most ne táblázatban, hanem divekkel oldd meg az elrendezést!
- próbálj meg "lemásolni" egy oldalt: ez a későbbiekben is hasznos gyakorlási mód. Szinte biztos, hogy mindig találni fogsz olyan részeket, ami kihívást jelent.
- készíts egy galériát: persze nem kell Jquery hozzá, csupán rendezd a kisméretű képeket egymás mellé.
Amennyiben úgy érzed, magabiztosan érted a lényegét a HTML-nek és a CSS-nek, lehet folytatni az animálással, elsőként CSS3 animációkat javaslom. De előre szólok: a tanulásnak sosem lesz vége! :)