internetes pénzkeresés

A HTML Stuktúra 

Amint a bevezetőben olvashattuk, minden HTML formátumú szövegfájl a <HTML> utasítással kezdődik és a </HTML> záró utasítással végződik. A dokumentumot a fejlécelemek vezetik be, melyek kezdetét a <HEAD> utasítás jelzi. A fejlécelemek között szokás a dokumentumcímet megadni, mely címet a <TITLE> és a </TITLE> utasítások közé kell zárni. A fejlécet a </HEAD> utasítás zárja. 
A dokumentumtörzs a fájl <BODY> és </BODY> utasítások közötti része. Ezen elemek között kell elhelyezni mindent: a szöveget, hivatkozásokat, képeket, stb. (A keretek és a JavaScript kódok kivételével!)
Tehát a következőkben a következő szerkezetet fogjuk használni:
<HTML>
<HEAD>
<TITLE> Ide jön az oldal címe, ezt a szöveget fogod latni a böngésző címsorában</TITLE>
</HEAD>
<BODY>
Ide jön a dokumentumtörzs.
</BODY>
</HTML>
A következőkben egyszerű formázó tag-ekre mutatok példát, amelyet a <body> és </body> tagek közé kell elhelyezni.
 A táblázatban láthatjátok a kódot, és mellette a kód eredményét. Amint látni fogjátok, minden tag-et (formázó utasítást) a < jel vezet be, és a > jel zár le. Az adott tag hatását a megfelelő lezáró tag szünteti meg, amely </tag> formátumú. 
() Ha nem ezt szeretnéd használni, akkor természetesen bármilyen szöveges szerkesztőben (pl. notepad, joe, pico) megírhatod a kódot, amit  el kell mentened, majd a böngésződbe be kell olvasnod.

Betűtípusok, stílusok <b> <i> <u> <tt>

Ha ezt a kódot beírod a dokumentumtörzsbe

 

ez lesz az eredménye

<b>Kövér betűk (bold) </b>

Kövér betűk (bold)

<i>Dőlt betűk (italic)</i>

Dőlt betűk (italic)

<u>Aláhúzott betűk (underlined) </u>

Aláhúzott betűk (underlined)

<tt>Írógép betűk (teletype) </tt>

Írógép betűk (teletype)

Fejléc <h1> ... <h6>
(A fejlécek - mint ahogy a szövegszerkesztésnél is megszokhattuk - a html oldalak logikai felosztását teszik lehetővé. pl. h1 az oldal címe, h2 egy alcím, h3 annak az alcíme és így tovább. A HTML oldalak esetén 6 fejlécet használhatunk)

<h1>1-es fejléc </h1>

1-es fejléc

<h2>2-es fejléc </h2>

2-es fejléc

<h3>3-as fejléc </h3>

3-as fejléc

<h4>4-es fejléc </h4>

4-es fejléc

<h5>5-ös fejléc </h5>

5-ös fejléc

<h6>6-os fejléc </h6>

6-os fejléc


Ha nem az alapértelmezett (balra) igazítást szeretnénk használni, megadhatjuk az igazítás típusát az align paraméter segítségével. (left=balra, center=középre, right=jobbra) pl.
<h1 align="center"> Ez egy középre igazított 1-es fejléc </h1>

Ez egy középre igazított 1-es fejléc

<h3 align="right"> Ez egy jobbra igazított 3-as fejléc </h3>

Ez egy jobbra igazított 3-as fejléc

Betűméret <font size=" ">


A betűméretet kétféleképpen állíthatjuk be: abszolút és relatív módon.
Az abszolút méretmegadásban 1 és 7 között állíthatjuk be a méretet, ahol a 7-es a legnagyobb az 1-es a legkisebb...

<font size ="4"> 4-es betűméret </font>

4-es betűméret

<font size ="7"> 7-es betűméret </font>

7-es betűméret

 A relatív méretbeállításnál azt adhatjuk meg, hogy az alapként beállított betűmérethez képest mennyivel nagyobb, illetve kisebb betűméretet akarunk látni. Ha pl. 2-el nagyobbat, akkor a +2, ha 1-el kisebbet, akkor a -1 méretmegadást kell alkalmaznunk. 
Azt, hogy mihez képest legyen nagyobb vagy kisebb az adott betűméret a <basefont size="méret"> tag segítségével állíthatjuk be.

<font size ="+2"> Kettővel nagyobb betűméret </font>

