HTML tanulása

Videó: How To Make A Swing Effect With HTML, CSS & SASS

Tartalom

Lépni
2. rész: A HTML alapjainak elsajátítása
2. rész 2: Haladó HTML tanulása
Tippek
Figyelmeztetések
Szükségletek

A HTML a rövidítése Hyper Text Markup Language, ez a kód vagy nyelv amelyet weboldalak létrehozására használnak. Lehet, hogy bonyolultnak tűnik, ha még soha nem programozott korábban, de kipróbálásához csak egy egyszerű szövegszerkesztő program és egy internetes böngésző szükséges. Felfedezhet néhány HTML-t fórumokból, online profilokból vagy wikiHow-cikkekből. A HTML hasznos forrás az internetet használók számára, és a HTML megtanulása kevesebb időt vehet igénybe, mint amire számíthat.

Lépni

2. rész: A HTML alapjainak elsajátítása

Nyisson meg egy HTML-dokumentumot. A legtöbb szövegszerkesztő program, beleértve a Notepad vagy a Word for Windows és a Text Editor for Mac alkalmazható HTML dokumentumok létrehozására. Nyisson meg egy új dokumentumot, és válassza a Fájl → Mentés másként menüpontot a felső menüből a dokumentum weblapként történő mentéséhez, vagy a fájlkiterjesztést állítsa ".doc", ".rtf" vagy bármi más értékre ".html" vagy ".htm" értékre. ".
- Most megjelenhet egy figyelmeztetés arról, hogy a dokumentumot Rich Text formátumról (RTF) "egyszerű szöveg" formátumra változtatja, és egyes formázási opciókat és képeket nem menti megfelelően. Ezt a figyelmeztetést figyelmen kívül hagyhatja; A HTML dokumentumok nem használják ezeket a lehetőségeket.
- .html és .htm fájlok megegyeznek. Mindkettő működik.
Tekintse meg dokumentumát egy böngészővel. Mentse el az üres dokumentumot, zárja be, majd kattintson duplán arra a helyre, ahová mentette, hogy újra megnyissa. A dokumentumot a böngészőnek most üres weboldalként kell megnyitnia. Ha ez nem működik, húzza a fájl ikonját a böngésző címsorába. Később, ha a cikkben található lépéseket követve szerkeszti a HTML-dokumentumot, folytatja a böngészőbe való visszajelzést, hogy ellenőrizze, hogyan néznek ki a kód változásai.
- Megjegyzés: weboldala még nincs online. Az oldal nem elérhető mások számára, és teszteléséhez nincs szükség működő internetkapcsolatra. Csak a böngészőjével "olvassa" a HTML-dokumentumot, mintha egy weboldal lenne.
Megérteni, hogy mi a "címke". A címkék nem láthatók a végleges weboldalon, mint a normál szöveg. A címkék megmondják a böngészőnek, hogyan jelenítse meg az oldalt és az oldalon lévő tartalmat. A kezdő címke utasításokat tartalmaz. Például meg tudja mondani a böngészőnek, hogy a szöveget félkövéren jelenítse meg. A végcímkére azért van szükség, hogy meg tudja mondani a böngészőnek, hogy hol érvényesek az utasítások: ebben a példában a kezdő és a végcímke közötti összes szöveg félkövér. A zárójeleket szintén zárójelek közé helyezzük, de az első zárójelet perjel követi.
- A kezdő címkéket zárójelbe írja: ez a kezdő nap>
- Írja zárójelbe a zárócímkéket, de az első zárójel után tegyen perjelet: /ez a záró címke>)
- Olvassa el később a cikkben, hogyan kell írni a funkcionális címkéket. Ebben a lépésben csak emlékeznie kell a> és /> címkék írására.
- Más HTML tanfolyamokon a címkéket "elemeknek" is nevezik, a nyitó és záró címkék közötti szöveget "elem tartalmának" is nevezik.
Írja meg az első html> címkét. Minden HTML dokumentum a-val kezdődik html>tag és a -val végződik / html>címke. Ez azt mondja a böngészőnek, hogy a címkék között minden HTML-be van írva. Adja hozzá ezeket a címkéket a dokumentumához:
- Ír html> a dokumentum tetején.
- Többször nyomja meg az Enter billentyűt vagy a visszatérést, hogy adjon magának helyet, majd írjon / html>
- Emlékszem rád minden ebben a cikkben e két címke között.
Tegye a dokumentum fejét> részévé. A html> és / html> címkék közé a fej>kezdőcímke és a / fej>-vég tag. Hagyjon ismét helyet a címkék között. Bármi, ami ezek közé a címkék közé van írva, nem lesz látható a weboldalon. Próbálkozzon a következő lépésekkel, és nézze meg, láthatja-e, hol jelennek meg az információk:
- Írjon a head> és / head> tagek közé: cím> és / title>
- A cím> és / cím> címkék közé írod: Hogyan kell megtanulni a HTML-t (képekkel) - wikiHow.
- Mentse el a dokumentumot, és nyissa meg egy böngészőben (vagy mentse el a dokumentumot, és frissítse az oldalt a böngészőben, ha az oldal még nyitva volt). Látja az imént írtakat az oldal tetején, a címsáv felett?
Hozzon létre egy törzs> szakaszt. A kezdő dokumentuma minden mást a body> szakaszban helyez el, és megjelenik a weboldalon. Utána a címke / fej>, de előtt a tag / html>, amit írsz test> és / test>. Mindazt, amit ebben a cikkben tovább tárgyalunk, a törzscímkék közé helyezzük. Most rendelkeznie kell egy ilyen kinézetű dokumentummal (golyók nélkül):
- html>
- fej>
- cím> HTML-tanulás - wikiHow / title>
- / fej>
- test>
- / test>
- / html>
Szöveg hozzáadása különböző stílusokban. Itt az ideje, hogy elkezdjen írni valamit, ami valóban látható lesz a böngészőben! Minden, amit a törzscímkékbe írt, látható lesz a böngészőben, miután mentette a módosításokat és frissítette az oldalt a böngészőben. Ír nem valami a jelekkel és >mert a böngésző ezt HTML utasításként értelmezi egyszerű szöveg helyett. Írj például Helló Világ! (Angolul: "Hello world!", Ez a globális szabványos szöveg, mint az első példa minden programozási tanfolyamra egy adott programozási nyelven) vagy valami más, és tedd a következő címkéket a szöveg elé és után, és nézd meg, mi történik:
- em> Hello világ! / em> dőlt betűs szövegnek tűnik: Helló Világ!
- erős> Hello világ! / erős> félkövér szövegnek tűnik: Helló Világ!
- s> Hello világ! / s> áthúzott szövegnek tűnik: ~~Helló Világ!~~
- szup> Hello világ! / sup> úgy néz ki, mint felső index:
- sub> Helló világ! / sub> úgy néz ki, mint a felirat: _{Helló Világ!}
- Próbálja ki a kombinációkat: Hogyan látja em> strong> Hello world! / strong> / em> kifelé?
Oszd fel a szöveget bekezdésekre. Ha különböző szövegsorokat tesz a dokumentumba, akkor látni fogja, hogy az összes sor egymás után helyezkedik el. Új sorokat és üres sorokat magának kell beprogramoznia:
- p> Ez egy külön szakasz. / p>
- Ez a mondat az első sorban, ez a mondat a következő sorban található.
  Ez az első olyan címke, amellyel találkozunk, és nem igényel végcímkét! Egy ilyen címkét hívunk üres címke.
