2011

 

 

 

HTML szerkesztő program használatának alapjai.

Megmutatom, hogy milyen egyszerű ezen programok használata.

Az Interneten megtalál számos ingyenes programot erre a célra. Például nagyon jó választás lehet a teljesen ingyenes NVU nevű program.

Letöltés:
NVU HTML szerkesztő

Vagy ha komolyabban bele akar mélyedni a HTML szerkesztés rejtelmeibe, akkor célszerű letöltenie az Adobe Dreamweaver 30 napig ingyenesen kipróbálható verzióját.

Letöltés: Adobe Dreamweaver 30 napig ingyenes próbaverzió


Én magam is egy ilyen segédprogramot használok a hármas bemutató videóban. Ezen programoknál sem kell Önnek miden funkciót használnia. Most bemutatom a Dreamweaver program főbb menüpontjait. Mindegyik HTML szerkesztő program használata hasonló lesz, úgyhogy Önön múlik, hogy melyiket szeretné használni, melyik a szimpatikus Önnek.

Mielőtt neki kezdenénk, azért ismerkedjen meg a HTML nyelv felépítésével. Önnek nem feltétlenül szükséges ezekkel tisztában lennie, mivel a program az úgynevezett tagokat automatikusan elkészíti Ön helyett.

Tehát ha ki szeretné hagyni ezt a részt, akkor ugorja át, de valószínű, hogy a későbbiekben jól jönnek majd ezek az ismeretek.


HTML ismeretek röviden

HTML egy egyszerű metanyelv, ami úgynevezett tagokkal dolgozik, amelyeknek van egy kezdő és záró eleme.

példa: <i>dőlt szöveg</i>
<i>: nyitó tag
</i> : záró tag
Így fog megjelenni: dőlt szöveg

Fontosabb tagok:
<b>:
szöveg kiemelés
<i>: szöveg döntése

Zárótag nélküli lényegesebb tagok:
<br>: sortörés

Kép beszúrása:
<img src="kep_nev.jpg" width="180" height="150" align="center">
(kép neve, szélesség, magasság, elhelyezés középre)

Táblázat beszúrása:
<table width="100%" border="1" cellspacing="3" cellpadding="6" bgcolor="#FCFEF1" bordercolor="#000000">
<tr>
<td>szöveg</td>
<td>szöveg</td>
</tr>
<tr>
<td>szöveg</td>
<td>szöveg</td>
</tr>
</table>

A <table></table> tag a táblázat két fő tagja. Ezen belül helyezkednek el a sorok (<tr></tr>), és azon belül a cellák (<td></td>).

A táblázat egyéb beállításaiért felelős paraméterek:

width="100%" : szélesség
border="1" :
szegély vastagság
bordercolor="#000000" :
szegély színe
cellspacing="3" :
külső margó vastagsága
cellpadding="6" :
belső margó vastagsága
bgcolor="#FCFEF1" :
háttérszín

Ez a táblázat így fog megjelenni:


szöveg szöveg
szöveg szöveg



Hivatkozás (link):
<a href="link_neve.html">A link szövege</a>



Minden weboldalnak van egy alap html szerkezete:

<html>

<head>
<title>Az oldal fejlécében látható cím.</title>

<meta name="keywords" content="Kulcsszavak, vesszővel kell elválasztani a szavakat pl. webdesign, websablon">

<meta name="description" content="A weboldal rövid leírása.">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"> karakterkészlet meghatározása, nem kell vele foglalkozni, ez a beállítás jó (iso-8859-2).

</head>
<body>
Az oldal tartalma ide kerül, az előbbiekben említett tagokkal vezérelve.
</body>
</html>


Nézzük a HTML szerkesztő program főbb menüpontjait:

File / New (CTRL+N): új oldal szerkesztése
File / Open (CTRL+O): létező oldal megnyitása
File / Save (CTRL+S): oldal mentése

Insert / Image (CTRL+ALT+I): kép beszúrása
Insett / Media: flash, flash videó, shockwave formátum beszúrása
Insert / Table (CTRL+ALT+T):
táblázat beszúrása
Insert / E-mail link: "írjon nekünk" link beszúrása

A szöveget szinte ugyanúgy szerkesztheti, formázhatja mintha egy sima szövegszerkesztőt használna.

Ezek a legfőbb elemek amiket mindenképp ismernie kell. Mindegyik szerkesztő program rendelkezik beépített helyzetérzékeny súgóval. Általában F1 billentyűre lehet előhívni. Használja bátran, ha nem tud valamit. A segítség elolvasása után biztosan meg tudja már oldani a problémát.


Zárszó helyett néhány további gyors jótanács:

  • 1024x768-as felbontásra optimalizálja a weboldalt

  • semmiképpen se készítsen olyan oldalt, ahol vízszintes gördítősávot kell alkalmazni

  • tesztelje le a munkáját minél többfajta böngészőprogramban, és felbontásban