A weboldalak készítése a HTML-lel kezdődik. Ezek szépítése és interaktívvá tétele később következik. A funkcionális statikus webhelyek létrehozásához azonban meg kell értenie a HTML-t. (Szeretne egy gyors bevezetést ehhez a jelölőnyelvhez? Olvassa el a mi HTML GYIK.)

A nyelvtanulás részeként van egy hosszú lista azokról az elemekről, amelyeket hozzá kell adni a HTML-szókincséhez. Ez a feladat pedig elsőre ijesztőnek tűnhet, ezért hoztuk létre a következő csalólapot. Egyszerű módot ad a HTML-elemek felfedezésére/megértésére/előhívására, amikor csak szüksége van rájuk.

A csalólap a weboldalak strukturálásához, szöveg formázásához, űrlapok, képek, listák, hivatkozások és táblázatok hozzáadásához szükséges címkéket és attribútumokat tartalmazza. Tartalmaz olyan címkéket is, amelyeket a HTML5-ben és a HTML-kódokban vezettek be az általánosan használt speciális karakterekhez.

INGYENES LETÖLTÉS: Ez a csalólap a letölthető PDF forgalmazó partnerünktől, a TradePubtól. Ki kell töltenie egy rövid űrlapot, hogy csak az első alkalommal hozzáférhessen hozzá. Letöltés A HTML Essentials csalólapja.

instagram viewer

A HTML Essentials csalólapja

... ... ... ... ...
Parancsikon Akció
Alapvető címkék
... A HTML-dokumentum első és utolsó címkéje. Az összes többi címke e nyitó és záró címkék között található.
... Meghatározza a dokumentum metaadatainak gyűjteményét.
... Leírja az oldal címét, és megjelenik a böngésző címsorában.
... Tartalmazza a weboldalon megjelenő összes tartalmat.
Dokumentum információk
Megemlíti az alap URL-t és a dokumentumra mutató összes relatív hivatkozást.
További információkért az oldalról, például szerzőről, közzétételi dátumról stb.
Hivatkozások külső elemekre, például stíluslapokra.
Dokumentumstílus-információkat tartalmaz, például a CSS-t (Cascading Style Sheets).
Külső szkriptekre mutató hivatkozásokat tartalmaz.
Szöveg formázása
... VAGY
...
Félkövérré teszi a szöveget.
... A szöveget dőltté és félkövérré teszi.
... A szöveget dőltté teszi, de nem teszi félkövérré.
... Áthúzott szöveg.
... Egy idézet szerzőjét idézi.
... Felcímkézi a szöveg törölt részét.
... A tartalomba beszúrt szakaszt jeleníti meg.
...
Az idézetek megjelenítéséhez. Gyakran használják a címke.
... Rövidebb idézetekért.
... A rövidítésekhez és a teljes formákhoz.
...
Meghatározza az elérhetőségeket.
... A meghatározásokhoz.
... Kódrészletekhez.
... Az előjegyzések írásához
... Felső indexek írásához.
... A szöveg méretének csökkentésére és a redundáns információk megjelölésére HTML5-ben.
Dokumentum szerkezete
... Különböző szintű címsorok. H1 a legnagyobb, H6 a legkisebb.
...

A tartalom blokkokra való felosztásához.
... Tartalmaz soron belüli elemeket, például képet, ikont, hangulatjelet, anélkül, hogy tönkretenné az oldal formázását.

...

Egyszerű szöveget tartalmaz.

Új sort hoz létre.

Vízszintes sávot rajzol a szakasz végének megjelenítéséhez.
Listák
    ...
A megrendelt cikklistához.
    ...
