Freeimages Freedom

HTML5 és CSS kezdetek – alapvető elemek

Minden weboldal alapját képezik a world wide web innovatív és hatalmas lehetőségeket feltáró nyelvei: a HTML, a CSS, a Javascript és ezek társai.

A HTML (HyperText Markup Language) a web egyik legfontosabb nyelve. Webes dokumentumok tartalmát, szerkezetét írja le. Hozzá társul a CSS (Cascading StyleSheet) , ami pedig ezeknek az oldalaknak a formázását tudja beállítani. Ezen nyelvek legalapvetőbb kulcsszavai, elemei következnek.

A HTML nyelv egymásba ágyazott tag-ekből áll, melyeknek alakja:

<neve>   (egyszeres, belső nélkül)
          vagy
<neve>   (nyitó-záró, van belseje is)
.....
</neve>

A html nevű tag-en belül két fontos rész: a head azaz a fejléc és a body vagyis a törzs.
A törzs jeleníti meg a látható tartalmat. A fejléc a beállításokat, címet, külső hivatkozásokat foglalja magában.

A böngésző címsorában található cím (title, a head szakaszban):

<title>Oldal címe</title>

Egyelőre ennyi elég is, most inkább a törzzsel foglalkozzunk.

A törzsben, Egy darab bekezdés (p):

<p>Bekezdés</p>

Egy darab link valahol a szövegben (a):

<a href="http://link-valahova.hu" title="A hivatkozott oldal címe">egy kattintható linkkel</a>

A címsorok szintjei (h1, h2, h3, h4, h5, h6):

<h1>Legfontosabb</h1>
<h2>Már nem olyan fontos</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>Legkevésbé fontos</h6>

Teljes illusztráció beszúrása képaláírással (figure, img, figcaption). Nem mindig ezzel kezdődik a dokumentum, de cikkeknél hasznos a kezdőkép:

<figure>
  <img src="http://a-kep-cime.jpg" alt="alternatív szöveg">
  <figcaption>Képaláírás</figcaption>
</figure>

Gyakran elég csak a kép (img):

<img src="http://a-kep-cime.jpg" alt="alternatív szöveg">

Egy cikk teljes váza és tartalma (article, p):

<article>
  <p>Bekezdés <a href="http://link-valahova.hu" title="A hivatkozott oldal címe">egy kattintható linkkel</a></p>
  <p>Egy másik bekezdés <strong>kiemelten hangsúlyos tartalommal</strong>.</p>
</article>

Fontos rész félkövér betűvel (csak jelzés!) (strong)

<strong>kiemelten hangsúlyos tartalommal</strong>

A HTML oldalak stílusának alapbeállítása egyszerű és könnyen olvasható. Az egyszínű fehér háttér, fekete szöveg, a talpas betű kék linkekkel azonban minden esetben felel meg a modern igényeknek. Ezért a széleskörű dizájn lehetőségek számára ki lett fejlesztve a CSS stíluslap nyelv.

Freeimage Color Pencil

A CSS ún. selector-okkal, vagyis kijelölőkkel működik. Egy adott nevű tag-re lehet beállítani tulajdonságot. Többek között

  • színt, háttérszínt
  • szélességet, magasságot, távolságot, sűrűséget
  • margót, közöket
  • betűtípust, betűméretet, formázást
  • szegélyt
  • abszolút elrendezést
  • árnyékot
  • animációt

Egy tömény példa: szín, betűtípus, méretek megváltoztatása mindenhol, ahol <h1>..</h1> van:

h1 {
  color:          rgba(0,0,0,.8);     // szín, (piros, zöld, kék, átlátszóság)
  font-family:    serif;              // betűtípus
  font-size:      36px;               // betűméret
  line-height:    1.58;               // sormagasság
  letter-spacing: -.003em;            // betűköz
  text-align:     center;             // szöveg igazítása
}

Szín (betűszín) megváltoztatása (color):

color:          rgba(0,0,0,.8);

ahol rgba

rgba(piros, zöld, kék, átlátszóság)

és

  • piros, zöld, kék ereje: 0-255 egész szám
  • átlátszóság ereje: 0-1 tört szám. (0.0-1.0 vagy .0 – 1)

Betűtípus beállítása (font-family). A betűcsaládot vagy a fő betűtípuscsaládot állítja be.

font-family:    serif;              // betűtípus

Lehet serif, sans-serif vagy egyéb más.

Betűméret (font-size), megadható pixelben:

font-size:      36px;               // betűméret

Sormagasság (line-height), serkenti az olvashatóságot:

line-height:    1.58;               // sormagasság

Betűköz (letter-spacing). Megadható pixelben, vagy “em”-ben.

Megjegyzés: minden mérettel, távolsággal kapcsolatos tulajdonság megadható

  • pixelben (px),
  • pontban (pt)
  • arányszámmal, mely az eredeti méret valahányszorosával növel vagy csökkent (em). Az alábbi negatív érték, tehát csökkent – zsugorítja a távolságot:
letter-spacing: -.003em;            // betűköz

Bekezdés igazítás (text-align):

text-align:     center;             // szöveg igazítása

Lehet left, center, right.

Szélesség (width) és magasság (height). Képeknél fontos lehet:

img {
  height:         auto;               // magasság
  width:          100%;               // szélesség
}

Az auto érték egy arányos beállítást használ.

Margóméret (margin), pl. illusztrációnál:

figure {
  margin:         0;                  // margó
}

Kicsit bonyolultabb eset egy cikk keret esetében:

article {
  margin:         0 auto;             // középre rendezett
}

Itt nemcsak hogy 0 a méret, hanem automatikus a szabályozás, ha épp kifér bőségesen a szöveg.

Esemény esetén aktiváló stílus kijelölők. Formátuma: selector:esemény. Esemény lehet pl. az egér-ráhuzás. Pl. vmi:hover 

a:hover {
                                      // az egér éppen ide mutat állapot
}

ahol a link (a [anchor]) tetejére húzták az egeret (hover).

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöljük.