Home-theater-designers
I když jsou moderní webové stránky obecně vytvořeny s uživatelsky přívětivým rozhraním, je užitečné znát některé základní HTML. Pokud znáte následujících 17 příkladů značek HTML (a několik doplňků), budete moci vytvořit základní webovou stránku od začátku nebo vyladit kód vytvořený aplikací, jako je WordPress.
Pro většinu značek jsme poskytli příklady kódu HTML. Pokud je chcete vidět v akci, stáhněte si ukázkový soubor HTML na konci článku. Můžete si s ním hrát v textovém editoru a načíst jej v prohlížeči, abyste zjistili, jaké změny provedete.
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ž se nejedná o značku HTML, je dobré ji znát.
2.
Toto je další značka, která prohlížeči říká, že čte HTML. Značka jde přímo za značku DOCTYPE a zavřete ji značkou přímo na konci souboru. Všechno ostatní v dokumentu se nachází mezi těmito značkami.
3.
Značka spustí část záhlaví vašeho souboru. Věci, které jsou zde uvedeny, se na vaší webové stránce nezobrazí. Místo toho obsahuje metadata pro vyhledávače a informace pro váš prohlížeč.
U základních stránek bude tag obsahovat váš název a to je asi tak všechno. Ale můžete zahrnout několik dalších věcí, které si za chvíli projdeme.
Čtyři.
Tato značka určuje název vaší stránky. Jediné, co musíte udělat, je vložit název do značky a zavřít jej takto (zahrnoval jsem také značky záhlaví, abych ukázal kontext):
My Website
To je název, který se zobrazí jako název karty při otevření v prohlížeči.
5.
Stejně jako nadpisová značka jsou metadata vložena do oblasti záhlaví vaší stránky. Metadata používají především vyhledávače a jsou informacemi o tom, co je na vaší stránce. Existuje řada různých meta polí, ale tato jsou 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 platných pro vaši stránku.
- autor : Autor vaší stránky.
- výřez : Značka zajišťující, aby vaše stránka vypadala dobře na všech zařízeních.
Zde je příklad, který by mohl platit pro tuto stránku:
Značka „výřez“ by měla vždy obsahovat obsah „width = device-width, initial-scale = 1.0“, aby se vaše stránka dobře zobrazovala na mobilních a stolních zařízeních.
6.
Po zavření sekce záhlaví se dostanete do těla. Otevřete to štítkem a zavřete jej štítkem. To jde přímo na konec souboru, těsně před značku.
Mezi těmito značkami se nachází veškerý obsah vaší webové stránky. Je to tak jednoduché, jak to zní:
Everything you want displayed on your page.
7.
O něco méně velké záhlaví
Podnadpis
Výsledek:
Jak vidíte, na každé úrovni se zmenšují.
8.
Značka odstavce spustí nový odstavec. To obvykle vloží dva konce řádků.
Podívejte se například na přestávku mezi předchozím řádkem a tímto. To je a
tag bude dělat.
Your first paragraph.
Your second paragraph.
Výsledek:
Váš první odstavec.
Váš druhý odstavec.
Můžete také použijte styly CSS ve značkách odstavců, jako je tento, který mění velikost textu:
This is 50% larger text.
Výsledek:
9.
Značka konce řádku vloží zalomení jednoho řádku:
The first line.
The second line (close to the first one).
Výsledek:
Práce podobným způsobem je
štítek. Tím se na stránce nakreslí vodorovná čára a je vhodné k oddělení částí textu.
10.
Tato značka definuje důležitý text. Obecně to znamená, že to bude odvážné. K vytvoření je však možné použít CSS zobrazení textu jinak.
nejlepší čas na nákup stolního počítače
Můžete však bezpečně použít na tučný text.
Very important things you want to say. Výsledek:
Velmi důležité věci, které chcete říci.
Pokud jste obeznámeni s tag pro tučný text, stále ho můžete používat. Neexistuje žádná záruka, že bude i nadále fungovat v budoucích verzích HTML, ale prozatím to funguje.
jedenáct.
Jako a , a souvisejí. The tag identifikuje zdůrazněný text, což obecně znamená, že bude kurzívou. Opět existuje možnost, že CSS umožní zvýraznění textu zobrazit jinak.
An emphasized line. Výsledek:
Zdůrazněná linie.
The tag stále funguje, ale opět je možné, že bude v budoucích verzích HTML zastaralý.
12.
The , nebo ukotvit, tag umožňuje vytvářet odkazy. Jednoduchý odkaz vypadá takto:
Přejít na MUO Atribut 'href' určuje cíl odkazu. V mnoha případech to bude další web. Může to být také soubor, například obrázek nebo PDF.
Mezi další užitečné atributy patří „cíl“ a „název“. Atribut target se téměř výhradně používá k otevření odkazu na nové kartě nebo okně, například takto:
Go to MUO in a new tab Výsledek:
Atribut 'title' vytvoří popisek. Umístěním kurzoru na odkaz níže se dozvíte, jak to funguje:
Hover over this to see the tool tip Výsledek:
Umístěním kurzoru na toto tlačítko zobrazíte hrot nástroje
13. ![]()
Pokud chcete na svou stránku vložit obrázek, budete muset použít značku obrázku. Obvykle jej budete používat ve spojení s atributem 'src'. Toto určuje zdroj obrázku takto:
Výsledek:
zemřelo, jak opravit kritický proces
K dispozici jsou další atributy, například „výška“, „šířka“ a „alt“. Takto to může vypadat:
Jak se dalo očekávat, atributy „výška“ a „šířka“ nastavují výšku a šířku obrázku. Obecně je dobré nastavit pouze jeden z nich, aby se obrázek správně škáloval. Pokud použijete obojí, můžete skončit s nataženým nebo rozmačkaným obrázkem.
Značka 'alt' sděluje prohlížeči, jaký text má zobrazit, pokud obrázek nelze zobrazit, a je vhodné jej zahrnout do jakéhokoli obrázku. Pokud má někdo obzvláště pomalé připojení nebo starý prohlížeč, může si přesto udělat představu o tom, co by na vaší stránce mělo být.
14.
Značka seřazeného seznamu vám umožňuje vytvořit seřazený seznam. Obecně to znamená, že dostanete očíslovaný seznam. Každá položka v seznamu potřebuje značku položky seznamu (
), takže váš seznam bude vypadat takto:
- First thing
- Second thing
- Third thing
Výsledek:
- První věc
- Druhá věc
- Třetí věc
V HTML5 můžete použít
obrátit pořadí čísel. Počáteční hodnotu můžete nastavit pomocí atributu start. Atribut 'type' vám umožňuje sdělit prohlížeči, jaký typ symbolu má pro položky seznamu použít. Lze jej nastavit na „1“, „A“, „a“, „I“ nebo „i“ a nastavit seznam tak, aby se zobrazoval s uvedeným symbolem takto:
patnáct.
Neuspořádaný seznam je mnohem jednodušší než jeho seřazený protějšek. Je to prostě seznam s odrážkami.
- First item
- Second item
- Third item
Výsledek:
- První položka
- Druhá položka
- Třetí položka
Neuspořádané seznamy mají také atributy „typ“ a můžete je nastavit na „disk“, „kruh“ nebo „čtverec“.
16.
Při používání tabulek pro formátování je odsuzováno, existuje spousta případů, kdy budete chtít použít řádky a sloupce k segmentaci informací na vaší stránce. Aby tabulka fungovala, je potřeba několik tagů. Zde je ukázkový kód HTML:
1st column
2nd column
Row 1, column 1
Row 1, column 2
Row 2, column 1
Row 2, column 2
The
a
tagy určují začátek a konec tabulky. Thetag obsahuje veškerý obsah tabulky. Každý řádek tabulky je uzavřen v a
štítek. Každá buňka v každém řádku je zabalena buďznačky pro záhlaví sloupců, popř tagy pro data sloupců. Jeden z nich potřebujete pro každý sloupec na 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 citát odlišit od zbytku dokumentu, použijte značku blockquote. Vše, co musíte udělat, je uzavřít nabídku v otevírání a zavírání tagů blockquote:
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
Výsledek:
Web, jak jsem si ho představoval, 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á.
Ukázky HTML kódu
S těmito 17 příklady HTML byste měli být schopni vytvořit jednoduchý web. Můžete je všechny hned vyzkoušet v online textovém editoru, abyste získali představu o tom, jak fungují.
Chcete-li získat další lekce v HTML, zkuste některé aplikace pro mikro učení pro kódování. Pomohou vám rychle dostat rychlost.
Podíl Podíl tweet E-mailem Chcete se naučit základní kódování? Vyzkoušejte ve svém volném čase 5 aplikací pro kódování ve velikosti kousnutí Chcete se naučit základní kódování, ale máte málo času? Tyto aplikace pro kódování velikosti kousnutí vám zabere jen několik minut vašeho rušného dne.
Číst dále Související témata - Programování
- Wordpress
- HTML
- Vývoj webu
- Návody na kódování
O autorovi Andy Betts(221 publikovaných článků) Andy je bývalý novinář v tisku a redaktor časopisu, který píše o technologii 15 let. Za tu dobu přispěl k bezpočtu publikací a produkoval copywritingové práce pro velké technologické společnosti. Poskytl také odborný komentář pro média a hostoval panely na průmyslových akcích.
Více od Andy BettsPřihlaste se k odběru našeho zpravodaje
Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!
Kliknutím sem se přihlásíte k odběru