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.
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 | ||
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 | ||
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 | ||
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 | ||
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 |
||
... | 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 " ; |
Idézőjel | |
< VAGY < ; |
Kisebb, mint jel ( | |
> VAGY > ; |
Nagyobb, mint jel (>) | |
VAGY   ; |
Törésmentes tér | |
© VAGY © ; |
Copyright szimbólum | |
™ VAGY û ; |
Védjegy szimbólum | |
@ VAGY Ü ; |
„at” szimbólum (@) | |
& VAGY & ; |
"és" jel (&) | |
• VAGY ö ; |
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.