HTML alapok

 

Tartalomjegyzék:

  1. WWW, URL, http, ftp
  2. A html tag-ek
  3. Szerkezeti elemek
  4. Szövegformázó elemek
  5. Karakterformázó elemek
  6. Szövegméretet szabályzó elemek
  7. Linkek
  8. Képek
  9. Térképek
  10. Listázás
  11. Táblázatok
  12. Frame-ek
  13. Színek
  14. Meta elemek
  15. Speciális karakterek
  16. Programok

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> Blink Villogó (csak Netscape alatt működik)
<MARQUEE></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.sch.bme.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:bp216@hszk.bme.hu
<A HREF="mailto:...?subject=..."></A> E-mail küldési lehetőség, meg lehet adni a témát is
pl "mailto:bp216@hszk.bme.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, hogyha 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

 
 
<img src="mapimg.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    
  • disc
  • circle
  • square
      <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    
  1. első
  2. második
  3. harmadik
  4. negyedik
  5. ö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

 

Színek

      <BODY BGCOLOR="#......" TEXT="#......" LINK="#....." VLINK="#....." ALINK="#......">
      Megadhatjuk az oldalunkra vonatkozó színeket
      Mindegyik színhez egy hatjegyű számkód tartozik, hexadecimális számrendszerben
      A színek rendre a követezők:        

  • BGCOLOR = háttérszín
  • TEXT = a szöveg színe
  • LINK = a linkek színe
  • VLINK = a már meglátogatott link színe
  • ALINK = aktív link színe
      <font color="#......"></font>
      Ezzel meg szövegek színét adhatjuk meg
 
      <table bgcolor="#......"></font>
      Ezzel táblázatok háttérszínét adhatjuk meg
 
      <td bgcolor="#......"></font>
      Ezzel táblázat egy egységének háttérszínét adhatjuk meg

 

Meta elemek

      Kulcsszavak, amik a keresőknek válik a hasznára
        <meta http-equiv="Keywords" content="1, 2, 3">
        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

 
      &amp; &
      &lt; <
      &gt; >
      &deg; °
      &quot; "
      &micro; µ
      &reg; ®
      &copy; ©
      &laquo; «
      &raquo; »
      &szlig; ß
      &uml; ¨
      &auml; ä
      &euml; ë
      &nbsp; nem-összenyomható space

 

Programok

Gombok, 3D-s szövegek készítéséhez jól használható a Xara WebStyle.
Letölthető az 1.1-es verzió innen.
Az upgrade az 1.2-es verzióhoz pedig innen.

Nagyon jól használható grafikai program a Paint Shop Pro 7.0.
Homepage: http://www.jasc.com/

Kiváló HTML-szerkesztő a Macromedia Dreamweaver 4.0.
Homepage: http://www.macromedia.com/


 

 

Készítette: Bakondy Péter
Utolsó módosítás: 2001.05.01.