reklama

Přestože moderní webové stránky jsou obecně vytvořeny s uživatelsky přívětivými rozhraními, je užitečné znát některé základní HTML. Pokud znáte následujících 17 vzorových značek HTML (a několik doplňků), budete moci vytvořit základní webovou stránku od nuly nebo vyladit kód vytvořený aplikací, jako je WordPress.

Pro většinu značek jsme poskytli příklady kódu HTML s výstupem. Pokud je chcete vidět v akci, stáhněte si na konci článku ukázkový soubor HTML. Můžete si s ním hrát v textovém editoru a načíst jej do prohlížeče, abyste viděli, co vaše změny dělají.

1.

Tuto značku budete potřebovat na začátku každého dokumentu HTML, který vytvoříte. Zajišťuje, že prohlížeč ví, že čte HTML a že očekává HTML5, nejnovější verzi.

I když to ve skutečnosti není značka HTML, je stále dobré vědět.

2.

Toto je další značka, která říká prohlížeči, že čte HTML. značka jde přímo za značku DOCTYPE a zavřete ji znakem na konci souboru. Všechno ostatní v dokumentu se pohybuje mezi těmito značkami.

3.

značka spustí část záhlaví vašeho souboru. Obsah, který sem přejde, se na vaší webové stránce nezobrazí. Místo toho obsahuje metadata pro vyhledávače a informace pro váš prohlížeč.
instagram viewer

Pro základní stránky,

značka bude obsahovat váš název a to je o tom. Ale můžete přidat i několik dalších věcí, které za chvíli projdeme.

4.

html název značky

Tato značka nastavuje název stránky. Vše, co musíte udělat, je vložit název do značky a zavřít jej (takto jsem zahrnul i značky záhlaví):

Moje webová stránka

Toto je název, který se zobrazí jako název karty, když je otevřen v prohlížeči.

5.

Podobně jako značka nadpisu se metadata umístí do oblasti záhlaví stránky. Metadata používají především vyhledávače a představují informace o tom, co je na vaší stránce. Existuje několik různých meta polí, ale jedná se o některá z nejčastěji používaných:

  • popis—Základní popis vaší stránky.
  • klíčová slova—Výběr klíčových slov vztahujících se na vaši stránku.
  • autor—Autor vaší stránky.
  • výřez—Značka, která zajistí, že vaše stránka bude vypadat dobře na všech zařízeních.

Zde je příklad, který se může vztahovat na tuto stránku:

Značka „viewport“ by měla mít vždy obsah „width = device-width, initial-scale = 1.0“, aby se vaše stránka dobře zobrazovala v mobilních a stolních zařízeních.

6.

Po zavření sekce záhlaví se dostanete k tělu. Otevřete to pomocí

a uzavřete jej pomocí štítek. To jde přímo na konec vašeho souboru, těsně před štítek.

Veškerý obsah vaší webové stránky přechází mezi tyto značky. Je to tak jednoduché, jak to zní:


Na stránce se zobrazí vše, co chcete. 

7.

značka definuje záhlaví první úrovně na vaší stránce. Obvykle se jedná o název a v ideálním případě bude na každé stránce pouze jeden.

definuje záhlaví úrovně dva, například záhlaví sekcí,

sub-záhlaví úrovně tři atd., dolů

. Názvy značek v tomto článku jsou například záhlaví dvě úrovně.

Velký a důležitý záhlaví

Mírně méně velká záhlaví

Podnadpis

Výsledek:

html záhlaví značky

Jak vidíte, na každé úrovni se zmenšují.

8.

Značka odstavce začíná nový odstavec. To obvykle vloží dvě konce řádků.

Podívejte se například na přerušení mezi předchozím řádkem a tímto řádkem. To je to

značka udělá.

Váš první odstavec.

Váš druhý odstavec.

Výsledek:

Váš první odstavec.

Váš druhý odstavec.

Ve značkách odstavců můžete také použít styly CSS, jako je ten, který mění velikost textu:

O 20% větší text

Výsledek:

O 20% větší text

Chcete-li se naučit, jak používat styl CSS k úpravě textu, podívejte se na tyto Výukové programy HTML a CSS.

9.

Značka konce řádku vloží jeden konec řádku:

První řádek.
Druhý řádek (v blízkosti prvního).

Výsledek:

První řádek.
Druhý řádek (v blízkosti prvního).

Podobným způsobem pracuje


štítek. Na vaši stránku se nakreslí vodorovná čára a je to dobré pro oddělení částí textu.

10.

Tato značka definuje důležitý text. Obecně to znamená, že to bude odvážné. Je však možné použít CSS text se zobrazí jinak.

Můžete však bezpečně používat tučným textem.

Velmi důležité věci, které chcete říct.

Výsledek:

Velmi důležité věci, které chcete říct.

Pokud jste obeznámeni s tag pro tučný text, můžete jej stále používat. Neexistuje žádná záruka, že bude i nadále fungovat v budoucích verzích HTML, ale prozatím to funguje.

11.

Jako a , a souvisejí. značka identifikuje zvýrazněný text, což obecně znamená, že bude kurzívou. Znovu existuje možnost, že CSS bude zobrazovat zvýrazněný text jinak.

Zdůrazněná linie.

Výsledek:

Zdůrazněná linie.

značka stále funguje, ale opět je možné, že bude v budoucích verzích HTML zastaralá.

12.

nebo kotva, značka umožňuje vytvářet odkazy. Jednoduchý odkaz vypadá takto:

Přejděte na MakeUseOf na nové kartě

Výsledek:

Přejděte na MakeUseOf na nové kartě

Atribut „title“ vytvoří popis. Chcete-li zjistit, jak to funguje, umístěte ukazatel myši na následující odkaz:

Umístěním kurzoru na něj zobrazíte tip nástroje

Výsledek:

Umístěním kurzoru na něj zobrazíte tip nástroje

13.

Chcete-li na svou stránku vložit obrázek, budete muset použít značku obrázku. Normálně ji použijete ve spojení s atributem „src“. Toto určuje zdroj obrázku, jako je tento:

Výsledek:

Obrázek zalitý sluncem pomocí značek img src

K dispozici jsou i další atributy, například „výška“, „šířka“ a „alt“. Jak by to mohlo vypadat:

název vašeho obrázku

Jak můžete očekávat, atributy „výška“ a „šířka“ nastavují výšku a šířku obrázku. Obecně je dobré nastavit pouze jednu z nich, aby se obrázek správně přizpůsobil. Pokud použijete obojí, můžete skončit nataženým nebo prožraným obrazem.

Značka „alt“ říká prohlížeči, jaký text se má zobrazit, pokud obrázek nelze zobrazit, a je vhodné jej zahrnout do libovolného obrázku. Pokud má někdo obzvláště pomalé připojení nebo starý prohlížeč, může si stále udělat představu o tom, co by mělo být na vaší stránce.

14.

Značka uspořádaného seznamu umožňuje vytvořit uspořádaný seznam. Obecně to znamená, že získáte číslovaný seznam. Každá položka v seznamu potřebuje značku položky seznamu (

  • ), takže váš seznam bude vypadat takto:
    1. První věc
    2. Druhá věc
    3. Třetí věc

    Výsledek:

    1. První věc
    2. Druhá věc
    3. Třetí věc

    V HTML5 můžete použít

      obrátit pořadí čísel. A můžete nastavit počáteční hodnotu pomocí atributu start.

    Atribut „type“ vám umožňuje sdělit prohlížeči, jaký typ symbolu použít pro položky seznamu. Lze nastavit na „1“, „A“, „a“, „I“ nebo „i“ a nastavit seznam tak, aby se zobrazoval s takto označeným symbolem:

    15.

    Neuspořádaný seznam je mnohem jednodušší než jeho uspořádaný protějšek. Je to prostě seznam s odrážkami.

    • První položka
    • Druhá položka
    • Třetí položka

    Výsledek:

    • První položka
    • Druhá položka
    • Třetí položka

    Neuspořádané seznamy mají také atributy „type“ a můžete je nastavit na „disc“, „circle“ nebo „square“.

    16.

    Používání tabulek pro formátování se sice zamračuje, ale často budete chtít pomocí řádků a sloupců segmentovat informace na své stránce. K tomu, aby tabulka fungovala, je potřeba několik značek. Zde je ukázkový kód HTML:

    1. sloupec 2. sloupec
    Řádek 1, sloupec 1 Řádek 1, sloupec 2
    Řádek 2, sloupec 1 Řádek 2, sloupec 2

    a
    tagy určují začátek a konec tabulky. tag obsahuje veškerý obsah tabulky.

    Každý řádek tabulky je uzavřen v a

    štítek. Každá buňka v každé řadě je zabalena do jedné tagy pro záhlaví sloupců nebo tagy pro data sloupců. Potřebujete jeden z nich pro každý sloupec v každém řádku.

    Výsledek:

    1. sloupec 2. sloupec
    Řádek 1, sloupec 1 Řádek 1, sloupec 2
    Řádek 2, sloupec 1 Řádek 2, sloupec 2

    17.

    Když citujete jiný web nebo osobu a chcete oddělit nabídku od zbytku dokumentu, použijte značku blockquote. Vše, co musíte udělat, je uzavřít nabídku do otevírání a zavírání značek blockquote:

    Web, jak jsem to předpokládal, jsme ho ještě neviděli. Budoucnost je stále mnohem větší než minulost.

    Výsledek:

    Web, jak jsem to předpokládal, jsme ho ještě neviděli. Budoucnost je stále mnohem větší než minulost.

    Přesné použité formátování může záviset na prohlížeči, který používáte, nebo na CSS vašeho webu. Ale značka zůstává stejná.

    Přejít Forth a HTML

    Těchto 17 příkladů HTML (a počítání) byste měli být schopni vytvořit jednoduchý web 5 šablon HTML zdarma pro snadné vytváření rychlých webůVyzkoušejte tyto šablony HTML a vytvořte si svůj web ještě dnes, i když nemáte žádné znalosti HTML. Přečtěte si více . Chcete-li zjistit, jak je všechny dát dohromady, můžete stáhněte si naši ukázkovou stránku HTML. Otevřete jej v prohlížeči a uvidíte, jak se to vše spojuje, nebo v textový editor, aby přesně viděl, jak kód funguje.

    Chcete-li získat více lekcí velikosti HTML, zkuste je microlearningové aplikace pro kódování Chcete se naučit základní kódování? Vyzkoušejte ve svém volném čase 5 kódovacích aplikací s velikostí kousnutíChcete se naučit základní kódování, ale máte málo času? Tyto kódovací aplikace pro kousnutí zabere jen pár minut vašeho rušného dne. Přečtěte si více .

    Andy je bývalý tiskový novinář a redaktor časopisu, který píše o technologii 15 let. V té době se podílel na nesčetných publikacích a produkoval copywriting pro velké technologické společnosti. Poskytl také odborný komentář pro média a hostil panely na průmyslových událostech.