Hogyan készítsünk egy egyszerű weboldalt a HTML-vel

Ebben a cikkben megmondjuk, hogyan kell létrehozni egy egyszerű weboldalt HTML kód segítségével. A HTML az internet egyik fő összetevője, mert meghatározza a weboldalak szerkezetét. Weboldal létrehozhat egy olyan szövegszerkesztőben, amely Windows vagy macos.

Lépések

6. rész:

Hogyan lehet hozzáadni a "Head" címkét (a weboldal leírása)

egy. Nyílt szövegszerkesztő. A Windows rendszerben futtassa a Notepad vagy Notepad ++, a Macos-ban - Textedit:

ablakok - Nyissa meg a Start menüt

, Írja be a keresési karakterláncot jegyzetfüzet vagy Jegyzettömb++, Majd kattintson a "START" menü tetejére "Notepad" vagy "Notepad ++" gombra.

Mac operációs rendszer - Kattintson a "Spotlight" gombra

, Belép Textedit, Majd kattintson duplán a "Textedit" gombra a keresési eredmények tetején.

2. Belép és nyomja meg ↵ Enter. Tehát tájékoztatja a webböngészőt, hogy ez egy HTML dokumentum.

3. Belép és nyomja meg ↵ Enter. Ez a nyitó HTML kód címke.

4. Belép és nyomja meg ↵ Enter. Ez a címke tartalmaz egy weboldal és fejléc elem leírását. A címke tartalma az oldalon általában nem jelenik meg. A tartalom az oldal, a metaadatok, a CSS stílusok és más szkriptnyelvek leírása.

öt. Belép . Ez a címke tartalmazza az oldal nevét.

6. Adja meg az oldal nevét. Adja meg a megjelenítendő szöveget az Oldal lapon.

7. Belép és nyomja meg ↵ Enter. Ez a címke bezárja az oldal nevét.

nyolc. Belép és nyomja meg ↵ Enter. Ez a címke bezárja az oldal leírási címkét. Ebben a szakaszban a HTML-kódnak így kell néznie.

Saját weboldalam

6. rész:

Hogyan kell hozzáadni "test" címkét (minden tartalom)

egy. Megadja a címkét A "fej" záró címke alatt. Ez a címke tartalmazza a HTML dokumentum teljes tartalmát. Tartalom Ez a címke megjelenik egy weboldalon.

2. Belép . Ez a címke tartalmaz egy oldal címét. A cím egy nagy szöveg, amely általában az oldal tetején található.

3. Adja meg az oldal címét. Lehet, hogy az oldal vagy az üdvözlés neve.

4. Belép A fejléc szövege és kattintson ↵ Enter. Ez a címke bezárja a címcímkét.

További címsorok hozzáadása szükséges. Legfeljebb hat fejlécet hozhat létre - ez a címkék használatával történik - . A címsorok különböző méretűek lesznek. Például a különböző méretű három fejléc létrehozására szolgáló kód:

Üdvözöllek az oldalamon!A nevem max.Remélem, nem lesz unalmas.

öt. Belép . Ez a címke tartalmaz egy szöveges bekezdést. Ez a címke megjeleníti a normál méret szövegét.

6. Adja meg a szöveget. Például írjon be egy weboldal leírása vagy más információt.

7. Belép A szöveg és a kattintás után ↵ Enter. Ez a címke bezárja a szöveges bekezdés címkét. Az alábbiakban a HTML dokumentumban szereplő bekezdés példája:

Ez az első bekezdés.

Hogy több bekezdéseket hozzon létre egy címsor alatt, adjunk hozzá néhány sorot egymás után.

Módosítsa a szöveg színét. A szöveg elején írja be a címkét , És a címke végén . A szó helyett "Szín" Helyettesítse a kívánt színt (angolul), és ne törölje az idézeteket. Ezek a címkék lehetővé teszik, hogy megváltoztassa a szöveg színét (például fejléc). Például a szöveg kék készítéséhez adja meg a következő kódot: Bálnák - fenséges állatok.

A betűtípus is merész, ferde és más. Az alábbiakban példák a HTML-címkék szöveges formázására:

 Bold tankönyv szöveges szöveg  Helyettesítő szöveg  Párnázott szöveg

6. rész:

További elemek hozzáadása

egy. Kép hozzáadása az oldalra. Ezért:

Belép . Ez a címke képet tartalmaz.
Másolja és illessze be a kép URL-jét az esélyegyenlőségi jel (=) az idézetekben.
Belép > Az URL-kép után a képcímke bezárásához. Például, ha az URL-kép http: // Myimage.Com / óceán.Jpg, írja be a következő kódot:

 Src ="http: // Myimage.Com / óceán.jpg">

2. Adjon hozzá egy linket egy másik weboldalra. Ezért:

Belép . Ez a címke tartalmaz egy linket egy másik oldalra.

Másolja és illessze be az URL-t az esélyegyenlőségi jel után (=) az idézetekben.

Belép > Az URL után a cím bezárása.

Adja meg a link szövegét a ">" szimbólum után.

Belép Szöveges link után a linkcímke bezárásához. Az alábbiakban egy példa a Yandexre való hivatkozásra.

 href ="https: // Ya.Ru"> Yandex.

3. Adjon hozzá egy karakterláncot. Ehhez írja be . A sor átvitelét beillesztik. Ez a címke használható az oldal különböző partícióinak elválasztására.

A 6. rész 6. része:

A színek megváltoztatása

egy. Lépjen kapcsolatba hivatalos színekkel és kódjaival HTML színben. A World Wire Consortium (W3C) hivatalos listát vezet, amely megtalálható https: // W3.Org / Wiki / CSS / Tulajdonságok / Szín / Kulcsszavak. Minden színnek formális neve, 6 számjegyű hexadecimális kódja és decimális. Ezen paraméterek bármelyikét használhatja az oldalak színének színének beállításához. Ebben a példában meg fogjuk venni a színek hivatalos nevét.

2. Állítsa be a háttérszínt a címkével . Ehhez hozzá kell adnia egy attribútumot a címkéhez Stílus. Tegyük fel, hogy az egész oldal hátterét szeretné tenni levendula (Lavend):

3. Állítsa be a szöveg színét bármely címke számára. Tulajdonság Stílus Azt is használhatja, hogy jelezze, hogy milyen színű a teljes szöveg egy adott címke. Például szöveget szeretne az egyik címkén belül volt Éjkék (Sötétkék):

A színváltozás csak a címkén található szöveget érinti . Ha később megnyit egy új címkét , ahol a szövegnek színe is van Éjkék, A "stílus" attribútumnak meg kell kérnie.

4. Állítsa be a színes hátteret a fejléc vagy bekezdéshez. Ahogy megadja a testcímke háttérszínét, kiválaszthatja a többi címkék háttérszíneit. Például a háttérszínt szeretné volt Világos szürke (világosszürke), és a H1 fejléc fejlécének színe - LightskyBlue (világoskék):

6. rész:

A HTML kód bezárása

egy. Belép , A "test" címke bezárásához. Ha befejezte a szöveg, képek és egyéb elemek hozzáadását, írja be a megadott címkét a HTML dokumentum alján.

2. Belép , A HTML kód bezárásához. Adja meg ezt a címkét a "test" zárócímke alatt. Tehát tájékoztatja a webböngészőt, hogy a címke után a HTML-kód nem. Minden HTML-kódnak megközelítőleg:

Yandex rajongói oldalÜdvözlet az oldalamon"http: // Ya.Ru"> Yandex

6. rész:

A weboldal mentése és megnyitása

egy. A dokumentumot normál szövegre konvertálja (csak macos felhasználók számára). Kattintson a "Formázás" (a képernyő tetején)> "Egyszerű szöveg létrehozása" (a legördülő menüben).

Lehetetlen, hogy ne tegyek az ablakokban.

2. Kattintás Fájl. Ez az opció a képernyő tetején található menüsorban található.

3. Kattintson a Mentés másként. Ezt az opciót a Fájl menüben találja meg.

Ön is kattinthat Ctrl+S (Windows) vagy ⌘ parancs+S (Mac).

4. Adja meg a HTML dokumentum nevét. Írja be a "Fájlnév" karakterlánc (Windows) vagy a "Név" (Mac).

öt. Módosítsa a fájlformátumot a txt segítségével a HTML-en. Ezért:

ablakok - Kattintson a "Fájltípus" menüre, válassza az "Összes fájl" lehetőséget, majd írja be .Html A fájlnév végén.

Mac operációs rendszer - a fájlnév végén .TxtBelép .Html.

6. Kattintson a Mentés. Ez az opció az ablak alján található. HTML fájl jön létre.

Általában az alapértelmezett webböngészőben megnyílt HTML fájlok.

7. Szoros szövegszerkesztő. Most nyissa meg a HTML fájlt a böngészőben, amelyben megtekintheti a létrehozott weboldalt.

nyolc. Nyissa meg a HTML fájlt a böngészőben. Ehhez kattintson duplán a HTML fájlra. Ha hibaüzenet jelenik meg, tegye a következőket:

ablakok - Kattintson a jobb egérgombbal kattintson a Fájl, válassza a "Megnyitás" lehetőséget, majd kattintson a kívánt böngészőre.

Mac operációs rendszer - Kattintson a fájlra, kattintson a "Fájl" gombra, válassza a "Megnyitás" lehetőséget, majd válassza ki a kívánt böngészőt.

kilenc. HTML dokumentum szerkesztése (ha szükséges). Visszaszerezhet egy hibát az oldalon. A javításhoz módosítsa a HTML-fájl tartalmát:

A Windows rendszerben kattintson a jobb egérgombbal kattintson a jobb egérgombbal, és válassza a "Szerkesztés" (Ha a Notepad ++ telepítve van a számítógépen, válassza ki a "Szerkesztés a Notepad ++" opciót).

Kattintson a Macos fájlra, kattintson a "Fájl" gombra, válassza a "Megnyitás" lehetőséget, majd kattintson a "Textedit" gombra. Most húzza a HTML fájlt a Textedit ablakba.

Tippek

Hozzáadhat egy oldalsó csíkot görgetőszöveg segítségével címkével .De ne feledje, hogy néhány böngésző nem ismeri fel ezt a címkét.
Sokan használják a Notepad ++ -ot a kód írásához és összeállításához.
Minden címke be kell zárnia. Például címkék Ez így kell lezárni: .
A kép tisztázása az oldalon, írja be A kép neve az "IMG" címke (például, ).

Figyelmeztetések

Töltse be a képeket Imgurra vagy hasonló, ha hozzáadja őket a weboldalához. Ne feledje, hogy a többi emberhez tartozó képek használata megsérti a szerzői jogot.