Jak vytvořit jednoduchou webovou stránku s HTML

V tomto článku vám řekneme, jak vytvořit jednoduchou webovou stránku pomocí kódu HTML. HTML je jedním z hlavních komponent internetu, protože specifikuje strukturu webových stránek. Webová stránka Můžete vytvořit v textovém editoru, který je v systému Windows nebo MacOS.

Kroky

Část 1 z 6:

Jak přidat značku "Head" (popis webové stránky)

jeden. Otevřete textový editor. V systému Windows spusťte Poznámkový blok nebo Poznámkový blok ++ a v MacOS - TextEdit:

Okna - Otevřete nabídku Start

, Zadejte do vyhledávacího řetězce notebook nebo Poznámkový blok++, A klepněte na tlačítko "Poznámkový blok" nebo "Poznámkový blok ++" v horní části menu "Start".

Operační Systém Mac - Klikněte na "Spotlight"

, Enter Textedit, A pak poklepejte na "TextEdit" v horní části výsledků vyhledávání.

2. Enter a stiskněte ↵ Zadejte. Takže informovat webový prohlížeč, že se jedná o dokument HTML.

3. Enter a stiskněte ↵ Zadejte. Toto je úvodní kód HTML.

4. Enter a stiskněte ↵ Zadejte. Tato značka obsahuje popis webové stránky a prvků záhlaví. Obsah této značky na stránce se obvykle nezobrazí. Obsah jsou popis stránky, metadata, CSS Stoly a další skriptovací jazyky.

Pět. Enter . Tato značka obsahuje název stránky.

6. Zadejte název stránky. Zadejte text, který má být zobrazen na kartě stránky.

7. Enter a stiskněte ↵ Zadejte. Tato značka zavře značku stránky.

osm. Enter a stiskněte ↵ Zadejte. Tato značka zavře tag stránek. V této fázi by měl HTML kód vypadat takto.

Moje webová stránka

Část 2 z 6:

Jak přidat tag "tělo" (veškerý obsah)

jeden. Zadejte značku Pod závěrečnou značkou "Head". Tato značka obsahuje celý obsah dokumentu HTML. Obsah Tato značka se zobrazí na webové stránce.

2. Enter . Tato značka obsahuje název stránky. Název je velký text, který je obvykle umístěn v horní části stránky.

3. Zadejte název stránky. Může to být název stránky nebo pozdrav.

4. Enter Po textu záhlaví a klepněte na tlačítko ↵ Zadejte. Tato značka zavře titulní značku.

Podle potřeby přidejte další titulky. Můžete vytvořit až šest záhlaví - to se provádí pomocí značek - . Titulky budou mít různé velikosti. Například kód vytváření tří titulků různých velikostí bude:

Vítejte na mé stránce!Jmenuji se Max.Doufám, že nebudete nudný.

Pět. Enter . Tato značka obsahuje textový odstavec. Taková značka zobrazí text normální velikosti.

6. Zadejte text. Zadejte například popis webové stránky nebo jiné informace.

7. Enter Po textu a klepněte na tlačítko ↵ Zadejte. Tato značka uzavírá značku odstavce. Níže je uveden příklad odstavce v dokumentu HTML:

Toto je první odstavec.

Chcete-li vytvořit několik odstavců pod jedním nadpisem, přidejte několik řádků v řadě.

Změnit barvu textu. Na začátku textu zadejte značku , A na konci značky . Namísto slova "Barva" nahrazuje požadovanou barvu (v angličtině) a neodstraňujte uvozovky. Tyto značky vám umožní změnit barvu libovolného textu (například záhlaví). Chcete-li například text modré, zadejte následující kód: Velryby - majestátní zvířata.

Také písmo může být odvážné, nakloněné a jiné. Níže uvedené příklady formátování textu pomocí značek HTML:

 Textový text Text Učebnice  Substituční text  Polstrovaný text

Část 3 z 6:

Jak přidat další položky

jeden. Přidejte obrázek na stránku. Pro tohle:

Enter . Tato značka obsahuje obrázek.
Zkopírujte a vložte adresu URL obrázku po znamení rovnosti (=) v uvozovkách.
Enter > Po obrázku URL zavřete značku obrázku. Pokud je například obraz URL http: // MyImage.Com / oceán.JPG, zadejte následující kód:

 SRC = "http: // MyImage.Com / oceán.JPG ">

2. Přidat odkaz na jinou webovou stránku. Pro tohle:

Enter . Tato značka obsahuje odkaz na jinou stránku.

Zkopírujte a vložte adresu URL po znamení rovnosti (=) v uvozovkách.

Enter > Po URL zavřete adresu.

Zadejte text odkaz po symbolu ">".

Enter Po textovém odkazu zavřete odkaz. Níže je uveden příklad odkazu na Yandex.

 href = "https: // Ya.Ru "> yandex.

3. Přidat mezeru řetězce. Chcete-li to udělat, zadejte . Přenos řádků bude vložen. Tato značka lze použít k oddělení různých oddílů stránky.

Část 4 z 6:

Jak změnit barvy

