Ezt a Lorem ipsum-os szöveget rakjuk be a <body>-ba.
Majd ha végeztünk akkor rakjuk <p> tag-ek közé.
Szóval az első bekezdés elejére egy <p> a végére pedig </p> Ezt bekezdésenként tegyük meg.
p{
width: 500px;
margin: 0;
padding: 0;
}
Magyarázat: p{}=Minden ami a htmlben lévő <body>-ban lévő <p>Tag-ek között van.
width: 500px; A szöveg 500px szélességű lesz.
margin: 0;=Ezt tapasztalni kell
padding: 0;=Ezt tapasztalni kell
p{
background: #ddd;
border: 2px solid #000;
}
background: #ddd;= A szöveg mögötti rész szürkévé változik. A szürkét a #ddd-vel jelöljük ez a hexa kód, egyébként az angol nevek is működnek pl. blue,yellow, red stb..
border: 2px solid #000;=Keretet rak a szöveg köré. Paraméterek: 2px= a keret vastagsága; solid= folytonos keret, van még a dotted ami a szaggatott; #000;=A keret színe.
Van még a text-align ami lehet center right justify center. így kell használni: text-align: center; text-align: right; és még ezek amiket felsoroltam.
Ez ugye rakott a keretet a szövegre, de sokkal jobban nézne ki ha középen lenne...
Ezt így tehetjük meg:
Ugye van a margin: 0;-ánk.
Ezt állítsuk át erre:
margin: 10px auto;
Ezzel középre helyeztük a szöveget.
Hogyha létre hozol egy linket akkor alapértelmezetten alá lesz húzva a szöveg. Csináljuk meg azt hogy ne legyen aláhúzva. Itt jön az első alkalom hogy párhuzamosan használjuk a HTML-t, CSS-t.
<a href="http://Ahova linkelni fog.hu" target=Blank>A link szövege</a>
Magyarázat; HTML:
Nincs mit magyarázni csak a target=Blank-ot ez azt jeleni hogy másik fülön fog megjelenni a link.
a{
text-decoration: none;
}
Magyarázat; CSS:
text-decoration: none;=Eltünteti az aláhúzást.
Post Merge: 2012-04-22, 18:19:41
Ezzel nem sokat akarok foglalkozni mert kézileg elég nehéz megírni meg hosszadalmas is.
Erre használhatod az Adobe Dreamweawer cs4 programot. Azon nagyon ügyes kis Táblázatokat tudsz létrehozni. de azért egy minimálisan leírom hogy mésis mi a szitu.
<table>
<tr>
<th>Fejléc szövege</th>
</tr>
<tr>
<td>Táblázat adatai</td>
</tr>
</table>
<table>=Táblázat nyitó tag.
<tr>=Ezen belül adjuk a táblázat celláit.
<td>=A táblázat adatai.
table{
border-collapse: collapse;
border-spacing: 0;
border: 2px solid #000;
}
table tr th{
background: #000;
color: #fff;
}
table tr td{
padding: 0;
margin: 0;
}
border-collapse: collapse;= Csak úgy érted meg ha saját szemeddel látod.
border-spacing: 0;=Csak úgy érted meg ha saját szemeddel látod.
Ez azt jeleni hogy a táblázaton beüli tr-eken belüli th-k. Background: #000;=Szerintem nem kell magyarázni; Fekete a fejléc háttere.
color: #fff; A szöveg színe fehér lesz.
2 ok van amiért nem nagyon foglalkozom a táblázatokkal:
1.)A táblázatokat nem negyon kell használni ha pedig használod jól nézzen ki Photoshopot használnak.
2.)Ha megnézed a Metin2-es weboldalakat akkor egyiksem használ táblázatot ha pedig mégis akkor kézcsók :D, Ha pedig nem metines hanem mondjuk valamilyen üzleti weboldalt akarsz készíteni akkor minek metin2-es Fórumon nézelődsz?
Nagyjából ennyi amennyit hozzáfűznék a témához.
Post Merge: 2012-04-23, 16:15:27
Hy. :D
Most a listákkal fogunk foglalkozni.
Hogy mire is gondolok? - Bemutatom egy példán.
Hogyan találtam rá a metinre?
A sors keze.A Google a barátod.
Barátom ajánlotta.Hírdetésből.De ugyan ezeket meglehet tenni számokkal kis és nagy betűkkel vagy négyzetekkel de még saját képet is belehet rakni.
Kezdjünk is hozzá.
Ezek a listák alapvetően az:
<ul>
tag-ek közé kerülnek. Az <ul>-on belül <li> tag-ek közé tesszük. Például:
<ul>
<li>Első felsorolás</li>
</ul>
Ez így fok kinézi:
Első felsorolásEzek a számozatlan listák.
Vannak számozott listák.
Ezek péládul 1. 2. 3. de lehetnek betűk is. Valahogy így fest:
Első felsorolásitt is ugyan az a helyzet mint a számozatlan listánál csak itt nem <ul> hanem <ol>. Egy példán:
<ol>
<li>Első felsorolás</li>
</ol>
Így néz ki a HTML rész.
Na akkor a CSS. :D
<ol>
<li>Első felsorolás</li>
</ol>
ol{
list-stlye-type: lower-alpha;
}
Magyarázat; HTML: Ez már megvan magyarázva.
Magyarázat; CSS: list-style-type=Ez azt jelenti listastílus tipus. :D
lower-alpha=Kisbetűk.
Kisbetű: lower Nagy betű: upper.
Tehát: list-style-type: upper-alpha; Nagybetűs a,b,c;
Van még a list-style-type: lower-roman; Kisbetűs római felsorolás.
list-style-type: upper-roman; Nagybetűs római felsorolás.
Na most beágyazzuk a felsorolást :D.
<ol>
<li>Ilyen felsorolások vannak:
<ul>
<li>Első felsorolás</li>
<li>Második felsorolás</li>
<li>Harmadik felsorolás</li>
<li>Negyedik felsorlás</li>
</ul>
</li>
</ol>
Ha ezt végrehajtjuk akkor ez történik:
Ezt megmutatom példán:
Ilyen felsorolások vannak:
Első felsorlásMásodik felsorlásHarmadik felsorlásNegyedik felsorlásEzzel a számozott listába ágyaztuk a számozatlan listát.
Átvettük a számozott listát.
Ezeknek van Szám, kis-nagy római és szimpla betű felsorolása.
Ha számozatlan listát hozunk létre akkor alapértelmezett ként egy üres kis körrel fog jelölni.
Ezt meg lehet változtatni a következő kéépen:
<ol>
<li>Ilyen felsorolások vannak:
<ul>
Első felsorolás
</ul>
</li>
</ol>
Magyarázat; HTML: Ugye ez a HTML rész egy számozott listába beágyazott számozatlan lista.
Magyarázat; CSS: list-style-type: circle;=Ez az alapértelmezett kitöltetlen kis karika.
list-style-type: square;=Ezzel a kis kitöltetlen karika egy mini kis négyzetté fog válni.
list-style-type: disc;=Ezzel a négyzet egy körré fog változni egy kitöltött körré.
list-style-type: circle;
list-style-type: square;
list-style-type: disc;
Ennyi volt a Számozott/atlan lista.
Post Merge: 2012-04-25, 15:21:55
Mondjátok meg mire vagytok kíváncsiak és megmondom hogy tedd emg.
Természetesen HTML, CSS;
Post Merge: 2012-04-25, 16:02:08