Ako sa naučiť HTML (s ilustráciami)

HTML je zníženie z angličtiny Hyper Text Markup Language (Hypertextový značkovací jazyk). Tento kód alebo jazyk, na ktorom je vytvorená základná značka lokalít. Ak ste nikdy predtým naprogramovali, učenie sa môže zdať ťažké, ale v skutočnosti všetko, čo potrebujete začať učiť, je najjednoduchší textový editor a internetový prehliadač. Môžete dokonca naučiť niektoré príklady HTML Markups, ktoré sa dostali na online fóra, prispôsobené vlastné stránky alebo v článkoch . HTML - Užitočný nástroj pre každého používateľa internetu a štúdium jeho základov bude trvať menej času, než si myslíte.

Kroky

Časť 1 z 2:

Študovanie základov HTML

jeden. Otvorte dokument HTML. Väčšina textových editorov (notebook alebo poznámkový blok ++ pre Windows, TEXTEDIT PRE MAC, GEDIT PRE GNU / LINUX) je možné použiť na vytvorenie HTML súborov. Vytvorte nový dokument a uložte ho pomocou File → Uložte obidva vo formáte webovej stránky alebo zmeňte rozšírenie súboru .Html alebo .Htm namiesto .Doc, .RTF alebo iné rozšírenie.

Upozornenie sa môže zdať, že súbor sa uloží ako "jednoduchý text" namiesto formátu RTF alebo že formátovanie a obraz sa neuloží. Toto je normálne - pre HTML tieto možnosti nie sú potrebné.

2. Otvorte vytvorený súbor v prehliadači. Uložte prázdny súbor, nájdite ho na počítači a otvorte dvojité tlačidlo myši. Prázdna stránka by sa mala otvoriť v prehliadači. Ak sa to stane, presuňte súbor do panela s adresou prehliadača. V procese úpravy súboru HTML môžete aktualizovať túto stránku a zobraziť zmeny.

Všimnite si, že týmto spôsobom nevytvárate webovú stránku na internete. Ostatní ľudia nemajú prístup k tejto stránke a nepotrebujete internetové pripojenie na testovanie vašej lokálnej stránky. Prehliadač jednoducho interpretuje HTML kód, "Čítanie", akoby to bola webová stránka.

3. Pochopiť, aké značky označovania sú. Na rozdiel od bežného textu sa na stránke nezobrazia značky. Namiesto toho označujú prehliadač, ako zobraziť stránku a jeho obsah. "Otvorenie" Tag obsahuje pokyny. Napríklad môže informovať prehliadač, že text by sa mal zobraziť ako odvážny. Potrebujete tiež "zatváranie" značku zobrazujúci prehliadač, kde končí inštrukcia. V tomto príklade sa text medzi otváracími a zatváracími značkami zobrazí tučným písmom. Značky sú zaznamenané vo vnútri príznakov nerovnosti, ale zatváracia značka začína šikmým.

Otváracia značka sa zaznamenáva medzi príznakmi nerovnosti: <otvor>

V záverečnej značke pred deskriptorom (titul), označuje štítok: záverečná značka>

Čítajte ďalej, aby ste sa dozvedeli o používaní rôznych značiek. Pre tento krok je to dosť na zapamätanie si formátu nahrávania. Značky sa zaznamenávajú medzi príznakmi nerovnosti: < > a

V niektorých tutoriáloch, HTML tagy volajú prvky a text medzi otváracími a zatváracími značkami sa nazýva obsah prvku.

4. Dial do značky editora . Každý súbor HTML musí začínať štítkom A skončiť so štítkom . Tieto tagy označujú prehliadač, že všetky obsahu medzi štítkami sú napísané v HTML. Pridajte tieto značky do dokumentu:

HTML súbory začínajú z reťazca , Čo znamená, že prehliadače musia rozpoznať celý súbor Ashtml. Tento riadok však nemôže pomôcť vyriešiť problémy s kompatibilitou.

Vytočiť V hornej časti dokumentu.

Stlačte tlačidlo ENTER alebo niekoľkokrát sa vrátite na vytvorenie viacerých prázdnych reťazcov, potom zadajte

zapamätaj si to všetko Kód, ktorý vytvoríte podľa tohto článku, bude musieť písať medzi týmito dvoma tagmi.

päť. Vytvorte časť v súbore . Medzi tagmi a Vytvorte otváraciu značku a zatváranie značky . Pridajte medzi nimi niekoľko prázdnych riadkov. Obsah zaznamenaný medzi tagmi a , nezobrazuje na stránke sám. Postupujte podľa týchto krokov a uvidíte, čo je táto značka potrebná:

Medzi tagmi a Napísať a

Medzi tagmi a Napísať Ako sa naučiť HTML - .