jeden. Obraťte se na oficiální seznam barev a jejich kódů v HTML barvě. Světový drát konsorcium (W3C) vede oficiální seznam barev, které lze nalézt na adrese https: // W3.Org / Wiki / CSS / Vlastnosti / Barva / Klíčová slova. Každá barva má formální jméno, 6místný hexadecimální kód a desetinné místo. Můžete použít některý z těchto parametrů pro nastavení barvy položek na stránce. V tomto příkladu budeme mít oficiální názvy barev.

2. Nastavte barvu pozadí pomocí značky . Chcete-li to provést, musíte přidat atribut na značku Styl. Předpokládejme, že chcete udělat pozadí celé stránky levandule (LAVEND):

3. Nastavit barvu textu pro libovolnou značku. Atribut Styl Můžete také použít k označení jaké barvy celý text v rámci konkrétní značky. Chcete například text v rámci jednoho z vašich značek byl Půlnoční modrá (Tmavě modrá):

Změna barvy se zobrazí pouze text v rámci této značky . Pokud později otevřete novou značku , kde by měl mít text také barvu Půlnoční modrá, "Styl" atribut bude muset požádat o něj.

4. Nastavit barvu pozadí pro záhlaví nebo odstavec. Stejně jako zadáte barvu pozadí pro značku těla, můžete vybrat barvy pozadí pro jiné značky. Chcete například barva pozadí byl Světle šedá (světle šedá) a barva záhlaví hlavičky H1 - Lightkyblue (světle modrá):

Část 5 z 6:

Jak zavřít HTML kód

jeden. Enter , Zavřít tag "tělo". Po dokončení přidávání textu, obrázků a dalších položek zadejte zadanou značku v dolní části dokumentu HTML.

2. Enter , Zavřete kód HTML. Zadejte tuto značku pod závěrečnou značkou "Tělo". Takže informuješ webový prohlížeč, který po této značce HTML kód není. Veškerý kód HTML musí být přibližně:

Stránka Yandex FanPozdrav s vámi na mé stránce.Ya.Ru "> yandex

Část 6 z 6:

Jak uložit a otevřít webovou stránku

jeden. Převést dokument do normálního textu (pouze pro uživatele MacOS). Klikněte na "Formát" (v horní části obrazovky)> "Vytvořit jednoduchý text" (v rozevírací nabídce).

Není možné dělat ve Windows.

2. Kliknutí Soubor. Tato volba je v panelu nabídek v horní části obrazovky.

3. Klikněte na tlačítko. T Uložit jako. Tuto možnost najdete v nabídce Soubor.

Můžete také kliknout Ctrl+S (Windows) nebo ⌘ příkaz+S (MAC).

4. Zadejte název dokumentu HTML. Zadejte jej do řetězce "Název souboru" nebo "Jméno" (Mac).

Pět. Změňte formát souboru pomocí TXT na HTML. Pro tohle:

Okna - Klikněte na menu "Typ souboru", vyberte možnost "Všechny soubory" a potom zadejte .Html Na konci názvu souboru.

Operační Systém Mac - na konci názvu souboru .TxtEnter .Html.

6. Klikněte na tlačítko. T Uložit. Tato volba je v dolní části okna. Soubor HTML bude vytvořen.

Obvykle soubory HTML otevřené ve výchozím webovém prohlížeči.

7. Zavřete textový editor. Nyní otevřete soubor HTML v prohlížeči, ve kterém můžete zobrazit vytvořenou webovou stránku.

osm. Otevřete soubor HTML v prohlížeči. Chcete-li to provést, poklepejte na soubor HTML. Pokud je chyba oznámena, proveďte následující:

Okna - Klikněte pravým tlačítkem myši, zvolte "Otevřít pomocí" a klepněte na požadovaný prohlížeč.

Operační Systém Mac - Klikněte na soubor, klikněte na "Soubor", vyberte možnost "Otevřít pomocí" a poté vyberte požadovaný prohlížeč.

devět. Upravit dokument HTML (v případě potřeby). Na stránce si můžete všimnout chybu. Chcete-li ji opravit, proveďte změny obsahu souboru HTML:

V systému Windows klepněte na tlačítko Klepněte pravým tlačítkem myši a vyberte "Edit" (Pokud je v počítači vyberte možnost Poznámkový blok "(pokud je NotEPad ++ nainstalován, vyberte volbu" Edit v poznámkovědobe ++ ").

Klikněte na soubor MacOS, klepněte na tlačítko "Soubor", vyberte možnost "Otevřít pomocí" a klikněte na "TextEdit". Nyní přetáhněte soubor HTML do okna TextEdit.

Tipy

Pomocí značky můžete přidat boční pruh posuvného textu .Ale nezapomeňte, že některé prohlížeče tuto značku nerozpoznávají.
Mnoho lidí používá Poznámkový blok ++ psát a kompilovat kód.
Každá taga musí zavřít. Například značky Mělo by být takto zavřeno: .
Chcete-li objasnit obrázek na stránce, zadejte Po názvu obrázku v značce "IMG" (například, ).

Varování

Vložte obrázky do imgur nebo podobné, pokud je chcete přidat na webovou stránku. Nezapomeňte, že použití obrázků, které patří ostatním lidem, porušuje autorská práva.