Az itt leírtakról bővebben, az alapismeretek témaköreiben olvashatunk.

Nem kell mindent szóról szóra betanulni.
Ha valamit elfelejtettünk, a következő részekből átmásolhatjuk az utasításokat és meghatározásokat saját html és css fájlunkba.

Alapismeretek | Vonalak | Hivatkozások | Képek | Listák | Táblázatok | Webszínek

Alapismeretek

Stíluslap behivó meghatározás.
<link href="fájl neve.css" rel="stylesheet" type="text/css" />

HTML és JavaScript összekapcsolása
<script language="JavaScript" type="text/javascript" src="fájl neve.js">

Címsor típusok: h1, h2, h3, h4, h5, h6,

Kezdő címke <h1> Záró címke </h1>
Kezdő címke <h2> Záró címke </h2>
Kezdő címke <h3> Záró címke </h3>
Kezdő címke <h4> Záró címke </h4>
Kezdő címke <h5> Záró címke </h5>
Kezdő címke <h6> Záró címke </h6>

A p címke. (A leggyakoribb szövegformázó)
- Kezdő p címke: <p>
- Záró p címke: </p>

Sort, vagy szövegrészt lezáró utasítás.
<br />

Üres sor, vagy cella.
<p>&nbsp;</p>

Megjegyzések
- XHTML lapon: <!-- írjuk ide a megjegyzésünket -->
- Stíluslapon: /* írjuk ide a megjegyzésünket */

Sormagasság meghatározás.
Ha em - ben adjuk meg akkor 1.5em, ha százalékban, akkor 150%
p { line-height: 150%; }

Betűk közötti távolság.
Például: letter-spacing: 0.8em ;

Egynél több szóköz és return figyelembevétele.
Egyszerű keretek nélküli táblázatok készítéséhez. 

<pre> Itt   egy   előre   formázott   szöveg </pre>

Szöveg igazítása.
- Fentre: text-align: top;
- Középre: text-align: center;
- Jobbra: text-align: right;
- Lentre: text-align: bottom;
- Balra: text-align: left;

Szöveg kiemelése.
<span class="kiemelem" > </span>

Betűk stílusa.
- Dőlt { font-style: italic ; }
- Normal { font-style : normal ; }

Betű-változat:
- Félkövér {font-weight: bold;}
- Kis-kapitális: {font-variant: small-caps; }

Idézetblokk.
<p> <blockquote> Idézet megírása.</blockquote> </p>

Oldalidézet.
<div class ="callout"> <p> Oldalidézet megírása. </p> </div>

Oldalidézet soraiban elhelyezhető hivatkozás
<cite> Hivatkozás beírása </cite>

Rövidítés.
<acronym title="Hypertext Markup Language">HTML</acronym>

Vissza a lap elejére

Vonalak

Vonal típusok megjelenése. / border: top, right, bottom, left /

Folytonos, solid Vonal megjelenése
Dupla, double Vonal megjelenése
Pontozott, dotted Vonal megjelenése
Bemélyített, groove Vonal megjelenése
Kidomborodó, ridge Vonal megjelenése
Kiemelkedő, outset Vonal megjelenése
Süllyesztett, inset Vonal megjelenése

Vonal vastagsága.
- képpontban ( px )
- betűméretben ( em )
- százalékban ( % )
- kulcsszavakkal: vastag - thick, közepes - medium, vékony - thin

Vonal, megjelenési helye.
- Felső: border-top:
- Jobbos: border-right:
- Alsó: border-bottom:
- Balos: border-left:
- Körbekeretezés: border:

Vissza a lap elejére

Hivatkozás, navigálás

Navigálás, egy adott xhtml lapon.
- Témakörre hivatkozás: <a href="#1"> Témakör elnevezése.</a>
- Témakör címsora elé: <a name="1" id="1"></a>
Visszalépés.
- A kezdő body címke után írjuk> <a name="vissza">
- Témakör végére írjuk: <p><a href="#vissza"> Vissza a lap elejére</a> </p>

Navigálás szöveggel, másik html lapra.
<a href="xxxxx.html" > Hova jutunk, szöveg beírása </a>

Navigálás képekkel, másik html lapra.
<a href="xxxx.html">
<img src="xxxkép.jpg" alt="Szöveg" width="xxx" height="xxx" />
</a>

Navigálás, mely nem visz sehova.
Egy adott oldal elejére.
<a href="#">Szöveg beírása. </a>

Navigálás, hivatkozás elválasztása.
A függőleges vonal.
Az alt billentyű lenyomása mellett, írjuk be a 0124 számsort.
<a href="xxx.html"> Szöveg </a> | <ahref="xxx.html"> Szöveg </a>

Navigálás, külső html lapra.
<p> Külső Link: <a href="http://www.Google.Com /"> Google </a> </p>

Linkek stílusa
a:link {color: #FFCC00;}
a:visited {color: #FFCC00;}
a:hover {color: #FFFFFF;}

Vissza a lap elejére

Képek, fotók

Képlekérő meghatározás XHTML lapon.
<img src="xxx.jpg" width="xxx" height="xxx" alt="kép elnevezése" class="azonosító"/>

Háttérkép megjelenítése css, azaz stíluslapról.
#azonosító {width: ...px; height: ....px; background: url(xxxx.jpg) no-repeat; }

Vissza a lap elejére

Listák, felsorolások

Lista: számozás nélüli
<ul>
<li> Szöveg </li>
<li> Szöveg </li>
<li> Szöveg </li>
<li> Szöveg </li>
</ul>

Lista: számozott
<ol>
<li> Szöveg </li>
<li> Szöveg </li>
<li> Szöveg </li>
<li> Szöveg </li>
</ol>

Lista: meghatározáslista
<dl>
<dt> Témakör elnevezése </dt>
<dd> Szöveg </dd>

<dt> Témakör elnevezése </dt>
<dd> Szöveg </dd>

<dt> Témakör elnevezése </dt>
<dd> Szöveg </dd>
</dl>

Listák sorszámainak megváltoztatása.
list-style-type röviditve list-style utasításhoz.
- Alapértelmezett: decimal
- Arab szám kezdő nullával: decimal-leading-zero
- Nagybetűk: upper-alpha
- Kisbetűk: lower-alpha
- Római számok nagybetűkkel: upper-roman
- Római számok kisbetűkkel: lower-roman
- Nincs sorszám, és nincs előjel: none

Vissza a lap elejére

Táblázatok

Egy cellás táblázat, stíluslap használata nélkül
<table width="90%" border="8" cellpadding="5" cellspacing="2">
<caption align="top">Táblázat elnevezése </caption>
<tr> <th> Táblázat első oszlopának fejléce, azaz elnevezése. </th> </tr>
</table>

Egy cellás táblázat, XHTML és CSS, azaz stíluslapon.

XHTML - lapon
<table class="egycellas">
<caption align="top">Táblázat elnevezése </caption>
<tr> <th> Táblázat első oszlopának fejléce, azaz elnevezése. </th> </tr>
</table>
CSS, azaz stíluslapon.(Több cellás táblázathoz is alkalmazható.)
.egycellas {background: #ccc; width: 90%; border: 5px ridge #ccc; border-collapse: separate;}
caption {font-weight: bold;}
.egycellas th, td {border: 1px solid black; padding: 5px;}

Egy cellasor (három cellát tartalmaz)
<table width="90%" border="3" cellpadding="5" cellspacing="2">
<caption align="top">Táblázat elnevezése </caption>
<tr>
<th> Cella tartalma </th>
<th> Cella tartalma </th>
<th> Cella tartalma </th>
</tr>
</table>

Egy celleoszlop (Három cellát tartalmaz)
<table width="90%" border="3" cellpadding="5" cellspacing="2">
<caption align="top"> Táblázat elnevezése </caption>
<tr> <th> Cella tartalma </th> </tr>
<tr> <th> Cella tartalma </th> </tr>
<tr> <th> Cella tartalma </th> </tr>
</table>

Több oszlopot átfogó cella
<th colspan="2"> Ez a cella, két oszlop széles</th>

Több sort átfogó cella
<td rowspan="3"> Ez a cella, három cellasor magasságú </td>

Üres cella jelölése
<td>&nbsp;</td>

Szöveg elhelyezése, azaz mozgatása a cellákban

    Alapértelmezett:
  • th cellákban középre, ezt hagyjuk így.
  • td cellákban balra
    Vízszintesen td cellákban:
  • text-align: center;
  • text-align: right;
    Függőlegesen td cellákban:
  • vertical-align: top;
  • vertical-align: middle;
  • vertical-align: bottom;
    Függőlegesen és vizszitesen is középre td cellákban:
  • text-align: center; vertical-align: middle;

Táblázat celláinak kerete, becsukva.

.table { border-collapse: collapse; border: 2px solid #fff;}
.table th, td { border: 1px solid #fff;}
1. cellakeret2. cellakeret3. cellakeret
4. cellakeret5. cellakeret6. cellakeret

Táblázat celláinak kerete, elválasztva.

.table { border-collapse: separate; border: 2px solid #fff;}
.table th, td { border: 1px solid #fff;}
1. cellakeret2. cellakeret3. cellakeret
4. cellakeret5. cellakeret6. cellakeret

Cellakeretek közötti távolság.
Stíluslapról IE nem jeleníti meg, MA megjeleníti.

.table { border-collapse: separate; border-spacing: 10px;
border: 2px solid #fff;}
.table th, td { border: 1px solid #fff;}
1. cellakeret2. cellakeret3. cellakeret
4. cellakeret5. cellakeret6. cellakeret
IE - nek a kezdő table címkében kell megadni.
<table cellspacing="10">

Vissza a lap elejére

Webszínek

Angol nevük alapján meghatározható színek

OO - black Fekete

OO - white Fehér

OO - silver Ezüst

OO - gray Szürke

OO - maroon Gesztenyebarna

OO - red Piros

OO - purple Püspöklila

OO - fuchsia Világoslila

OO - green Zöld(sötétzöld)

OO - lime Világoszöld

OO - olive Olajzöld

OO - yellow Sárga

OO - navy Mélykék(sötét)

OO - blue Kék

OO - teal Pávakék

OO - aqua Akvamarinkék

OO - orange Narancssárga

Vissza a lap elejére

 

 

Weblap