a HTML nagyjából minden alapja az interneten. Ez az a sarokköve, amelyre az internetes tartalom épül, évtizedek óta. A HTML alapos megértése nélkül minden, amit a WordPress vagy bármely más webdesign és fejlesztés során csinálsz, elakad. Szerencsédre, van egy csomó alapvető HTML-kód, amelyet minden WordPress-felhasználó kezdőtől veteránig szinte naponta használ. Bontsuk le őket, és segítsünk a gyorsaságban.
Feliratkozás Youtube csatornánkra
mi a HTML?
itt van a gyors verzió: a HTML a hypertext markup language rövidítése, ami azt jelenti, hogy nem egészen programozási nyelv. HTML nem parancs a számítógép futtatni a dolgokat keresztül script. Inkább az oldalon lévő szöveget veszi fel, és megjelöli. Dőlt, félkövér, igazítás, méret, és így tovább. HTML is ad arra, hogy tartalmazza a képek és linkek, és HTML5, a legújabb verzió manipulálja őket, és a szöveg izgalmas új módon.
a HTML kód a zászlókban található, és elég könnyen olvasható. Egy egyszerű HTML oldal így nézhet ki:
ha egy böngészőben renderelik, ez így néz ki:
mint látható, a HTML nem olyan zavaró. Valójában, még akkor is, ha még soha nem látott HTML kódot, fogadok, hogy kitalálhatja, hogy ezek a címkék mit jelentenek csak a kontextus alapján. Ezzel az útból nézzük meg a leggyakoribb, alapvető HTML kódokat, amelyeket karrierje során használni fog az interneten.
félkövér
amikor a szöveget a < erős> címkékbe csomagolja, akkor azt mondja a böngészőnek, hogy félkövér legyen a szöveg. Egyszerűen <b> is használható, de ha a Google és más keresőmotorok előnyben részesítik a szemantikai kódolást, akkor biztonságosabb a < erős>
You can make <strong>text bold</strong> by using this tag.
dőlt
< Em> jelentése hangsúly, és ez a szemantikai módja annak, hogy dőlt HTML. Használhatja a < i>elemet is.
You can put <em>text in italics<em> by using this tag.
aláhúzás
ugyanez vonatkozik a < u> aláhúzásra. Általában ez nagyon kevés hasznát veszi, mert a linkek alá vannak húzva, az aláhúzott szöveg pedig, amelyre nem kattinthat, rossz felhasználói élményt nyújt.
You can <u>underline</u> by using this tag.
fejlécek
ügyeljen arra, hogy hierarchikus sorrendben használja őket. A Google azt akarja, hogy fészkelje a címsorokat, ezért feltétlenül használja <h2> csak <h1> alatt, ne <h3>alatt.
míg a legtöbb oldalon csak egyetlen < h1> lesz, a Google már nem bünteti meg, ha több van. Ne feledje, hogy a <h1 > használatával visszaállítja az oldal fészkelését (vagy legalábbis az oldal azon részét).
<h2>H2 is the most commonly used header tag.</h2>
ezen az oldalon a HTML elemek összes fejléce h2.
Image
a Képek beszúrása az egyik leghasznosabb dolog, amit a HTML csinál. Kitörte az internetet a brutalista stílusából, és arra az útra, ahol ma van. Mindössze annyit kell tennie, hogy az URL-t a kívánt képet, és tegyen egy egyetlen <img src> (álló image source tag. Mint ez:
<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">
ne feledje, hogy nem kell bezárnia a képcímkét, és az idézőjelek nem szükségesek a kép megjelenítéséhez. Sokan még mindig használják őket a kód olvashatóbbá tételére.
a < alt> attribútum az a szöveg, amely elérhetőség céljából jelenik meg, és a keresőmotorok is indexelik. A képernyőolvasókkal és más eszközökkel rendelkező emberek számára az alt szöveg feltétlenül szükséges az internet használatához. Ez mindig a legjobb gyakorlat, hogy alternatív szöveget a képeket.
Linkek
Rendben. Linkek. Sok minden történik a linkekkel. Vagy, inkább, van egy csomó, amit tehetünk a linkek. A legalapvetőbb, akkor tedd együtt egy <a href> tag. A < a>azt jelzi, hogy ez egy link, a < href> pedig szó szerint a hipertext hivatkozás (az URL) arra a helyre, ahová linkel.
<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>
a linkkódot egyszerűen egy </a> – vel zárod, és bármilyen szöveget használhatsz közöttük. Ez lesz maga a kattintható link, amelyet anchor text-nek hívnak.
így jelenik meg az oldalon: egy link a Divi oldalunkra, és ez a horgonyszöveg.
továbbá, akkor fészket HTML kódot is. Kattinthatóvá tehet egy képet, ha egy <img src> címkét helyez be a link zászlók közé.
<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>
itt láthatja, hogy egy kattintható kép link hogyan jelenik meg:
további hivatkozási attribútumok
a linkekhez jó néhány különböző attribútumot is felvehet, hogy azok bizonyos módon viselkedjenek (például elrejtse az URL-jét, hogy hivatkozó legyen, vagy új ablakban nyissa meg a linket). Néhány a leghasznosabb az Ön számára lesz
- rel jelzi valamilyen kapcsolat a kapcsolat és a cél. Mint például a noreferrer, hogy megakadályozza a hivatkozási forgalom nyomon követését.
- a target megmondja a böngészőnek, hogy hol nyissa meg a linket: A _blank például egy üres lapon nyitja meg.
- a nofollow együtt jár a rel-lel, és azt mondja a keresőmotoroknak, hogy nem akar semmilyen linklevet továbbítani a céloldalra. Ez akkor jó, ha ellentmondásos tartalmakhoz kapcsolódik stb. Ezenkívül megakadályozza az embereket abban, hogy a megjegyzéseiben linkeket spameljenek, és úgy teszi, hogy a tartalma elfogulatlannak tekinthető, mivel nem nyújt semmilyen bónuszt az expozíción és a kattintásokon kívül.
több van, de valószínűleg ezeket fogja látni leggyakrabban.
áthúzott szöveg
ha olyan vagy, mint én, néha meg kell viccelődni a sújtott szavakkal. Vagy talán meg kell jelölnie a dolgokat egy listáról (vagy törölnie kell, ahogy maga a kód is mondja). Vagy bármi mást, amire szüksége lenne, hogy egy sor fut át a szöveget.
ez az, amikor a < del> – et használja az átütni kívánt szöveg körül. Néhány ember számára ez hihetetlenül gyakori kód, míg mások soha nem használhatják. Tekintet nélkül, könnyű megjegyezni.
You can use <del>this code</del> for strikethrough text in HTML.
listák
a listák manapság a webes tartalom másik jelentős részét képezik. Nem csak rengeteg fehér helyet adnak neked, és lebontják a szöveg falát, hanem lehetővé teszik, hogy gondolataidat emészthető darabokra szervezd.
kétféle listát készíthet az alapvető HTML kódokkal. Rendezett listák, amelyek 1, 2, 3 stb. A rendezetlen listák számok helyett golyókat vagy szimbólumokat használnak (a webhely kialakításától függően).
minden listát a < ul>vagy a < ol> rendezetlen vagy rendezett listákhoz csomagol. A lista minden elemét <li> – be kell csomagolni.
és ezek a kódok így mutatják a különbséget:
- ez egy rendezetlen lista része.
- így van ez.
- így állítunk össze egy rendezett listát.
- ez egy link a listában.
- és ez a link szöveg félkövér, de ez a rész nem.
más kódokat is beágyazhat a listákba, is. Így félkövér szöveget, linkeket illeszthet be stb.
blokk Idézetek
a WordPress karrierjének egy bizonyos pontján idéznie kell valaki más webhelyét. Itt jön be a < blockquote>. Csak körül bármilyen szöveget másolni/beilleszteni (és attribútum) a < blockquote> nyitó és záró tag, és akkor jó menni.
<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>
így fog kinézni egy oldalon:
ez a szöveg speciális stílusban jelenik meg, jelezve, hogy ez egy idézet.
paragrafusok
paragrafus HTML elég furcsa. A használt CMS-től és builder-től függően előfordulhat, hogy automatikusan minden sortörést külön bekezdésként renderel. A WordPress ezt akkor teszi, amikor HTML-t ír be. Azonban nem minden teszi ezt. Tehát, ha külön kell tartani a bekezdéseket, és nincs szövegfal, tekerje be mindegyiket < p>. A böngésző ezután tudni fogja, hogy minden szövegblokkot külön bekezdésként jelenít meg egy folyamatos blokk helyett. Alapértelmezés szerint a böngészők figyelmen kívül hagyják a sortöréseket, hacsak másként nem rendelkeznek.
<p>This is my first paragraph.</p><p>This is my second paragraph.</p>
sorok és sortörések
előfordulhat, hogy a bekezdések és szakaszok között más elválasztást szeretne. Ekkor használhatja a < hr>és < br/> címkéket.
< hr> szeparátor vonalat szúr be, bárhol is legyen. Sokan ezt használják a widgetek elválasztására egy oldalsávon vagy egy weboldal fő szakaszaiban.
a < br/> címke egy sortörés. Használhatja a <br/> a <p> közepén, hogy megszakítson egy sort anélkül, hogy új bekezdésbe lépne (a blokkstílus és a szervezés érdekében). < br/> egy önzáró címke, ami azt jelenti, hogy semmilyen tartalom nem lehet benne. Ezt a kód végén található perjel jelzi.
bár használhatja a szöveg és a bekezdések szétválasztására úgy, hogy beilleszti őket a kívánt szünetekbe, ez nem jó gyakorlat, és ahogy egyre fejlettebb a HTML, a CSS és a JavaScript, meg kell céloznia a bekezdés elemet bizonyos dolgok elvégzéséhez. A megkülönböztetésről itt olvashat bővebben.
csomagolás
HTML feltétlenül szükséges, hogy kölcsönhatásba lépnek az interneten. Mindenki ugyanúgy használja őket, függetlenül attól, hogy a webfejlesztésben és a tervezésben kezdesz, vagy egy veterán a JavaScript előtti napokból. Még mindig az alapvető HTML kódokat használjuk az összes webhelyünk alapjainak futtatásához. Nem számít, mennyire divatos a webhely, vagy mennyire fejlett a funkciói, amikor egy link megszakad, vagy a dolgok merészek, amelyeknek nem kellene lenniük, akkor is ásni fog, hogy megnézze, hogy a <a href> vagy <erős> címkék rendben vannak-e.
melyek a leggyakrabban használt alapvető HTML kódok manapság?
a cikk kiemelt képe: enterlinedesign / .com