Kezdőlap > Fejtágító

Webszerkesztés alapelemei

jegyzet_webszerkesztes_html.pdf (2570581)

jegyzet_php_programozas.pdf (1433188)

A html szerkesztés a ma már elég egyszerű. Ezt lemérhetem magamról is, mivel nem értek hozzá, mégis sokmindent meg tudok csinálni, mert rengeteg grafikus szerkesztő áll rendelkezésünkre. Legelső honlapom egy Xara által gyártott honlap volt tele hibákkal, aztán szépen lassan rájöttem, hogy nem is olyan bonyolult. Mivel kezdőknek van az oldal, ezért beszélek grafikus szerkesztökről.

Első lépések:
Ha kiválasztottad a szolgáltatót, akkor tölts le valami szerkesztő programot. Erre megfelelő lehet egy jegyzettömb is (notepad) vagy egy neked szinpatikus szerkesztő program. Én a Namo webeditort használom. Most nem írok le újabb listát itt találsz egy kis linkgyűjteményt ingyen tárhelyet is és szerkesztőt it. Legelső lépésed, készíts egy index.html fájlt.

Gyökérkönyvtár: A tárhelynek az a része, amikor belépsz a jelszavaddal, elösször ez jön be. Ha ide töltesz fel valamit, az a gyökérkönyvtárban van. Ha feltöltesz egy külön mappát és abba töltesz dolgokat az már nem a gyökérkönyvtár !
Ha ide teszel képet, közvetlen hivatkozással hivatkozz rá. Pl:
<img src="keped.gif" width="100" height="100" border="0">

Ha feltöltesz egy mappát kepek névvel és ebbe teszed akkor az elérési utat is módisítani kell ! <img src="kepek/keped.gif" width="100" height="100" border="0">

Kezdőlap. ( index.html, vagy index.php )
Egyszerű html tartalom:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Az oldal címe</title>
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<body>
Ez egy példa
</body>
</html>

Ennek minden esetben az index.html (vagy index.php) nevet kell viselnie.

Ezt a html kódot egyszerűen bemásolhatjuk egy notepad-ba (jegyzettömb), majd elmentjük index.html néven. Jegyzettömb esetében: Fájl/Mentés másként/index.html
(A legtöbb grafikus szerkesztő rendelkezik olyan gyorsgombbal ami létrehoz egy ilyen üres html dokumentumot)

Ha eldöntöttük, milyen tartalommal szeretnénk feltölteni az oldalunkat, akkor a kezdőlapunkat megcsináljuk akár szerkesztővel, akár egy jegyzettömb(notepad) is megteszi (haladóknak ) . A lényeg, hogy index.html néven mentsük el. Tárhelyre célszerű a total commander programmal feltölteni és nem webes felületen vacakolni. Ha feltöltöttük az index.html, azaz a kezdőlapunkat, már láthatjuk is az eredményt ha a böngészőnkbe beírjuk a oldalunk címét.

Ékezetes betűk.
Sokan tartanak az ékezetes betűktöl, pedig egyszerű dolog. Létezik rá táblázat is, de pl a dreamweaver tudja magától is, tehát, ha hosszú ő-t írunk, akkor az is jelenik meg, de ha nem akarunk a táblázattal szenvedni, léteznek kódok is, amit a head tag után ha beírunk, akkor egyszerűvé tehetjük a dolgokat. ( Namo webeditor tartalmaz táblázatot is )
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
Ha ezt a kódot alkalmazzuk, akkor megoldódik az ékezetes betük problémája.

  Total commander. Megtalálod a Letöltéseknél, vagy letöltheted innen.
Létezik már magyarosított változata, ami elég egyszerűvé teszi a lépéseket, mert a tárhelyszolgáltatók, mindig leírják az adatokat, amit neked be kell írnod.
  Total commander beállítása:
        Ha kitallóztad a mappát amiből fel szeretnél tölteni, ( Jelen esetben weblapom mappa ) akkor nyomd meg az FTP kapcsólódás ikont.( kép) Kiad egy kis ablakot ( kapcsólodás FTP- szerverhez )   Utána pedig, az új kapcsolatra menj rá. (kép) Kapcsolat beállításai: kapcsolat neve: Amiről te megjegyzed. Kiszólgáló neve: Ezt a szolgáltató közli veled. Felhasználónév / Jelszó. Ezt is a regisztrációnál közlik veled. Nyomj ok-t, majd kapcsolódás

Hogyan legyünk ismertek a weben ?
Ha elkészítesz egy weboldalt akkor valószinű, hogy az a célod, hogy sokan rátaláljanak, erre is sok megoldás létezik. Itt találsz egy részletes leírást. Hogyan legyünk ismeretek a weben ?Talán ez a legfontosabb, hiszen ha nem találnak ránk, akkor bizony nem sokat ér a honlap.

Hogy a keresőoldlak rádtaláljanak:.

Oldal címe:
<title>az oldal címe</title> Ez fog megjelenni a felső sorban és alul is. Az a jó ha minden oldaladnak külön címe van !, a keresőoldalak szempontjából.

Oldal leírása:
<meta name="Description" content="ide írd a leírást">
Ide foglald össze mit tartalmaz az oldalad.

Kulcsszavak:
<meta name="keywords" content="szavakat, adj, meg, vesszővel, elválasztva">
Nagyon fontos a keresőrobotok számára. Ne adj meg túl sokat.

Karakterkészlet:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-2">

Arra szolgál, hogy milyen karakterkészlet szerint jelenítse meg az oldalt.
Tehát a teljes kód:

<title>Oldalad neve</title>
<meta name="keywords" content="Ide, az, oldal, kulcsszavait, amiről, rádtalálnak, a keresőkben, szavakat, adj, meg, vesszővel, elválasztva.">
<meta name="robots" content="all">
<meta name="description" content="Ide meg a leírását.">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Egy egy keresőoldalba való regisztrációnál sok idő eltelhet. A türelem meghozza gyümölcsét :) Minnél több helyre regisztráljuk magukat, annál több találatot kap majd az oldal a keresőkbe. A google.com oldalába regisztrálni kell. Ezt itt tudod megtenni.

Amire figyelni kell feltöltésnél !:

Nincs ékezetes betű a szerveren ahova feltöltöd. Ha egy képet, mondjuk: Jani.gif - et töltesz fel, akkor azt ne töltsd fel János.gif néven, mert az ékezetes betük hivatkozásai nem jelennek meg, csak legfeljebb a gépeden, akkor Janos.gif legyen a neve.
Külömbség van kis és nagybetű között is.

Problémát okozhat az is, ha a feltöltendő fájlod, mondjuk Tengerparti kep.GIF és a total commaner (ha úgy van beállítva, hogy minden fájlt kisbetűssé nevez át ) úgy tölti fel, hogy tengerparti kep.gif. Ha pedig nem ezt az elérési utat adod meg akkor megint csak jön a 404-es hiba ;) Ezt a beállítást feltöltésnél tudod állítani. Amkor már csatlakozva vagy a szerverhez és másolni szeretnél valamit, akkor megnyomod a másolás gombot (F5) akkor egy kis előbukkanó ablak jelenik meg. Itt van lehetőség bepipálni egy olyan beállítást, hogy: Fájlnév kisbetűsre alakítása. Ha ezt bepipálod akkor minden fájlt kisbetűsre nevez át.

Ha hosszab idő után úgy döntesz megszüntetsz egy oldalt, vagy átalakítást végzel és változtatsz a kiterjesztésen, html-ről php-ra, akkor ne töröld a szerverről a régi html fájlodat. tegyél bele egy automaikus átirányítást a html fájlról a php fájlra. Ez azért jó mert előfordulhat, hogy a keresőkben amíg nincs frissítés a régi html fájlodra hivatkoznak (amit töröltél ), akkor ismét egy 404-es hiba fog megjelenni.

Átirányítóscript:
<SCRIPT LANGUAGE="JavaScript">
function LoadPage(){
setTimeout("location.href='oldalad.php'",500);
}
</SCRIPT>

Vagy itt van egy egyszerűbb példája:
<meta http-equiv="refresh" content="1;url=oldalad.php">

Nagyon sok dolog, javascript sajnos csak IE böngészővel jelenik meg helyesen el kell döntenünk, megér e annyit, hogy mondjuk egy Opera böngészővel rendelkező ember ne tudja megnézni.

