Bevezetés a HTML-be és a CSS-be tervezőknek.
Grafikusként valószínűleg tisztában van a design és a technológia folyamatosan fejlődő kapcsolatával. Ez különösen igaz a webdizájnnal foglalkozókra. Ebben az iparágban alapvető ismeretekkel kell rendelkeznünk arról, hogyan válnak a gondosan kidolgozott elrendezéseink élő weboldalakká. Ha megértjük ennek a folyamatnak az alapjait (és korlátait), pontosan tudunk kommunikálni a fejlesztőkkel és alkotni weboldalak tökéletes pixel.
Ez nem azt jelenti, hogy tudnod kell, hogyan kell egy webhelyet felülről lefelé kódolni (bár ez nagyszerű lenne!), csak azt jelenti, hogy meg kell értened az alapokat. Ebben a bejegyzésben egy nagyon alapvető HTML bevezetéssel kezdjük. Megtanulja, hogyan vághat fel webterveket Photoshopban, és hogyan formázhatja a HTML-t CSS segítségével. Bevezetés a HTML-be és a CSS-be tervezőknek
Mi az a HTML?
Szinte minden, amit a weben való böngészés során lát, egy hipertext jelölőnyelvi (HTML) dokumentum. Hipertext olyan szöveg, amely a képernyőn megjelenő más szövegekre hivatkozik és hivatkozik, lehetővé téve a tartalomhoz való hozzáférést egy egyszerű kattintással. Jelölőnyelv szögletes zárójelben <> lévő címkék halmaza. Ezek a HTML-címkék általában párban vannak:
- <start tag> : Nyitó címkeként is ismert.
- : záró címkének is nevezik, és tartalmaz egy perjelet /
Ha tartalmat foglal e két címke közé, akkor az egészet elhívják elem :
- Ez egy bekezdés
Amikor ezt a nyelvet lefordítják az internetre, a nézők nem látják a címkéket, hanem csak a köztük lévő tartalmat.
A HTML 5, a HTML jelenlegi verziója körülbelül 100 címkét tartalmaz olyan attribútumokkal, amelyek megváltoztatják funkciójukat vagy megjelenésüket. Csak 30-40 címkét kell ismernie a HTML megértéséhez és létrehozásához. Vessen egy pillantást rájuk és figyelje meg, hogyan vannak funkció szerint csoportosítva. Lássuk ezt működés közben.
Képek vágása Photoshopban.
Bevezetés a HTML-be és a CSS-be tervezőknek
A kódolás előtt el kell döntenünk, hogy a weboldal mely részein legyenek képek, és melyek kódolhatók. Használjuk ki hangszer Photoshop Szelet (az almenü alatt rejtve Vágóeszköz ), és kiemelje a területeket, például egy burritó fényképét és taco joan .
Most exportálnunk kell a töredékeinket - válassza a Fájl > Mentés webre lehetőséget (Alt + Shift + Ctrl + S). Ha egy adott kódrészletet kijelöl, az ablak jobb oldalán megadhatja annak exportálási beállításait (JPG, PNG stb.). Ha duplán kattint egy adott töredékre, megjelenik egy felugró ablak " Töredék paraméterei" - Ez lehetővé teszi bizonyos töredékfájlok elnevezését.
Alapértelmezés szerint az összes kép a /images/ alkönyvtárba kerül. Ha csak a létrehozott kivonatokat szeretné exportálni, válassza a " Minden egyedi töredék" a "Mentés" ablakban. Bevezetés a HTML-be és a CSS-be tervezőknek
Alapvető HTML-dokumentum létrehozása
Megvannak a szeletelőink, készítsünk egy alap HTML dokumentumot. Bevezetés a HTML-be és a CSS-be tervezőknek
1. sor : Kijelenti, hogy a HTML 5 dialektus a dokumentum nyelve.
2. sor : elem egy HTML dokumentum gyökerét jelenti. Ez egy kötelező tároló, amely a dokumentumunk határait jelöli.
3 : fejezet láthatatlan oldalelemeket tartalmaz, például metainformációkat, címet stb.
4. sor : Ez a dokumentumkódolási deklaráció − utf-8 - biztonságos választás - többet olvashat a HTML karakterkódolásokról itt .
5. sor : Példa oldal Ez az oldal címe, amely a böngésző címsorában jelenik meg.
6 : bezárja a címkét a 3. sorból.
7. sor : Ez a törzselem tartalmazza az oldal összes látható tartalmát.
8. sor : bezárja a címkét a 2. sorból. Ez az elem jelzi a dokumentum végét. Bevezetés a HTML-be és a CSS-be tervezőknek
Vannak más lehetséges módok is ugyanazon terv kódolására. HTML 5 szemantikai címkéket (fejléc, navigáció, cikk, lábléc) fogunk használni a dokumentum alapvető szerkezetének létrehozásához:
Ez a HTML-re lefordított elrendezés:
Néhány megjegyzés:
11. és 12. sor : Az elemek az Internet esszenciáját jelentik, mivel létrehozzák őket hiperhivatkozások . A HREF attribútumhoz vannak kötve, és kötniük kell a célt URL .
18–20. sor : Íme néhány szövegformázó címke: első szintű címsort jelöl; bekezdést jelöl; sortörést jelent.
Formázás lépcsőzetes stíluslapokkal (CSS).
Bevezetés a HTML-be és a CSS-be tervezőknek
Ha csak a HTML-fájlt nyitja meg egy webböngészőben, látni fogja, hogy az nem úgy van formázva, mint a korábbi tervünk. Ennek az az oka, hogy a HTML kód nem elég – formázni kell ezzel Lépcsőzetes stíluslapok (CSS) . A CSS egy stíluslapnyelv, amelyet HTML elemek formázására használnak.
De miért kell pontosan kombinálnunk a HTML-t a CCS-vel? Néhány évvel ezelőtt a formázást úgy érték el, hogy attribútumokat adtak hozzá a HTML-címkékhez. Ez azonban olvashatatlan és karbantarthatatlan kódot eredményezett. A megoldás az volt, hogy elválasztották a dokumentum tartalmát (HTML) a dokumentum formázásától (CSS).
Nézzük az egyszerű bontást CSS szabály : .
Választó : Ez a stílusozni kívánt HTML-elem. Például: <cikk>
Hirdetés : Egy CSS-szabálynak egy vagy több deklarációja lehet. Minden deklaráció egy tulajdonságból és egy értékből áll, és pontosvessző választja el őket. A deklarációkat kapcsos zárójelek közé helyezi {}. Bevezetés a HTML-be és a CSS-be tervezőknek
Ingatlan : ez stílus jellemző, amelyet módosítani szeretne. Például: háttérszín, méret betűtípus stb.
Érték : Minden tulajdonsághoz tartozik egy érték. Például: #ffcc11 (háttérszínhez), 16px (betűmérethez) stb.
Ott sok CSS tulajdonság, amelyek mindegyik HTML elemhez beállíthatók, de nem szükséges mindet saját kezűleg megírni. Böngészője alapértelmezett beállításaira hagyatkozhat, vagy használhat egy alapvető stíluslapot, amely visszaállítja a böngésző ésszerű beállításokat. Valójában ahhoz írásválasztók a saját készítéshez sok tudásra és tapasztalatra van szükség.
Nézzünk meg néhány CSS-szabályt, amelyek az egyszerű tervünk formázásához szükségesek.
CSS pozicionálási tulajdonságok : létezik 4 különböző módszer (statikus, fix, relatív és abszolút), amelyek lehetővé teszik bizonyos elemek elhelyezését a tervezésben. A fenti módszerek egyikének beállítása után az elemeket a felső, jobb, alsó és bal tulajdonságok segítségével pozícionálhatja – ezek eltérően működnek attól függően, hogy a 4 módszer közül melyiket használja. Ebben az esetben szeretnénk pozícionálni plate_image, felhasználásával abszolút pozicionálás.
CSS Box modell : ezt a modellt egy keret, amely az összes HTML elemet magába foglalja, beleértve a margókat, szegélyeket, kitöltést és tartalmat. A margó a szegély körüli láthatatlan terület, valamint a szegély és a tartalom közötti párnázás.
Ha TÉNYLEG többet szeretne megtudni a kódolásról, Nézd meg erre a klassz oldalra: Codecademy .
Szólj hozzá!