Nyitó

Gyorstalpaló

Tervezés

HTML

CSS

Sablonok

Bevezetés

Szintaktika

Dokumentum szerkezet

Általános attribútumok

Szöveg megadása

Linkek

Kép beillesztése

Táblázatok

Listák

Űrlapok

Szkriptek

Dokumentum szerkezet - Blokk szintű és soron belüli elemek. A <div> és a <span> tagok.

Egy weblap tartalmát alkotó elemek megjelenítési szempontból - némi egyszerűsítéssel - két csoportba oszthatóak:

  • A blokk szintű elemeket a böngészők az alapértelmezés szerint új sorban kezdik megjeleníteni és az elemet tartalmazó doboz a teljes szélességet elfoglalja.
  • A soron belüli elemeket úgy jeleníti meg a böngésző, mint egy mondat szavait: akkor kerülnek új sorba, ha az előző sorban már nem fér el a következő elem.

Néhány példa a blokkszintű elemekre: címsorok (h1...h6), bekezdések (p), számozatlan listák (ul) , listaelemek (li). Soron belüli elem például a hivatkozás (a). Vannak olyan elemek is, mint például a képek beillesztésére szolgáló img, amely a környezetétől függően blokk szintű és soron belüli elem is lehet. Egy bekezdésben a beillesztett kép a szövegen belül ott jelenik meg, ahol az <img> tag szerepel, míg két bekezdés között blokk szintű elemként a teljes szélességet elfoglalja (amennyiben a float tulajdonság értéke none).

Az első példában a kép soron belüli elem:

<p>Ebben a
   <img src="texthtml.jpg" alt="HTML" height="18" width="66">
   példában a beillesztett kép a mondat részévé válik.</p>

Ami a böngészőben így néz ki:

Ebben a HTML példában a beillesztett kép a mondat részévé válik.

Ugyan az a kép blokk szintű elem is lehet:

<p>Ebben a példában a kép két bekezdés közé lett beillesztve.</p>
<img src="texthtml.jpg" alt="HTML" height="18" width="66">
<p>Következő bekezdés...</p>

Ami a következő módon jelenik meg:

Ebban a példában a kép két bekezdés közé lett beillesztve.

HTML

Következő bekezdés...

A szabvány két olyan tagot definiál, amelyek általános célt szolgálnak. A <div> taggal blokk szintű elemet lehet létrehozni, a <span> taggal pedig soron belüli elemet. Ezeket olyankor lehet használni, amikor a dokumentum egy részletét akarjuk formázni vagy JavaScript-tel elérni, és nincs más alkalmas HTML tag az adott szakasz kijelölésére. A záró tagok használata is kötelező.

Legfontosabb attribútumaik az id, class, style általános attribútumok.

Példa:

<div style="background-color: #ffff99">
   <p>Ebben a példában a &lt;div&gt; tag két bekezdést
      fog össze egy blokk szintű elemként.</p>
   <p>A második bekezdés egyik részletét
      <span style="color: #009900">zöld színnel</span>
      írattam ki a képernyőre. Így bemutathattam
      a &lt;span&gt; tag alkalmazását is.</p>
</div>

Ami a böngészőkben így fog kinézni:

Ebben a példában a <div> tag két bekezdést fog össze egy blokk szintű elemként.

A második bekezdés egyik részletét zöld színnel írattam ki a képernyőre. Így bemutathattam a <span> tag alkalmazását is.



Tőzsde és technikai elemzés érthetően