Hogyan lehet megtanulni a HTML -t

Tartalom

Lépések
Rész 1 /2: HTML alapok elsajátítása
2/2. Rész: Fejlett HTML
Tippek
Figyelmeztetések
Mire van szükséged

A HTML angol rövidítés Hyper Text Markup Language (hipertext jelölőnyelv). Ez az a kód vagy nyelv, amelyen a webhelyek alapjelölői készülnek. A tanulás félelmetesnek tűnhet, ha még soha nem programozott, de a valóságban csak egy alapvető szövegszerkesztőre és internetes böngészőre van szüksége. Felismerhet néhány HTML -jelölési példát is, amelyekkel internetes fórumokon, személyre szabott egyéni oldalakon vagy wikiHow -cikkekben találkozott. A HTML hasznos eszköz minden internethasználó számára, és az alapok elsajátítása kevesebb időt vesz igénybe, mint gondolná.

Lépések

Rész 1 /2: HTML alapok elsajátítása

1 Nyisson meg egy HTML dokumentumot. A legtöbb szövegszerkesztő (Notepad vagy Notepad ++ for Windows, TextEdit Mac, gedit GNU / Linux) használható HTML fájlok létrehozására. Hozzon létre egy új dokumentumot, és mentse el a Fájl → Mentés másként menüponttal, vagy módosítsa a fájlkiterjesztést .html vagy .htm formátumra a .doc, .rtf vagy más kiterjesztés helyett.
- Figyelmeztetést kaphat, hogy a fájl RTF formátum helyett "egyszerű szövegként" kerül mentésre, vagy a formázás és a képek nem kerülnek mentésre. Ez jó; HTML esetén ezekre a beállításokra nincs szükség.
2 Nyissa meg a létrehozott fájlt egy böngészőben. Mentse el az üres fájlt, keresse meg a számítógépén, és kattintson duplán a megnyitásához. Egy üres oldalnak kell megnyílnia a böngészőben. Ha nem, húzza a fájlt a böngésző címsorába. A HTML -fájl szerkesztése közben frissítheti ezt az oldalt a módosítások megtekintéséhez.
- Kérjük, vegye figyelembe, hogy ily módon nem hoz létre webhelyet az interneten. Mások nem férhetnek hozzá ehhez az oldalhoz, és nincs szüksége internetkapcsolatra a helyi oldal teszteléséhez. A böngésző egyszerűen értelmezi a HTML kódot, "úgy olvassa", mintha egy webhely lenne.
3 Ismerje meg, melyek a jelölési címkék. A szokásos szöveggel ellentétben a címkék nem jelennek meg az oldalon. Ehelyett azt mondják a böngészőnek, hogyan kell megjeleníteni az oldalt és annak tartalmát. A "nyitó" címke utasításokat tartalmaz. Például azt mondhatja a böngészőnek, hogy a szöveget úgy kell megjeleníteni bátor... Szüksége van egy "vég" címkére is, amely megmutatja a böngészőnek, hogy hol fejeződik be az utasítás. Ebben a példában a kezdő és a végcímke közötti szöveg vastag betűvel jelenik meg. A címkék egyenlőtlen jelek közé íródnak, de a végcímke elővágással kezdődik.
- A nyitócímke az egyenlőtlenségi jelek közé van írva: nyitó címke>
- A záró címkében a címkeleíró (név) elé egy perjel kerül: /végcímke>
- Olvassa el, hogy megtudja, hogyan használják a különböző címkéket. Ehhez a lépéshez csak emlékeznie kell a rögzítési formátumra. A címkék az egyenlőtlenségi jelek közé vannak írva:> és />
- Néhány oktatóanyagban a HTML -címkéket elemeknek, a nyitó és záró címkék közötti szöveget pedig elemtartalomnak nevezik.
4 Gépelje be a html> címkét a szerkesztőben. Minden HTML -fájlnak címkével kell kezdődnie html> és címkével zárul / html>... Ezek a címkék jelzik a böngészőnek, hogy a címkék közötti minden tartalom HTML -ben van. Adja hozzá ezeket a címkéket a dokumentumhoz:
- A HTML fájlok gyakran a sorral kezdődnek ! DOCTYPE html>ami azt jelenti, hogy a böngészőknek fel kell ismerniük a teljes fájlt HTML -ként. Ez a sor nem szükséges, de segíthet a kompatibilitási problémák elhárításában.
- Tárcsa html> a dokumentum tetején.
- Több üres sor létrehozásához nyomja meg többször az Enter vagy a Return billentyűt, majd írja be / html>
- Emlékezz arra az egész a cikkben létrehozott kódot e két címke közé kell írni.
5 Hozzon létre egy fej> részt a fájlban. A html> és / html> címkék között hozzon létre egy nyitó címkét fej> és a záró címke / head>... Tegyen közéjük néhány üres sort. A head> és / head> címkék közé írt tartalom nem jelenik meg az oldalon. Kövesse az alábbi lépéseket, és látni fogja, mire szolgál ez a címke:
- A head> és / head> címkék közé írjon cím> és / title>
- Írjon a cím> és / cím> címkék közé Hogyan lehet megtanulni a HTML -t - wikiHow.
- Mentse el a módosításokat, és nyissa meg a fájlt egy böngészőben (vagy frissítse az oldalt, ha a fájl már nyitva van). Látja a címsor feletti oldalcímben megjelenő szöveget?
6 Törzs> szakasz létrehozása. Ebben a példában az összes többi címke és szöveg a törzsrészbe van írva, amelynek tartalma megjelenik az oldalon. Utána zárócímke / fej>, de előtt tag / html> címkék hozzáadása test> és / body>... A cikk további részében dolgozzon a törzsrészleggel. A fájlnak valahogy így kell kinéznie:
html>
fej>
title> A HTML elsajátítása - wikiHow / title>
/ head>
test>
/ body>
/ html>
7 Szöveg hozzáadása különböző stílusokkal. Itt az ideje, hogy hozzáadjuk az oldal valódi tartalmát! Bármi, amit a törzscímkék közé ír, megjelenik a lapon, miután frissítette a böngészőben. Ne használja szimbólumok vagy >mivel a böngésző a tartalmat szöveg helyett címkeként próbálja értelmezni. Ír Szia! (vagy ami tetszik), majd próbálja meg hozzáadni ezeket a címkéket a szöveghez, és nézze meg, mi történik:
- em> Üdv mindenkinek! / em> "dőltre" teszi a szöveget: Szia!
- erős> Üdv mindenkinek! / erős> "félkövérré" teszi a szöveget: Szia!
- s> Üdv mindenkinek! / s> áthúzott szöveg: ~~Szia!~~
- sup> Üdv mindenkinek! / sup> felső betűként jeleníti meg a betűtípust:
- sub> Üdv mindenkinek! / sub> a betűtípust indexként jeleníti meg: _Szia!
- Próbáljon ki különböző címkéket együtt. Hogy fog kinézni em> strong> Üdv mindenkinek! / strong> / em>?
8 Ossza fel a szöveget bekezdésekre. Ha megpróbál több sornyi szöveget írni egy HTML -fájlba, észre fogja venni, hogy a sortörések nem jelennek meg a böngészőben. A szöveg bekezdésekre bontásához címkéket kell hozzáadnia:
- p> Ez egy külön bekezdés. / p>
- Ezt a mondatot a sor eleje előtti br> sortörés követi.
  Ez az első címke, amely nem igényel zárócímkét. Ezeket a címkéket "üres" címkéknek nevezik.