Uložte zmeny a otvorte súbor v prehliadači (alebo aktualizovať stránku, ak je súbor už otvorený). Pozrite si text, ktorý sa zobrazí v názve stránky nad adresou reťazec?

6. Vytvorte sekciu . Všetky ostatné značky a text v tomto príklade sa zaznamenávajú v časti Telesná časť, ktorej obsah sa zobrazí na stránke. Po Zatvorená značka, ale predtým Tag tag a . Ku koncu tohto článku pracujte s časťou tela. Váš súbor by mal vyzerať takto:



Ako sa naučiť HTML -

7. Pridajte text pomocou rôznych štýlov. Je čas pridať súčasnú stránku obsahu! Všetko, čo píšete medzi značkami tela, sa zobrazia na stránke po aktualizácii v prehliadači. Nepoužívať Symboly < alebo >, Keďže prehliadač sa pokúsi interpretovať obsah ako tag namiesto textu. Napísať Ahoj! (Alebo čo chcete), skúste pridať tieto značky na text a vidieť, čo sa stane:

Ahoj! Zvýraznite text "Kurzíva": Ahoj!

Ahoj! Zvýraznite text "odvážny": Ahoj!

Ahoj! Stránky Text: ~~Ahoj!~~

Zobrazí písmo ako najvyšší index:

_Ahoj! Zobrazí písmo vo forme nižšieho indexu: _Ahoj!

Vyskúšajte rôzne značky. Čo bude vyzerať Ahoj!?

osem. Rozdeľte text o odsekoch. Ak sa pokúsite napísať niekoľko riadkov textu v súbore HTML, všimnite si, že v prehliadači sa nezobrazujú prestávky riadkov. Ak chcete rozdeliť text o odsekoch, musíte pridať značky:

Toto je samostatný odsek.

Potom by mala byť táto veta 
 Pred začatím tejto čiary.

Toto je prvá značka, ktorá nevyžaduje záverečnú značku. Takéto tagy sa nazývajú "prázdne".

Vytvorte titulky, aby zobrazili názvy oddielov:
Textová hlavička: Najväčšia hlavička
Textová hlavička (hlavička druhej úrovne)
Textová hlavička (hlavička tretej úrovne)
Textová hlavička (štvrtá hlavička)
Textová hlavička (najmenšia hlavička)

deväť. Naučte sa vytvárať zoznamy. Existuje niekoľko spôsobov, ako vytvoriť zoznamy na webovej stránke. Vyskúšajte nasledujúce možnosti a rozhodnite sa, ktoré vám najviac páči. Všimnite si, že jeden pár značiek je potrebný pre zoznam ako celok (napríklad

a Pre označený zoznam) a každý zoznam zoznam je zvýraznený iným párom tagov, napríklad

Označený zoznam:

Prvá línia
Druhý reťazec
Atď

Číslovaný zoznam:

Jeden

Dva

Tri

Zoznam definícií:

Káva
- teplý nápoj
Limonáda
- Studený nápoj

10. Urobte si stránku Riadky rašie, vodorovné čiary a Obraz. Je čas pridať niečo okrem textu na stránku. Vyskúšajte nasledujúce značky alebo postupujte podľa odkazov, aby ste získali viac informácií. Použite online hosting vytvoriť odkaz na obrázok, ktorý chcete uverejniť:

Horizontálna čiara:

Vložte obrázok:

jedenásť. Pridajte odkazy. Tieto tagy môžete použiť na vytvorenie hypertextových odkazov na iné stránky a stránky, ale keďže ešte nemáte webovú stránku, teraz sa dozviete, ako vytvoriť odkazy "Anchor", to znamená, odkazy na konkrétne miesta na stránke:

Vytvorte kotviacu značku Na mieste stránky chcete odkazovať na stránku. Prísť s zrozumiteľným a nezabudnuteľným menom:

Text, ktorý odkazujete.

Použiť značku , Vytvoriť relatívny odkaz alebo odkaz na externý zdroj:

Text alebo obrázok, ktorý bude slúžiť ako odkaz.

Ak chcete odkazovať na relatívny odkaz inej stránky, pridajte znak # po hlavnom spojení a názov kotvy. Napríklad, https: // slo.panoutx.info / learn-html # tipy odkazuje na časť tipov tejto stránky.

Časť 2 z 2:

Pokročilá úroveň HTML

jeden. Zoznámte sa s atribútmi. Atribúty sa zaznamenávajú vo vnútri značky, čo označuje ďalšie informácie. Formát atribútu taký: Názov ="význam", kde titul určuje atribút (napríklad, Farba Pre atribút farieb) a hodnota označuje svoju hodnotu (napríklad, červený pre červenú).

Atribúty boli skutočne použité v predchádzajúcej časti základov HTML. Tag Používa atribút Src, Kotvy relatívnych odkazov používajú atribút Názov, A prepojenia používajú atribút href. Ako ste si už všimli, všetky atribúty sú napísané vo formáte ___ ="___".

2. Experiment s HTML tabuľky. Vytvorenie tabuľky zahŕňa použitie rôznych značiek. Môžete experimentovať, alebo Prečítajte si podrobnejšie pokyny.

Vytvorenie tagov tabuľky:

Obsah každého riadka tabuľky vstupuje do tagov:

Hlavička stĺpca je určená značkou:

Bunky v nasledujúcich riadkoch:

Príklad použitia týchto značiek:

Stĺpec 1: mesiac Stĺpec 2: Úspory
Január 5000 rubľov

Stĺpec 1: mesiac	Stĺpec 2: Úspory
Január	5000 rubľov

3. Naučte sa ďalšiu časť sekcie hlavy. Už ste sa naučili tag , Chystáte sa na začiatku každého htmlového súboru. Okrem tagu , Tam sú iné značky pre túto časť:

Meta tagy, v ktorom sú obsiahnuté Metadáta, Používané vyhľadávače pre indexáciu lokality. Aby ste zjednodušili vaše stránky vo vyhľadávačoch, použite jedno alebo viac objavovacích značiek (Zatvorené značky sa nevyžadujú). Použite jeden atribút a hodnotu na štítku: - alebo

Značky , Vedenie súborov tretích strán, napríklad na štýlových listoch (CSS), ktoré sú vytvorené pomocou iného typu kódovania a umožňujú zmeniť stránku HTML pomocou farby, zarovnania textu a mnoho ďalších funkcií.

Značky

4. Experiment s HTML kódom iných stránok. Vynikajúci spôsob, ako preskúmať HTML, bude zobraziť zdrojový kód iných webových stránok. Kliknite pravým tlačidlom myši na stránku a zvoľte "Zobraziť zdrojový kód" alebo niečo podobné v hornom menu prehliadača. Snažte sa zistiť, čo robí neznámy značku, alebo hľadať informácie o ňom na internete.

Aj keď nemôžete upravovať stránky iných ľudí, môžete skopírovať zdrojový kód do vášho súboru, aby ste experimentovali so značkami neskôr. Upozorňujeme, že značka CSS nemusí byť k dispozícii a farba a formátovanie sa môže zobraziť inak.

päť. Štúdia Podrobnejšie príručky. Na internete existuje mnoho stránok venovaných HTML tagov, napríklad W3schols alebo Htmlbook. Tam sú papierové knihy na predaj, ale snažte sa nájsť aktuálnu publikáciu, pretože sa menia štandardy a rozvíjajú sa. Je ešte lepšie zvládnuť CSS kontrolovať značku a vzhľad stránky. Po štúdiu CSS WebDescriptions sa zvyčajne učia jаvascript.

Tipy

Poznámkový blok ++ - veľký bezplatný program podobný pravidelnému notebooku, ale môžete uložiť a otestovať kód v prehliadači online. (Podporuje tiež takmer akýkoľvek jazyk - HTML, CSS, Python, jаvascript a tak ďalej).
Nájdite nejakú jednoduchú stránku v sieti, uložte kód do počítača a experimentujte s ním. Skúste pohybovať text, zmeňte písmo, vymeňte obrázky - čokoľvek!
Môžete spustiť notebook, kde nahrávate značky, aby ste ich mali vždy na ruke. Môžete tiež vytlačiť túto stránku a chuť s ním.
Keď píšete kód, urobte to opatrne, aby ste to a iní ľudia mohli pochopiť. Pomocou komentárov v HTML: Nebudú sa odrážať na stránke, ale budú viditeľné v dokumente dokumente.
XML I RSS čoraz viac populárne. Kód stránky obsahujúce XML a RSS technológie, neskúsené užívateľovi, ktorý je ťažšie čítať a pochopiť, ale tieto nástroje sú veľmi užitočné.
Značkovacie značky HTML nezávisia od registra, ale odporúča sa používať len malé písmená (ako v príkladoch v tomto článku) - tak pre normalizačné účely a pre kompatibilitu s XHTML.

Upozornenia

Niektoré značky za posledných niekoľko rokov vychádzali z každodenného života a boli nahradené novým, pričom dávali rovnaké alebo niektoré ďalšie účinky.
Ak chcete skontrolovať svoju stránku, prejdite na webovú stránku W3 a zistite moderné HTML požiadavky. HTML štandardy sa menia v priebehu času a nahradiť niektoré tagy prichádzajú nové, ktoré fungujú lepšie v moderných prehliadačoch.

Čo potrebuješ

Textový editor, ako napríklad Poznámkový blok (Windows) alebo Texedit (Mac)
Papier / Poznámkový blok (nie je potrebné)
Editor HTML, ako napríklad Poznámkový blok ++ (Windows) alebo TEXTWROGROGLER (MAC) (nie je potrebné)