5 lépés az alapvető HTML kód megértéséhez

5 lépés az alapvető HTML kód megértéséhez

A HTML a web létfontosságú része, ahogy ismerjük. És bár kevés webes tervező hoz létre oldalakat a HTML kézi beírásával, még mindig hasznos tudni egy kicsit erről.





Megnézzük a nyelv néhány alapját, többek között azt, hogy mi is valójában a HTML, néhány alapvető fogalmat, és azt, hogy hogyan működik együtt más nyelvekkel. Tekintse ezt „HTML for dummies” összefoglaló tanfolyamnak.



A HTML alapjai: Mi az a HTML?

A HTML jelentése Hypertext Markup Language . És bár néha programozási nyelvekkel egybekötött, ez nem pontos.





Mint a jelölőnyelv , A HTML csak az oldalak megjelenítési elrendezésének létrehozását teszi lehetővé. Egy igaz programozási nyelv , mint a Java vagy a C ++, logikát és végrehajtott parancsokat tartalmaz.

Bár egyszerű, a HTML az internet minden oldalának gerincét képezi. Felelős azért, hogy milyen szöveg jelenik meg félkövérként, képek hozzáadásával és más oldalakra mutató linkekkel. Van egy HTML GYIK, amely bővebben megmagyarázza.



Kattintson a jobb gombbal a legtöbb weboldalra a böngészőben, és válasszon Oldal forrásának megtekintése vagy hasonló, hogy lássa a HTML -t mögöttük. Ez valószínűleg sok olyan kódot is tartalmaz, amely nem HTML, de ezen át lehet szitálni.

Még akkor is, ha nulla tapasztalata van a jelöléssel vagy a programozási nyelvekkel kapcsolatban, ha megtanul egy kicsit a HTML -ről, tájékozottabb webes felhasználó lesz. Lássunk öt alapvető lépést, amelyek segítenek megérteni a HTML működését. Az út során példákat hozunk.



1. lépés: A címkék fogalmának megértése

A HTML egy rendszert használ címkék a dokumentum különböző elemeinek kategorizálására.

A legtöbb címke párban érkezik, hogy az érintett szöveget magukba csomagolja. Íme egy egyszerű példa (



címke szöveget készít bátor ; ezt egy pillanat múlva tovább tárgyaljuk.)

This is some bold text .

Figyelje meg, hogyan kezdődik a záró címke egy perjelvel (/). Ez záró címkét jelent, ami fontos. Ha nem zárja be a címkét, akkor kezdettől fogva minden rendelkezik ezzel az attribútummal.

hogyan kell formázni az usb meghajtót

Azonban nem minden címkének van párja. Néhány HTML elem, ún üres elemek , nincs tartalmuk, és önmagukban léteznek. Példa erre a


címke, ami egy sortörés. Az ilyen címkéket 'lezárhatja' perjel hozzáadásával (például


), de nem feltétlenül szükséges.

2. lépés: A csontváz HTML elrendezése

Egy megfelelő HTML dokumentumnak meg kell határoznia bizonyos címkéket, így helyesen kell elhelyezni. Ezek az alapvető részek:

  • Minden HTML dokumentumnak | _+_ | karakterrel kell kezdődnie hogy ilyennek nyilvánítsa magát. Így a zárócímke, | _+_ | , a HTML fájl utolsó eleme.
  • Ezután a | _+_ | szakasz olyan információkat tartalmaz, mint az oldal címe, az oldalon futó különféle szkriptek és hasonlók. Ahogy a neve is sugallja, ez általában közvetlenül a kezdeti | _+_ | után következik címke. A végfelhasználó nem sok tartalmat lát ezekben a címkékben.
  • Végül a | _+_ | címke az oldal szövegét tartalmazza, amelyet az olvasó lát (és még sok más). Itt képeket, linkeket és egyebeket talál.

Mivel a

szakasz alkotja a HTML -dokumentumok nagy részét, az áttekintésünk többi része a rá vonatkozó elemeket vizsgálja.