- Fejlécek létrehozásával tisztázza a szakaszok nevét:
  h1> header / h1>: a lehető legnagyobb fejléc
  h2> header / h2> (a 2 szint fejléc)
  h3> header / h3> (a 3 szintű fejléc)
  h4> header / h4> (a 4 szint fejléc)
  h5> header / h5> (a lehető legkisebb fejléc)
Megtanulják, hogyan kell listákat készíteni. Többféle módon hozhat létre listákat egy weboldalon. Próbálja ki a következő módszereket, hogy megtudja, mi tetszik a legjobban. Ne feledje, hogy egy pár címke kerül a teljes lista köré (például az ul> és / ul> címkék a nem rendezett listákhoz), és hogy a listán minden elem, például li> és / li>, egy másik címkepárt helyez el. .
- Használja a következő kódot felsorolással ellátott listák létrehozásához:
  ul> li> Egy tétel / li> li> Másik tétel / li> li> Másik tétel / li> / ul>
- Vagy ez a kód számozott listák létrehozásához:
  ol> li> 1. tétel / li> li> 2. tétel / li> li> 3. tétel / li> / ol>
- Vagy ez a kód egy úgynevezett definíciós lista létrehozásához:
  dl> dt> kávé / dt> dd> - forró ital / dd> dt> tej / dt> dd> - hideg ital / dd> / dl>
