Hogyan lehet egy saját webhelyet létrehozni a számítógépünkön?
Aki kevésbé jártas ezekben a dolgokban, biztosan felteszi a kérdést, hogy hogyan lehet saját webhelyet létrehozni a számítógépünkön? Mi elhoztuk számodra a megoldást, csak szánj egy kis időt az olvasásra.
1. Döntsd el a célodat és a technológiát:
- Milyen típusú webhelyet szeretnél létrehozni? (pl., statikus, dinamikus, blog stb.)
- Milyen technológiát használsz? (pl., HTML, CSS, JavaScript, stb.)
2. Tanuld meg az alapvető webfejlesztési nyelveket:
- HTML: Az alapstruktúra elkészítése.
- CSS: A stílus hozzáadása és a dizájn fejlesztése.
- JavaScript: Dinamikus funkcionalitás hozzáadása.
Ha még teljesen kezdő vagy, szükséged lehet némi információra és segítségre, hogy hogyan kezdd el a weboldalad felépítését. A HTML mindenképp szükséges lesz hozzá és a CSS, hogy design-t tudj rakni a weboldaladra. (pl. háttérkép, szövegszínek, kiemelésed, szöveghatások stb.)
3. Szerezd be a szükséges eszközöket:
- Első sorban szükséged lesz egy XAMPP szerver szolgáltatásra, amely localhoston vagyis a saját gépeden elkészít egy teljes weboldal szervert. Ez az alapja mindennek.
- Ha ezzel megvagy készíts a XAMPP – htdocs mappájába egy index.html fájl-t. Ez lesz az oldalad kezdőlapja.
- Szükséged lesz beszerezni egy kódszerkesztőt: Például Visual Studio Code, Sublime Text, Notepad++. (Én az elsőt javasolnám.)
- Kelleni fog egy böngésző ahol majd a szerver-t tudod nézni szerkesztés alatt: Chrome, Firefox, vagy Safari. (Ha fut a XAMPP – APACHE szerver (web szerver) akkor a böngésződ felső keresőjébe elég ha beírod, hogy „localhost/index.html”. Ha mindent jól csináltál láthatod az index.html fájlod)
4. Kezdd el az alapokkal:
- Készíts egy alapszintű HTML fájlt az oldal struktúrájával. Ez általában index.html szokott lenni (W3 Schools-on rengeteg segítséget találsz html kód íráshoz)
- Adj hozzá CSS-t a dizájnhoz és formázáshoz. (Be kell linkelned a style.css fájlod és létre kell hoznod class-okat és a style.css fájlodban argumentumokat kell nekik meghatároznod)
- A HTML kódod <HEAD> részébe ezt kell beillesztened, ha a style.css fájlod szeretnéd működésbe hozni a weboldaladon ” <link rel=”stylesheet” href=”style.css”> „
- Használj JavaScriptet a dinamikus elemekhez, ha szükséges.
5. Gyakorolj és tanulj tovább:
- Fontos, hogy sokat gyakorolj, hiszen anélkül nem fogod megtanulni a dolgokat, legyen akármilyen végzettséged.
- Tanulj meg alapvető fejlesztési koncepciókat és design elveket, hogy azokat a jövőben csak másolnod kelljen és így sokkal gyorsabban készíthetsz el saját weboldalakat.
6. Ismerd meg a fejlesztőeszközöket:
- Böngészők fejlesztői eszközei segítenek hibakeresésben és optimalizálásban. (Inspect funkció a böngészőkben magyarul Vizsgálat)
7. Vezess be további funkciókat:
- Tanulj meg szerveroldali fejlesztést (pl., Node.js, Flask, Django) ha dinamikus webhelyre van szükség.
- Ismerd meg az adatbázisok használatát (pl., MySQL, MongoDB) ha adatokat szeretnél tárolni.
8. Tegyél közzé lokalizáltan:
- Teszteld a webhelyet a saját gépeden a localhost segítségével.
- Ahogy azt mondtam már, ha beírod, hogy localhost akkor működnie kell!
9. Git és GitHub használata:
- Tanulj meg alapvető Git parancsokat a változtatások nyomon követéséhez.
- Szerezd be egy GitHub fiókot, és tartsd ott a kódot a verziókezelés céljából.
Hogyan érhetik el a világhálón a webszerverem?
Egyszerű, ha ezzel megvagy már csak a publikus ip címedre lesz szükség!
A weboldalra való csatlakozáshoz írd be a publikus IP címed 79.xxx.xxx.x:80 . A :80 a portot jelenti, hiszen ez a HTTP protokol portja amelyen kereszül a szervered kommunikálni tud! Érdemes a NO-IP szolgáltatást elővenni amivel fixálhatjuk az IP címünket, hogy az egy dinamikus DNS cím legyen és ne változzon mindig.
Fontos, hogy a weboldalad eléréséhet több portot is meg kell majd nyitnod a számítógépeden, ezek általában az alábbiak!
- 20 & 21 – FTP (File Transfer Protocol)
- 80 – HTTP (Hypertext Transfer Protocol)
- 443 – SSL / HTTPS (Hypertext Transfer Protocol Secure)
- 3306 – MySQL
- 25 – SMTP (Simple Mail Transfer Protocol)
A port nyitásról már készítettünk egy korábbi bejegyzést!
Remélem sikerült választ adni a kérdésére, hogy „Hogyan lehet egy saját webhelyet létrehozni a számítógépünkön?”! További tartalmakért böngésszen oldalunkon!
0 hozzászólás