Obsah

• Kroky
• 1. časť: Ako som objavil HTML
• Rada
• Výstraha
• Čo potrebuješ

HTML (HyperText Markup Language) je základný jazyk pre tvorbu webových stránok. Bol vytvorený ako ľahký a flexibilný kódovací jazyk. Takmer každá webová stránka na internete je vyvinutá s určitou formou tohto kódu (ColdFusion, XML, XSLT). HTML je ľahké pochopiť, ale môžete sa o ňom dozvedieť ešte dlho, ak vás zaujíma jeho komplexná funkčnosť. Ak chcete svojmu webu dodať farebnosť a zábavu, môžete sa naučiť základné CSS, akonáhle si zvyknete na základnú stránku HTML.

Kroky

Časť 1 zo 4: Vytvorenie dokumentu

1. 

   Otvorte jednoduchý textový editor. NotePad je dobrá voľba a dá sa stiahnuť zadarmo. HTML môžete písať pomocou väčšiny textových editorov, ale zložitejší softvér s možnosťou automatického formátovania môže sťažiť organizáciu stránky HTML.
   • Nepoužívajte TextEdit, pretože obvykle ukladá súbor vo formáte, ktorý váš prehliadač nemusí rozpoznať ako HTML.
   • Môžete tiež použiť online editor HTML. Pre začiatočníkov sa neodporúčajú špeciálne editačné programy HTML.

2. 

   
   
   Uložte súbor ako webovú stránku. V ponuke v hornej časti vyberte položku Súbor → Uložiť ako. Zmeňte formát súboru na „Webová stránka“, „.html“ alebo „.htm“. Uložte súbor tak, aby ste ho ľahko našli.
   • Medzi týmito tromi možnosťami nie je rozdiel.

3. 

   Otvorte súbor v prehliadači. Dvakrát kliknite na súbor a automaticky sa otvorí ako prázdna webová stránka vo vašom prehliadači. Prípadne môžete otvoriť prehľadávač, napríklad Firefox alebo Internet Explorer, a potom pomocou ponuky Súbor → Otvoriť súbor vyberte dokument.
   • Táto webová stránka nie je online. Je viditeľný iba na vašom počítači.

4. 

   
   
   Obnovte webovú stránku a pozrite si vykonané zmeny. Do prázdneho dokumentu zadajte nasledujúce: Ahoj. Uložte dokument. Obnovte prázdnu webovú stránku v prehliadači a v hornej časti stránky by sa malo zobraziť slovo „Hello“ zobrazené tučným písmom. Kedykoľvek budete chcieť v rámci tohto tutoriálu vyskúšať svoje nové HTML, uložte dokument .htm a potom obnovte okno prehliadača, aby ste zistili, ako sa kompiluje HTML.
   • Ak vidíte slová „„a“'' Objaví sa vo vašom prehliadači, súbor nebol zostavený správne v HTML. Vyskúšajte iný textový editor alebo iný prehliadač.

5. 

   
   
   Naučte sa značky. Príkazy HTML sú napísané v „značkách“, ktoré prehľadávaču hovoria, ako zostaviť a zobraziť vašu webovú stránku. Vždy sú napísané v jednoduchých úvodzovkách , a nezobrazia sa na webovej stránke, ako ste ich použili v príklade vyššie:
   • je „štartovacia karta“ alebo „otváracia karta“. Všetko, čo bude napísané po tejto značke, bude definované ako „tučné“ (tučné na webovej stránke).
   • je „koncová značka“ alebo „záverečná značka“, ktorú môžete rozlíšiť podľa symbolu / znamenia. Označuje koniec tučného textu. Väčšina (nie všetkých) značiek potrebuje na svoje fungovanie koncovú značku, takže ju určite zahrňte.

6. 

   Vytvorte si dokument. Odstráňte všetko z dokumentu HTML. Začnite odznova nasledujúcim textom, presne tak, ako bol napísaný (mínus odrážky). Tento kód HTML informuje prehliadač, aký typ kódu HTML používate, a že všetky vaše kódy HTML budú umiestnené vo vnútri značiek. a .

7. 

   Pridajte značky hlavy (head) a body (body). Dokumenty HTML sú rozdelené do dvoch častí. V hornej časti sa nachádzajú špeciálne informácie, napríklad nadpis stránky. Sekcia „telo“ obsahuje hlavný obsah stránky. Pridajte do dokumentu obe tieto sekcie a nezabudnite zahrnúť koncové značky. Novo pridaný text je tučný:

8. 

   Dajte svojej stránke názov. Väčšina kariet v hlavnej časti nie je dôležitá pre začiatočníkov. Názov sa dá ľahko používať a bude určovať, čo sa bude zobrazovať ako názov okna prehliadača alebo na karte prehliadača. Do úvodných značiek umiestnite začiatočnú a koncovú značku názvu a medzi tieto značky napíšte akékoľvek hlavičky, ktoré sa vám páčia:
   reklama

Časť 2 zo 4: Formátovanie textu

1. 

   Pridajte text do svojho tela. V tejto časti budeme pracovať iba s tagmi body. Ďalší text bude stále vo vašom dokumente, ale ušetríte miesto tým, že ho nebudeme opakovať v tomto návode. Medzi karty napíšte, čo chcete a a zobrazí sa ako prvý obsah na vašej stránke. Napríklad:
   • Pri písaní stránky HTML som postupoval podľa pokynov wikiHow.

2. 

   Pridajte nadpisy textu. Usporiadajte svoju stránku pomocou značiek nadpisu, ktoré prehľadávaču dajú pokyn, aby medzi nimi zobrazoval text vo väčšej veľkosti písma. Tieto značky tiež používajú vyhľadávacie nástroje a ďalšie nástroje na určenie toho, o čom je váš web a ako je usporiadaný.
   je najväčší nadpis a môžete vytvoriť menšie nadpisy až do
   . Vyskúšajte ich na svojej stránke:
   • Vitajte na mojej stránke.

   • Pri písaní stránky HTML som postupoval podľa pokynov wikiHow.

   • Môj dnešný cieľ:

   • Splnené ciele:

   • Naučte sa, ako používať nadpisy.

   • Nedokončené ciele:

   • Prečítajte si viac značiek na formátovanie textu.

3. 

   Prečítajte si viac značiek na formátovanie textu. Značku „strong“ ste už videli, ale existuje veľa ďalších spôsobov formátovania textu. Vyskúšajte tieto značky alebo viac značiek naraz pre ten istý textový reťazec. Nezabudnite pridať koncové značky vzadu!
   • Dôležitý text, ktorý sa v prehliadači zobrazuje tučným písmom.
   • Zdôraznený text, ktorý sa v prehliadači zobrazuje kurzívou.
   • Text je o niečo menší ako zvyčajne. Tento text sa automaticky zmení, ak sa použije v nadpise.
   • Text už nie je relevantný, zobrazuje sa s pomlčkou tela.
   • Text sa vkladá neskôr ako iné dokumenty a zobrazuje sa podčiarknutím.

4. 

   Usporiadajte text na svojej stránke. Možno ste si všimli, že stlačenie klávesu „enter“ nestačí na to, aby sa text zobrazil na inom riadku. Tieto značky vám môžu pomôcť pri vytváraní odsekov a zalomení riadkov alebo pri usporiadaní textu inými spôsobmi:

   • Skratka pre značku „odsek“ (odsek) ponechá všetok text medzi týmito značkami v odseku a oddeľuje ho od textu nad a pod ním.

   • 
     Táto značka vygeneruje zalomenia riadkov. Nepridávajte k nej koncovú značku, pretože by neprekážala žiadnemu inému obsahu. Túto značku používajte v básňach alebo riadkoch adries, nie v odsekoch.

   • Ak potrebujete zobraziť text veľmi presne, táto značka nastaví text v ňom na písmo s pevnou šírkou (každé písmeno má rovnakú šírku) a umožňuje vám vytvárať intervaly Prázdne miesta a zalomenia riadkov, ako sa vám páči, na pravidelné úpravy namiesto značiek.

   • Táto značka definuje typ textu, ktorý je citovaný zo zdroja.

     Zdroj môžete opísať neskôr pomocou citačná karta.

5. 

   Pridajte neviditeľný text titulku. Značky komentárov sa na webovej stránke nezobrazujú. Umožňujú vám anotovať sa do dokumentu HTML bez ovplyvnenia obsahu. Nepridávajte koncovú značku.
   • Karty, ktoré sa dajú samy bez koncových značiek, sa nazývajú „prázdne značky“.

6. 

   Kombinujte ich spolu. Najlepším spôsobom, ako si tieto značky zapamätať, je použiť ich na svojom webe. Tu je príklad použitia kariet v krokoch, ktoré ste sa doteraz naučili. Skúste predpovedať, ako sa zobrazia v prehliadači, potom ich skopírujte do dokumentu a zistite.
   • Vitajte na mojej webovej stránke.

   • Dúfam, že sa vám táto stránka páči!

     Vyrobil som ho len pre vás.

   • 1. časť: Ako som objavil HTML

   • HTML som sa naučil už v jeden dvahodiny, tak teraz som odbornik.
   reklama

Časť 3 zo 4: Pridávanie odkazov a obrázkov

1. 

   Dozviete sa viac o atribútoch. Značky môžu obsahovať ďalšie informácie, ktoré sa nazývajú atribúty. Tieto atribúty sú reprezentované ďalšími slovami v rámci samotných značiek vo forme názov vlastnosti = "konkrétna hodnota". Napríklad ktorákoľvek značka HTML môže mať atribút title:

   • Úvodný odsek je tu.

     Nadpis odseku „Úvod“, ktorý sa zobrazí, keď umiestnite kurzor myši na odsek na webovej stránke.

2. 

   Odkazy na iné webové stránky. Používanie kariet vytvoriť hypertextový odkaz na akúkoľvek inú webovú stránku. Vložte adresu URL webovej stránky, na ktorú chcete odkazovať, pomocou atribútu href. Tu je príklad odkazov na webovú stránku, ktorú čítate:
   • Návštevníci vášho webu môžu kliknutím na tento text kliknúť na nasledujúci odkaz.

3. 

   Pridajte do značky atribút id. Ďalším atribútom, ktorý môže používať akákoľvek značka HTML, je prvok „id“. Na ktorúkoľvek kartu napíšte id = "vidu" alebo použite akýkoľvek názov, ktorý neobsahuje medzery. Neprináša žiadny viditeľný efekt, ale použijeme ho v ďalšom kroku.
   • Napríklad do dokumentu pridajte:

     Tento odsek slúži ako príklad na opísanie fungovania atribútu id.

4. 

   Odkaz na prvok s určitým ID. Teraz môžeme použiť značku hypertextového odkazu, , na odkaz na iné miesto na tej istej stránke. Namiesto adresy URL použijeme symbol # nasledovaný hodnotou id, na ktorú chceme vytvoriť odkaz. Napríklad, Tento text bude odkazovať na text s ID „vidu“.
   • Všetky hodnoty HTML rozlišujú veľké a malé písmená. „#VIDU“ a „#vidu“ budú odkazovať na rovnaké miesto.
   • Ak je vaša stránka dostatočne krátka na to, aby ste na nej mohli zobraziť celú stránku naraz, pravdepodobne si po kliknutí na odkaz v prehliadači nevšimnete, že sa niečo deje. Zmeňte veľkosť okna, kým sa nezobrazí posúvač, a potom to skúste znova.

5. 

   Pridajte fotografie. Card je prázdna značka, čo znamená, že nie je potrebná žiadna koncová značka. Všetky informácie, ktoré prehliadač potrebuje na zobrazenie obrázka, sa pridávajú pomocou atribútov. Tu je príklad zobrazenia loga wikiHow s popisom každého atribútu:
   • 
   • Vlastnosti src = "" oznámi prehľadávaču, kde je fotografia. (Upozorňujeme, že zverejnenie fotografie z webu niekoho iného sa považuje za nevhodné - a fotografia už nebude aktívna.)
   • Vlastnosti style = "" Dokáže veľa vecí, ale hlavne sa používa na nastavenie šírky a výšky obrázka v pixeloch. (Namiesto nich môžete tiež použiť samostatné atribúty width = "" a height = "", čo však môže viesť k zvláštnym problémom so zmenou veľkosti, ak používate CSS.)
   • Vlastnosti alt = "" je stručný popis obrázka, ktorý používateľ uvidí, ak sa obrázok nepodarilo načítať. Toto sa považuje za požiadavku, pretože sa používa na čítanie obrazovky pre nevidiacich návštevníkov webových stránok.
   reklama

Časť 4 zo 4: Viac informácií o pridávaní a sprístupňovaní vášho webu online

1. 

   Potvrďte svoje HTML. Overenie HTML kontroluje chyby vo vašom kóde. Ak sa váš web nezobrazuje správne, overenie vám pomôže nájsť chybu, ktorá problém spôsobuje. Môže vás tiež naučiť viac o HTML zistením, že kód vyzerá dobre na displeji, ale už sa to neodporúča kvôli novým aktualizáciám v štandarde HTML. Používanie neplatného kódu HTML neznamená, že váš web je zbytočný, ale môže spôsobiť problémy alebo sa môže stať, že sa v rôznych prehliadačoch zobrazí nestabilne.
   • Vyskúšajte bezplatnú službu online overenia z W3C alebo vyhľadajte online nástroj na overenie HTML 5.

2. 

   Získajte viac značiek a atribútov. Existuje mnoho ďalších značiek a atribútov HTML a mnoho miest, kde sa ich môžete naučiť:
   • Vyskúšajte programy w3schools a HTML Dog, kde nájdete ďalšie návody a kompletné zoznamy značiek.
   • Vyhľadajte webovú stránku, ktorá sa vám páči, ako vyzerá, a potom pomocou funkcie „Zobraziť zdrojový kód stránky“ prehliadača získate kód HTML sami. Skopírujte si ho do dokumentu a preštudujte si, ako to funguje.
   • Prečítajte si ďalšie články a dozviete sa, ako vytvárať tabuľky v HTML, používať metaznačky na zvýšenie svojich šancí, že vás vyhľadávače nájdu, alebo ako použiť rozdelenie. nastavte oblasť na stránke) a span (používa sa na určenie štýlu textového prvku), aby ste pomohli štýlom pomocou CSS.

3. 

   Získajte svoj web online. Vyberte si službu hostenia vášho webu a potom môžete do svojej osobnej webovej domény nahrať toľko stránok HTML, koľko chcete. Aby ste to dosiahli, budete musieť použiť softvér na nahrávanie FTP, ale veľa služieb požičiavania webových stránok ponúka aj túto službu.
   • Pri odkazovaní na stránky alebo obrázky, ktoré sú priamo na vašom webe, budete musieť použiť celú adresu webu. Napríklad ak je vaša doména názov www.chuyengiahtmlsieudang.com, potom text je v týchto značkách bude odkazovať na „www.chuyengiahtmlsieudang.com/nhatky/thuhai.html“

4. 

   Pridajte štýly pomocou CSS. Ak vaša stránka HTML vyzerá trochu jednotvárne, skúste sa naučiť základy CSS a pridávať farby, rôzne písma a lepšiu kontrolu nad tým, kam sú umiestnené prvky. Prepojenie „šablóny štýlov“ s CSS na stránku HTML vám umožní vykonávať za chodu prudké zmeny a dynamicky upravovať štýl celého textu v rámci danej značky. Môžete sa tu trochu pohrať so základnou vrstvou formátovania alebo si vyhľadať podrobnejšie návody v CSS Tutoriáli HTML Dog.

5. 

   Pridajte na svoje webové stránky JavaScript. JavaScript je programovací jazyk, ktorý sa používa na doplnenie funkcií vašich stránok HTML. Príkazy JavaScriptu sa vkladajú medzi začiatočnú a koncovú značku , a je možné ich použiť na pridanie interaktívnych tlačidiel, výpočet matematických úloh a ďalšie. Viac sa dozviete v príkladoch w3c. reklama

Rada

• Deklarácia doctype (použitá deklarácia typu dokumentu) použitá v tomto výučbe je „voľný HTML 4.0.1 prechodný“ (HTML 4.0.1 nie tesný prechod), ľahký formát. pre začiatočníkov. Použite () alternatíva k prehliadaču, ktorý ho kompiluje v prísnom formáte HTML 5, čo je odporúčaný (aj keď menej často používaný) štandardný štýl.

Výstraha

• Účelom HTML je udržiavať obsah v globálnom formáte. Nemá žiadnu kontrolu nad prezentáciou vášho webu, napríklad farbou pozadia a presným umiestnením prvkov. Aj keď stále existujú značky, ktoré vám to umožňujú, je dobré použiť CSS na vytvorenie lepšie kontrolovateľného a konzistentného webu.

Čo potrebuješ

• Jednoduchý textový editor, napríklad NotePad alebo TextEdit
• Webový prehľadávač, napríklad Internet Explorer alebo Mozilla Firefox
• (Voliteľné) Editor HTML, ako je Adobe Dreamweaver, Aptana Studio alebo Microsoft Expression Web