Bare Bones weboldal: 10 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:43

Ma egy nagyon egyszerű, csupasz csonttal rendelkező weboldalt fogunk létrehozni a semmiből. Beszélni fogunk a HTML -elemekről, a weboldal stílusáról (színek, betűtípusok, igazítás stb.), És végül arról, hogyan lehet képet beszúrni a weboldalába!

Ennek az utasításnak a végére meglesz az alapvető készsége, hogy a nulláról hozzon létre egy weboldalt, és felfedezze, hogy a kódolás nem olyan nehéz, mint amilyennek látszik!

1. lépés: A Jegyzettömb használata

Az első weboldalunk létrehozásához a Windows Jegyzettömbjét fogjuk használni. Bár bármely szövegszerkesztő megteszi, a jegyzettömb előre telepítve van a Windows gépekre, így kiváló kiindulópont.

A Jegyzettömb megnyitásához lépjen a képernyő bal alsó sarkában található keresősávba, és írja be a "Jegyzettömb" parancsot. Ezután válassza ki a keresési eredmények között megjelenő "Jegyzettömb" alkalmazást. Új ablaknak kell megnyílnia.

2. lépés: Az alapvető HTML dokumentumfa hozzáadása

Minden weboldalnak szabványos csontvázszerkezetet kell követnie ahhoz, hogy a webböngészője (Chrome, Firefox, Edge, Internet Explorer, Safari …) feldolgozza és megjelenítse weboldalát.

Ezt html dokumentumfának hívják. A Jegyzettömbben írja be a html "elemeket" vagy "címkéket" a képernyőképen látható módon. Nyugodtan másolja és illessze be azt is:

3. lépés: Mentés.html -oldalként

Most, hogy megvan az alapvető html struktúránk a Jegyzettömbben, mentsük el, hogy ne veszítsünk el munkát, és hogy láthassuk a változásainkat az Instructable mentén.

1. Válassza a "Fájl"> "Mentés másként …" lehetőséget (1. képernyőkép)
2. Változtassa meg a fájltípust „Minden fájl” értékre (2. képernyőkép)
3. Adjon a fájlnak választott nevet. Ügyeljen arra, hogy jegyezze fel, hová menti a dokumentumot a számítógépén, hogy később megnyithassa. MEGJEGYZÉS: A fájl mentésének legfontosabb része a ".html" fájlnak a fájlnévhez való hozzáfűzése. Ez lehetővé teszi, hogy számítógépe weboldalként ismerje fel. Ha tehát a "my_webpage" fájlnak szeretné nevezni a fájlt, mindenképpen adja hozzá.html -t a végéhez, pl. "my_webpage.html"

4. lépés: Cím hozzáadása a weboldalhoz

Tehát rendelkezünk az alapvető html -struktúrával, amely szükséges ahhoz, hogy a webböngészők értelmezzék és megjelenítsék weboldalunkat, de nincs tartalmunk. Változtassunk ezen!

Az első dolog, amit tennünk kell, hogy címet adunk a weboldalunknak. A legtöbb weboldalnak címe van. Ez jelenik meg a böngésző lapján (lásd a képernyőképet). Weblapomnak a "Taylor's Website" címet adom. Ehhez hozzá kell adnunk egy „title” elemet.

Taylor webhelye

Ezen a ponton észre fogja venni, hogy minden címke rendelkezik "nyitó" és "záró" címkével. Mint például

és.

Ez azért van, hogy felismerjük, hol kezdődik a cím, és hol végződik. Szinte minden html címke ezt követi, azonban vannak kivételek.

5. lépés: Tartalom hozzáadása weboldalához

Nos, van egy címe a weboldalunknak, de még mindig nincs tartalmunk hozzá. Adjunk hozzá némi hangulatot!

Címet adtunk a weboldalunkhoz egy „title” elem segítségével. Adjunk weboldalunknak egy nagy, figyelemfelkeltő fejlécet egy „h1” elem használatával, amely egy címsor.

Taylor webhelye

Üdvözöllek a weboldalamon

6. lépés: Az eddigi változásaink megtekintése

Van címünk, van némi tartalmunk, nézzük meg a weboldalunkat, hogy hogyan áll eddig.

1. Mentse a fájlt a jegyzettömbbe
2. Menjen oda, ahová a fájlt mentette, és kattintson duplán. Ennek automatikusan meg kell nyílnia az alapértelmezett webböngészőben. Jól néz ki!

7. lépés: Bekezdéscímke hozzáadása

Van címünk, címsorunk, most tegyünk hozzá egy bekezdést néhány további szöveggel. Egy bekezdés elem neve „p”. Alább láthatja használatát:

Taylor webhelye

Üdvözöllek a weboldalamon

Ma megtanuljuk, hogyan kell létrehozni ezt a nagyon egyszerű weboldalt!

Megjegyzés: A jegyzettömb elmentésével és a fájl megnyitásával bármikor megtekintheti a módosításokat.

8. lépés: Adj neki egy kis színt

A weboldalunk gördül, de elég sima. Adjunk egy kis színt a bekezdéscímkének!

Különböző elemeket színezhetünk úgy, hogy hozzáadunk egy „style” attribútumot a „p” címkéhez az alábbiak szerint:

Taylor webhelye

Üdvözöllek a weboldalamon

Ma megtanuljuk, hogyan kell létrehozni ezt a nagyon egyszerű weboldalt!

9. lépés: Kép hozzáadása

Mi az a honlap kép nélkül? Tegyünk fel egy képet a honlapunkra!

Az első lépés egy olyan kép megtalálása, amely tetszik. A google képek segítségével kerestem egy golden retrievert. Húzza fel a képet, és győződjön meg arról, hogy az URL.jpg,.png,.gif,-j.webp

Miután kiválasztotta a képét, hozzá kell adnunk azt a html oldalhoz az 'img' címke használatával. A képem:

Adja hozzá az oldalához az „img” címke használatával, „src” attribútummal:

Taylor webhelye

Üdvözöllek a weboldalamon

Ma megtanuljuk, hogyan kell létrehozni ezt a nagyon egyszerű weboldalt!

10. lépés: A végtermék megtekintése

Mentse el a jegyzettömb fájlt, és nyissa meg a végterméket. Látnia kell a weboldalát!