HTML je základem téměř všeho na internetu. Je to základní kámen, na kterém je postaven internetový obsah, a to už po celá desetiletí. Bez pevného porozumění HTML bude vše, co děláte s WordPress nebo jiným webovým designem a vývojem, zakrnělé. Naštěstí pro vás existuje spousta základních HTML kódů, které každý uživatel WordPress od začátečníků po veterány používá téměř denně. Pojďme je rozebrat a dostat vás do rychlosti.
přihlaste se k odběru našeho kanálu Youtube
co je HTML?
zde je rychlá verze: HTML je zkratka pro HyperText markup language, což znamená, že to není úplně programovací jazyk. HTML nepřikazuje počítači spouštět věci pomocí skriptu. Spíše to vezme text, který máte na své stránce, a označí to. Kurzíva, tučné, zarovnání, velikost a tak dále. HTML vám také dává možnost zahrnout obrázky a odkazy a pomocí HTML5 nejnovější verze manipuluje s nimi a textem vzrušujícími novými způsoby.
HTML kód je obsažen ve vlajkách a je velmi snadno čitelný. Jednoduchá stránka HTML může vypadat takto:
Při vykreslení v prohlížeči, že by měl vypadat takhle:
Jak můžete vidět, HTML není to matoucí. Ve skutečnosti, i když jste nikdy předtím neviděli žádný HTML kód, vsadím se, že můžete zjistit, co každá z těchto značek znamená jen kontextem. S tím z cesty, pojďme se podívat na nejběžnější, základní HTML kódy, které budete používat po celou svou kariéru na webu.
Tučné
Když zabalit text do <silný> značky, říkáte prohlížeče na tučný text. Můžete také použít jednoduše <b> taky, ale s Google a další vyhledávače mají přednost sémantické kódování, jste ve větším bezpečí s <silný>
You can make <strong>text bold</strong> by using this tag.
Kurzívou
<Em> je zkratka pro důraz, a to je sémantický způsob, jak používat kurzívu v HTML. Můžete také použít <i> k tomu.
You can put <em>text in italics<em> by using this tag.
Podtržení
platí pro <u> a podtržení. Obecně platí, že tento je velmi málo užitečný, protože odkazy jsou podtrženy a podtrženy text, na který nemůžete kliknout, dává špatný uživatelský dojem.
You can <u>underline</u> by using this tag.
nadpisy
ujistěte se, že je používáte v hierarchickém pořadí. Google chce, abyste vnořili nadpisy, takže nezapomeňte použít <h2> pouze pod < h1>, ne pod <h3>.
zatímco většina stránek bude mít pouze jeden <h1>, Google vás již penalizuje za to, že máte více. Jen mějte na paměti, že pomocí < h1> resetuje vaše hnízdění pro stránku (nebo alespoň tuto část stránky).
<h2>H2 is the most commonly used header tag.</h2>
všechny záhlaví HTML prvků na této stránce jsou h2.
obrázek
vkládání obrázků je jednou z nejužitečnějších věcí, které HTML dělá. Vytrhl internet ze svých brutalistických stylů a vydal se na cestu tam, kde je dnes. Vše, co musíte udělat, je mít adresu URL obrázku, který chcete, a dát jeden <img src> (stání pro image source tag. Takhle:
<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">
Všimněte si, že značku obrázku nemusíte zavírat a uvozovky se pro zobrazení obrázku nevyžadují. Mnoho lidí je stále používá, aby byl kód čitelnější.
atribut<alt > je text, který se zobrazuje pro účely přístupnosti, a je také indexován vyhledávači. Pro lidi se čtečkami obrazovky a dalšími zařízeními je alt text naprosto nezbytný pro používání internetu. Vždy je nejlepší mít alternativní text pro vaše obrázky.
Odkazy
Dobře. Odkaz. S odkazy se toho děje hodně. Nebo spíše je toho hodně, co můžete udělat s odkazy. Na jejich nejzákladnější, budete dát dohromady s <a href> tag. < a> označuje, že se jedná o odkaz, a <href> je doslova hypertextový odkaz (URL) na místo, kde odkazujete.
<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>
kód odkazu zavřete jednoduše < / a> a můžete mezi nimi použít libovolný text. To bude samotný odkaz, na který lze kliknout, a nazývá se anchor text.
vykresluje na stránce takto: odkaz na naši stránku Divi a toto je text kotvy.
navíc, můžete hnízdo HTML kód, taky. Na obrázek lze kliknout vložením značky <img src> mezi příznaky odkazu.
<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>
můžete vidět, jak klikací odkaz na obrázek vykreslí zde:
Odkaz Další Atributy
můžete také zahrnout několik různých atributů odkazy, takže se chovají v určitých ohledech (jako je skrytí vaší adresy URL z referrer nebo otevřít odkaz v novém okně). Některé z nejužitečnějších pro vás budou
- rel označuje nějaký vztah pro odkaz a jeho cíl. Jako je noreferrer, aby se zabránilo sledování návštěvnosti doporučení zpět k vám.
- target řekne prohlížeči, kde má odkaz Otevřít: _blank ji například otevře na prázdné kartě.
- nofollow jde spolu s rel a říká vyhledávačům, že nechcete předat žádný odkaz na cílový web. To je dobré při propojení s kontroverzním obsahem a tak dále. To také udržuje lidi z rozesílání spamu odkazy na vaše komentáře, a dělá to tak, že váš obsah může být viděn jako objektivní, protože nejste poskytnutí jakékoli bonus je vybavený jiné než expozice a prokliky.
existuje více, ale to jsou ty, které pravděpodobně uvidíte nejčastěji.
přeškrtnutý Text
pokud jste jako já, někdy potřebujete udělat vtip pomocí zasažených slov. Nebo možná budete muset označit věci ze seznamu (nebo odstranit, jak říká samotný kód). Nebo cokoli jiného, pro co byste potřebovali mít řádek procházející textem.
to je, když použijete <del> kolem textu, který chcete projít. Pro některé lidi je to neuvěřitelně běžný kód, zatímco jiní jej nikdy nepoužívají. Bez ohledu na, je to snadné si pamatovat.
You can use <del>this code</del> for strikethrough text in HTML.
seznamy
seznamy jsou další významnou součástí webového obsahu v těchto dnech. Nejen, že vám spoustu bílého prostoru a rozbít stěny textu, ale také vám umožní uspořádat své myšlenky do stravitelných kousků.
existují dva druhy seznamů, které můžete vytvořit se základními HTML kódy. Objednané seznamy, které jsou číslovány 1, 2, 3 a tak dále. Neuspořádané seznamy místo čísel používají odrážky nebo symboly (v závislosti na designu webu).
zabalit každý seznam se buď <ul> nebo <ol> pro neuspořádané nebo uspořádané seznamy, resp. A každá položka na seznamu by měla být zabalena do < li>.
A ty kódy render jako tohle ukázat rozdíl:
- To je součástí nečíslovaný seznam.
- tak je to.
- a takto nastavíte objednaný seznam.
- Toto je odkaz v seznamu.
- A tento odkaz, text je tučný, ale tato část není.
můžete také vnořit další kódy v seznamech. Takže můžete tučný text, vložit odkazy a tak dále.
blokovat citace
v určitém okamžiku své kariéry WordPress budete muset citovat webové stránky někoho jiného. To je místo, kde <blockquote> přichází. Právě obklopují, ať text kopírovat/vložit (a atribut) s <blockquote> otevírací a uzavírací tagy, a máte dobré jít.
<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>
To je, co to bude vypadat na stránce:
Tento text se zobrazí s speciální styling pro indikaci, že je to citát.
odstavce
odstavec HTML je trochu divný. V závislosti na CMS a staviteli, který používáte, může automaticky vykreslit každý konec řádku jako samostatný odstavec. WordPress to dělá, když píšete HTML. Ne všechno to však dělá. Takže pokud potřebujete, aby vaše odstavce oddělené a nemají zeď textu, zabalit každý z nich v < p>. Prohlížeč pak bude vědět, že zobrazí každý blok textu jako samostatný odstavec místo jednoho souvislého bloku. Ve výchozím nastavení prohlížeče ignorují konce řádků, pokud není uvedeno jinak.
<p>This is my first paragraph.</p><p>This is my second paragraph.</p>
řádky a konce řádků
možná budete chtít další oddělení mezi odstavci a oddíly. Tehdy můžete použít značky <hr> a <br/>.
< hr> vloží oddělovací čáru, ať je kdekoli. Mnoho lidí to používá k oddělení widgetů v postranním panelu nebo hlavních částech webové stránky.
značka <br / > je konec řádku. Můžete použít < br / > uprostřed < p> pro přerušení řádku, aniž byste šli do nového odstavce (pro blokový styl a organizaci). < br / > je samouzavírací značka, což znamená, že v ní nemůže být žádný obsah. To je označeno lomítkem na konci kódu.
i Když můžete použít text a odstavce vložením je tam, kde chcete přestávky, to není dobré praxe, dostat se do, a jak si získat více pokročilé s HTML a CSS a Javascriptu, budete muset zaměřit se na bod prvku dělat určité věci. Více o rozdílu si můžete přečíst zde.
zabalení
HTML je naprosto nezbytné pro interakci s internetem. Každý je používá stejným způsobem, ať už začínáte s vývojem a designem webových stránek nebo veteránem z dob předtím, než byl JavaScript věcí. Stále používáme základní HTML kódy ke spuštění základů všech našich stránek. Bez ohledu na to, jak efektní je web nebo jak pokročilé jsou jeho funkce, když se odkaz zlomí nebo věci jsou odvážné, které by neměly být, stále se budete kopat, abyste zjistili, zda značky <a href> nebo <strong> dělají dobře.
jaké jsou vaše nejpoužívanější základní HTML kódy v těchto dnech?
článek doporučený Obrázek od enterlinedesign/. com