Kettővel nagyobb betűméret

<font size ="-1"> Eggyel kisebb betűméret </font>

Eggyel kisebb betűméret

 Az alábbi ablakban módosíthatod a kódot, és kipróbálhatod a méretmegadások közti különbségeket. pl. megváltoztathatod a basefont beállításokat is... 



Betűtípus <font face=" ">

A Face paraméter segítségével állítható be a kívánt betűtípus. 


Figyelem! Ne használj különleges, egyedi betűtípusokat, mert nagy valószínűséggel a látogatók semmit sem vesznek észre belőle. (ugyanis azon betűtípusok esetében, amelyek nincsenek az adott gépre felinstallálva, a böngésző a hagyományos betűtípusokat jeleníti meg.)

<font face ="Arial">Arial betűtípus. </font>

Arial betűtipus.

<font face ="Courier">Courier betűtípus. </font>

Courier betűtipus.

Betűszín <font color=" ">

A betűk színét is többféleképpen lehet beállítani. Az első esetben a szín nevét használjuk, természetesen angolul. pl. red, yellow, black, white, stb... A második esetben egy kóddal adjuk meg a színt. A 6 jegyű kódot a # jel vezeti be.

<font color=red> Piros </font>

Piros

<font color=#898134> Kevert </font>

Kevert

#898134 a szín úgynevezett RGB kódja. Az első két karakter a vörös (R=red) szín erősségét mutatja 16-os számrendszerben (hexadecimálisan). A leggyengébb a 00, a legerősebb az FF. A 3.és 4. karakter a zöld szín erőssége (G=green), az 5. és 6. a kéké (B=blue) 

A színek kódját a grafikai programok többsége megmutatja az adott színt kiválasztva. De az RGB picker segítségével online módon is megtudhatod a színek kódját.

 

Vízszintes vonal <hr>

Ha a dokumentumon belül valamilyen szakaszt el szeretnénk különíteni a többitől, használhatunk vízszintes elválasztó vonalat a <hr> tag használatával.

Ez egy vízszintes vonal (horizontal rule) <hr>


Az elválasztó vonal szélességét (width) és vastagságát (size) is megadhatjuk. Az igazítás (align)  balra (left), jobbra (right), középre (center) történhet. 
pl. <hr size="3" align="center" width="150">


A vonal szélességét megadhatjuk képpontokban (ahogy a fenti példa mutatja), vagy pedig a rendelkezésre álló hely százalékában. 
pl. <hr size="3" align="center" width="80%">


Bekezdések <p>

A <p> elem segítségével a szöveget bekezdésekre tördelhetjük. Az adott bekezdést a <p> és </p> elemek közé kell tenni. A bekezdést az align paraméterrel balra, középre, jobbra igazíthatjuk.
A böngészők az egyes bekezdések előtt és után - a tagolás érdekében - nagyobb helyet hagynak.

Igazítás (align): left(balra), center(közép), right(jobbra)

<P align="left"> Ez egy balra igazított bekezdés </P>

Ez egy balra igazított bekezdés

<P align="center"> Ez egy középre igazított bekezdés </P>

Ez egy középre igazított bekezdés

<P align="right"> Ez egy jobbra igazított bekezdés </P>

Ez egy jobbra igazított bekezdés

 

Sortörés <br>

Ha a szövegben egy sort feltétlenül új sorban akarunk kezdeni a <br> taget kell használnunk.

Ez az első sor<br>Ez pedig a második

Ez az első sor
Ez pedig a második

Hiperlinkek <a href="URL">  szöveg </a>

A hiperlinkekkel hozhatunk létre kapcsolatot szövegrészek, illetve dokumentumok között. A böngészők a linkeket aláhúzással illetve eltérő színnel jelölik, persze ezek a beállítások megváltoztathatóak.


Az URL (Uniform Resource Locator, egységes dokumentum meghatározó rendszer) a következő lehet:
Ha a saját gépünkön lévő dokumentumra szeretnénk hivatkozni, akkor az URL megadásánál a file:// "előtagot" kell használnunk. Ha pl. a c:\web\iskola\palyazat.html oldalra szeretnénk linket, akkor a file://C|WEB/ISKOLA/PALYAZAT.HTML URL-t kell használni. A c:\ megadás helyett használjuk a c| formát.
file://
dokumentum a kliens számítógépen
file://C|WEB/ISKOLA/PALYAZAT.HTML