Tegye vonzóbbá oldalát új vonalakkal, vízszintes vonalakkal és képekkel. Itt az ideje elkezdeni más dolgokat hozzáadni az oldalához. Próbálja ki a következő címkéket (a képet online kell feltenni, hogy linket lehessen használni a képre):
- Helyezzen be egy sort: br> vagy hr>
- Képek beszúrása: img src = "a_url_of_your_image">
Helyezzen linkeket az oldal más helyeire. Használhatja ezt a kódot más oldalakra és webhelyekre történő hivatkozáshoz is, de mivel még nincs weboldala, akkor a "horgonyokra" összpontosítunk, amelyek az oldal meghatározott helyei, amelyekre linkelhet:
- Először hozzon létre egy horgonyt az a> címkével az oldal azon pontján, amelyre hivatkozni szeretne. Adjon horgonynak egyértelmű, könnyen megjegyezhető nevet:
  
  a name = "Tippek"> Ez az a szöveg, amelyre a horgonyt helyezi. / a>
- A href> címkével hivatkozhat a horgonyára vagy egy másik weboldalra:
  
  a href = "A weboldal URL-je vagy a horgony neve ezen az oldalon"> Írja ide a linkként látható szöveget vagy képet. / a>
- Ha egy másik oldalon található horgonyba szeretne linkelni, adja hozzá a # karaktert az URL után, majd a horgony nevét. Például a http://www.wikihow.com/HTML-leren#Tips egyenesen az ezen az oldalon található „Tippek” szakaszba vezet.

2. rész 2: Haladó HTML tanulása

Tudjon meg többet az attribútumokról. Az attribútumokat a címkében helyezik el, és felhasználják a kezdő és a végcímke közötti "elemtartalom" további módosításaira. Soha nem állnak egyedül. A következő módon íródnak: név = "érték". név az attribútum nevét (például "szín") és érték leírja ezt a konkrét esetet (pl. "piros").
- Ha alaposan megnézte a cikk előző részét, akkor már találkozott attribútumokkal. Az img> tag az attribútumot használja src, egy horgony az attribútumot használja név és a linkek az attribútumot használják href. Elmondhatja, hogy mindegyik méretben van ___='___’ követni.
Kísérletezzen HTML táblákkal. Táblázat vagy grafikon készítéséhez több címke szükséges:
- Kezdje a táblázat tagjeivel (angolul: "table") az egész asztal körül:táblázat> / táblázat>
- Helyezzen címkéket az egyes sorok tartalma köré: tr>
- Helyezze az oszlopfejléceket az első sorba: th>
- Helyezzen cellákat egymást követő sorokba: td>
- Ez egy példa arra, hogy mindez miként áll össze:
  
  táblázat> tr> th> 1. oszlop: Month / th> th> 2. oszlop: Megtakarított pénz / th> / tr> tr> td> január / td> td> 100 € / td> / tr> / table>
