
Tartalomjegyzék:
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!
Ajánlott:
Saját fotovoltaikus 5V -os rendszer készítése: 4 lépés (képekkel)

Saját fotovoltaikus 5V-os rendszer készítése: Ez egy bak-átalakítót használ 5 V-os kimenetként az akkumulátor (Li Po/Li-ion) töltésére. És Boost konverter 3,7 V -os akkumulátorról 5 V -os USB kimenetre az 5 V -os eszközökhöz. Hasonló az eredeti rendszerhez, amely ólom -sav akkumulátort használ energiatároló töltésként
Pt.2 Bluetooth -adapter készítése (kompatibilis hangszóró készítése): 16 lépés

Pt.2 Bluetooth -adapter készítése (kompatibilis hangszóró készítése): Ebben az oktatóanyagban megmutatom, hogyan használhatom Bluetooth -adapteremet egy régi hangszóró Bluetooth -kompatibilissé tételéhez.*Ha még nem olvasta el az első utasítást a " egy Bluetooth adapter " Javaslom, hogy ezt tegye, mielőtt folytatja. C
Weboldal készítése Raspberry Pi -n, Node.js, Express és MongoDB segítségével 1. rész: 6 lépés

Weboldal készítése Raspberry Pi -n, Node.js, Express és MongoDB segítségével … 1. rész: Üdvözöljük a node.js webes alkalmazás bemutató 1. részében. Az 1. rész áttekinti a node.js alkalmazásfejlesztéshez szükséges szoftvereket, a portátirányítás használatát, az alkalmazás létrehozását az Express használatával és az alkalmazás futtatását. Ennek második része
Saját Trezor Crypto hardvertárca készítése: 5 lépés (képekkel)

Saját Trezor Crypto hardvertárca készítése: Ebben a projektben saját Trezor kriptovaluta hardvertárcát készítek, mellékelve. Ez azért lehetséges, mert a Trezor nyílt forráskódú, ezért a githubjukon megadott fájlokat használtam fel saját készülékem létrehozására 40 dollár alatt. Volt néhány
Paint.Net kezdőknek: G2 Tux készítése: 14 lépés

Paint.Net kezdőknek: G2 Tux készítése: Ez valójában egy port a CrystalXp.Net Photoshop oktatóanyagából. Valójában nincs sok hozzáfűznivalója magának az oktatóanyagnak, csak néhány kisebb különbség a Photoshop (699 USD) és Paint.Net (0 USD). A legnehezebb a Photoshop -templom adaptálása volt