Jól gondoljuk meg, hogy valóban erre a megadási módra van-e szükségünk. (ha ugyanezt az oldalt másik gépről néznénk, akkor a link az azon a gépen lévő web alkönyvtárban keresné az iskola alkönyvtárat és abban a palyazat.htm oldalt...)

Ha egy FTP szerveren elhelyezkedő állományt akarunk belinkelni, akkor az ftp:// protokolt kell használni.
ftp://
file átviteli protocol
ftp://ftp.c3.hu/Utilities/winzip70.exe
Ha egy másik weboldalra akarunk linket, használjuk a következőt:
http://
hypertext transfer protocol
http://www.elte.hu/
Ha a link segítségével be szeretnék jelentkezni (telnet segítségével) egy gépre, használjuk a következőt:
telnet://
bejelentkezés egy távoli gépre
telnet://ludens.elte.hu/
Ha a mailto:email cím formát használjuk, az adott linkre kattintva betöltődik az alapértelmezett levelezőprogram, amellyel emailt küldhetünk a megadott email címre.
 
mailto:
email cím megadása
mailto:abonyita@freemail.hu
 
(A levél tárgya is megadható a ?subject=szöveg elemmel, sőt az is hogy ki kapjon másolatot (?cc=cimzett) Ha több opciót akarunk megadni, akkor az &jelet kell alkalmazni. pl. mailto:abonyita@freemail.hu?CC=gipszjakab@freemail.hu&Subject=Proba)

Példák:


<a href="http://www.elte.hu/">Ez az ELTE honlapja</a>

Ez az ELTE honlapja

<a href="ftp://ftp.c3.hu/Utilities/Winzip70.exe ">A winzip letölthető erről a címről</a>

A winzip letölthető erről a címről

<a href="mailto:abonyita@freemail.hu?subject=Üdvözlet">Itt írhat nekem levelet</a>

Itt írhat nekem levelet

A következőkben (pl. a frameknél) még foglalkozunk a hiperlinkek megadási módjaival.

Felsorolások

A HTML nyelv lehetőséget ad arra, hogy különböző listákat (felsorolás, sorszámozott, meghatározás) hozzunk létre.

Egyszerű felsorolás
Egyszerű felsorolás esetén az <ul> és </ul> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. pl.

<ul>
<li>első elem
<li>második elem
<li>harmadik elem
</ul>

  • első elem
  • második elem
  • harmadik elem

Sorszámozott lista
Sorszámozott lista  esetén az <ol> és </ol> tagek közé kell elhelyeznünk a listaelemeket, amelyeket a <li> tagek vezetnek be. pl

<ol>
<li>első elem
<li>második elem
<li>harmadik elem
</ol>

  1. első elem
  2. második elem
  3. harmadik elem

Meghatározás lista
Meghatározás lista esetén az <dl> és </dl> tagek közé kell elhelyeznünk a listaelemeket, amelyek a fogalom megadásából (<dt> tag vezeti be) és a magyarázatából (<dd> tag vezeti be) állnak.

<dl>
<dt>1. fogalom <dd>az első fogalom magyarázata
<dt>2. fogalom <dd>a második fogalom magyarázata</dd>
</dl>

1. fogalom
az első fogalom magyarázata
2. fogalom
a második fogalom magyarázata

Speciális karakterek, ékezetes betűk