Ismerje meg a fejrészben használt többi címkét. Már megtanulta a tag head> elemet, amelyet minden dokumentum elején elhelyez. A title> tag mellett a fejrészben más címkék is lehetnek:
- A metacímkéket a létrehozáshoz használják metaadatok egy weboldalról. Ezeket az adatokat a keresők használják a weboldalak kategorizálására. Ahhoz, hogy az oldal a keresőmotorok számára látható legyen, elhelyezhet egy vagy több metacímkét (a végcímkék nem szükségesek), minden címkének pontosan egy név- és tartalomattribútumot kell tartalmaznia, például: meta name = "description" content = "ide tegye leírás ">; vagy meta name = "keywords" content = "írja ide a kulcsszavak listáját, mindig vesszővel elválasztva">
- link> címkékkel más fájlokat kapcsolhatnak az oldalhoz. Általában a CSS stíluslapok és HTML oldalak társításához használják ezeket az oldalakat, másfajta kóddal, és az oldal általános stílusának meghatározásához.
- A script> címkékkel a javascript fájlokat a HTML oldalhoz társítják. A Javascript lehetővé teszi az oldal megváltoztatását, ha a felhasználó tesz valamit az oldalon.
Játssz HTML-t a meglévő oldalakról. A weboldalak forráskódjának megtekintése nagyszerű módja a HTML-ismeretek bővítésének. Kattintson a jobb gombbal az oldalon, és válassza a "Forrás megtekintése", "Az oldal forrása megjelenítése" vagy hasonló elemeket. Tudja meg, mit csinál egy adott címke, amelyet nem ismer, vagy keresse meg az interneten a választ.
- Nem szerkesztheti mások webhelyeit, de átmásolhatja a HTML-kódot a saját dokumentumába, és eljátszhatja vele, hogy megnézze, mi a különböző kiigazítás. Megjegyzés: mivel sok webhely CSS stíluslapokat használ, előfordulhat, hogy nem lát sok színt vagy más stílust.
Tudjon meg többet a HTML-ről részletesebb cikkek elolvasásával. Az interneten számos forrás található további HTML-címkék elsajátításához, például a W3Schools vagy a Codecademy. Sok HTML könyv is rendelkezésre áll, de mindenképpen friss kiadást használjon, mivel a HTML szabvány időről időre változik. Miután elsajátította a HTML-t jó szintre, a CSS-hez fordulhat, hogy jobban ellenőrizhesse weblapjának tervét és stílusát. Ezt követően a következő lépés általában a javascript.

Tippek

Hasznos lehet megtalálni egy egyszerű weboldalt az interneten, majd elkezdeni a kódot. Próbáljon meg mozgatni egy kis szöveget, változtassa meg a betűtípust, változtassa meg a képeket, amit csak akar!
Jegyzetfüzet segítségével felírhatja a kódot, hogy legyen mire visszaesni, ha egy pillanatra sem emlékszik rá. Ezt az oldalt kinyomtathatja, és referenciaként megtarthatja.
Az XML és az RSS manapság egyre gyakrabban használatos a weboldalakon. A kód az emberi szem számára elérhetetlennek tűnhet, különösen a forráskódban nézve, de a funkcionalitás hasznos lehet.
A HTML-ben használt címkék nem különböztetik a kis- és nagybetűket, de alapértelmezés szerint kisbetűket kell használni (ahogy ebben a cikkben is tesszük). A címkék kisbetűi nagyon ajánlottak, az XHTML-sel való kompatibilitás érdekében is.

Figyelmeztetések

Egyes címkéket már nem használnak, és más címkék váltják fel, amelyek ugyanezt teszik, de gyakran több lehetőséget kínálnak.
Ha meg szeretné győződni arról, hogy az oldala megfelel-e a HTML szabványnak, látogasson el a W3 webhelyére, hogy tesztelje kódját a jelenlegi szabvány szerint. Sok címke elavulttá vált, és felváltotta azokat a címkék, amelyek jobban működnek a modern böngészőkben.

Szükségletek

Szövegszerkesztő program, például Notepad (Windows) vagy Text Editor (Mac).
egy papírlap vagy jegyzetfüzet (választható)
Kifejezetten HTML írására tervezett program, például Notepad ++ for Windows vagy TextWrangler for Mac (választható)