- Hozzon létre címsorokat a szakaszcímek megjelenítéséhez:
  h1> címsor szövege / h1>: legnagyobb cím
  h2> címsor szövege / h2> (második szint címsor)
  h3> címsor szövege / h3> (harmadik szint címsor)
  h4> címsor szövege / h4> (negyedik szint címsor)
  h5> címsor szövege / h5> (legkisebb cím)
9 Tanuljon meg listákat készíteni. Számos módon lehet listákat létrehozni egy weboldalon. Próbálja ki az alábbi lehetőségeket, és döntse el, melyik tetszik a legjobban. Ne feledje, hogy egy pár címke szükséges a lista egészéhez (például ul> és / ul> felsorolásos lista esetén), és minden listaelem egy másik címkepárral van kiemelve, például li> és / li>.
- Felsorolásos lista:
  ul> li> Első sor / li> li> Második sor / li> li> És így tovább / li> / ul>
- Számozott lista:
  ol> li> One / li> li> Two / li> li> Three / li> / ol>
- Definíciós lista:
  dl> dt> Kávé / dt> dd> - forró ital / dd> dt> Limonádé / dt> dd> - hideg ital / dd> / dl>
10 Az oldal elrendezése a használatával sortörések, vízszintes vonalak, és Képek. Itt az ideje, hogy szövegen kívül mást is hozzáadjon az oldalhoz. További információkért próbálja ki az alábbi címkéket, vagy kövesse a linkeket. Használjon online tárhelyszolgáltatást a közzétenni kívánt kép linkjének létrehozásához:
- Vízszintes vonal: óra>
- Kép beszúrása: img src = "image link">
11 Linkek hozzáadása. Ezekkel a címkékkel hiperhivatkozásokat hozhat létre más oldalakra és webhelyekre, de mivel még nincs webhelye, most megtudhatja, hogyan hozhat létre horgonyhivatkozásokat, azaz linkeket az adott oldal bizonyos helyeihez:
- Hozzon létre egy horgonyt az a> címkével, ahová linkelni szeretne az oldalon. Találj ki egy világos és emlékezetes nevet:
  
  a name = "Tips"> A szöveg, amelyre hivatkozik. / a>
- A href> címke használatával hozzon létre relatív linket vagy linket egy külső erőforráshoz:
  
  a href = "link az oldalra, vagy horgonynév az oldalon belül"> Linkként szolgáló szöveg vagy kép. / a>
- Ha egy másik oldalon lévő relatív linkre szeretne hivatkozni, adjon hozzá # jelet a fő link után és a horgony nevét. Például a https://en.wikihow.com/learn-HTML#Tips linkeket talál az oldal tippjeihez.

2/2. Rész: Fejlett HTML

1 Ismerje meg az attribútumokat. Az attribútumok a címke belsejébe vannak írva, és további információkat jeleznek. Az attribútumok formátuma a következő: name = "érték", ahol cím attribútumot definiál (pl. szín szín attribútumhoz), és az érték az értékét jelzi (például piros pirosra).
- Az attribútumokat valójában a HTML alapjairól szóló előző részben használták. Az img> címke az attribútumot használja src, relatív linkhorgonyok használják az attribútumot névés a linkek az attribútumot használják href... Amint már észrevette, minden attribútum formátumban van írva ___='___’.
2 Kísérletezzen HTML táblákkal. A táblázat létrehozása magában foglalja a különböző címkék használatát. Kísérletezhet, vagy részletesebb utasításokat olvashat.
- Táblázatcímkék létrehozása:táblázat> / táblázat>
- Zárja be a táblázat minden sorának tartalmát címkékbe: tr>
- Az oszlopfejlécet a címke határozza meg: th>
- A következő sorok cellái: td>
- Példa a címkék használatára:
  
  táblázat> tr> th> 1. oszlop: hónap / th> th> 2. oszlop: megtakarítás / th> / tr> tr> td> január / td> td> 5000 rubel / td> / tr> / table>
