Tanuljon meg HTML-t 5 perc alatt

Gyors oktatóanyag a weboldalak készítéséhez.

A HTML a jelölő nyelv, amelyet a világhálón lévő tartalmak strukturálásához és bemutatásához használnak. A CSS és a JavaScript együttesen lehetővé teszi számunkra, hogy gyönyörű és interaktív weboldalakat működjünk.

Mivel a HTML a web alapja, ez is a legfontosabb nyelv minden webfejlesztési karrierhez. Ebben a pörgős oktatóanyagban megtanítom annak alapjait.

És ha elkészült, már elindítottam egy ingyenes, 14 részes HTML5-ös tanfolyamot a Scrimba.com-on - egy interaktív platformon, ahol bármikor beugorhat egy lejátszott képernyő-kódba.

Az első előadást itt tekintheti meg:

Rendben, mielőtt átugrunk a HTML-be, elölről szeretnék mondani egy kicsit a web architektúrájáról. Ez a HTML szerepét perspektívába helyezi számunkra.

Alapvető webarchitektúra

Miután kifejlesztett egy weboldalt, azt egy szerveren kell tárolnia, hogy hozzáférhetővé váljon a világhálón. Minden szerver rendelkezik IP-címmel (azaz 149.56.240.169), amelyet telefonszámnak gondolhat. Az IP-címre általában egy domain nevet (azaz scrimba.com) teszünk, hogy könnyebben megjegyezhető legyen.

Amikor beírja ezt a domain nevet a böngészőbe, az felhívja a szervert. Ezután a szerver egy csomó HTML-, CSS- és JavaScript-fájlt küld át, így:

A böngésző úgy kezdi, hogy betölti a fő HTML fájlt, mielőtt folytatja a CSS és a JavaScript használatával. Ezek a fájlok lehetővé teszik a böngésző számára, hogy szép és interaktív webhelyet jelenítsen meg.

Most nézzük meg közelebbről e három nyelv szerepét.

Mi a HTML?

Képzeljünk el egy weboldalt személyként. Ezt a hasonlatot fogjuk használni weboldalunk megértéséhez. A HTML a legjobban a csontvázként írható le:

Mi a CSS?

Azonban csak egy sima HTML webhely elég csúnyán néz ki, ezért CSS-sel kell megformáznia. A méh a weboldal bőrének és ruházatának tekinthető.

Mi a JavaScript?

Miután elsajátította a CSS-t, folytassa a JavaScript használatát. Összehasonlításunk szerint ez olyan, mint weboldalunk agya és izma:

Az első HTML fájl írása

HTML írásához HTML-dokumentumra van szükség, amely csak egy .html kiterjesztésű dokumentum . Nem számít, melyik szövegszerkesztőt használja, de manapság a legnépszerűbbek a Sublime Text, a VS Code és az Atom. A Scrimba-t böngésző-szerkesztőként is használhatja.

Hozzunk létre egy új fájlt, hívjuk index.html-nek, és írjuk Hello world!be.

Hello world!

Ha behúzzuk ezt a fájlt a böngészőbe, vagy ha a böngészőt a fájl címére mutatjuk, akkor a következőket kapjuk.

Gratulálunk, most létrehozta első webhelyét!

Az első HTML-címke

HTML-címkéket azonban még nem írtunk. Ehhez csomagoljuk be a Hello world!szöveget <h1> címkékbe, így:

Hello world!

Az első <h1> egy nyitó címke, a második one,pedig egy záró tag. Amint láthatja, a különbség csak a záró címke hátsó perjele. Ennek eredményeként a következő lesz az oldalon:

Most elmondta a böngészőnek, hogy azt szeretné, hogy a Hello world!szöveg címsor legyen. Így a böngésző bizonyos stílusokat alkalmaz rá, alapvetően növelve a szöveg méretét.

Tehát ilyen könnyű elkezdeni a HTML-t írni.

Megfelelő HTML dokumentum írása

De ez valójában nem érvényes HTML-dokumentum, mivel világosan meghatározott struktúrát kell követniük. Ennek az oktatóanyagnak az érdekében egyszerűen megmutatom neked, majd folytatjuk a szórakoztató dolgokat.

Így Hello world!kell kinéznie a példánknak:

Hello world!

Nem kell aggódnia a ; és egyelőre címkézzünk, mivel egyszerűen sátrat írunk a címkébe. Folytassuk ezzel! PE>, tml> ur con

Bekezdések

A h1 címke alatt egy bekezdést adunk hozzá. Ezt a címkét általában szövegrészekhez használják.

Hello world!

Hello, and welcome to my website!

Így néz ki:

Listák

Most adjunk hozzá egy listát. Ehhez két különböző címkét kell hozzáadnunk, <ul> ; and

  • . Az előbbi jelentése uno rdered listáját, és az utóbbi áll f vagy listaelemet. Szükségünk lesz a to wrap-re
  • ; tags a
      címke.

      
            
      • Eat
      • Sleep
      • Code

      Ha megváltoztatja az <ul> to an értéket

        , akkor a golyókat számokkal helyettesítjük, mivel o reredelt listát jelent.

        Beviteli mezők

        A felhasználóktól származó információk megszerzése kritikus tevékenység a webhelyeken. Adjunk hozzá egy beviteli mezőt.

        Ami hozzáadná a beviteli mezőt a webhelyünk alján:

        Most két új fogalmat kell megtanulni: az attribútumokat és az önzáró címkéket . Az első, az attribútumok , további információkat nyújt a HTML elemekről.

        Esetünkben két attribútumot adunk hozzá: típus és helyőrző. A típus azt mondja a böngészőnek, hogy ennek szövegmezőnek kell lennie. Itt választhattunk volna egy sor típus közül (rádió, kiválasztás, jelölőnégyzet, dátum), amelyek teljesen más elemekké változtatták volna.

        A helyőrző diktálja a súgó szöveget az elemen belül.

        Végül, a bemeneti címke szintén önzáró elem (más néven void elem.) , Vagyis nem nyitó és záró címkéből áll, hanem csak egy címkéből, amely bezárja önmagát.

        Következő lépések

        Sokkal több dolgot kell megtanulni a HTML-ben, és ez egyáltalán nem nehéz. A teljes tanfolyamom kevesebb mint egy órán belül elvégezhető, és ez alapos megértést nyújt Önnek az alapokról, és lehetővé teszi, hogy elkezdjen valódi weboldalakat építeni!

        Ha többre vagy éhes, akkor ingyenes 14 fogásos étkezést kapunk ...

        a Learn HTML5 for Free tanfolyamon a Scrimba.com címen.

        Ott találkozunk. ?