Ako napísať HTML stránku?
V prípade akéhokoľvek dokumentu HTML, ktorý vytvoríte, začnete dokument tagom „typ dokumentu“ (), tagom HTML () a tagom BODY ().
Táto príručka vás naučí, ako vytvoriť webovú stránku pomocou HTML. Niektoré prvky vašej webovej stránky môžu obsahovať text, odkazy a obrázky.
Časť 1 zo 7: Príprava na písanie
- 1Otvorte jednoduchý textový editor. Na počítačoch so systémom Windows je predvoleným jednoduchým textovým editorom Poznámkový blok, zatiaľ čo používatelia počítačov Mac majú program s názvom TextEdit:
- Windows - Kliknite na tlačidlo Štart, zadajte notepad príkaz a kliknite na položku Poznámkový blok.
- Mac - Kliknite na položku Spotlight, zadajte text textedit a vo výsledkoch kliknite na položku Textedit.
- 2Pochopte značky HTML. Pri písaní v HTML sú rôzne prvky stránky označené otvorenými tagmi (<>) a zatvorenými tagmi (</>), pričom medzi tagy zapadá text pre prvok.
- Odsek sa napríklad vytvorí zadaním otvorenej značky odseku (<p>), zadaním textu, ktorý chcete použiť, a potom zadaním značky uzavretého odseku </p>.
- Každý riadok kódu musí ísť na svoj vlastný riadok, takže ↵ Enterpo napísaní riadka kódu normálne stlačíte.
- 3Pozrite sa na základný formát HTML. V prípade akéhokoľvek dokumentu HTML, ktorý vytvoríte, začnete dokument tagom „typ dokumentu“ (<!DOCTYPE html>), tagom HTML (<html>) a tagom BODY (<body>). Dokument tiež ukončíte zatvorenou značkou BODY a potom zatvorenou značkou HTML. Napríklad:
<!DOCTYPE html><html><body></body></html>
- 4Zvážte informácie o CSS. CSS je jazyk, ktorý funguje ako doplnok k HTML; pokrýva formátovanie stránky (napr. farby, text v strede atď.) a ďalšie vizuálne aspekty webovej stránky.
Časť 2 zo 7: Vytvorenie textovej stránky
- 1Nastavte dokument. Pridajte počiatočný text HTML dokumentu:
<!DOCTYPE html><html><body>
- 2Vytvorte názov svojej webovej stránky. Toto je tiež známe ako „hlava“ a definuje text, ktorý sa zobrazí na karte prehliadača. Ak to chcete urobiť, pridajte do dokumentu nasledujúci text. Uistite sa, že text „Your Title“ nahradíte preferovaným textom:
<head><title>Your Title</title></head>
- 3Pridajte hlavičku. Napíšte <h1>Text</h1> a stlačte ↵ Enter. Môžete umiestniť ľubovoľný text, ktorý chcete použiť medzi
<h1>a</h1>tagy.- Hlavičky je možné skladať po celej stránke. Pre každú hlavičku, ktorú použijete za prvou, stačí zvýšiť číslo (napr. Pre druhú hlavičku použiť
<h2></h2>).
- Hlavičky je možné skladať po celej stránke. Pre každú hlavičku, ktorú použijete za prvou, stačí zvýšiť číslo (napr. Pre druhú hlavičku použiť
- 4Vytvorte odsek. Zadajte text <p>Text</p> a stlačte tlačidlo ↵ Enter. Uistite sa, že ste text nahradili textom odseku.
- Každý riadok textu môžete umiestniť na nový riadok opakovaním
<p></p>značiek pre každý riadok textu.
- Každý riadok textu môžete umiestniť na nový riadok opakovaním
- 5Zopakujte postup hlavičky a odseku. Na svoju webovú stránku môžete pridať ľubovoľný počet hlavičiek a odsekov.
- 6Pridajte na svoju stránku prestávky. Napíšte <br>Text</br> a stlačte ↵ Enter. Ak chcete oddeliť rôzne časti, medzi odsekmi sa vytvoria medzery medzi stránkami.
- 7Formátujte text odsekov. Vo vnútri
<p></p>značiek (napríklad<p><em></em></p>) môžete použiť rôzne značky na označenie formátovania:<em>text</em>- Vytvorí kurzívu.<strong>text</strong>- Vytvára tučný text.<ins>text</ins>- Vytvorí podčiarknutý text.<del>text</del>- Vytvorí text s riadkom.<small>text</small>- Vytvára malý text.<! - -text - ->- Vytvára neviditeľný text. Slúži na pridávanie poznámok na vašu webovú stránku.
- 8Zatvorte značky BODY a HTML dokumentu. Keď ste s pridávaním textu hotoví, zadajte text, </body> stlačte ↵ Entera potom </html> zatvorte dokument. Teraz, keď je vaša textová stránka technicky dokončená, môžete na ňu pridávať ďalšie položky, napríklad odkazy, odrážky a obrázky.
Dokument tiež ukončíte zatvorenou značkou BODY a potom zatvorenou značkou HTML.
Časť 3 zo 7: pridávanie odkazov
- 1Nájdite na svojej webovej stránke miesto, kam chcete pridať odkaz. Ak chcete napríklad pridať odkaz na webovú stránku v strede odseku, prejdite na príslušný odsek a vyhľadajte slovo alebo frázu, ktoré chcete použiť ako odkaz.
- 2Skopírujte adresu URL webovej stránky. Prejdite na webovú stránku, na ktorú chcete odkazovať, potom v pruhu v hornej časti okna vyberte jej adresu a stlačte Ctrl+ C(Windows) alebo ⌘ Command+ C(Mac).
- 3Zadajte otvorenú značku odkazu. Napíšte <a href=> do medzery priamo pred slovo alebo frázu, ktorú chcete použiť ako odkaz.
- 4Vložte adresu URL webovej stránky. Kliknite medzi
href=a>a potom stlačte Ctrl+ V(Windows) alebo ⌘ Command+ V(Mac). Odkaz by sa mal zobraziť napravo odhref=textu.- Ak napríklad odkazujete na YouTube, zobrazilo by sa vám
<a href=https://youtube.com/>tu.
- Ak napríklad odkazujete na YouTube, zobrazilo by sa vám
- 5Pridajte značku uzavretého odkazu. Na druhej strane textu, ktorý chcete použiť ako odkaz, zadajte text </a>. Napríklad v riadku s textom „Nasledujte ma na Twitteri“, kde odkazujete na Twitter a ako odkaz použijete „na Twitteri“, bude váš kód vyzerať nasledovne:
<a href=https://twitter.com/>on Twitter</a>
- 6Pridajte identifikačný štítok. Identifikačné značky vám umožňujú prepojiť jeden kus textu s inou sekciou v inom odseku na tej istej stránke. Urobiť tak:
- Vymeňte
<p>značku za<p id=text> - Nájdite text, ktorý chcete použiť ako odkaz.
- Napíšte <a href=#text> pred text. Zaistite, aby sa text za „#“ zhodoval s textom za „id =“ tu.
- Napíšte </a> za text.
- Vymeňte
Časť 4 zo 7: pridávanie odrážok
- 1Nájdite miesto, do ktorého chcete pridať odrážky. Odrážky sa najlepšie hodia na výpis informácií alebo vytváranie organizovaných krokov. Keď nájdete odsek, pod ktorý chcete pridať odrážky, pokračujte.
- 2Pridajte zlom strany. Nad miesto, kam chcete umiestniť zoznam s odrážkami, zadajte text <br> a stlačte ↵ Enter.
- 3Vytvorte prvý bod. Zadajte text <li>text</li> a stlačte tlačidlo ↵ Enter. Uistite sa, že text nahradíte textom odrážky.
- 4Pridajte ďalšie body. Pokiaľ budete používať
<li></li>značky okolo riadkov textu, text medzi značkami bude formátovaný ako odrážka. - 5Vytvorte podbod. Napíšte <ul>text</ul> a stlačte ↵ Enter. Váš text sa zobrazí odsadený pod predchádzajúcou odrážkou.
- Text so
<ul></ul>značkami nebude mať pred sebou odrážku.
- Text so
- 6Zatvorte zlom stránky. Ak ste sa rozhodli použiť zlom stránky skôr, zadajte text </br> a stlačte ↵ Enter. Váš zoznam s odrážkami bude na stránke samostatne.
CSS je jazyk, ktorý funguje ako doplnok k HTML; pokrýva formátovanie stránky (napr. farby, text v strede atď.) a ďalšie vizuálne aspekty webovej stránky.
Časť 5 zo 7: pridávanie obrázkov
- 1Nájdite miesto na vloženie obrázku. Obrázok sa zobrazí na webovej stránke, kdekoľvek vložíte kód k obrázku.
- 2Vytvorte značku obrázku. Ak to chcete urobiť, zadajte,
<imgale nestláčajte ↵ Enter. Pretože značka „image“ je sama osebe úplnou značkou, nepotrebuje záverečnú značku. - 3Pridajte značku „zdroj“. Zadajte src= za
<imgznačku a dbajte na to, aby bola medzi „img“ a „src“ medzera. - 4Zadajte adresu obrázku. Skopírujte adresu URL obrázku, ktorý chcete pridať, a prilepte ho napravo od zdrojovej značky.
- 5Pridajte značku „štýl“. Napíšte style=, potom zadajte width:px;height:px.
- 6Zadajte rozmery obrázku. Za „width:“ zadajte šírku obrázku v pixeloch a potom za „height:“ zadajte výšku obrázku v pixeloch.
- 7Zadajte alternatívny popis. Toto je text, ktorý sa zobrazí, ak sa obrázok nepodarí načítať. Ak to chcete urobiť, zadajte alt= a potom zadajte popis.
- 8Zatvorte značku obrázku. Urobíte to tak, > že za posledný znak v alternatívnom popise umiestnite zátvorku.
- 9Skontrolujte kód svojho obrázku. Malo by to vyzerať nasledovne:
<img src=https://w3schools.com/w3css/img_fjords.jpg style=width:600px;height:400px alt=Fjord>
Prečítajte si tiež: Ako zrušiť žiadosť o priateľstvo na Facebooku?
Časť 6 zo 7: Uloženie dokumentu v systéme Windows
- 1Kliknite na položku Súbor. Nachádza sa v ľavej hornej časti okna programu Poznámkový blok. Zobrazí sa rozbaľovacia ponuka.
- 2Kliknite na tlačidlo Uložiť ako.... Nájdete to v hornej časti rozbaľovacej ponuky Súbor.
- 3Vyberte miesto uloženia. Kliknite na priečinok v ľavej časti okna (napr. Pracovná plocha).
- 4Zadajte názov HTML súboru. .html Do textového poľa „Názov súboru“ zadajte ľubovoľný názov, ktorý chcete v súbore použiť.
- Pre súbor s názvom "mňau", napríklad, mali by ste zadať meow.html tu.
- 5Kliknite na rozbaľovacie pole „uložiť ako typ“. Zobrazí sa rozbaľovacia ponuka.
- 6Kliknite na položku Všetky súbory. Je to v rozbaľovacej ponuke.
- 7Kliknite na položku Uložiť. Uvidíte to v pravom dolnom rohu okna. Tým sa váš textový súbor uloží ako stránka HTML.
- Súbor stránky HTML môžete otvoriť vo väčšine prehliadačov kliknutím a presunutím súboru do otvoreného okna prehliadača.
Pri písaní v HTML sú rôzne prvky stránky označené otvorenými tagmi () a zatvorenými tagmi (), pričom medzi tagy zapadá text pre prvok.
Časť 7 zo 7: Uloženie dokumentu na počítači Mac
- 1Kliknite na položku Textedit. Nachádza sa v ľavej hornej časti obrazovky. Zobrazí sa rozbaľovacia ponuka.
- 2Kliknite na tlačidlo Nastavenia.... Nájdete to v hornej časti rozbaľovacej ponuky. Otvorí sa okno Predvoľby.
- 3Kliknite na kartu Otvoriť a uložiť. Je to v hornej časti stránky.
- 4Zrušte začiarknutie políčka „Pridať“.txt „do súborov obyčajného textu“. Je to pod nadpisom „Pri ukladaní súboru“.
- 5Zatvorte okno predvolieb. Ak to chcete urobiť, kliknite na červený kruh v ľavom hornom rohu okna.
- 6Kliknite na položku Formátovať. Je to položka ponuky v hornej časti obrazovky.
- 7Kliknite na položku Vytvoriť obyčajný text. Táto možnosť je v rozbaľovacej ponuke.
- 8Kliknite na položku Súbor. Nachádza sa v ľavej hornej časti obrazovky.
- 9Kliknite na položku Uložiť. Nachádza sa v hornej časti rozbaľovacej ponuky.
- 10Zadajte názov HTML súboru. Nahraďte názov v textovom poli „Uložiť ako“ ľubovoľným požadovaným menom a potom .html.
- Zadajte napríklad dokument s názvom „môj_webový server“ my_website.html.
- 11Kliknite na položku Uložiť. Váš dokument HTML bude uložený vo vašom predvolenom umiestnení (napr. Na ploche).
- Súbor stránky HTML môžete otvoriť vo väčšine prehliadačov kliknutím a presunutím súboru do otvoreného okna prehliadača.
- Použitie špeciálneho editora kódu, ako je napríklad Poznámkový blok ++, umožní oveľa jednoduchšie a intuitívnejšie písanie v HTML ako používanie programu Poznámkový blok alebo TextEdit.
- Pred odoslaním kódu na živú stránku svoj kód vždy dvakrát skontrolujte.
Otázky a odpovede
- Existujú dva spôsoby písania HTML?Existuje bohužiaľ iba jedna metóda. Možno uvažujete o CSS, ale to je iný jazyk, a nie HTML.
- Ako môžem nahrať HTML na verejnú webovú stránku?Prihláste sa do CLI webovej stránky, inicializujte svoju hostiteľskú službu a nasaďte ju tam.
- Ako môžem písať HTML značky v HTML?Značky HTML môžete písať medzi uhlovými zátvorkami a veľkými písmenami. Ak chcete napísať koncovú značku HTML, vložte lomku medzi uhlové zátvorky a značku napíšte potom.
- Ako môžem použiť farbu pozadia tagu alebo farbu textu?S HTML to nemôžete urobiť. Musíte použiť CSS, jazyk, pre ktorý nájdete na tomto webe mnoho návodov.
- Môžem v zariadení Android kódovať HTML?Áno, môžete, ale kvôli tomu si musíte nainštalovať textový editor (vo formáte.apk).
Nezodpovedané otázky
- Ako môžem nahrať svoju stránku HTML?
- Ako môžem na svojom zariadení s Androidom kódovať HTML?
- Ako môžem nahrať veci na svoju stránku HTML?
Komentáre (2)
- Úžasné, 5 hviezdičiek.
- Bolo to úžasné a ďakujem za príklad.
