A kódszöveg
A lecke végére a célunk, egy weboldal létrehozása CSS segítségével.
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.
<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.
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.