3. lépés: Alap HTML -címkék formázáshoz

Ezután nézzünk meg néhány általános címkét, amelyek HTML dokumentumokat alkotnak. Természetesen nem lehet minden elemet lefedni, ezért áttekintjük a legfontosabbakat. Lefedtük még sok HTML példa ha ezek nem elégítik ki.

Ha ezek a címkék meglehetősen egyszerűnek tűnnek, ne feledje, hogy a HTML-t 1993-ban hozták létre. A web akkoriban nagyon szöveges volt, korai szakaszában.

Egyszerű szövegformázás

A HTML támogatja a Microsoft Wordben megtalálható alapvető szöveges stílusokat:

  • | _+_ | a címkék szöveget alkotnak bátor .
  • | _+_ | címkék (ami „hangsúly”) lesz dőlt betűvel szed szöveg.

A HTML támogatja az idősebbeket is

címke a félkövér és

dőlt betűhöz. Érdemes azonban a fentieket használni.

Röviden,

és

mutassa meg, hogyan kell valamit érteni, míg az utóbbi címkék csak azt mutatják meg, hogyan kell kinéznie. Ezek a korábbi címkék könnyebben hozzáférhetők a látássérültek által használt képernyőolvasók számára.

Bekezdés és egyéb felosztások

HTML -ek

címke lehetővé teszi a dokumentum egy részének meghatározását. Általában ezt párosítják a CSS -sel (lásd alább), hogy bizonyos szakaszokat formázzanak.

Az

címke lehetővé teszi a szöveg bekezdésekre bontását. A böngészők automatikusan helyet foglalnak ezek előtt és után, így természetesen felbonthatja a szöveget.

Hozzáadhat fejléceket a dokumentumhoz, és megkönnyítheti a követést a

keresztül

címkék. A H1 a legfontosabb fejléc, míg a H6 a legkevésbé fontos. Szinte minden MakeUseOf cikk H2 és H3 fejléceket használ az információk rendszerezésére.

Ütés Belép Ha sortöréseket szeretne hozzáadni a HTML dokumentumhoz, azok valójában nem jelennek meg. Ehelyett használhatja

sortörés hozzáadásához.

Íme egy példa, amely ezeket használja:

4. lépés: Képek beszúrása

A képek a legtöbb weboldal lényeges részét képezik. Könnyen hozzáadhatja őket HTML -szel, és még különböző tulajdonságokat is beállíthat nekik.

Képet szúrhat be a

címke. Ezt kombinálva a

attribútum segítségével megadhatja, hogy honnan szeretné betölteni a képet.

Egy másik fontos tulajdonsága

hol van az akkumulátor ikon Windows 10

címkék az

. Az alternatív szöveg lehetővé teszi a kép leírását a képernyőolvasók számára, vagy ha a kép nem töltődik be megfelelően. Az egérrel a képre kattintva megtekintheti annak alternatív szövegét.

Használja a

és




elemek a képpontok számának megadásához.

Tegye össze az egészet, és a képcímke így néz ki:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



A világháló nem lenne sok web más oldalak linkjei nélkül. Használni a

címkét, akkor bármilyen szöveg más oldalaira is hivatkozhat.

Benne

src

címke, a

attribútum megmondja, hogy hova linkel. Egyszerűen beillesztheti az URL -t. Használhatja a

alt

elem, hogy egy kis szöveget adjon hozzá, amely akkor jelenik meg, ha valaki a hivatkozásra mutat.

Egy alapvető link így néz ki:

width

Az

height

A címke sok más lehetséges elemet is tartalmaz, de itt nem merülünk bele.

Hogyan kapcsolódik a HTML a CSS -hez és a JavaScripthez

Megnéztük a HTML alapjait és azt, hogyan hoz létre weboldalt. De ahogy el tudod képzelni, a HTML önmagában nem alkalmas a modern internetre. Az egyszerű HTML weboldalak gyakoriak voltak a „Web 1.0” korában, amikor a legtöbb webhely nem más, mint statikus szöveg.

