HTML,HTML kódok alapjai,CSS,Magyar ékezetes betűk HTML szerint

Indította TraxWall, 2011-10-31, 14:55:18

Nyomtatás
Le Oldalak1
Felhasználói műveletek
2011-10-31, 14:55:18
Sziasztok.

Összegyűjtöttem nektek az összes Magyar HTML Kódokat!
Magyar Ékezetes     HTML Kód
á                  - á
é                    - é
í                    - í
ó                    - ó
ú                    - ú
ö                    - ö
ô                    - ô
ü                    - ü
û                    - û
Á                    - Á
É                    - É
Í                    - Í
Ó                    - Ó
Ú                    - Ú
Ö                    - Ö
Ô                    - Ô
Ü                    - Ü
Û                    - Û



Remélem tetszett aki végig nézte :)


Üdv Generic-System
2011-10-31, 21:21:27 #1
Üdv most leírok egy kódot lehet hogy már valaki tudja valaki nem de aki nem akar az ékezetes betűkel szórakozni mint PL.:
Kód Kijelölés
-á ez az á betű kódja.

Az ezt a kódolást rakja be az index.php-ba és a régit törölje ki:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title></title><link rel="stylesheet" type="text/css" href="stam.css"><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"></head>?>
[/B][/I]
2011-11-28, 20:50:25 #2 Utolsó szerkesztés: 2011-12-27, 22:16:47 Szerző: Grinder
Sziasztok!

Leírnék nektek pár alap HMTL-kódot!
Egy kód így néz ki:<center>Üdvözöllek a weblapomon!</center> <--- a szöveg végén / jellel zársz!
Megnyitsz egy jegyzettömböt és oda írhatod őket!
<html>Ezzel nyitod az egész forráskódot...
<head>Ez olyan semmi, de kell bele
<title>A weboldal címe ami fent jelenik meg
<body background="images/valami.png">Itt szükségünk van 1 mappára amit közvetlen a jegyzettömbök mellé!A mappa neve legyen images(lehet képek is vagy amit akarsz) és ide tegyük be a háttérnek szánt képet,fejlécet stb.
<img src="images/valami.png">Ezzel egy képet rakhatsz be.. :D
<p>Szöveget tehetsz be ide...
<center>Középre igazíthatsz vele bármit
<P Align="Left">Balra igazíthatsz vele bármit
<P Align="Right">Jobbra igazíthatsz vele bármit
<a href="http:\\www.google.com">Egy linket tehetsz be... A kód zárásakor nem kell beütni végig hogy </a href> hanem elég csak </a>...

Egyenlőre ennyi!
A listát majd bővítem...

Szerintem egy köszit PM-ben vagy +karmát megér
Üdv,Grinder
2012-04-22, 15:54:35 #3 Utolsó szerkesztés: 2012-04-25, 16:02:08 Szerző: Minato
Hy all.
Ebben a Topicban egy weboldalt fogunk írni XHTML és a CSS segítségével.
Nem is húzom az időt kezdjünk bele.
Először is kell egy szövegszerkesztő.
Én a Notepad++-t fogom használni de innen még nézhettek: http://metin2hungary.net/index.php/topic,130578.0.html
Töltsd le az egyiket mint mondtam én a Notepad-ot fogom használni.
Letöltöd - Feltelepíted.
1.)Megnyitod majd a Kódolás fül alatt kiválasztod az UTF8 kódolás BOM nélkül lehetőséget.
2.)Ellátogatsz a http://www.w3.org/QA/2002/04/valid-dtd-list.html oldalra. Itt megkeresed az XHTML 1.0 Strictet, és az ott található szöveget kimásolod, de ha nincs kedved ezzel szórakozni akkor egyszerűen ezt másold ki:
Kód Kijelölés
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.)Bemásolod a Notepad-ba.
4.)Létrehozol valahol egy mappát.
5.)A szöveges fájl ami a Notepad++-ba van azt elmented abba a mappába emit előzőleg létrehoztál és ellátod index.html névvel.
6.)Létrehozol egy új fált (Ctrl+N) Ezt elmented másként.(Ctrl+Alt+S) Ezt pedig style.css névvel látod el.
A weboldal HTML részét pirossal, a CSS részét pedig kékkel írom.
Let's Go!
<html>
<head>
<body>
</body>
</head>
</html>
Mint észrevehetted a tag-ek <> és </> jelel közé kerülnek ^.^
<>=Megnyitod a tag-et. </>=Lezárod a tag-et. Mivel XHTML-t írunk minden tag-et le kell zárni, tehát vannak olyan tag-ek mint pl a
 - Ehez nincs külön </br> vagyis ilyenkor ezt kell tenni:
 - Így kell használni.