Előfordulhat, hogy az oldalon speciális jeleket szeretnénk megjeleníteni. (Speciális jelnek számít már a < és a > jel is, hiszen gondoljunk bele, ha a forráskódban használjuk ezeket a jeleket, akkor a böngésző úgy értelmezi, hogy valamilyen taget akarunk megadni, és nem fogja megjeleníteni. Ebben az esetben speciális karaktereket kell használnunk.

Ugyanez a helyzet az ékezetes betűkkel is. Ha ékezetes betűket szeretnénk használni akkor a következő kódokat kell "megjegyeznünk":

&aacute;= á

&Aacute;= Á

&ouml;= ö

&Ouml;= Ö

&eacute;= é

&Eacute;= É

&uuml;= ü

&Uuml;= Ü

&iacute;= í

&Iacute;= Í

&otilde;= ő

&Otilde;= Ő

&oacute;= ó

&Oacute;= Ó

&ucirc;= ű

&Ucirc;= Ű

&uacute;= ú

&Uacute;= Ú

 

Tehát ha pl. az árvíztűrő tükörfúrógép szöveget akarjuk megjeleníteni, akkor a következőket kell a kódba elhelyeznünk:
&aacute;rv&iacute;zt&ucirc;r&otilde; t&uuml;k&ouml;rf&uacute;r&oacute;g&eacute;p 
Mielőtt teljesen elkoptatnátok a billentyűzeteteket és elmenne a kedvetek a magyar ékezetes betűk használatától, megnyugtatok mindenkit, hogy van egyszerűbb módja az ékezetes betűk megadásának. Az alternatívát a META tagek lehetőségei jelentik, amelyről egy külön fejezetben is foglalkozunk. Most elég csak annyit tudnunk, hogy a következő sorok valamelyikét be kell illesztenünk az oldal forráskódjába (mégpedig a <head> </head> tagek közé) és innentől kezdve bátran használhatjuk hagyományos módon az ékezetes betüket. 

Tehát a megoldás:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">

vagy

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> 

sor használata a <HEAD> részben. 

Speciális karakterek összefoglaló táblázata

 

HTML kód

Unicode

 

HTML kód

Unicode

 

&nbsp;

&#160;

D

&ETH;

&#208;

!

&iexcl;

&#161;

N

&Ntilde;

&#209;

c

&cent;

&#162;

O

&Ograve;

&#210;

?

&pound;

&#163;

Ó

&Oacute;

&#211;

¤

&curren;

&#164;

Ô

&Ocirc;

&#212;

Y

&yen;

&#165;

O

&Otilde;

&#213;

|

&brvbar;

&#166;

Ö

&Ouml;

&#214;

§

&sect;

&#167;

×

&times;

&#215;

¨

&uml;

&#168;

O

&Oslash;

&#216;

C

&copy;

&#169;

U

&Ugrave;

&#217;

a

&ordf;

&#170;

Ú

&Uacute;

&#218;

<

&laquo;

&#171;

U

&Ucirc;

&#219;

?

&not;

&#172;

Ü

&Uuml;

&#220;

­

&shy;

&#173;

Ý

&Yacute;

&#221;

R

&reg;

&#174;

?

&THORN;

&#222;

?

&macr;

&#175;

ß

&szlig;

&#223;

°

&deg;

&#176;

a

&agrave;

&#224;

?

&plusmn;

&#177;

á

&aacute;

&#225;

2

&sup2;

&#178;

â

&acirc;

&#226;

3

&sup3;

&#179;

a

&atilde;

&#227;

´

&acute;

&#180;

ä

&auml;

&#228;

?

&micro;

&#181;

a

&aring;

&#229;

?

&para;

&#182;

a

&aelig;

&#230;

.

&middot;

&#183;

ç

&ccedil;

&#231;

¸

&cedil;

&#184;

e

&egrave;

&#232;

1

&sup1;

&#185;

é

&eacute;

&#233;

o

&ordm;

&#186;

e

&ecirc;

&#234;

>

&raquo;

&#187;

ë

&euml;

&#235;

?

&frac14;

&#188;

i

&igrave;

&#236;

?

&frac12;

&#189;

í

&iacute;

&#237;

?

&frac34;

&#190;

î

&icirc;

&#238;

?

&iquest;

&#191;

i

&iuml;

&#239;

A

&Agrave;

&#192;

?

&eth;

&#240;

Á

&Aacute;

&#193;

n

&ntilde;

&#241;

Â

&Acirc;

&#194;

o

&ograve;

&#242;

A

&Atilde;

&#195;

ó

&oacute;

&#243;

Ä

&Auml;

&#196;

ô

&ocirc;

&#244;

A

&Aring;

&#197;

o

&otilde;

&#245;

A

&AElig;

&#198;

ö

&ouml;

&#246;

Ç

&Ccedil;

&#199;

÷

&divide;

&#247;

E

&Egrave;

&#200;

o

&oslash;

&#248;

É

&Eacute;

&#201;

u

&ugrave;

&#249;

E

&Ecirc;

&#202;

ú

&uacute;

&#250;

Ë

&Euml;

&#203;

u

&ucirc;

&#251;

I

&Igrave;

&#204;

ü

&uuml;

&#252;

Í

&Iacute;

&#205;

ý

&yacute;

&#253;

Î

&Icirc;

&#206;

?

&thorn;

&#254;

I

&Iuml;

&#207;

y

&yuml;

&#255;