De most sokkal több van bennünk. A CSS (Cascading Style Sheets) egy olyan nyelv, amely leírja, hogyan kell kinéznie a HTML -ben készített szövegnek. Emlékezz a

Dr. Phil

tag, amit megbeszéltünk? Ebben (és más címkékben) meghatározhatja a

tulajdonság. Ezután a kísérő CSS -dokumentumban utasításokat írhat arra

meg kellene nézni.

Ezeket a stíluselemeket a HTML kódban is definiálhatja, de ez rossz gyakorlatnak tekinthető, mivel sokkal nehezebb fenntartani. További információ ezek az egyszerű CSS példák . Szintén nézd meg hogyan optimalizálhatja CSS fájljait .

JavaScript

Láttuk, hogy a HTML határozza meg a tartalmat, a CSS pedig a megjelenést. A JavaScript, a web számára létfontosságú trió utolsó tagja, lehetővé teszi, hogy a weboldalak minden alkalommal új oldal betöltése nélkül reagáljanak az emberek cselekedeteire.

Például a JavaScript lehetővé teszi egy webhely számára, hogy figyelmeztesse Önt, hogy a megadott jelszó nem felel meg a követelményeknek, mielőtt megpróbálja elküldeni. A webes tervező JavaScript segítségével görgetheti a képeket a diavetítésben, vagy felszólíthatja a felhasználót a bevitelre.

Ez csak néhány elemi példa. A JavaScript egy olyan szkriptnyelv, amely sok mindenre képes, és viszonylag bonyolultabb, mint a HTML és a CSS. Lát áttekintésünk a JavaScriptről sokkal többért.

A webdesign teljes körének vizsgálata túlmutat e cikk keretein, de elegendő azt mondani, hogy a HTML más nyelvekkel kölcsönhatásba lépve hozza létre a ma ismert weboldalakat.

A HTML fejlődése

Fontos megjegyezni, hogy a HTML nem statikus. A HTML több felülvizsgálaton is átesett, a legutóbbi a HTML 5. Nevezetesen, ez a szabvány támogatja a natív videó beágyazást, ahelyett, hogy olyan formátumokra támaszkodna, mint az Adobe Flash.

A HTML új iterációi bizonyos archaikus címkéket is időről időre elavultnak nyilvánítanak. Ezek közé tartoznak a szörnyű címkék, mint például

href

és

title

(ez a görgetés és a gyors szöveg), amely gyakran látható az 1990 -es évek weboldal -tervezésében. Tehát ne feledje, hogy a szabványok idővel változnak.

Egy kis HTML -tudás messzire vezet

Röviden bemutattuk a HTML dokumentumok működését. Most már ismeri a weboldalak felépítésének alapjait. Még akkor is, ha nem folytat weboldalak készítését, valamivel jobban ismeri a mindennap használt internetet.

videó forgatása a Windows médialejátszón

Ha többet szeretne megtudni, frissítse webfejlesztési készségeit alapvető eszközökkel, majd nézze meg útmutatónk az első webhely kialakításáról .

Kép jóváírása: Belyaevskiy/ Depositphotos

Részvény Részvény Csipog Email 5 tipp a VirtualBox Linux gépek feltöltéséhez

Unod már a virtuális gépek gyenge teljesítményét? Íme, mit kell tennie a VirtualBox teljesítményének növelése érdekében.

Olvassa tovább Kapcsolódó témák
  • Programozás
  • HTML
  • Webfejlesztés
  • JavaScript
  • Webmestereszközök
  • Programozás
  • HTML5
A szerzőről Ben Stegner(1735 megjelent cikk)

Ben a MakeUseOf szerkesztőhelyettese és bevezető menedzsere. 2016-ban otthagyta informatikai munkáját, hogy teljes munkaidőben írjon, és soha nem nézett vissza. Hivatásos íróként több mint hét éve foglalkozik technológiai oktatóanyagokkal, videojáték -ajánlásokkal és egyebekkel.

További Ben Stegner

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide