Saját weboldal készítése kezdőknek: 5 lépés

2025 Szerző: John Day | [email protected]. Utoljára módosítva: 2025-01-23 14:47

Függetlenül attól, hogy valaha is álmodozott arról, hogy számítógépes programozó lesz, vagy valaha is használt weboldalt, valljuk be, szinte mindannyian az információs technológia lett az üzleti élet gerincét. Bár a programozás elsőre kissé ijesztőnek tűnhet, a célom az, hogy megtanítsam a webdesign alapvető alapjait, hogy az oktatóanyag után elkészíthesse saját weboldalát. Ezzel félre, térjünk rá!

Kellékek

• Macintosh vagy Windows PC (bár Linux disztrók is használhatók, egyelőre kihagyom őket, mivel ez egy kezdő bevezető).
• Az Ön által választott szövegszerkesztő (Notepad Windows rendszeren, TextEdit Mac rendszeren) vagy az Ön által választott IDE. Tapasztalataim szerint a Visual Studio Code -ot találtam a legjobban magamnak, ezért azt is javaslom, hogy nézze meg itt: https://code.visualstudio.com/ nem beszélve arról, hogy minden operációs rendszer platformon működik.

1. lépés: Címkék és egy kis történelem

Miután eldöntötte, hogy szövegszerkesztőt vagy IDE -t választ, kezdjük az alapokkal.

Akár hiszi, akár nem, a HTML vagy a HyperText Markup Language már közel 30 éve létezik, és minden évben újabb és újabb fejlesztések történtek a nyelven. Most azt kérdezheti, hogyan értelmezi a böngésző, hogy mit kell megjeleníteni a képernyőn? Ez néhány részben történik:

A HTML dokumentum formázása egyszerű. Két szakasza van, amelyeket fejnek és testnek neveznek. A webhely feje olyan kódot tartalmaz, amely a felhasználó számára nem látható. Ez a stíluslapok összekapcsolására és a webhely megfelelő megjelenítéséhez szükséges egyéb bitek deklarálására szolgál. A fej után a test olyan, mint amilyennek hangzik, a weboldal teste. Itt beszélhet a hangjával, és megmutathatja a közönségnek fantasztikus HTML -készségeit! Most már nem olyan egyszerű a szöveg beírása a törzsbe, és megjelenítése a kívánt módon, de szinte olyan egyszerű bizonyos értelemben, ha címkéknek nevezzük a dolgokat.

Íme néhány alapvető HTML -címke:

• cím - amely a böngésző számára megmondja, hogy mi az oldal címe. Ezt láthatja egy weboldal lapján is.
• h1, h2, h3, h4 - amelyeket különböző fejlécekhez használnak: a h1 a legnagyobb, a h4 pedig a legkisebb. Erről bővebben kitérek a következő részben.
• p - bekezdés, szövegrészek írására szolgál. Mint bekezdések a papíron.
• br - break, amely a szöveghez igazított szünetet szúr be.
• a - más oldalakra mutató linkek létrehozására szolgál, például kattintható linkre.
• img - egy kép és a weboldal összekapcsolására szolgál.
• ul, ol, li - rendezetlen listák, rendezett listák és listaelemek.
• - soron belüli megjegyzések készítésére használják a kódban, amelyeket a végfelhasználó nem lát.

És itt van néhány CSS -címke (vizuális):

• szín - egy adott szín hozzárendeléséhez a weboldal egy adott eleméhez vagy készletéhez.
• font-size-az oldal betűméretének megváltoztatására szolgál.
• háttérszín-bizonyos elemek vagy az egész oldal háttérszínének megváltoztatására szolgál.

Csatoltam egy kis csalólapot is, hogy segítsek neked, ha kicsit elveszettnek érzed magad, de ne aggódj, pillanatok alatt rájössz! Ezenkívül a www.w3schools.com egy fantasztikus forrás bármilyen programozási kérdéshez. Határozottan időt spóroltak nekem is.

Lényegében a böngésző hogyan olvassa a fájlt. Soronként megy, és funkcióról funkcióra dolgozza fel. A karaktereket olyan címkék deklarálására használják, mint például

és a címke bezárására szolgálnak, mint pl

. Ez fontos, különben a böngésző nem tudja, hol álljon le. Között a

és

címkék, ahol bármit megadhatsz!

2. lépés: A szerkesztő beállítása

Most, hogy egy kicsit kitértünk egy HTML webhely alapvető elemeire, merüljünk el, és próbáljuk ki magunk. A következő lépésben a Visual Studio Code -ot fogom használni a weboldal programozásához, de a kód elrendezése ugyanaz lesz, ha kényelmesebb a Jegyzettömb vagy a TextEdit használata.

Jegyzettömbön belül:

• A Jegyzettömb segítségével a program üres fájllal indul, ami rendkívül egyszerűvé teszi az indulást. Ez lehetővé teszi számunkra, hogy néhány lépést ugorjunk a VS Code használatához képest. Kezdjük a fájl megfelelő formátumban történő mentésével.
• Kattintson a Fájl> Mentés gombra
• Írja be a fájl nevét, majd a.html fájlt, majd a Mentés típusaként válassza ki az összes fájlt. Kattintson a mentés gombra.

VS kódon belül:

• A legjobb módja annak, hogy kihasználja az IDE összes funkcióját, ha a fájl létrehozásával kezdi, és megmondja az IDE -nek, hogy milyen típusú fájlról van szó. Ezt a következőképpen teheti meg:
• Kattintson a Fájl> Új fájl parancsra
• Egy üres fájl nyílik meg

• Ezután kezdje el a fájl mentését, bár üres, mivel ez lehetővé teszi az IDE számára, hogy megértse, milyen típusú fájl lesz a végtermék. Mentéskor feltétlenül adja meg a.html kiterjesztést a fájlnév végén. Kattintson a mentés gombra.

3. lépés: Tervrajzok

Miután sikeresen mentette a filename.html fájlt, kezdjük a weboldal keretrendszerének létrehozásával. Emlékezzen felülről, hogy a fájl mely kulcsfontosságú részeit kell deklarálnunk, mielőtt elkezdhetjük a HTML oldal többi részének létrehozását. Tipp: A webhely keretrendszerének elindításakor a! DOCTYPE HTML címke közli a böngészővel, hogy az olvasott fájl html fájl. Ez jól jöhet, ha különböző típusú kódok vannak ugyanabban a fájlban, és váltani szeretne a tolmácsok között. Ennek az utasításnak a terjedelmében nem fogunk túl sokat foglalkozni ezzel, de ha az utasítás után kíváncsi vagy a HTML fejlesztésre, akkor nyugodtan próbáld ki. A legjobb gyakorlat érdekében beillesztem a! DOCTYPE HTML címkét a fájl tetejére. Ne felejtse el megnyitni és bezárni.

Itt hasznos a fájl mentése a programozás megkezdése előtt, most, hogy az IDE tudja, hogy HTML -fájlokkal működik, az intellisense segítségével fejezi be a kifejezést, és javaslatokat kínál, hogy véletlenül ne felejtse el bezárni a címkét. Ne feledje, hogy azok számára, akik Notepadet használnak, az intellisense nem érhető el, mint az IDE -ben. Kezdjük a fej- és testcímkék megadásával az alábbiak szerint: (lásd a második képet).

Most, hogy a dokumentumok beállítása befejeződött, indulhatunk a versenyekre és szórakozhatunk!

4. lépés: kód; Kód; Kód;

Kezdhetjük az újonnan létrehozott fájl címének beszúrásával. Írja be, amit szeretne. Ne feledje, hogy ez a név jelenik meg a böngésző lapon. Kezdjük azzal is, hogy megadunk egy címet a webhelyünkhöz. Idézzük fel előtte, hogyan csináljuk ezt. Hallottam h1/2/3/4? Így van!

Mielőtt folytatnánk, hasznosnak találom, ha megnyitjuk fájlunkat egy böngészőablakban, hogy valós időben láthassuk, hogyan tükröződnek a változások a böngészőben. Ezt úgy teheti meg, hogy a Fájl> Mentés gombra kattintva elmenti a fájlt, navigál a mappába, amelybe a HTML -fájl mentve van, számomra ez az asztali számítógép, és a választott böngészővel nyissa meg a fájlt, és ezt megnézné., itt a weboldalad! Megjegyzés: Én személy szerint a Safarit használom választott böngészőmnek a számítógépemen, azonban a webfejlesztés során a Firefox az arany standard böngésző tesztelésre, mivel szinte minden webes szkriptnyelvvel működik.

Amint láthatja, a cím megjelenik a lapon, valamint a h1 címsorunk is látható. Jobban szeretem, ha a fájl böngészőablakát az IDE mellett nyitjuk meg, mivel az IDE módosításakor és mentésekor a változások azonnal megjelennek a böngészőben.

Nyugodtan próbáljon meg címkéket hozzáadni, és játsszon a különféle HTML -funkciókkal. Amint az alább látható, néhány bekezdést, törést, külső hiperhivatkozást adtam hozzá az Instructables.com webhelyhez, egy képhez (amely vagy külső forrásból linkelhető, vagy ugyanabban a könyvtárban, ahol a. HTML fájl tárolódik), példa a rendezetlen listára, a rendezett listára és végül egy megjegyzésre.

Ha színt és elrendezési beállításokat szeretne hozzáadni, írjon be egy stíluscímkét a fájl fejébe. Ez az a pont, amikor ez a HTML -ről a CSS -re változik, de vizuális okokból beírok néhány sort, hogy láthassa, hogyan működik ez. Lényegében a CSS működése lehetővé teszi, hogy a funkciókon belüli HTML -elemeket a {} zárójelek használatával vezérelje, hogy beírja a kódot egy adott HTML -elemhez.

5. lépés: Utolsó gondolatok

És ott van; sikeresen létrehozta első weboldalát! Mivel ez egy kezdő útmutató, szeretném élvezetessé tenni az első HTML -élményt. Tapasztalatom szerint a legjobb módja annak, hogy tanuljak, ha belemerülök és kipróbálom a dolgokat, megnézem, mit tehetsz a kódoddal, és azt is, hogyan tudod megtörni a kódodat. Ez építi az integritást, és segít jobban megérteni, hogyan és miért működik a kód úgy, ahogy működik. Ne feledje, hogy a www. W3Schools.com kiváló forrás a kérdésekre, és még virtuális homokozót is kínálnak a böngészőben a kód kipróbálásához. Remélhetőleg tanultál valamit és boldog kódolást!