5 kroků k pochopení základního HTML kódu

5 kroků k pochopení základního HTML kódu

HTML je důležitou součástí webu, jak ho známe. A i když několik webových designérů vytváří stránky ručním zadáváním HTML, je stále užitečné se v tom trochu vyznat.





Podíváme se na některé základy jazyka, včetně toho, co HTML ve skutečnosti je, některé základní pojmy a jak interaguje s jinými jazyky. Představte si to jako nouzový kurz „HTML pro atrapy“.



Základy HTML: Co je HTML?

HTML je zkratka pro Hyper Text Markup Language . A i když je někdy spojeno s programovacími jazyky, není to přesné.





Jako značkovací jazyk , HTML umožňuje pouze vytvořit rozložení zobrazení stránek. Pravda programovací jazyk , jako Java nebo C ++, obsahuje logiku a prováděné příkazy.

I když je to jednoduché, HTML je páteří každé stránky na webu. Je zodpovědný za to, jaký text se zobrazí jako tučný, za přidání obrázků a propojení s jinými stránkami. Máme HTML FAQ, které vysvětluje více.



Na většinu webových stránek v prohlížeči můžete kliknout pravým tlačítkem a vybrat si Zobrazit zdroj stránky nebo podobné, abyste viděli HTML za nimi. Pravděpodobně to také bude obsahovat spoustu kódu, který není HTML, ale můžete to projít.

I když máte nulové zkušenosti se značkovacími nebo programovacími jazyky, trocha znalosti HTML z vás udělá informovanějšího uživatele webu. Pojďme si projít pět základních kroků, které vám pomohou pochopit, jak HTML funguje. Na cestě poskytneme příklady.



Krok 1: Porozumění konceptu značek

HTML používá systém tagy kategorizovat různé prvky dokumentu.

Většina značek se dodává ve dvojicích, aby do nich zabalila příslušný text. Zde je jednoduchý příklad (



tag vytváří text tučně ; o tom budeme více diskutovat za chvíli.)

This is some bold text .

Všimněte si, jak uzavírací značka začíná lomítkem (/). To znamená uzavírací značku, což je důležité. Pokud značku nezavřete, vše od začátku bude mít tento atribut.

jak odesílat soubory na jiný počítač

Ne všechny značky však mají pár. Některé prvky HTML, tzv prázdné prvky , nemají žádný obsah a existují samostatně. Příkladem je


tag, což je konec řádku. Takové značky můžete „zavřít“ přidáním lomítka (jako např


), ale není to nezbytně nutné.

Krok 2: Rozložení HTML skeletu

Správný dokument HTML musí mít definovány určité značky, aby byl správně rozložen. Toto jsou základní části:

  • Každý dokument HTML musí začínat | _+_ | prohlásit se za takové. Jeho uzavírací značka, | _+_ | , je poslední položka v souboru HTML.
  • Dále | _+_ | část obsahuje informace, jako je název stránky, různé skripty, které na stránce běží a podobně. Jak naznačuje název, obvykle to přichází hned za počáteční | _+_ | štítek. Koncový uživatel nevidí mnoho obsahu v těchto značkách.
  • Nakonec | _+_ | tag obsahuje text stránky, který čtenář vidí (a mnoho dalšího). Zde najdete obrázky, odkazy a další.

Od té doby

část tvoří převážnou část dokumentu HTML, zbytek našeho návodu se zabývá prvky, které se k němu vztahují.

Krok 3: Základní HTML tagy pro formátování

Dále se podívejme na některé běžné značky, které tvoří dokumenty HTML. Samozřejmě není možné pokrýt každý prvek, proto si zkontrolujeme některé z nejdůležitějších. Pokryli jsme mnoho dalších příkladů HTML pokud vás tyto neuspokojí.

Pokud se vám tyto značky zdají docela základní, pamatujte, že HTML bylo vytvořeno již v roce 1993. Web byl v té době ve své rané fázi velmi založen na textu.

Jednoduché formátování textu

HTML podporuje základní styly textu, jaké byste našli v aplikaci Microsoft Word:

  • | _+_ | tagy tvoří text tučně .
  • | _+_ | značky (což znamená „důraz“) bude kurzívou text.

HTML také podporuje starší

tag pro tučné a

pro kurzívu. Je však lepší použít výše uvedené.

Ve zkratce,

a

ukažte, jak by mělo něčemu být rozuměno, zatímco poslední jmenované značky pouze říkají, jak by to mělo vypadat. Tyto dřívější značky jsou přístupnější pro čtečky obrazovky používané zrakově postiženými.

Odstavec a další oddíly

HTML

tag umožňuje definovat část dokumentu. Obvykle je toto spárováno s CSS (viz níže), aby se sekce naformátovala určitým způsobem.

The

tag umožňuje rozdělit text na odstavce. Prohlížeče automaticky umístí nějaké místo před a po nich, což vám umožní přirozeně rozbít text.

Do dokumentu můžete přidat záhlaví a usnadnit jeho sledování pomocí

přes

tagy. H1 je nejdůležitější záhlaví, zatímco H6 je nejméně důležité. Téměř každý článek MakeUseOf používá k organizaci informací záhlaví H2 a H3.

Bít Vstupte přidání řádků do dokumentu HTML je ve skutečnosti nezobrazí. Místo toho můžete použít

přidat konec řádku.

Zde je příklad, který používá všechny tyto:

Krok 4: Vkládání obrázků

Obrázky jsou důležitou součástí většiny webových stránek. Můžete je snadno přidat pomocí HTML a dokonce pro ně nastavit různé vlastnosti.

Vložíte obrázek pomocí

štítek. Zkombinovat to s

atribut umožňuje určit, odkud má být obrázek načten.

Další důležitý atribut

jak být skrytý na facebooku

tagy jsou

. Alternativní text vám umožňuje popsat obrázek pro čtečky obrazovky nebo v případě, že se obrázek nenačte správně. Na obrázek můžete přejet myší a zobrazit jeho alternativní text.

Použijte

a




prvky určující počet pixelů, ve kterých se obrázek zobrazí.

Když to všechno spojíte, značka obrázku vypadá takto:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



World Wide Web by nebyl příliš web bez odkazů na jiné stránky. Za použití

tag, můžete na jakýkoli text odkazovat na jiné stránky.

Uvnitř

src

tag,

atribut říká, kam se připojujete. Jednoduché vložení adresy URL bude fungovat dobře. Můžete použít

alt

prvek pro přidání kousku textu, který se zobrazí, když někdo umístí kurzor nad odkaz.

Základní odkaz vypadá takto:

width

The

height

tag má mnoho dalších možných prvků, ale nebudeme se do nich ponořit.

Jak se HTML propojuje s CSS a JavaScriptem

Podívali jsme se na základy HTML a na to, jak vytváří webovou stránku. Ale jak si dokážete představit, samotný HTML to pro moderní web neřeže. Jednoduché webové stránky HTML byly běžné v době „Web 1.0“, kdy většina webových stránek nebyla ničím jiným než statickým textem.

Ale teď toho máme mnohem víc. CSS (Cascading Style Sheets) je jazyk používaný k popisu toho, jak by měl vypadat text, který jste připravili v HTML. Pamatujte na

Dr. Phil

tag, o kterém jsme diskutovali? Uvnitř tohoto (a dalších tagů) můžete definovat a

atribut. Potom do doprovodného dokumentu CSS můžete napsat pokyny, jak na to

by se měl podívat.

Tyto prvky stylu můžete definovat vložené v kódu HTML, ale je to považováno za špatný postup, protože údržba je mnohem obtížnější. Další informace s tyto jednoduché příklady CSS . Také se podívejte jak optimalizovat soubory CSS .

JavaScript

Viděli jsme, že HTML definuje obsah a CSS určuje vzhled. JavaScript, konečný člen trojice životně důležitých pro web, umožňuje webovým stránkám reagovat na akce lidí, aniž by museli pokaždé načítat novou stránku.

JavaScript například umožňuje webové stránce, aby vás varovala, že zadané heslo nesplňuje její požadavky, než se je pokusíte odeslat. Webový designér může použít JavaScript k procházení obrázků v prezentaci nebo vyzvat uživatele k zadání.

Toto je jen několik základních příkladů. JavaScript je skriptovací jazyk, který toho zvládne opravdu hodně a je poměrně daleko komplikovanější než HTML a CSS. Vidět náš přehled JavaScriptu za mnohem víc.

Pohled na úplný rozsah webdesignu přesahuje rámec tohoto článku, ale stačí říci, že HTML interaguje s jinými jazyky a vytváří webové stránky, které dnes známe.

Evoluce HTML

Je důležité si uvědomit, že HTML není statické. HTML prošlo několika revizemi, přičemž nejnovější je HTML 5. Tento standard zejména podporuje vkládání nativního videa místo spoléhání se na proprietární formáty, jako je Adobe Flash.

Nové iterace HTML také prohlašují, že určité archaické tagy jsou čas od času zastaralé. Patří mezi ně hrozné značky jako

href

a

title

(ten svitek, respektive flash text) běžně k vidění v designu webových stránek z 90. let minulého století. Mějte tedy na paměti, že standardy se v průběhu času mění.

Malé znalosti HTML jdou dlouhou cestou

Provedli jsme krátkou prohlídku toho, jak dokument HTML funguje. Nyní znáte základy struktury webových stránek. I když nepokračujete ve vytváření webových stránek, budete si trochu více vědomi toho, jaký web používáte každý den.

jak stahovat chráněná videa z jakékoli webové stránky

Chcete -li se dozvědět více, upgradujte své dovednosti v oblasti webového vývoje pomocí základních nástrojů a poté se podívejte náš průvodce, jak navrhnout svůj první web .

Uznání: Belyaevskiy/ Depositphotos

Podíl Podíl tweet E-mailem 5 tipů, jak dobít své stroje VirtualBox Linux

Jste unaveni špatným výkonem, který nabízejí virtuální stroje? Zde je to, co byste měli udělat, abyste zvýšili výkon svého VirtualBoxu.

Číst dále Související témata
  • Programování
  • HTML
  • Vývoj webu
  • JavaScript
  • Nástroje pro webmastery
  • Programování
  • HTML5
O autorovi Ben Stegner(1735 publikovaných článků)

Ben je zástupcem redaktora a správcem onboardingu v MakeUseOf. V roce 2016 opustil práci v oblasti IT, aby mohl psát na plný úvazek, a nikdy se neohlédl. Více než sedm let pokrývá technické návody, doporučení pro videohry a další jako profesionální spisovatel.

Více od Bena Stegnera

Př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