HTML, CSS – Webtervezés alapok

Oldal felépítésének megtervezése – drótváz (wireframe)
Nagyobb egységek egymáshoz viszonyított helyzetének felvázolása

Tartalmi egységek, azaz a <div></div> tag
Különböző tartalmi egységeket (division, section) lehet belecsomagolni, csoportosítva. A weblapok kialakításánál leggyakrabban a <div> tag-eket méretezzük és pozícionáljuk CSS segítségevel, hogy létrejöjjön a weboldal alapvető váza.

Azonosító hozzáadása, avagy az ‘id’ attribútum:

<div id=”azonosító elnevezése”></div>

Bármelyik html tag-nek adható. Ez az azonosítója (identifier), így tudsz majd rá hivatkozni a CSS szabályoknál és a Javascript kódban is.

A CSS-ben az id elé egy kettőskeresztet (#) kell írnod, hogy a program megértse, mire szeretnél szabályt létrehozni:

#azonosító elnevezése {

}

Egy adott id attribútumot csak egy elemnek adhatunk meg, ettől lesz egyedi, ezért tudjuk azonosításra használni. Például a most használt “azonosító elnevezése” id-t másik elem már nem kaphatja meg az oldalunkon. Ehhez kapcsolódóan, egy elemnek egy id-t adjunk.

Árnyékolás:

box-shadow: 15px 15px 10px gray;

A box-shadow (doboz-árnyék) több paraméterrel működik:

box-shadow: h-shadow v-shadow [blur] [spread] color;

A h-shadow az árnyék vízszintes irányú (horizontal) pozíciója, a v-shadow pedig a függőleges (vertical). Ez a két paraméter (és egyes böngészők esetén a szín) kötelező, a szögletes zárójelben lévő blur (elmosódottság, homályosság) és a spread (kiterjedés) nem. Az opcionális paraméterek a megadott sorrendben követik egymást (tehát spread nem adható meg anélkül, hogy a blur értéke ne lenne definiálva)

Új div tag beágyazása:

<div id=”azonosito elnevezese”>
<div id=”first-row”></div>
</div>

Az új div elemet beleágyaztuk a már korábban elhelyezett másik div elembe (a már elkészített vásznunkra festünk). Így a <div id=”azonosito-elnevezese”> elem lett a szülő (parent element) és a <div id=”first-row”> lett a gyermek elem (child element).

A gyermek elem “örökli” (inherit) a szülő elem egyes tulajdonságait (például ha már megadtad a szülő elemnek a betűtípusát, nem kell újra megadnod a gyermek elemnél is, csak ha ettől eltérőt szeretnél használni).

Gyermek div-be ágyazott másik gyermek div:
<div id=”vaszon”>
<div id=”first-row”>
<div id=”big-rectangle”></div>
</div>
</div>

Osztályok (class) hozzáadása, avagy a ‘class’ attribútum:
A class=”osztaly-neve” attribútum ugyanúgy adható a HTML elemeknek, mint az id. A különbség az, hogy ugyanazt a class-t több elemnek is megadhatjuk, míg egy adott id csak egy adott elemhez tartozhat. A többször előforduló, több elemre is felhasználható dolgokat szoktuk jelölni azonos osztállyal.

A CSS kódban az osztályokra a .osztaly-neve kiválasztóval hivatkozhatsz:

.red {
background-color: red;
}

“Belebegtetés” (float):
A HTML elemeket a böngésző a leggyakrabban sorban olvassa be, és ebben a sorrendben is jeleníti meg, egymás után. Ebből a sorrendből tudunk kiragadni egyes elemeket (képzelj el például egy újságcikket, ahol a bekezdések egymás után jelennek meg, és a szöveggel szeretnénk egy képet “körbefolyatni”).
Erre jó a CSS float.

A float tehát kiemeli az elemet a megjelenítés normális folyamából, a float: right; jobb oldalra “lebegteti”, a float: left; pedig balra.

Több osztály hozzáadása:

Egy elemnek akár több class-t is adhatsz egyszerre.
Ehhez az attribútum értékeit szóközzel kell elválasztanod.
Ezért fontos az is, hogy kötőjellel válaszd el a szavakat, ha szóösszetételt akarsz használni a class elnevezésében.

Testvér (sibling element) div hozzáadása:

<div id=”vaszon”>
<div id=”first-row”>
<div id=”big-rectangle” class=”red right”>
<div id=”first-divider”></div>
</div>
</div>

Az új elem is az első sorba (#first-row) kerül, de az eddigiekkel ellentétben nem a legbelső elembe ágyazva, hanem azzal egy szintre. A #big-rectangle és a #first-divider így nem szülő-gyermek, hanem testvér elemek (sibling elements).

A kód értelmezését a helyesen alkalmazott behúzás (indentation) nagyban megkönnyíti. Az új elemet új sorban kezdve az azonos szinten lévő, testvér (sibling) elemeket azonos behúzással kezdjük, az egymásba ágyazott elemek esetén a gyermek elemet (child element) a szülő elemhez (parent element) képest egy behúzással beljebb kezdjük.

 

HTML, CSS – A kezdetek

HTML: jelölőnyelv, mely a tartalomért felel.

CSS: stílusleíró nyelv, amely a HTML-ben épített tartalom kinézetéért felel.

HTML ALAPOK

A HTML kód elemekből, ún. tagekből épül fel, melyek lehetővé teszik a tartalom hierarchikus felépítését.

<title></title> böngészőcím (Az oldal címe)

<body></body> a tartalmi rész

<h1></h1> kiemelt cím, legfontosabb címsor

h1-h6-ig lehet címsorokat hozzáadni, h1 a leghangsúlyosabb, a h6 a legkisebb

<img> kép (önmagát záró tag) – Pl: <img src=”http://i.imgur.com/RC2UGg8.jpg” alt=”coders”>

A tagek tartalmazhatnak attribútumokat, azaz “jellemzőket” is. Ezeknek a jellemzőknek értéke van (Felépítés: jellemző neve=”érték”)

src=”kép forrása”  (idézőjelek közé megy az url)
alt=”kép szöveges alternatívája”  (Pl. ha nem töltődik be a kép)

<figcaption></figcaption> képaláírás

<figure></figure> ábrák becsomagolására használt tag

Közé megy az <img> és a <figcaption>
Pl:
<figure>
<img src=”http://i.imgur.com/RC2UGg8.jpg” alt=”coders”>
<figcaption>Learning to code at a Free Code Camp Toronto coffee-and-code.</figcaption>
</figure>

<article></article> szöveg – cikk – becsomagolására használt tag (lásd: <figure> a képeknél)

Közé megy:

<p></p> bekezdés – paragraph

<a></a> link – anchor (horgony)

Attribútumai:

href=”hivatkozott oldal url címe” (hypertext reference)

title=”azt mutatja amikor az egeret a hivatkozás fölé húzod”

<strong></strong> kiemelés – félkövér lesz

<em></em> hangsúlyos – dőlt lesz

Utóbbi kettővel már tartalmi szinten, azaz a HTML kódban lehet jelezni, ha egy szövegrész hangsúlyosabb mint a többi.

Egy példa a fentiekre:

<article>
<p>This morning I woke up to dozens messages from students who had read an article titled “Please Don’t Learn to Code.”</p>
<p>At first, I assumed <a href=”http://blog.codinghorror.com/please-dont-learn-to-code/” title=”Jeff Atwood”>Jeff Atwood’s 2012 article</a> had spontaneously reappeared on Reddit. But no – this was a <a href=”http://techcrunch.com/2016/05/10/please-dont-learn-to-code” title=”Tech crunch”>brand new Tech Crunch article</a> of the same name, which echoed Atwood’s assertion that encouraging everyone to learn programming is like encouraging everyone to learn plumbing.</p>
<p>Here’s why programming — unlike plumbing — is an important skill that everyone should learn: <strong>programming is how humans talk to machines.</strong></p>
</article>

CSS ALAPOK

A CSS kódok felépítése:

selector {
property: value;
}

kiválasztó {
tulajdonság: érték;
}

Pl.
h1 {
font-size: 36px;
color: rgba(0,0,0,.8);
}

Szín: rgba(piros, zöld, kék, átlászóság) piros, zöld, és kék értékek 0 és 255 közötti számok, az átlátszóság pedig egy 0 és 1 közötti tört szám, tizedesponttal.
Pl. 0.78. (A tört számoknál a CSS csak pontot fogad el, tehát pl. a 0,12 érték helytelen lenne.) Ha a tört szám egészrésze nulla, javasolt azt elhagyni.

További propertyk (tulajdonságok):

text-align: szöveg elrendezése; (lehet: left, center, right)
font-family: betűtípus család;
(Érdemes egymáshoz igen hasonló betűtípusokból többet is felsorolni vesszővel, mert előfordulhat, hogy valakinek a számítógépén nem található meg az a betűtípus, amit kiválasztottál. Ilyenkor a böngésző az oldal megjelenítésekor automatikusan a felsorolásban következő betűtípussal próbálkozik.)

Együtt is lehet a több elemet stilizálni:

Pl. a címet és a képaláírást

h1, figcaption {
text-align: center;
font-family: “Lucida Sans”,”Arial”;
}

Kép méretezés:

img {
height: auto;
width: 100%;
}

Kép alapértelmezett (böngésző általi) margójának szerkesztése: (azért figure mert az a főtag tartalmazza a img-t)

figure {
margin: 0;
}

A böngészők alapból állítanak egy margóértéket a különböző tagekhez, ezeket lehet nullázni, ha az a cél, hogy a tartalom kitöltse a kívánt pozíciót.
Pl.

body {
margin: 0;
}

Sorok fix szélességének beállítása:

article {
max-width: 700px;
}

Sorok oldaltérköz beállítása:

article {
padding: 10px;
}

A margóval (margin) azt állíthatod be, hogy az elem körül mekkora térköz legyen, a padding arra jó, hogy az elemen belüli tartalmat körbevevő térköz méretét állítsd be.

Külön lehet definiálni minden oldal margóját (pl.: a margin-bottom: 11px; csak az alsó margó értékét állítja be).
Amikor a margin: érték; formátumot használod, az egyszerre állítja mind a négy oldali margót.
Rövidítésben (shorthand) is megadhatod: margin: 0 auto;. Az első érték a felső és alsó, a második érték a két oldalsó margó értéke lesz.

Bekezdés szövegek formázása:

p {
color: rgba(0,0,0,.8);
font-family: Georgia,Cambria,”Times New Roman”,Times,serif;
font-size: 21px;
letter-spacing: -.003em;
line-height: 1.58;
}

Betűk közötti közök beállítása:

p {
letter-spacing: -.003em;
}

A példában használt érték mértékegysége nem pixel, hanem em.
Az eddig használt pixellel ellentétben ez nem egy abszolút, hanem egy relatív mértékegység.
Az adott elemre vonatkozó betűméret az alapja (jelen példában 21px az elemre vonatkozó betűméret, tehát a böngészőben a betűköz értéke 21px * -0.003 = -0.063 pixel).
A relatív egységeket arra lehet használni, hogy különböző kijelzőméreteken arányosak maradjanak a méretek.

Sormagasság beállítása a szövegben:

A line-height a szövegben a sormagasságot állítja. Mértékegység nélküli szám.

p {
line-height: 1.58;
}

Link színének beállítása:

a {
color: rgba(0,0,0,.8);
}

Egyes kiválasztóknak (selector) vannak állapotai (state) is, így például az a:hover a linkeknek azt az állapotát szabályozza, amikor az egér éppen azokra mutat.
a:hover {
color: rgba(153, 153, 153, 1);
}

Helló Világ!

Felébredtem.

Ma úgy döntöttem belevágok valamibe, ami könnyen lehet, hogy megváltoztatja az életem.

Néha kellenek ezek a változások.

Ha eleged van az igazi világból, úgy érzed, hogy a rabja vagy, ugorj bele a digitálisba.

Teremts újat, alkoss.

Építsd fel újra magad.

Ez a blog ezt az utat követi végig.

Kövesd a fehér nyulat!

Kip-kop 🙂