A tételek rendezetlen listájához.
  • ...
  • A lista egyes tételeihez.
    ...
    Elemek listája definíciókkal.
    ...
    Egyetlen kifejezés meghatározása a testtartalommal összhangban.
    ...
    A meghatározott kifejezés leírása.
    Linkek
    ... Horgonycímke hiperhivatkozásokhoz.
    ... Címke az e-mail címekre való hivatkozáshoz.
    ... Horgonycímke a telefonszámok listázásához.
    ... Horgonycímke ugyanazon oldal másik részére történő hivatkozáshoz.
    ... A weboldal div részéhez navigál. (A fenti címke variációja)
    Képek

    Képfájlok megjelenítéséhez.
    Attribútumok a címke
    src=”url” Link a kép forrásútjához.
    alt=”text” A megjelenő szöveg, amikor az egeret a kép fölé viszi.
    magasság=” ” A kép magassága képpontokban vagy százalékban.
    szélesség=” ” A kép szélessége pixelben vagy százalékban.
    igazítás=” ” A kép relatív igazítása az oldalon.
    border=” ” A kép szegélyvastagsága.
    ... Link egy kattintható térképre.
    ...
    A térkép képének neve.
    Egy képtérkép képterülete.
    Attribútumok a címke
    alak =" " A képterület alakja.
    koordináták=” ” A térkép képterületének koordinátái.
    Űrlapok
    ...
    Egy HTML-űrlap szülőcímkéje.
    Attribútumok a
    címke
    action=”url” Az az URL, ahová az űrlapadatokat elküldik.
    módszer=” ” Meghatározza az űrlapküldési protokollt (POST vagy GET).
    enctype=” ” A POST-beküldések adatkódolási sémája.
    automatikus kiegészítés Meghatározza, hogy az űrlap automatikus kiegészítése be vagy ki van-e kapcsolva.
    novalidálni Meghatározza, hogy az űrlapot érvényesíteni kell-e a benyújtás előtt.
    elfogadja-karakterkészleteket Megadja a karakterkódolást az űrlapok benyújtásához.
    cél Megmutatja, hogy hol fog megjelenni az űrlap elküldésére adott válasz.
    ...
    Csoportosítja a kapcsolódó elemeket az űrlapon/
    Meghatározza, hogy a felhasználónak mit kell beírnia az egyes űrlapmezőkbe.
    ... Felirat a mezőkészlet elemhez.
    Meghatározza, hogy milyen típusú bemenetet vegyen át a felhasználótól.
    Attribútumok a címke
    típus=”” Meghatározza a bevitel típusát (szöveg, dátumok, jelszó).
    név=”” Megadja a beviteli mező nevét.
    érték=”” Megadja az értéket a beviteli mezőben.
    méret=”” Beállítja a beviteli mező karaktereinek számát.
    max hossz ="" Beállítja a megengedett beviteli karakterek korlátját.
    kívánt A beviteli mezőt kötelezővé teszi.
    szélesség=”” Beállítja a beviteli mező szélességét pixelben.
    magasság=”” Beállítja a beviteli mező magasságát pixelben.
    helyőrző=”” Leírja a mező várható értékét.
    minta=”” Megad egy reguláris kifejezést, amellyel mintákat lehet keresni a felhasználó szövegében.
    min=”” Egy bemeneti elem számára megengedett minimális érték.
    max=”” Egy bemeneti elemhez megengedett maximális érték.
    Tiltva Letiltja a beviteli elemet.
    Hosszabb adatsorok rögzítésére a felhasználótól.
    Megadja az opciók listáját, amelyek közül a felhasználó választhat.
    Attribútumok a
    név=”” Megadja a legördülő lista nevét.
    méret=”” A felhasználónak adott opciók száma.
    többszörös Beállítja, hogy a felhasználó választhat-e több lehetőséget a listából.
    kívánt Meghatározza, hogy az űrlap elküldéséhez szükséges-e egy opció(k) kiválasztása.
    autofókusz Megadja, hogy egy legördülő lista automatikusan fókuszba kerüljön az oldal betöltése után.
    Meghatározza az elemeket egy legördülő listában.
    érték=””
    Megjeleníti bármely adott opció szövegét.
    kiválasztott Beállítja a megjelenített alapértelmezett beállítást.
    Címke az űrlap elküldéséhez szükséges gomb létrehozásához.
    Objektumok és iFrame-ek
    ... Leírja a beágyazott fájltípust.
    Attribútumok a címke
    magasság=”” Az objektum magassága.
    szélesség=”” Az objektum szélessége.
    típus=”” Az objektum által tartalmazott adathordozó típusa.
    Beépített keret külső információk beágyazásához.
    név=”” Az iFrame neve.
    src=”” A kereten belüli tartalom forrás URL-je.
    srcdoc="" A kereten belüli HTML-tartalom.
    magasság=”” Az iFrame magassága.
    szélesség=” ” Az iFrame szélessége.
    További paramétereket ad hozzá az iFrame testreszabásához.
    ... Külső alkalmazást vagy bővítményt ágyaz be.
    Attribútumok a címke
    magasság=” ” Beállítja a beágyazás magasságát.
    szélesség=” ” Beállítja a beágyazás szélességét.
    típus=”” A beágyazás típusa vagy formátuma.
    src=”” A beágyazott fájl forrásútvonala.
    Táblázatok
    ...
    Meghatározza a táblázat összes tartalmát.
    ...
    A táblázat leírása.
    Fejlécek a táblázat minden oszlopához.
    Meghatározza a tábla törzsadatait.
    Leírja a táblázat láblécének tartalmát.
    Tartalom egyetlen sorhoz.
    ... Az adatok egyetlen fejlécben.
    ... Tartalom egyetlen táblázatcellán belül.
    Csoportosítja az oszlopokat a formázáshoz.
    Egyetlen oszlopnyi információ.
    HTML5 új címkék
    ...
    Megadja a weboldal fejlécét.
    ...
    Meghatározza a weboldal láblécét.
    ...
    Megjelöli a weboldal fő tartalmát.
    ...
    Meghatároz egy cikket.
    Meghatározza az oldal oldalsáv tartalmát.
    ...
    Meghatároz egy adott részt a weboldalon.
    ...
    További információk leírásához.
    ... A fenti címke fejléceként használatos. Mindig látható a felhasználó számára.
    ... Létrehoz egy párbeszédpanelt.
    ...
    Diagramok és ábrák beillesztésére szolgál.
    ...
    Leírja a
    elem.
    ... A szöveg egy meghatározott részét kiemeli.
    Navigációs hivatkozások halmaza egy weboldalon.
    ... Egy adott elem egy listából vagy egy menüből.
    ... Adott tartományon belül méri az adatokat.
    ... Elhelyez egy folyamatjelző sávot, és nyomon követi az előrehaladást.
    ... Olyan szöveget jelenít meg, amely nem támogatja a Ruby megjegyzéseket.
    ... Megjeleníti a kelet-ázsiai tipográfia karakter részleteit.
    ... Rubin annotáció a kelet-ázsiai tipográfiához.
    Azonosítja az időt és a dátumot.
    Sortörés a tartalomban.
    ¹HTML5 karakterobjektumok
    "VAGY
    &quot ;
    Idézőjel
    < VAGY
    &lt ;
    Kisebb, mint jel (
    > VAGY
    &gt ;
    Nagyobb, mint jel (>)
    VAGY
    &nbsp ;
    Törésmentes tér
    © VAGY
    &copy ;
    Copyright szimbólum
    ™ VAGY
    &ucirc ;
    Védjegy szimbólum
    @ VAGY
    &Uuml ;
    „at” szimbólum (@)
    & VAGY
    &amp ;
    "és" jel (&)
    • VAGY
    &ouml ;
    Kis golyó
    ¹ Hagyja figyelmen kívül a pontosvessző előtti szóközt a HTML-karakter beírása közben.

    Hozzon létre egy webhelyet a gyakorlati tapasztalatokért

    Miután megértette a HTML kód alapjai és rendelkezik a CSS és a JavaScript gyakorlati ismeretekkel, próbálja ki magát egy weboldal elkészítésében Hogyan készítsünk webhelyet: kezdőknekMa végigvezetem Önt a teljes weboldal elkészítésének folyamatán. Ne aggódjon, ha ez nehéznek hangzik. Minden lépésnél végigvezetlek rajta. Olvass tovább . Ezenkívül mindenképpen mentse meg a mieinket CSS3 tulajdonságok csaló lapja Az alapvető CSS3 tulajdonságok csalólapjaSajátítsa el az alapvető CSS-szintaxist a CSS3 tulajdonságok csalólapjával. Olvass tovább és JavaScript csalólap Az Ultimate JavaScript csalólapGyorsan frissítheti a JavaScript-elemeket ezzel a csalólappal. Olvass tovább jövőbeni használatra!

    Akshata kézi tesztelésben, animációban és UX-tervezésben tanult, mielőtt a technológiára és az írásra összpontosított. Ez egyesítette két kedvenc tevékenységét – a rendszerek értelmezését és a zsargon egyszerűsítését. A MakeUseOf-nál Akshata arról ír, hogy a legjobbat hozza ki Apple-eszközeiből.