3 Ismerje meg a fejléc további címkéit. Már megtanulta a head> címkét, amely minden html fájl elején található. A cím> címkén kívül vannak más címkék is ehhez a szakaszhoz:
- Meta tag -ek, amelyek tartalmazzák metaadatokamelyet a keresőmotorok használnak az oldal indexeléséhez. Annak érdekében, hogy webhelye könnyebben megtalálható legyen a keresőmotorokban, használjon egy vagy több nyitó meta> címkét (a záró címkék nem szükségesek).Címkénként egy attribútumot és egy értéket használjon: meta name = "description" content = "page description">; vagy meta név = "kulcsszavak" content = "vesszővel elválasztott kulcsszavak">
- Link> címkék, amelyek harmadik féltől származó fájlokra, például stíluslapokra (CSS) mutatnak, amelyek más típusú kódolással jönnek létre, és lehetővé teszik a HTML-oldal megváltoztatását a szín, a szöveg igazítása és sok más funkció használatával.
- A JavaScript -fájlok oldalhoz csatolásához használt script> címkék. Ezekre a fájlokra van szükség az oldal interaktív módosításához (válaszul a felhasználói műveletekre).
4 Kísérletezzen más webhelyek HTML -kódjával. Más weboldalak forráskódjának megtekintése nagyszerű módja a HTML elsajátításának. Kattintson jobb gombbal az oldalra, és válassza ki a Forrás megtekintése vagy valami hasonló lehetőséget a böngésző felső menüjében. Próbálja meg kitalálni, mit tesz egy ismeretlen címke, vagy keressen információt az interneten.
- Bár nem szerkesztheti mások webhelyeit, másolhatja a forráskódot a fájlba, hogy később kísérletezzen a címkékkel. Kérjük, vegye figyelembe, hogy előfordulhat, hogy a CSS -jelölés nem érhető el, és a színek és a formázás eltérő lehet.
5 Kezdje el részletesebb útmutatók felfedezését. Az interneten számos webhely található, amelyek HTML -címkéket szentelnek, például a W3Schools vagy a HTMLbook. Akciós papírkönyvek is kaphatók, de a szabványok változásával és fejlődésével próbálja megtalálni a legújabb kiadást. Még jobb, ha elsajátítja a CSS -t, hogy sokkal jobban ellenőrizhesse webhelye elrendezését és megjelenését. A CSS elsajátítása után a webes tervezők általában megtanulják a JavaScriptet.

Tippek

A Notepad ++ egy nagyszerű ingyenes program, hasonlóan a szokásos Jegyzettömbhöz, de online mentheti és tesztelheti kódját a böngészőjében. (Szinte bármilyen nyelvet támogat - HTML, CSS, Python, JavaScript stb.)
Keressen néhány egyszerű oldalt a neten, mentse el a kódot a számítógépére, és kísérletezzen vele. Próbálkozzon a szöveg mozgatásával, a betűtípus megváltoztatásával, a képek cseréjével - bármi!
Füzetet tarthat, ahol címkéket írhat, hogy mindig kéznél legyen. Ezt az oldalt is kinyomtathatja, és hivatkozhat rá.
Amikor kódot ír, óvatosan végezze el, hogy Ön és mások megértsék. Használja! - Beszúrás ide -> HTML megjegyzésekhez: ezek nem jelennek meg az oldalon, de láthatók lesznek a kóddokumentumban.
Az XML és az RSS egyre népszerűbb. Az XML és RSS technológiákat tartalmazó oldalak kódja a tapasztalatlan felhasználók számára nehezebben olvasható és érthető, de ezek az eszközök nagyon hasznosak.
A HTML-ben lévő jelölőcímkék megkülönböztetik a kis- és nagybetűket, de azt javasoljuk, hogy csak kisbetűket használjon (mint a cikk példái) a szabványosítás és az XHTML-kompatibilitás érdekében.

Figyelmeztetések

Egyes címkék az elmúlt években elhasználódtak, és helyükre újak kerültek, amelyek ugyanazokat vagy néhány további hatást biztosítanak.
Ha szeretné tesztelni az oldalát, menjen a W3 webhelyre, és nézze meg a modern HTML -követelményeket. A HTML szabványok idővel változnak, és egyes címkéket újak váltanak fel, amelyek jobban működnek a modern böngészőkben.

Mire van szükséged

Szövegszerkesztő, például Jegyzettömb (Windows) vagy TextEdit (Mac)
Papír / jegyzettömb (nem szükséges)
HTML -szerkesztő, például Notepad ++ (Windows) vagy TextWrangler (Mac) (nem szükséges)