Výukový program HTML (pre začiatočníkov)

Výukový program HTML pre začiatočníkovChceli by ste sa naučiť nejaké HTML?


Znie to ako skvelý nápad. Preto sme zostavili tento tutoriál HTML pre začiatočníkov.

V súčasnosti existuje na svete najmenej 1,7 miliardy webových stránok. Prakticky všetky tieto webové stránky používajú HTML rovnakým spôsobom.

P.S: Ak sa nechcete učiť HTML a ihneď začnete vytvárať svoje webové stránky bez toho, aby ste potrebovali kódovanie, prečítajte si tohto sprievodcu: Ako vytvoriť web zadarmo (bez učenia HTML).

Úvod do HTML


Čo je to HTML?

Čo je to HTMLHTML, skratka pre HyperText Markup Language, je počítačový jazyk na vytváranie webových stránok a webových aplikácií. Pozostáva prevažne zo série kódov obvykle napísaných v textovom súbore a uložených ako HTML, kód napísaný v jazyku HTML sa pri prehliadaní prehliadačom prekladá do krásneho, dobre naformátovaného textu alebo kombinácie textu a médií..

HTML bol prvýkrát vyvinutý britským fyzikom Tim Berners-Lee v roku 1990 a odvtedy prešiel toľkými vývojmi, že najnovšia verzia môže dosiahnuť oveľa viac, ako sa predpokladalo pri prvom objavení jazyka..

V tomto tutoriále si preberieme základy jazyka HTML a všetko, čo potrebujete vedieť, aby ste mohli začať s HTML ako začiatočníkom.

Verzie HTML

Po prvé, rýchly prehľad všetkých verzií HTML od vytvorenia HTML.

  • HTML 1.0: Bola to barebone verzia HTML a úplne prvé vydanie jazyka.
  • HTML 2.0: Táto verzia bola predstavená v roku 1995. Postupne sa vyvíjala a umožňovala ďalšie funkcie vrátane odovzdávania súborov na základe formulárov, tabuliek, obrazových máp na strane klienta a internacionalizácie..
  • HTML 3.2: V snahe zabezpečiť vývoj štandardov pre World Wide Web, konzorcium World Wide Web (W3C) založil Tim Berners-Lee v roku 1994. Do roku 1997 vydali HTML 3.2.
  • HTML 4.0: Neskôr v roku 1997 vydala W3C HTML 4.0 – verziu, ktorá prijala mnoho typov prvkov a atribútov špecifických pre prehliadač.
  • HTML 4.0 bol neskôr znovu vydaný s malými úpravami v roku 1998.
  • HTML 4.01: V decembri 1999 bol prepustený HTML 4.01.
  • XHTML: Špecifikácie boli zavedené v roku 2000 a bolo odporúčané používať ich ako spoločný štandard s HTML 4.01. Začlenil XML, aby zabezpečil správne napísanie kódu a zaistil interoperabilitu medzi programovacími jazykmi.
  • HTML5: W3C publikovala HTML5 ako odporúčanie v októbri 2014 a neskôr vydala HTML 5.1 v novembri 2016.

Výber editora HTML

Vyberte editor HTMLAk uvažujete o vytvorení webových stránok v HTML, potrebujete editor HTML. Použitie editora HTML má niekoľko výhod.

Dobrý editor HTML zabezpečí, aby bol váš kód čistý a usporiadaný. Zistí tiež, keď otvoríte novú značku a automaticky ju uzavrie, aby sa predišlo chybnému kódu a v dôsledku toho by sa znížilo množstvo písania, ktoré musíte urobiť. Väčšina editorov HTML vám dnes umožňuje zobraziť ukážku webovej stránky a zistiť, ako bude vyzerať vo webovom prehliadači pomocou ich funkcie WYSIWYG..

Existuje mnoho bezplatných a platených editorov HTML. Nižšie sú uvedené niektoré z najlepších možností:

Základné stavebné bloky HTML


Keď sa rozhodnete pre editor HTML, ktorý chcete použiť, ďalším krokom je pochopenie stavebných blokov HTML. Pri kódovaní v HTML je nevyhnutné porozumieť týmto stavebným blokom. Zahŕňajú značky, atribúty a prvky. Nižšie sa na ne pozrieme:

Úvod do značiek

Keď sa pustíte do HTML, musíte najprv porozumieť značkám. Značky v podstate oddeľujú normálny text od kódu HTML.

V dôsledku toho, pokiaľ ide o HTML, značky robia rozdiel medzi tým, či sa váš dokument zobrazuje ako obyčajný text alebo „transformovaný text“, čo je v podstate kód textu, ktorý vyzerá tak, že zobrazuje celý rad vecí (hypertextové odkazy, obrázky, médiá alebo iné metódy formátovania) na základe toho, čo sa dá na základe značiek zobraziť.

Pozrime sa na príklad „On je chlapec“:

  • V obyčajnom textovom formáte získate: Je to chlapec.
  • V hrubom textovom formáte získate: On je chlapec

Ak chcete dosiahnuť to, čo máme, tučným písmom, musíte použiť štítok.

vytváranie textu tučným písmom v html

V surovom HTML máme On je chlapec do ktorého potom prehliadač preloží: On je chlapec.

Kurzívou by mohol vyjsť aj „Je to chlapec“.

Toto sa dosiahne pomocou štítok.

vytvorenie textu kurzívou v html

Máme: On je chlapec ktorý potom vyjde ako On je chlapec.

Hyperlinked sa dosiahne pomocou štítok.

čím sa text stane hypertextovým odkazom v html

V surovom HTML máme: Je to chlapec, ktorý ukazuje, že je chlapec.

O značkách by ste mali porozumieť zopár vecí:

  • Značky sú prakticky stavebným blokom HTML – bez značiek nemôžete robiť HTML! Ak ste sa rozhodli pre ktorú značku použiť, nezabudnite navštíviť našu periodickú tabuľku HTML.
  • Takmer každá otvorená značka musí byť uzavretá. Majte na pamäti, že existujú výnimky. Príkladom značky, ktorá nemusí byť uzavretá, je prázdna značka, napríklad koniec riadku:
    .
  • Značky sú obsiahnuté za menej ako („<”) and greater than (“>”) Uhlová zátvorka. Zatváracie značky obsahujú koncové lomítko, ktoré sa nachádza pred názvom zatvorenej značky. Príklad otvorenej značky: . Príklad uzavretej značky .
  • Každý súbor HTML začína úvodnou značkou a končí uzatváracou značkou. Prvý riadok súboru HTML by mal deklarovať typ dokumentu, aby prehliadač vedel, akú príchuť HTML používate. Z tohto dôvodu vidíte stránky HTML začínajúce „“Pred začiatkom kódu HTML.

Pred pridaním obsahu väčšina HTML súborov v podstate vyzerá takto:

HTML--

Časť, ktorá nasleduje po Značka zvyčajne obsahuje informácie o dokumente, ako je jeho názov, metaznačky a kde nájsť jeho súbor CSS – obsah, ktorý nie je viditeľný priamo na stránke prehliadača. Oddiel medzi „ a“(Ktorú sme reprezentovali výrazom„ HLAVNÝ OBSAH “) je miesto, kde sa nachádza hlavný obsah súboru HTML, ktorý sa prehliadaču zobrazí v prehliadači. To zahŕňa všetko od prvého odseku po hypertextové odkazy, formátovanie na multimédiá a všetko ostatné.

Úvod do prvkov

úvod do prvkov

V HTML pozostáva „prvok“ z úvodnej a záverečnej značky, ako aj z obsahu medzi značkami.

V „On je chlapec“(Tučným písmom), máme to v HTML: On je chlapec. Text „On je chlapec“ je obklopený otvorenou a uzavretou značkou. Prvkom je všetko vrátane úvodnej značky, obsahu a značky close.

Keď sa značka otvorí, obsah sa zavedie a značka sa uzavrie, máme prvok.

Prvok môže byť v základnej alebo komplexnej forme. Prečo? Pretože čokoľvek medzi otvorenou značkou a uzatváracou značkou, ako aj tieto značky, je prvkom. To znamená, že v rámci jedného prvku môžeme mať prvky. V našom súčasnom príklade „je chlapec“ (On je chlapec) je prvok.

Všimnite si, že sme už povedali, že dokumenty HTML obsahujú pred začiatkom obsahu. Obsah môže obsahovať stovky rôznych prvkov, ale všetky tieto prvky sú súčasťou prvku „telo“ (pretože prvok tela je otvorený, obsahuje obsah a potom je zatvorený).

Úvod do atribútov

Zatiaľ čo dokumenty HTML v podstate používajú značky pre všetko, niekedy chceme v prvku poskytnúť ďalšie informácie. V tomto prípade používame atribút. Atribút sa používa na definovanie charakteristík prvku, používa sa v úvodnej značke prvku. Atribúty sa skladajú z mena a hodnoty.

Všimnite si, že hodnota atribútu je vložená do úvodzovky pomocou formátu Tvoj text.

príklad atribútu

príklad:

On je chlapec

V tomto príklade inštruujeme, že „On je chlapec“ je zarovnaný v strede dokumentu.

Začíname s HTML


Začíname s HTMLAk chcete dnes vytvoriť svoj vlastný základný dokument HTML, ako začať? Od vytvorenia názvov stránok po vytváranie formulárov vás popíšeme nižšie, ako začať s HTML.

Vytvorenie HTML Prvok

Pri vytváraní dokumentu HTML je jednou z prvých vecí, ktorú vytvoríte prvok. Obsahuje metaúdaje (alebo údaje o dokumente HTML). Patria sem informácie ako znaková sada, názov dokumentu, štýly dokumentu, skripty atď.

Niektoré z prvkov obsahovať názov, ktorý je vytvorený pomocou štítok.</p><p><strong>príklad</strong>:</p><pre><title>Toto je názov našej stránky

Tento názov sa zobrazí na karte prehľadávača. Je to tiež to, čo sa indexuje ako názov stránky, keď roboti vyhľadávacieho nástroja prehľadajú váš web.

Patria sem aj prvok, ktorý sa často používa na špecifikovanie vyhľadávacích nástrojov informácií, ktoré môžu použiť na opis obsahu v ich zoznamoch. To zahŕňa popis, kľúčové slová, informácie o autorovi atď element tiež špecifikuje znakovú sadu, ktorú dokument HTML používa.

Vytváranie nadpisov v HTML

vytváranie nadpisov v html

Nadpisy hrajú hlavnú úlohu pri úspechu webovej stránky. Po prvé, uľahčia čitateľom prehľadanie obsahu vašich stránok. Po druhé a možno ešte dôležitejšie je to, že sprostredkujú štruktúru vašich webových stránok vyhľadávacím nástrojom, a preto často ovplyvňujú hodnotenie vášho obsahu vo výsledkoch vyhľadávacieho nástroja..

To znamená, že je dôležité vyhnúť sa používaniu značiek nadpisov, aby bol váš text veľký alebo tučný. Existujú aj ďalšie značky, ktoré sa na to dajú použiť (ku ktorým sa dostaneme neskôr v tejto časti). Namiesto toho by sa značky nadpisov mali používať výhradne pre štruktúru.

V HTML je šesť značiek nadpisov:

na
, s

značka označujúca najdôležitejší nadpis a
značka označujúca najmenej dôležitú hlavičku.

Ak chcete vytvoriť nadpisy, jednoducho sa rozhodnite, ktorú hlavičku vytvárate, otvorte nadpis pomocou bežnej značky nadpisov a po dokončení nezabudnite značky zavrieť..

Príklad nadpisov HTML:

  • Toto je vaša prvá položka HTML

    (najväčší)

  • Toto je vaša druhá položka HTML

  • Toto je vaša tretia položka HTML

  • Toto je vaša štvrtá položka HTML

  • Toto je vaša piata záhlavie HTML
  • Toto je Vaša Šiesty nadpis HTML

Vytváranie odsekov

vytváranie odsekov v HTML

Ďalším krokom je začatie vytvárania odsekov. Odseky je možné vytvárať pomocou

štítok.

príklad:

Toto je váš prvý odsek.

Toto je váš druhý odsek a vytvoríte omnoho viac odsekov.

Majte na pamäti, že písanie v HTML sa veľmi líši od písania v čistom texte. Ak teda rozložíte text vo vnútri HTML bez toho, aby ste začínali s novým odsekom, nezáleží na tom, kedy sa text zobrazí v prehliadači. Namiesto toho chcete použiť zalomenie riadku, ktoré predstavuje
štítok.

príklad:

Toto je nový odsek. A chcem použiť niekoľko nových riadkov. Takže to rozbíjam.

Toto nevyjde takto:

Toto je nový odsek.
A chcem použiť niekoľko nových riadkov.
Takže to rozbíjam.

Namiesto toho to vyjde takto:

Toto je nový odsek. A chcem použiť niekoľko nových riadkov. Takže to rozbíjam.

Ako rozdelíte texty na nové riadky, aby sa zobrazovali takto:

Toto je nový odsek.
A chcem použiť niekoľko nových riadkov.
Takže to rozbíjam.

Pomocou zalomenia riadkov.

príklad:

Toto je nový odsek.
A chcem použiť niekoľko nových riadkov.
Takže to rozbíjam.

Je však dôležité poznamenať, že zalomenie riadku (
) je prázdna značka, takže ju nemusíte zatvárať.

Formátovanie textu v HTML

formátovanie textu v HTML

Ďalším krokom je formátovanie textu v HTML. Na tomto mieste môžete určiť, či chcete, aby váš text vychádzal tučným písmom, kurzívou, podčiarknutým písmom, upisovaným, prepisovaným atď. Toto je základný sprievodca, takže táto časť nebude pre formátovanie všestranná. Namiesto toho zahrneme iba niektoré značky základného formátovania. Postup použitia iných foriem formátovania je jednoduchý – nájdite požadovanú značku a pokračujte:

Použitie tučným písmom: On je chlapec vyjde ako On je chlapec

Používanie kurzívy: On je chlapec vyjde ako On je chlapec

Podčiarknutie textu: On je chlapec vyjde ako On je chlapec. Stojí za zmienku, že značka bola zastaraná v HTML 4.01 a bola predefinovaná tak, aby predstavovala štylisticky odlišný text v HTML5. Preto sa na označenie textu, ktorý by sa mal zdôrazniť, odporúča použiť CSS. Keďže tento článok je základným sprievodcom, udržiavame ho jednoduchý.

Pomocou dolného indexu: On je chlapec vyjde ako On je chlapec

Použitie horného indexu: On je chlapec vyjde ako On je chlapec

Pokiaľ ide o ďalšie značky, ktoré sa dajú použiť na formátovanie, možno budete chcieť pozrieť glosár na konci tohto zdroja, do ktorého sme zahrnuli veľa relevantných značiek HTML..

Zoradené a neusporiadané zoznamy

Skôr alebo neskôr budete musieť vytvoriť zoznamy. Zoznamy môžu byť usporiadané (t. J. Očíslované) alebo neusporiadané (t. J. Nečíslované)..

Tu je príklad usporiadaného zoznamu:

  1. Bod 1
  2. Bod 2
  3. Bod 3

Postup vytvorenia:

  1. Bod 1
  2. Bod 2
  3. Bod 3

Tu je príklad neusporiadaného zoznamu:

  • Bod 1
  • Bod 2
  • Bod 3

Postup vytvorenia:

  • Bod 1
  • Bod 2
  • Bod 3

Ak to ešte nie je zrejmé. Tu je rozpis:

  • Značka sa používa na označenie každej položky v zozname. Pri zostavovaní zoznamu môžete použiť
      značka na označenie usporiadaného zoznamu („o“ = usporiadané a „l“ = zoznam) alebo