Kellékek |
Leírások |
HTML alapok
Válaszd ki a megjeleníteni kívánt kelléket! 
HTML alapok
WWW, URL, http, ftp
Mit jelentenek ezek a fogalmak?
A WWW a
World Wide Web rövidítése (bár egyesek szerint a World Wide Wait-é
:).
Az URL nem más, mint az Uniform
Resource Locator rövidítése, amelynek segítségével a világhálón
elhelyezett dokumentumokra hivatkozhatunk. Ennek az általános alakja
a következő:
http://www.gepnev.com/alonyvtar/oldal.html
A www.gepnev.com a szerver neve, amelyen a honlap elhelyezkedik,
a fájlok rendszerint alkönyvtárakba vannak pakolva a könnyebb
karbantarthatóság miatt, az oldal.html pedig a kívánt html oldal.
Fájljainkat mindig html vagy htm kiterjesztéssel mentsük el!
A http a hypertext-protokolra utal, ezzel a
protokollal kommunikálnak egymással a kiszolgáló (szerver) és a
gépünk, amikor letöltünk egy honlapot. Ezért is kezdődik minden URL
a http:// taggal.
Az ftp is egy protokol, ez a file
transfer protokol, amit fájlok mozgatására használunk. A jelenlegi
böngészők már képesek az ftp-szerverekkel is kommunikálni (ilyenkor
a böngésző cím-mezőjében az ftp://... szöveg olvasható), bár
rendszeres FTP-zésre nem ajánlom a böngészőket. Nincs meg bennük
minden FTP-funkció, erre alkalmasabb (és kényelmesebb) például a
Windows Commander vagy a CuteFTP program.
A html tag-ek
A html fájlokat teg-ekkel formázzuk. Ezek általános
felépítése:
<TAGNÉV> szöveg </TAGNÉV>
A tag-ek általában párban fordulnak elő, csak a közbezárt
szövegre hatásosak. (Van néhány szipla html-tag is).
A tag-ek
használatánál ügyeljünk arra, hogy ne "keresztezzük" őket. Ez azt
jelenti, hogy óvakodjunk a következőhöz hasonló eljárástól:
<1.TAG><2.TAG> szöveg </1.TAG></2.TAG>
Ez ugyanis megzavarhatja a böngészőt, és esetleg nem azt kapjuk,
amit szerettünk volna. Az ajánlott:
<1.TAG><2.TAG> szöveg </2.TAG></1.TAG>
Szerkezeti elemek
<HTML>
<HEAD>
<TITLE>
Ide jön a HTML oldal címe
</TITLE>
</HEAD>
<BODY>
Ide jön a lényeg, a HTML
szövege
</BODY>
</HTML>
Szövegformázó elemek
| <BR></BR> |
Új sor (a második tag el is hagyható) |
| <P></P> |
Új sor, sorkihagyással (a második tag el is
hagyható) |
<P align=left> </P>
<P align=center></P>
<P
align=right></P> |
A közbezárt szöveget balra, középre, ill jobbra
igazítja |
| <P align=justify> </P> |
A szöveget széthúzza (csak Explorer alatt
működik) |
| <HR> |
Vízszintes elválasztóvonal, mindig középre
igazítva |
| <HR size=x> |
A vastagságát meg lehet adni, x pixelben |
<HR width=x>
<HR
width=x%> |
Szélessége x pixel, vagy a képernyő x
százaléka |
<HR width=50% align=left>
<HR width=50% align=right> |
Balra, ill. jobbra igazítás |
| <HR noshade> |
Nincs árnyék, hanem csak egy tömör sáv |
| <CENTER> </CENTER> |
A közrefogott szöveget középre rendezi |
| <NOBR> </NOBR> |
A közrefogott szöveget egy sorban fogja kiírni a
böngésző |
<SPACER type="horizontal"
size=X>
<SPACER type="vertical" size=X> |
X pixelnyi helyet hagy ki a megadott helyet
vízszintesen ill. függőlegesen (csak Netscape alatt
működik) |
<SPACER type="block" width=X
height=Y align=#>
# = top, middle, bottom, left,
right |
Egy üres téglalapnyi helyet hagy ki, meg lehet
adni a téglalap paramétereit, valamint hogy hogyan
helyezkedjen el, ugyanolyan módon, mintha képet helyeznénk el
(csak Netscape alatt működik) |
Karakterformázó elemek
| <B></B> |
Bold |
Kövér |
| <I></I> |
Italic |
Dőlt |
| <U></U> |
Underline |
Aláhúzott |
| <S></S> |
Strike through |
Áthúzott |
| <STRIKE></STRIKE> |
Strike through |
Ez is áthúzott |
| <TT></TT> |
Typewriter |
Írógépforma |
| <SUB></SUB> |
Subscript |
Alsó index |
| <SUP></SUP> |
Superscript |
Felső index |
| <BLINK></BLINK> |
|
Villogó (csak Netscape alatt működik) |
| <MARQUEE></MARQUEE> |
|
Scrollozó (csak Explorer alatt működik) |
| <STRONG></STRONG> |
Strong |
Vastag |
| <SMALL></SMALL> |
Small |
Kis méret |
| <BIG></BIG> |
BIG |
Nagy méret |
| <EM></EM> |
Emphasis |
Hangsúlyos |
| <CODE></CODE> |
Program Code |
Programkód |
| <SAMP></SAMP> |
Sample |
Minta |
| <KBD></KBD> |
Keyboard |
Billentyűzet |
| <VAR></VAR> |
Variable |
Változó |
| <CITE></CITE> |
Citation |
Idézet |
| <DFN></DFN> |
Defined |
Meghatározott |
<FONT face="#,#..">
</FONT>
# = stílus neve (font
name) |
Arial,
Helvetica |
A szöveg stílusát így adhatjuk
meg |
Szövegméretet szabályzó elemek
Header, azaz fejléc
<H#></H#> , #=1..6
| <H1>Header</H1> |
Header |
| <H2>Header</H2> |
Header |
| <H3>Header</H3> |
Header |
| <H4>Header</H4> |
Header |
| <H5>Header</H5> |
Header |
| <H6>Header</H6> |
Header |
Font méret
<font size=#></font> , #=1..7
| <font size=7>Font size</font> |
Font size |
| <font size=6>Font size</font> |
Font size |
| <font size=5>Font size</font> |
Font size |
| <font size=4>Font size</font> |
Font size |
| <font size=3>Font size</font> |
Font size |
| <font size=2>Font size</font> |
Font size |
| <font size=1>Font size</font> |
Font
size |
Relatív font méret A
böngészőben külön be lehet állítani az alapértelmezett fontméretet,
így érdemesebb a relatív
fontméreteket használni.
<font size=#></font> , #= -2..+3
| <font size= +4>Font
size</font> |
Font size |
| <font size= +3>Font
size</font> |
Font size |
| <font size= +2>Font
size</font> |
Font size |
| <font size= +1>Font
size</font> |
Font size |
| <font size= -1>Font
size</font> |
Font size |
| <font size= -2>Font
size</font> |
Font
size |
Linkek
| <A
HREF="http://..."></A> |
Az URL helyére kell berakni a címet
pl "http://www.cjb.hu/" |
| <A
HREF="ftp://..."></A> |
FTP címre hivatkozás |
| <A
HREF="ftp://login:passwd@..."></A> |
FTP címre hivatkozás, ha kell login és password |
| <A HREF="mailto:..."></A> |
E-mail küldési lehetőség
pl mailto:freewebsablon@cjb.hu |
| <A
HREF="mailto:...?subject=..."></A> |
E-mail küldési lehetőség, meg lehet adni a témát is
pl
"mailto:freewebsablon@cjb.hu?
subject=Honlapod" |
Ki lehet jelölni egy HTML oldalon
belül is cimkéket, és lehet oda ugráltatni a
fókuszt |
| <A NAME="..."></A> |
Ez egy ilyen hivatkozás |
| <A HREF="#..."></A> |
A hivatkozásra ugrik |
| <A HREF="http://...#..."></A> |
Ha másik html lapra megyek, és ott a hivatkozásra
ugrik |
Képek
<IMG SRC="...">
<IMG
SRC="http://..."> |
Képbeszúrás. A kép lehet GIF, vagy JPG |
| <IMG SRC="..." alt="..."> |
Ha a kép nem jelenik meg, ez hasznos lehet, vagy ha valaki
lynx-et használ |
| <IMG SRC="..." width=X height=Y> |
Meg lehet adni a szélességet és a magasságot, ha ez nem
egyezik a kép eredeti méretével, akkor úgy torzítja a böngésző
a képet, hogy belemenjen |
| <IMG SRC="..." border=X> |
A képkeret szélessége pixelben, ez főleg akkor számít, ha
linkként teszed be a képet, és nem akarod, hogy egy kék, vagy
más színű keret éktelenkedjen a kép körül (X=0) |
| <IMG SRC="..." hspace=X> |
Megadja, hogy mennyi hely maradjon ki a kép és a szöveg
között vízszintesen |
| <IMG SRC="..." vspace=X> |
Megadja, hogy mennyi hely maradjon ki a kép és a szöveg
között függőlegesen |
<IMG SRC="..." align=top>
<IMG
SRC="..." align=middle>
<IMG SRC="..."
align=bottom> |
Megadja, hogy a kép mellett hol kezdődjön a szöveg, a
tetejénél, a közepénél vagy az aljánál |
<IMG SRC="..." align=left>
<IMG
SRC="..." align=right> |
A képet balra/jobbra igazítja. Ezzel a módszerrel több sor
szöveget is elhelyezhetünk a kép mellett |
| <BODY BACKGROUND="..."> |
Megadja az oldal háttérképét |
Térképek
A térképek arra valók, hogy ha egy
kép más részeiről
máshova mutasson a link,
vagyis egy képről több link vezessen. Ezért a képet fel kell
szeletelni.
<img src=img.gif
usemap="MAP-Name">
<map
name="MAP-Name">
<area shape="#"
coords="#" href="url">
</map>
shape="rect" coords="A,A',B,B'"
(A,A')=Bal felső, (B,B')=Jobb alsó |
Téglalapot választottunk ki, meg kell adni a bal felső, és
a jobb alsó koordinátákat |
shape="circle" coords="A,A',R'"
(A,A')=Középpont, R=Sugár |
Kört választottunk ki, meg kell adni a középpontot, és a
sugár hosszát |
shape="poly" coords="A,A',B,B',C,C'..."
(A,A')=Első csúcs, (B,B')=Második csúcs, ... |
Sokszöget választottunk ki, meg kell adni a csúcspontok
koordinátáit |
Klikkelj a téglalapra,vagy a körre, vagy a háromszögre.
<img src="maping.gif"
usemap="#Picture">
<map name="Picture">
<area shape="rect"
href="teglalap.html"
coords="140,20,280,60">
<area shape="poly"
href="sokszog.html"
coords="100,100,180,
80,200,140">
<area shape="circle"
href="kor.html"
coords="80,100,60">
</map>
Listázás
<UL>
<LI>...
<LI>...
</UL> |
Felsorolás |
<UL type=disc>
<UL type=circle>
<UL type=square>
<LI type=disc>
<LI
type=circle>
<LI
type=square> |
Megadja, hogy milyen elemmel legyenek jelölve a
lista tagjai
UL-nél a lista összes tagjára vonatkozik,
LI-nél csak a lista egy elemére
|
<OL>
<LI>...
<LI>...
</OL> |
Felsorolás, itt a lista tagjai sorszámozva vannak |
<OL type=A>
<OL type=a>
<OL type=I>
<OL
type=i>
<OL type=1>
<LI type=A>
<LI type=a>
<LI
type=I>
<LI type=i>
<LI type=1> |
Megadja, hogy milyen elemmel legyenek jelölve a
lista tagjai
UL-nél a lista összes tagjára vonatkozik,
LI-nél csak a lista egy elemére
- első
- második
- harmadik
- negyedik
- ötödik
|
| <OL start=X> |
Megadható, hogy mennyivel kezdődjön a lista
számozása (X egész szám) |
| <LI value=X> |
Megadható, hogy mennyi legyen egy listatag
sorszáma (X egész szám) |
<DL>
<DT>...
<DD>...
</DL> |
Definíciós lista
<DT>Kifejezés
<DD>Definíció |
<MENU>
<LI>...
</MENU> |
Menü lista |
<DIR>
<LI>...
</DIR> |
Directory lista |
Táblázatok
| <table> </table> |
Táblázat megadása |
| <tr></tr> |
Sor megadása |
| <th></th> |
Fejléc megadása, itt vastagbetűsen jelennek meg a szövegek |
| <td></td> |
Oszlop megadása |
Pl egy két soros, három oszlopos táblázat megadása a
következő:
<table border=1>
<tr><th>Egy</th><th>Kettő</th><th>Három</th></tr>
<tr><td>Négy</td><td>Öt</td><td>Hat</td></tr>
</table>
Eredménye:
| Egy |
Kettő |
Három |
| Négy |
Öt |
Hat |
| <table
border=X></table> |
Táblázat keretvastagságának megadása pixelben |
| <table cellspacing=X></table> |
Táblázat rácsvastagságának megadása pixelben |
| <table cellpadding=X></table> |
Megadja, hogy a szöveg és a rács között mennyi hely maradjon ki |
<table width=X></table>
<table width=X%></table> |
Megadja a táblázat szélességét |
<tr align=#></tr>
<th align=#></th>
<td align=#></td>
# = left, center, right |
A szöveget vízszintesen rendezi a cellában balra, középre ill. jobbra |
<tr align=#></tr>
<th align=#></th>
<td align=#></td>
# = top, middle, bottom |
A szöveget függőlegesen rendezi a cellában fel, középre ill. le |
<table align=left></table>
<table align=right></table> |
A táblázatot igazítja a képernyő bal ill. a jobb szélre |
| <table hspace=X></table> |
Megadja, hogy mennyi hely maradjon ki a táblázat és a szöveg között vízszintesen |
| <table vspace=X></table> |
Megadja, hogy mennyi hely maradjon ki a táblázat és a szöveg között függőlegesen |
Frame-ek
| <FRAMESET></FRAMESET> |
Ebben a keretben kerülnek inicializálásra a frame-ek |
<FRAMESET COLS=100,*></FRAMESET>
<FRAMESET COLS=20%,*></FRAMESET> |
Vízszintesen kétfelé lett osztva a kép, az első 100 pixel
széles (vagy a képernyő 20 %-a), a második meg a maradék |
<FRAMESET ROWS=100,*></FRAMESET>
<FRAMESET ROWS=20%,*></FRAMESET> |
Függőlegesen kétfelé lett osztva a kép, az első 100 pixel
széles (vagy a képernyő 20 %-a), a második meg a maradék |
| <FRAME SRC="..."> |
Ez kerül a FRAMESET közé, meghív egy html fájlt |
| <NOFRAMES> </NOFRAMES> |
Ez is a FRAMESET közé kerül, amennyiben a böngésző nem tud
frame-eket kezelni, ide kerül a vezérlés |
| <FRAME NAME="..."> |
El kell nevezni a frame-eket, hogy tudjunk rájuk hivatkozni, például amikor az egyib frame-ből a másikba
akarunk behívni egy html oldalt |
| <FRAME SRC="..."> |
Ez kerül a FRAMESET közé, meghív egy html fájlt |
| <FRAME NORESIZE> |
Letiltja a frame-elválsztóvonal mozgatását |
<FRAME SCROLLING="YES">
<FRAME
SCROLLING="NO">
<FRAME SCROLLING="AUTO"> |
A ScrollBar-t engedélyezhetjül ill. tilthatjuk le
vele | Hivatkozások a frame-ek között:
| <A HREF
TARGET="_blank">...</A> |
Az oldalt egy új böngészőablakba hozza be |
| <A HREF TARGET="_self">...</A> |
Az oldalt önmagára hozza be |
| <A HREF
TARGET="_parent">...</A> |
A frame-hiarerchiában az eggyel a frame fölötti szintre töltődik be az oldal |
| <A HREF
TARGET="_top">...</A> |
A legfelső szintre töltődik be az oldal |
| <A HREF
TARGET="frame-név">...</A> |
A megnevezett frame helyére töltődik be az
oldal |
Meta elemek
Kulcsszavak, amik a keresőknek válik a hasznára
<meta http-equiv="Keywords" content="1,">
A számok helyére irandóak a kulcsszavak
A "szerző"
<meta http-equiv="Author" content="Mr X.Y.">
A karakterkészlet
<meta http-equiv="Content- Type"
content="text/html ;charset=iso-8859-2">
Ez a
közép-Európai karakterkészlet, így
normálisan látszanak az ékezetek
A META-elemeket mindig a HTML-fájl fejlécébe
kell tenni!
<HEAD>
<META ....>
<TITLE>
Ide jön a HTML oldal címe
</TITLE>
</HEAD>
Speciális karakterek
A speciális karaktereket a következőképpen
adhatjuk meg:
&#; ahol a # egy kód, vagy egy ASCII
karakter száma
| & |
& |
| < |
< |
| > |
> |
| ° |
° |
| " |
" |
| µ |
µ |
| ® |
® |
| © |
© |
| « |
« |
| » |
» |
| ß |
ß |
| ¨ |
¨ |
| ä |
ä |
| ë |
ë |
| |
nem-összenyomható space |
Forrás:Bakondy Péter
Lap tetejére (Up)
|
|
|
