A kódszöveg

A lecke végére a célunk, egy weboldal létrehozása CSS segítségével.

HTML és CSS

Ebben a fejezetben létrehozunk egy kicsit összetettebb oldalt, ami nem csak egy sort ír ki nekünk, hanem lényegesen több információt szolgáltat.

Innen töltsük le a létrehozandó weboldal kódszövegét és mentsük a Html könyvtárba: index.html - Jobb klikk a linkre, majd Link mentése másként (Save Link as).
Ez a kódszöveg még nem teljes, a lecke során fogjuk minden hiányzó elemmel feltölteni, lépésről-lépésre.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Tapmancsok - kobak</title>
  </head>
  <body>
    <div id="fo">
      <div id="tartalom">
        <div id="fejlec">
        </div>
        <div id="menu">
          <a href="index.html">Kobak</a> | 
          <a href="Potyesz.html">Potyesz</a> | 
          <a href="Pizsi.html">Pizsi</a> | 
          <a href="Nudli.html">Nudli</a> | 
          <a href="Gracia.html">4 Grácia</a>
        </div>
        <div id="kozep">
          <h1><span>Kobak</span></h1>
          <p>
          <img src="Kobak01.jpg" alt="Kobak" />Ő a legelső görényünk.
          Sosem felejtem el azt a napot, mikor a kis huncut pofijú, reszkető lábú
          kis jövevény igyekezett birtokba venni új helyét.
          Neve hamarabb volt meg, mint ő maga, de
          tökéletesen illik rá :) Kobak, aki keményfejű,
          öntörvényű, mindig azt csinálom, amihez kedvem
          van göri. Ő nem egy átlagos görény. Nem érdekli őt
          holmi zokni, toll, vagy gazdi telefon.
          :) Annál
          inkább a golyók: Mint a <span class="rajzfilm">Pom-Pom</span>
          mesében <span class="rajzfilm">
          Gombóc Artúr</span>, csak nem csokikkal, hanem
          golyókkal : piros golyó, nagy golyó,
          ping-pong labda, teniszlabda, csörgő golyó.
          </p>
          <p>
          6 hónapig éltünk mi, így hármasban, mikor úgy
          döntöttünk, kellene Kobaknak egy játszótárs.
          Ekkor költözött hozzánk Potyesz.
          </p>
          <h3>Kobak és a játék</h3>
          <p>
          Kedvenc szórakozásom, a labdagörgetés. Egyszerűen
          fogom az első utamba akadó labdát, majd
          gondosan a hasam alá helyezem a mellső mancsaim
          segítségével, aztán mehet a móka.
          Csak az a baj, hogy nem végtelen a szoba. Folyton
          akadályba ütközöm, ahogy tolatok hátrafelé,
          hasam alatt a labdával. Tudod, mit csinálok ilyenkor?
          Egyszerűen vetek egy bukfencet, amikor
          érzem, hogy nincs tovább. Persze a labdát a világ
          minden kincséért sem ereszteném ám el!
          Ha megfordultam, akkor ismét szabad az út.
          Megyek, míg újra falba nem ütközöm.
          </p>
        </div>
        <div id="attetszo">
          <ul>
            <li><a href="http://www.goritali.net">Göritali</a></li>
            <li><a href="http://www.goreny.hu">Görény Bt.</a></li>
            <li><a href="http://www.mvk.hu">MVK</a></li>
            <li><a href="http://www.ferret.hu">Görke</a></li>
          </ul>
          <ul class="doboz">
            <li>-----------</li>
          </ul>
          <ul>
            <li><a href="http://www.google.hu">Google</a></li>
            <li><a href="http://www.kurzor.hu">Kurzor</a></li>
            <li><a href="http://www.kereso.hu">Kereső</a></li>
            <li><a href="http://www.altavizsla.hu">Altavizsla</a></li>
          </ul>
          <ul class="doboz">
            <li>-----------</li>
          </ul>
          <ul>
            <li><a href="http://www.juniorrezervatum.hu">Junior</a></li>
            <li><a href="http://www.forum.origo.hu">Macska Klub</a></li>
            <li><a href="http://www.macska.hu">Macska</a></li>
            <li><a href="http://macska.lap.hu">Több macska</a></li>
          </ul>
        </div>
        <div id="lablec">
        </div>
      </div>
    </div>
  </body>
</html>

Első ránézésre betűk és karakterek halmazának tűnik a kódszöveg. Ha megnyitjuk egy szövegszerkesztőben a letöltött index.html fájlt, akkor az alábbi eredményt kapjuk.

HTML és CSS

Mivel az oldal nem tartalmaz formázást, így csak a beírt tartalmat látjuk egymás alatt, abban a sorrendben, ahogy begépeltük őket a Jegyzettömbbe.

Az oldalt felépítő elemek két csoportba sorolhatóak: Block-szintű elemek és Inline-szintű elemek. Ezek megértése fontos, hogy tudjuk miért éppen azt a hatást váltja ki a stílus az adott elemen, amit látunk.

Az elkészítendő oldal jelenlegi formája: Megnézem.