<html>---> Ezzel megnyitod az egész html fájlt.
<head>---> Fejléces beállítások, meta tag-ek.
<body>---> A HTML fájlt törzse.
<head>
<title>Címsor</title>---> A böngésző címsorában a Címsor szó fog megjelenni.
<meta http-equiv= "Content-Type" content="text/html" charset="utf-8" />
</head>Beállítottuk a karakter kódolást a fájlon belül is.
<head>
<meta http-equiv= "Content-Type" content="text/html" charset="utf-8" />
<meta name="author" content="Minato" /> ----->A weboldal készítője a content=""közé kell írni a választ. Tehát pl. A te művészneved K4zZ akkor <meta name="author" content="K4zZ"/>. Persze bármi lehet a content-en belül.
<meta name="copyright" content="All rights reserved" />  ----->A weboldal jogi állása szerintem ez egyértelmű.
<meta name="keywords" content="Metin2 Hungarian Forum" />  -----> Kulcs szavak. Ami legjobban jellemző az oldaladra. Hogyha a content="" közé beírod hogy Google akkor egy másik gép hogyha rágeres erre a szóra (Google) akkor előbb utóbb befog jönni az oldalad.
<meta name="description" content="Ez egy Weboldal készítő tanfolyam" />  ----->Az oldalad leírása.
</head>
Jöjjön a várva várt CSS. :D
Így fog kinézni a dolog:
Ez lesz a HTML.
A magyarázat, megjegyzés.
A CSS.
Azt hogy egy css fájlt hatással legyen a HTML fájlra először is be kell azt húznunk amít ezekkel a sorokkal tehetünk:
<link rel="stylesheet" href="style.css" />
Ha azt látod hogy nyitva van a téma ne írj bele mert éppen írok.
Szöveg formázások.
A szövegeket az <p> és a <strike> tag-ek közé helyezzük.
mint Bold.
mintItalic.
mintUnderline.
<strike>mintStrike :D.
<p> --->Ez csak annyit jelent fogy új sorba kezdi a szöveget.
Egyébként a sortörés a
.
Jöjjön egy kis CSS.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Magyarázat; HTML:Nincs mit magyarázni. Magyarázat;CSS:
color: red;=Minden betű ami a <p>-tageken belül van az pirossá fog változni.
line-height: 20px;=A sorok közötti távolság 20px-re fog változni. Itt nem fogod látni mert csak egy mondatot írtam.
p{
color: red;
line-height: 20px;

}
Tegyük fel van 2db <p> tag-ed.
Így néznek ki:
<p>Lorem ipsum dolor sit amet.</p>
<p> Consectetur adipiscing elit.</p>
Amit ez előbb írtama Az össze <p> tag-re érvényes. Tehát mind a kettő piros színű, de mivan akkor hogyha például a 2.tag-et zöldel akarjuk írni? Ilyenkor jönnek képbe a class-ok.
Így kell ábrázolni:
<p class="A class neve.">Lorem ipsum dolor sit amet.</p>
Magyarázat; HTML: class="A class neve"=Ez segít abban hogy átformáljuk ezt a <p> tag-et. Magyarázat; CSS: p.A class neve=A p tag-en belül a A class neve classot választottok.
Tehát ha például van neked egy ilyened:  <p class="Hajjaj">Lorem ipősum dolor sit amet.</p>
Akkor a CSS-ben ezt kell írni: p.Hajjaj ezután márcsak annyit kell tanni hogy a p.Hajjaj-ba be kell írni a színt.: p{color: green;
}
Ezzel az ami a <p class="Hajjaj">Tag-ek belül van az mind Zöld színű lesz.
p.A class neve{
color: green;
}

Post Merge: 2012-04-22, 16:04:58

Újra itt. :D
Kezdjük is el:

body{
font-family: verdana,tahoma,arial,georgia,sans-serif;
font-size: 11px;
}
Ezekkel a sorokkal ezt értük el: Minden ami a body-n belül van (<body>) annak a szövegnek a mérete 11px-el lett és verdana betűtipusú. Azért kell többet megadni (A betűtipusokból)
mert tegyük fel az egyik gépen nincs telepítve a verdana betűtipus (Pedig ez alapértelmezett) akkor ugrik a tahoma betűtipusra, ha nincs tahoma betűtipus akkor ugrik az arialra és így tovább ezért célszerű minél többet megadni.
A folytatáshoz szerezzünk egy kis szöveget.
Kód Kijelölés
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vitae hendrerit metus. Nunc pellentesque venenatis tortor quis laoreet. Phasellus ac tellus dolor. Integer a viverra est. Vestibulum ut odio non velit sodales varius. Vestibulum ut eleifend arcu. Morbi condimentum pulvinar semper. Vestibulum lacinia neque in orci posuere mattis. Etiam vitae nulla eu eros tincidunt pretium eget et lacus. Donec vitae neque massa, vel ornare sem. Integer vel neque eget massa vestibulum cursus. Donec placerat, lorem et pharetra placerat, felis dolor suscipit nisi, eu congue urna est ut leo.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer quis nunc purus, id tempus quam. Morbi eu magna sem. Nam in orci nec diam lobortis pretium semper quis turpis. Proin placerat iaculis auctor. In eu odio tellus, sed congue neque. Nunc vestibulum sollicitudin blandit. Curabitur luctus placerat aliquam. Sed sed orci neque. Fusce ut turpis a eros tempor mattis ac ut ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Phasellus fringilla ante varius leo malesuada feugiat. Aliquam libero nisi, consectetur sed varius quis, gravida a sapien. Quisque diam felis, commodo sit amet euismod ac, interdum vel tellus. Nullam sit amet massa vel odio faucibus malesuada. Integer dignissim, tortor sed feugiat viverra, ipsum nisl pretium felis, sit amet condimentum ante dui blandit metus. Aliquam sit amet porttitor ante. Curabitur suscipit, nisi a adipiscing feugiat, felis tortor feugiat libero, eu rhoncus est mauris nec erat. Cras turpis ante, consequat in euismod non, sagittis sit amet dui. Vestibulum iaculis ultricies purus, ac tempus magna egestas at. Vivamus viverra dignissim condimentum. Vestibulum consectetur lacus et ante tristique tempus. Nulla placerat convallis sem, eu ornare enim sagittis sit amet. Mauris cursus mattis metus eu suscipit. Vestibulum imperdiet convallis neque vitae cursus. Pellentesque pretium fringilla diam, nec ultrices erat faucibus quis. Vestibulum augue felis, tincidunt porttitor consequat sit amet, fermentum ut ante.

Nunc non lectus elit, vitae dictum libero. Vivamus eget libero enim, sit amet venenatis sem. Integer sit amet elit quis libero tincidunt posuere vitae ut sem. Nullam elementum gravida ante, eget ultrices mauris lobortis nec. Praesent ante dui, fringilla id ullamcorper sit amet, molestie rhoncus nisi. Suspendisse et lectus eget nisi sollicitudin fringilla. Suspendisse velit turpis, euismod at sodales in, elementum vitae enim. Duis id elit a erat malesuada auctor convallis non dolor. Vestibulum metus mauris, dapibus commodo vehicula ut, pretium cursus libero. Ut aliquet nisi nunc. Curabitur pulvinar vulputate tempor. Integer elementum placerat nisi, dictum scelerisque risus tincidunt at.

Morbi rhoncus, risus vel ornare vulputate, tortor mauris vehicula augue, vel commodo nisl mi non nunc. Pellentesque et hendrerit ante. Pellentesque ut lorem quis ligula adipiscing placerat. Etiam malesuada velit et sem pretium et pellentesque est porta. Donec convallis laoreet nisi sed faucibus. Ut quis massa vel libero euismod lobortis. Mauris volutpat, mauris et ultrices malesuada, nisi dui mattis quam, eget fermentum ligula neque sed urna. Donec at turpis ipsum, nec ullamcorper tellus. In aliquet blandit fringilla. Morbi gravida pretium enim vitae molestie. Nullam aliquam iaculis libero posuere condimentum. Ut a tellus mauris, quis malesuada erat.
Oldal: http://lipsum.com/feed/html
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ás
    • Ezek 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ás
    • itt 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ás
  • Második felsorlás
  • Harmadik felsorlás
  • Negyedik felsorlás
    • Ezzel 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

    2012-06-01, 14:34:30 #4
     :PManapság az Interneten több tízmillió honlap (vagy weblap, webpage, homepage) található. Miért készítsünk mi is egyet? Ez bizony fogós kérdés. Akinek nincsen komolyabb ötlete (vagy ismerete a HTML-programozás terén), az készít egy személyes lapot, ahol bemutatkozik. Leírja ki is ő, illetve, hogy mit szeret. Ezen oldalak nem örvendenek túl nagy látogatottságnak, de legalább ismerőseinknek, barátainknak vagy munkatársainknak bemutathatjuk őket.
    De hogyan készülnek a weblapok?

    Ezek az oldalak HTML-nyelvben íródtak. Persze vannak ezen belül további érdekességek is (csak hogy megemlítsek egyet: a javascript nyelv), de a HTML a lényeg. Ez a dokumentum valójában egy egyszerű szövegfájl, ami utasításokat, úgynevezett tag-eket tartalmaz. Ezeket a parancsokat természetesen majd tüzetesebben is megvizsgáljuk. Ilyen fájlok készíthetők egyszerű szövegszerkesztőkkel is (erre a célra alkalmas a DOS Editje, vagy a Windows Write-ja is, esetleg egy jegyzettömb, nincs szükség Word-re). Persze itt is találhatunk remek HTML-szerkesztőket, amelyek használatához nem is kell ismernünk a nyelvet, de azért illik! És ilyen honlapszerkesztők nélkül is lehet nagyszerű weboldalakat készíteni, sőt!

    Az ilyen HTML-dokumentumok (vagy Internet-dokumentumok) megtekintéséhez nem feltétlenül szükséges Internet. Amennyiben a merevlemezen tároljuk a fájlt egyszerű böngészőprogrammal megtekinthetjük. Ilyen az Internet Explorer, a Netscape Navigator vagy az Opera. Sajnos ahány böngésző (vagy browser), annyi megjelenési forma. Ha elkészítünk egy jól mutató, designos honlapot és Internet Exploreren teszteljük, az lehet, hogy Netscapen nem lesz olyan szép. És az sem mindegy, hogy milyen felbontásban illetve színmélységben teszteljük, mert Internet Explorer és Internet Explorer között is lehet különbség! Ezután pedig nem árt figyelni a böngésző verziójára. Ma már csak nagyon kevesen használnak régi típusú böngészőket és a legújabbakat is kevesen használják, de annyival tartozik a honlap vezetője (a webmester) a látogatóknak, hogy a lap, ha nem is ugyanúgy, de megtekinthető legyen minden böngészőben. Ezek után persze nagyon bonyolultnak tűnik a dolog, de még koránt sincs vége. Mindezek ellenére nem szabad megijedni!

    Az elkövetkezendőkben a HTML majd mindegyik elemét tárgyalni fogjuk. Amelyek kimaradnak, azok nem túl megbízhatók, legalábbis nem minden esetben. Ilyen az embded és a layer parancs. Az embded-et beillesztő webmesterek már kellő jártasságot szereztek a HTML-programozásban, a layer-ek pedig megbízhatatlanok Internet Explorer böngészőn. Ebből világossá válhat az is, hogy nem fogok foglalkozni olyan részletekkel, melyek (több-kevesebb sikerrel) nem működnének a két legnagyobb böngészőn, kivéve a marquee parancsot, amelyre egy egész cikket szánok. A cikksorozatban csak a HTML-nyelv kap helyet, meg egy kis alapszintű javascript.
    Az alap utasítások

    Az utasítások mindig relációs jelek között vannak. A záró utasítás előtt a / jel szerepel. A tag-okban alkalmazhatók idézőjelek, de csak akkor, ha az egyértelmű a böngésző számára! Ha nem, a böngésző egyszerűen figyelmen kívül hagyja az utasítást.

    A HTML dokumentum megnyitását a <html> kóddal végezzük, így a lezárását a </html>-lel. A dokumentumnak két nagy része van: a fejléc és a dokumentumtörzs vagy röviden csak törzs. Előbbi nyitó utasítása a <head>, utóbbié a <body>. A fejlécben kap még helyet a <title> parancs, ami az oldal nevét jelenti. A dokumentumtörzsbe fognak kerülni a valódi formázások: a szövegek, a képek, stb. A fejlécbe csak néhány különleges kód kerül, például sok javascript-kód. Ha a szerkesztő utasításokat szeretne elhelyezni a dokumentumban (melyet nem látnak a látogatók), azt is megteheti a <!—nyitó- és --> záró kód segítségével. Lássunk egy egyszerű dokumentumot!

    <!—Ez itt a szerkesztő üzenete -->

    <html>

    <head>

    <title>Első weblapom</title>

    </head>

    <body>

       Ez itt a dokumentumtörzs...


       Ez itt a szöveg...<p>

       Itt pedig egy új bekezdés látható...

    </body>

    </html>

    A példában két új parancs is látható, a
     és a <p>. Előbbi egy új sort eredményez, utóbbi egy új paragrafust. Előbbi parancsot sosem kell lezárnunk, utóbbit csak nagyritkán. Lehetőségünk van a szöveghez különböző igazítást is rendelni, amelyet a <p> címke használatával tehetünk meg. A <p align=##> címke ilyen, ha a ## helyén az alábbi szavak valamelyike található: left, right, center. A left parancs balra, a right jobbra, a center pedig középre igazítja a szöveget egészen a következő paragrafus megkezdéséig. Lehetőségünk van sorkizárt szöveg írására is, amihez a <p align=justify> parancsot kell begépelnünk. Ez sajnos nem működik minden böngészőnél. Címeket (vagy heading) is írhatunk. Ezeket a <hi> paranccsal lehet előcsalni, ha az i helyén egy szám áll 1-től 6-ig. Az 1-es áll a struktúra legtetején, azaz ez a legnagyobb. Természetesen a betűk méretét nemcsak így befolyásolhatjuk! A <font> parancs mögé írt size paraméterrel is megváltoztathatjuk. Azaz a <font size=4> paranccsal négyes méretű betűt írhatunk. Az alapértelmezett betűnagyság három. Természetesen ez a méret nem egyezik meg a szövegszerkesztőkben megadott méretekkel. Ez azért van így, mert utóbbiaknál a méretek széles skálája áll rendelkezésünkre, míg a HTML-nyelvben csupán hét nagyságfokozat van. Ezek a szövegszerkesztők által használt pont méretben a következők:

    1 = 8 pont

    2 = 10 pont

    3 = 12 pont

    4 = 14 pont

    5 = 18 pont

    6 = 24 pont

    7 = 36 pont

    Természetesen lehetőségünk van a jól ismert félkövér, dőlt illetve aláhúzott formázásokat is elvégezni, sőt, egy fix szélességű font (vagy betűtípus) is rendelkezésünkre áll. A félkövér betűket a , a dőlteket az , az aláhúzottakat az , a fix szélességűt pedig a <tt> paranccsal lehet használni.

    Lássunk egy egyszerű lapot ezek ismeretében!

    <html>

    <head>

    </head>

    <body>

    <h1>Egyszerű példák a HTML-programozásról</h1>

    <h2>Az igazítás</h2>

    <p align=center>Ez a szöveg középen van!<p>

    <p align=left>Ez bal oldalon!<p>

    <p align=right>Ez pedig jobb oldalon!<p>

    <p align=justify>Ez a szöveg pedig egy sorkizárt szöveg. Persze ezt csak akkor lehet észre venni, ha végig ér.<p>

    <h3>A betűméret</h3>

    <font size=1>Ez a betű 1-es méretű...


    <font size=3>Ez a betű 3-mas...


    <font size=7>Ez pedig 7-es!


    <h6>A betűformázások</h6>

    Írhatunk félkövér, dőlt, aláhúzott vagy <tt>fix szélességű</tt> betűket.

    </body>

    </html>

    Természetesen nem csak a szöveggel lehet bűvészkedni, de erről egy kicsit később!

    A fejlécről még nem tettem elegendő említést! A <base href=elérési út> parancsot használva megadhatjuk az URL báziscímet, de erre már nincsen szükség, amióta megjelentek a legújabb kiszolgálók! A <basefont size =#> paranccsal pedig az alapértelmezett betűméretet adhatjuk meg. A <link> parancs jelzi a többi dokumentummal való kapcsolatot, az <isindex> pedig a keresőknek, hogy indexlapról van-e szó. Mindezeket neked nem kell használnod, hogy dokumentumod élvezhető legyen    !
    Nyomtatás
    Fel Oldalak1
    Felhasználói műveletek