Érdemes minnél kevesebb képpel " teleaggatni " honlapunkat, minnél hamarabb letöltödjön, hiszen sokan rendelkeznek lassú internet kapcsolattal, ők lehet, hogy nem várják ki ha lassú, hanem továbbálnak. A gifekkel ugyanez a helyzet és nem is néz ki jól ha túl sok van belőlük, sok mozog a lapon. Inkább ha tudsz, akkor csinálj saját grafikát, erre tökéletes lehet a photoshop valamelyik példánya. Rengeteg tutorial található hozzá a neten, de van már magyar verziója is, amit dc++ programmal is le lehet már tölteni.

Figyeljün arra, hogy ne legyenek vakítóak a szinek és a betűk (kép)

Érdemes sötét szinhez világosabb betűt, világos szinhez, sötét betűt alkalmaznunk.

Szövegformázás:

Alapesetben ha nem rendelünk a weblap mellé formázott betűket, tehát nem adjuk meg, hogy milyen betűstilusban jelenjen meg, mindenkinek a saját böngészője álltal beállított betűtipus fog megjelenni
Célcszerű több betűtipust is megadni annak érdekében, hogy a látogató azt lássa, amit mi elképzeltünk. Erre egy példa:
<FONT face="Arial, Verdana, Times New Roman, sans-serif">
Az elsődleges betűtípus az Arial lesz.

Adhatunk meg betűtípust, nagyságot minden egyes sornak külön, vagy egy adott táblának is. Ha ebbe a táblába írsz, mindig így fog megjelenni.
Sor formázása:
<font color="#999999" size="1" face="Verdana">blablabla</font>
<font color="#3300FF" size="4" face="Times New Roman">blablblablabla222</font>

Eredmény:
blablabla
blablblablabla222

Táblához való hozzárendelés:
Készítsünk egy egyszerű kis táblázatot:
<table style="border-width:1px; border-color:black; border-style:solid;" align="center" cellpadding="0" cellspacing="0" width="400" height="40">
Eredménye:

Ha azt szeretnénk, hogy ebbe a táblába bármit írunk egy betűtípussal, szinnel, mérettel jelenjen meg, akkor így formázzuk:

Bármit írhatsz ide, így fog megjelenni !

Lehetőség van css ben is megformázni a táblát és a betűtípust. Megadhatjuk a háttérszínt, a scroll szinét is. A css része:

background-color : #FFFFFF;
border : 1;
border-color : black;
border-style : solid;
font-family : Verdana;
font-size : 8pt;
}
</style>

Első tábla

Második tábla

Itt a <table class="elsotabla" résznél adhatjuk meg a class utáni részél az adott class nevét. Arra kell figyelni, hogy a css ezt a részt tartalmazza, mert nem fog érvényesülni !!

Link szinezése, css:
A link szinét az egérrel való találkozásakor egy egyszerű kóddal is megoldatjuk:

<style type="text/css">
a:hover {color:red;}
</style>

Megnézem

Vagy pedig egy másik példa:

<style type="text/css">:

a {font-family:Verdana,Helvetica,Arial,sans-serif;text-decoration:none;}

a:hover {color:red;}

a:hover {text-decoration: overline underline }

</style>

<<Megnézem>>

Egy oldalon belül, több szöveget, hivatkozást is szinezhetünk, dekorálhatunk css segítségével.

Megnézem

</style>

<a class="type1" href="#">hivatkozás</a>
<a class="type2" href="#">hivatkozás</a>
<p><a class="type4" href="#">hivatkozás</a>
<p><a class="type3" href="#">hivatkozás</a>

A hivatkozásnál a megfelelő részre kell hivatkozni:
<a class="type1" href="www.oldal.cime.hu">hivatkozás neve</a>
Ilyenkor az 1-essel jelölt rész szinei érvényesülnek !

Külső css alkalmazása:

Alkalmazhatunk külső css fájlt. Hivatkozás rá:
<link rel="stylesheet" href="neve.css" type="text/css">
A neve.css létrrehozása:
Nyisd meg a jegyzettömböt. (notepad) Másold bele a css tartalmát, példák:

a:link {
color : #990000;
text-decoration : none;
}
a:visited {
color : #990000;
text-decoration : none;
}
a:hover {
color : #CC0000;
text-decoration : underline;
}
a:active {
color : #990000;
text-decoration : none;
}
body {
font-family : Tahoma;
font-size : 8pt;
}

Ha ezt belemásoltad egyszeűen mentsd el: Fájl/Mentés másként: neve.css

Megadhatod a háttér szinét, megadhatod a betűtípust, nagyságot is, szinezheted a scrollbárt is. Másold a végére a css-nek:

body {
background scrollbar-track-color : 333333;
font-family : Tahoma;
font-size : 10pt;
scrollbar-3dlight-color : EFEDED;
scrollbar-arrow-color : EFEDED;
scrollbar-darkshadow-color : EFEDED;
scrollbar-face-color : 333333;
scrollbar-highlight-color : 333333;
scrollbar-shadow-color : 999999;

}

A A.type1:hover {color:#990000; text-decoration:underline;} rész lesz az ami ha rámész az egérrel megváltozik a link szine. A decoration:underline;} rész is lehet változtatni.
none: nincs dekoráció, underline: aláhúzott.
Lehet félkövér is a hover részünk: font-weight: bold;}
Tehát a hover rész így fog kinézni:
A.type1:hover {color:#990000; font-weight: bold;}

Hogyan szerezzünk több látógatót ?

Bannerkészítés/Reklámozás.:

Az oldalad több módon reklámozhatod, népszerűsítheted. Vannak bizonyos bannercsere oldalak, vagy egyéni lapokkal felvéve a kapcsolatot kölcsönösen cserélhetsz bannert. Ez utóbbi egy elterjedt szokás.

Bannerkészítés kellékei:

Grafikai részhez photoshop.

Ha elkészítetted a bannered, (képed)akkor mentsd el .gif formátumban. Ezek után ha mozgó bannert szeretnél akkor az elkészített képeket összefűzheted ulead gif animator nevű programmal könnyedén.

Elterjedt szabvány banner méretek: 468x60 120x240 88x31

Olyan bannert készíts ami jellemző az oldaladra. Sokan a fejlécet csinálják meg bannerméretben. Ne legyen túl nagy a mérete, mert sok helyen ezt nem fogadják.

Reklámozás.

Nem túl elfogadott dolog ha egy-egy jól működő nagy fórumba regisztrálsz és a hozzászólásodban leírod a honlapod url-jét, és a weblapod leírását, de hatásos. Sokan nem nézik jó szemmel ezt, pedig léteznek a nagy fórumokon is erre a célra kialakított témák, weblapok reklámozása, egyéni weblapok...stb, stb.

A legfontosabb tanács:

Te vagy saját magadnak a legjobb reklámja. Ha normális vagy a látogatóiddal és tartalmas a honlapod, renszeresen frissíted, akkor a látogatók maguktól is ajánlani fogják vagy barátuknak vagy egy kapcsolodó fórumban az oldalad.

Több fajtája is létezik a reklámozásnak. Vannak a bannercsre rendszerek, amik 1:1 arányban jelenítik meg a bannereidet. Tehát ha a te banered megjelenik 250 alkalommal akkor a te bannered is megjelenik 250 alkalommal.
A másik bizonyos linkgyűjteményekbe, statisztikai rendszerekbe való beregisztrálás. Itt beregisztrálsz és kapsz egy html kódót amit az oldaladba kell illesztened. Ezek nagy részben kicsi bannerek 88x31-es pixel méretűek, tehát nem sok vizet zavarnak, de csrében kapsz ingyenes statsiztikát, és bekerülsz egy linkgyűjteménybe, és a keresők is megtalálnak ezen regisztráláson keresztül. Néhány ilyen banner példa:

Néhány oldal linkje:

https://www.best-top.hu/
https://free.enveco.hu/
https://www.hungariantop1000.com/
https://stat.segitek.hu/karbantartas.php

További oldalakat találsz a linkgyűjteménybe. a Statsiztika, számlálók- csoprtban.

Regisztráció.

Néhány keresőbe regisztrálni kell. Azokat a kulcsszavakat és leírást add meg, amiket a meta tagban megadtál. Iyenek: