5 krokov k pochopeniu základného kódu HTML

5 krokov k pochopeniu základného kódu HTML

HTML je životne dôležitou súčasťou webu, ako ho poznáme. A hoci niekoľko webových dizajnérov vytvára stránky manuálnym zadávaním kódu HTML, je stále užitočné vedieť o tom trochu.





Pozrime sa na niektoré základy jazyka, vrátane toho, čo HTML skutočne je, na niektoré základné pojmy a na to, ako interaguje s inými jazykmi. Predstavte si to ako nárazový kurz „HTML pre figuríny“.



Základy HTML: Čo je HTML?

HTML je skratka pre Hypertextový značkovací jazyk . A aj keď je to niekedy spojené s programovacími jazykmi, nie je to presné.





Ako značkovací jazyk , HTML umožňuje iba vytvoriť rozloženie stránok. Pravda programovací jazyk , podobne ako Java alebo C ++, obsahuje logiku a vykonávané príkazy.

Aj keď je to jednoduché, HTML je chrbticou každej stránky na webe. Je zodpovedný za to, ktorý text sa zobrazí ako tučný, za pridávanie obrázkov a odkazovanie na iné stránky. Máme HTML FAQ, ktoré vysvetľuje viac.



Môžete kliknúť pravým tlačidlom myši na väčšinu webových stránok v prehliadači a vybrať si Zobraziť zdroj stránky alebo podobne, aby ste za nimi videli HTML. Pravdepodobne bude obsahovať aj veľa kódu, ktorý nie je HTML, ale môžete si ho preštudovať.

Aj keď máte nulové skúsenosti so značkovacími alebo programovacími jazykmi, trocha znalosti HTML z vás urobí informovanejšieho používateľa webu. Prejdeme si päť základných krokov, ktoré vám pomôžu porozumieť tomu, ako HTML funguje. Cestou uvedieme príklady.



Krok 1: Pochopenie konceptu značiek

HTML používa systém tagy kategorizovať rôzne prvky dokumentu.

Väčšina značiek sa dodáva v pároch, aby sa do nich zabalil príslušný text. Tu je jednoduchý príklad (



tag vytvára text odvážny ; budeme o tom viac diskutovať o chvíľu.)

This is some bold text .

Všimnite si, ako sa koncová značka začína lomkou (/). To znamená zatváraciu značku, ktorá je dôležitá. Ak značku nezatvoríte, tento atribút bude mať všetko od začiatku.

ako pripojiť airpods k notebooku Windows 10

Nie všetky značky však majú pár. Niektoré prvky HTML, tzv prázdne prvky , nemajú žiadny obsah a existujú samostatne. Príkladom je


tag, čo je zlom riadka. Také značky môžete „zavrieť“ pridaním lomítka (ako napr


), ale nie je to úplne nevyhnutné.

Krok 2: Rozloženie HTML skeletu

Správny dokument HTML musí mať definované určité značky, aby bol usporiadaný správne. Toto sú základné časti:

  • Každý dokument HTML musí začínať | _+_ | vyhlásiť sa za takého. Preto je jeho záverečná značka | _+_ | , je posledná položka v súbore HTML.
  • Ďalej | _+_ | časť obsahuje informácie, ako je názov stránky, rôzne skripty, ktoré sa na stránke spúšťajú a podobne. Ako naznačuje názov, spravidla to nasleduje hneď za začiatočným | _+_ | tag. Koncový používateľ nevidí veľa obsahu v týchto značkách.
  • Nakoniec | _+_ | tag obsahuje text stránky, ktorú čitateľ vidí (a oveľa viac). Tu nájdete obrázky, odkazy a ďalšie.

Od

časť tvorí väčšinu dokumentu HTML, zvyšok nášho návodu sa zameriava na prvky, ktoré sa ho týkajú.

Krok 3: Základné značky HTML pre formátovanie

Ďalej sa pozrime na niektoré bežné značky, ktoré tvoria dokumenty HTML. Samozrejme, nie je možné pokryť každý prvok, preto sa pozrieme na niektoré z najdôležitejších. Pokryli sme mnoho ďalších príkladov HTML ak ťa tieto neuspokojujú.

Ak sa vám tieto značky zdajú celkom základné, nezabudnite, že HTML bolo vytvorené už v roku 1993. Web bol v počiatočných fázach veľmi často založený na texte.

Jednoduché formátovanie textu

HTML podporuje základné štýly textu, aké nájdete v programe Microsoft Word:

  • | _+_ | tagy tvoria text odvážny .
  • | _+_ | značky (čo znamená „dôraz“) bude kurzívou text.

HTML podporuje aj staršie

značka pre tučné a

pre kurzívu. Je však lepšie použiť tie, ktoré sú uvedené vyššie.

V skratke,

a

ukážte, ako by sa malo niečomu rozumieť, zatiaľ čo posledné menované štítky iba naznačujú, ako by malo vyzerať. Tieto bývalé značky sú prístupnejšie pre čítačky obrazovky používané zrakovo postihnutými.

Odsek a ďalšie divízie

HTML

tag vám umožňuje definovať časť dokumentu. Obvykle je to spárované s CSS (pozri nižšie) na formátovanie sekcie určitým spôsobom.

The

tag umožňuje rozdeliť text na odseky. Prehliadače automaticky umiestnia priestor pred nimi a po nich, čo vám umožní prirodzene rozbiť text.

Do dokumentu môžete pridať hlavičky a uľahčiť vám tak používanie dokumentu

cez

tagy. H1 je najdôležitejšia hlavička, zatiaľ čo H6 je najmenej dôležitá. Takmer každý článok MakeUseOf používa na organizáciu informácií hlavičky H2 a H3.

Biť Zadajte Ak chcete do dokumentu HTML pridať konce riadkov, v skutočnosti sa nezobrazia. Namiesto toho môžete použiť

pridať zalomenie riadka.

Tu je príklad, ktorý používa všetky tieto položky:

Krok 4: Vkladanie obrázkov

Obrázky sú dôležitou súčasťou väčšiny webových stránok. Môžete ich ľahko pridať pomocou HTML a dokonca im nastaviť rôzne vlastnosti.

Obrázok vložíte pomocou

tag. Kombinácia tohto s

Atribút vám umožňuje určiť, odkiaľ sa má obrázok načítať.

Ďalším dôležitým atribútom

oprava rozmazaných aplikácií nezmizne

tagy sú

. Alternatívny text vám umožňuje popísať obrázok pre čítačky obrazovky alebo v prípade, že sa obrázok nenačíta správne. Na obrázok môžete presunúť kurzor myši a zobraziť jeho alternatívny text.

Použi

a




prvkov na určenie počtu pixelov, v ktorých sa obrázok zobrazí.

Keď to spojíte a obrázková značka vyzerá takto:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



World Wide Web by nebol veľký web bez odkazov na iné stránky. Pomocou

tag, môžete na ľubovoľný text odkazovať na iné stránky.

Vnútri

src

značka,

atribút hovorí, kam sa pripájate. Jednoduché prilepenie adresy URL bude fungovať dobre. Môžete použiť

alt

prvok na pridanie časti textu, ktorý sa zobrazí, keď niekto prejde myšou na odkaz.

Základný odkaz vyzerá takto:

width

The

height

tag má mnoho ďalších možných prvkov, ale nebudeme sa tu do nich potápať.

Ako sa HTML spája s CSS a JavaScript

Pozreli sme sa na základy HTML a na to, ako vytvára webovú stránku. Ale ako si dokážete predstaviť, samotný HTML to pre moderný web neobmedzuje. Jednoduché webové stránky HTML boli bežné v dobe „Web 1.0“, keď väčšina webových stránok neobsahovala nič iné ako statický text.

Teraz ich však máme oveľa viac. CSS (Cascading Style Sheets) je jazyk používaný na opis toho, ako by mal vyzerať text, ktorý ste pripravili v HTML. Pamätajte si

Dr. Phil

tag, o ktorom sme diskutovali? V tejto (a ďalších značkách) môžete definovať a

atribút. Potom do sprievodného dokumentu CSS môžete napísať návod, ako na to

treba pozrieť.

Tieto prvky štýlu môžete definovať vložene v kóde HTML, ale považuje sa to za zlú prax, pretože údržba je oveľa náročnejšia. Získajte viac informácií s tieto jednoduché príklady CSS . Tiež sa pozrite ako optimalizovať súbory CSS .

JavaScript

Videli sme, že HTML definuje obsah a CSS určuje vzhľad. JavaScript, konečný člen trojice dôležitých pre web, umožňuje webovým stránkam reagovať na akcie ľudí bez toho, aby museli zakaždým načítať novú stránku.

JavaScript napríklad umožňuje webovej stránke upozorniť vás na to, že zadané heslo nespĺňa jeho požiadavky, než sa ho pokúsite odoslať. Webový dizajnér môže používať JavaScript na prechádzanie obrázkov v prezentácii alebo vyzývať používateľa na zadanie.

Toto je len niekoľko základných príkladov. JavaScript je skriptovací jazyk, ktorý dokáže veľa, a je oveľa komplikovanejší ako HTML a CSS. Viď náš prehľad JavaScriptu za oveľa viac.

Pohľad na úplný rozsah webového dizajnu je nad rámec tohto článku, ale stačí povedať, že HTML interaguje s inými jazykmi pri vytváraní webových stránok, ktoré dnes poznáme.

Evolúcia HTML

Je dôležité si uvedomiť, že HTML nie je statické. HTML prešlo niekoľkými revíziami, pričom poslednou je HTML 5. Tento štandard predovšetkým podporuje vkladanie natívneho videa namiesto toho, aby sa spoliehal na proprietárne formáty, ako je Adobe Flash.

Nové iterácie HTML tiež z času na čas vyhlasujú, že niektoré archaické značky sú zastarané. Patria sem hrozné značky ako

href

a

title

(ten zvitkový a bleskový text) sa bežne vyskytuje v dizajne webových stránok v deväťdesiatych rokoch minulého storočia. Majte teda na pamäti, že štandardy sa časom menia.

Malé znalosti HTML idú dlhou cestou

Urobili sme si krátku prehliadku toho, ako dokument HTML funguje. Teraz poznáte základy štruktúry webových stránok. Aj keď nepokračujete vo vytváraní webových stránok, budete si viac uvedomovať web, ktorý používate každý deň.

sledujte filmy zadarmo bez sťahovania alebo registrácie

Ak sa chcete dozvedieť viac, aktualizujte svoje schopnosti v oblasti webového vývoja pomocou základných nástrojov a potom sa pokúste o registráciu náš návod, ako navrhnúť svoju prvú webovú stránku .

Obrazový kredit: Belyaevskiy/ Depositphotos

zdieľam zdieľam Tweet E -mail 5 tipov, ako nabiť svoje počítače VirtualBox Linux

Ste unavení z nízkeho výkonu, ktorý ponúkajú virtuálne počítače? Tu je to, čo by ste mali urobiť, aby ste zvýšili výkon svojho VirtualBoxu.

Čítajte ďalej Súvisiace témy
  • Programovanie
  • HTML
  • Vývoj webových aplikácií
  • JavaScript
  • Nástroje správcu webu
  • Programovanie
  • HTML5
O autorovi Ben Stegner(1735 publikovaných článkov)

Ben je zástupcom redaktora a manažéra nástupu na MakeUseOf. V roku 2016 opustil svoju prácu v oblasti IT, aby sa mohol naplno venovať písaniu, a nikdy sa neobzrel späť. Viac ako sedem rokov pokrýva technické návody, odporúčania pre videohry a ďalšie informácie ako profesionálny spisovateľ.

Viac od Bena Stegnera

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber