Webová stránka Bare Bones: 10 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:23

Dnes vytvoříme velmi jednoduchou webovou stránku s holými kostmi od nuly. Promluvíme si o prvcích HTML, o stylu vaší webové stránky (barvy, písma, zarovnání atd.) A nakonec o tom, jak do ní vložit obrázek!

Na konci tohoto pokynu budete mít základní dovednosti pro vytvoření webové stránky úplně od začátku a zjistíte, že kódování není tak těžké, jak se zdá!

Krok 1: Použití programu Poznámkový blok

K vytvoření naší první webové stránky použijeme Poznámkový blok na oknech. Ačkoli to udělá jakýkoli textový editor, poznámkový blok je na počítačích se systémem Windows předinstalován, takže je skvělým výchozím bodem.

Poznámkový blok otevřete tak, že přejdete na vyhledávací lištu v levém dolním rohu obrazovky a napíšete „Poznámkový blok“. Poté vyberte aplikaci „Poznámkový blok“, která se objeví ve výsledcích vyhledávání. Mělo by se otevřít nové okno.

Krok 2: Přidání základního stromu dokumentů HTML

Aby mohl váš webový prohlížeč (Chrome, Firefox, Edge, Internet Explorer, Safari …) zpracovávat a zobrazovat vaši webovou stránku, musí mít všechny webové stránky standardní strukturu.

Toto se nazývá strom dokumentů html. V programu Poznámkový blok zadejte html „prvky“nebo „značky“zobrazené na snímku obrazovky. Neváhejte také zkopírovat a vložit:

Krok 3: Uložení jako stránka.html

Nyní, když máme v Notepadu základní html strukturu, uložme ji, abychom nepřišli o žádnou práci, a abychom mohli vidět naše změny, jak postupujeme po Instructable.

1. Vyberte „Soubor“> „Uložit jako…“(snímek obrazovky 1)
2. Změňte typ souboru na „Všechny soubory“(snímek obrazovky 2)
3. Pojmenujte soubor podle svého výběru. Nezapomeňte si poznamenat, kam ukládáte dokument ve svém počítači, abyste jej mohli později otevřít. UPOZORNĚNÍ: Nejdůležitější částí uložení tohoto souboru je přidání „.html“na konec názvu souboru. To umožní počítači rozpoznat jej jako webovou stránku. Pokud tedy chcete soubor pojmenovat „moje_webpage“, nezapomeňte na konec přidat soubor.html, např. "my_webpage.html"

Krok 4: Přidání názvu na vaši webovou stránku

Máme tedy základní strukturu html potřebnou pro webové prohlížeče k interpretaci a zobrazení naší webové stránky, ale nemáme žádný obsah. Pojďme to změnit!

První věc, kterou bychom měli udělat, je dát název naší webové stránce. Většina všech webových stránek má název. To se zobrazí na kartě ve vašem webovém prohlížeči (viz snímek obrazovky). Svému webu dám název „Taylor's Website“. K tomu musíme přidat prvek 'title'.

Taylorův web

V tomto okamžiku si všimnete, že každý tag má tag „otevírací“a „zavírací“. Jako

a.

To má určit, kde název začíná a kde končí. Řídí se tím téměř všechny tagy html, existují však některé výjimky.

Krok 5: Přidání obsahu na vaši webovou stránku

Máme název naší webové stránky, ale stále pro ni nemáme žádný skutečný obsah. Pojďme přidat trochu vkusu!

Na naši webovou stránku jsme přidali název pomocí prvku 'title'. Pojďme dát naší webové stránce velkou pozornost upoutávající pozornost pomocí prvku „h1“, který je nadpisovým prvkem.

Taylorův web

Vítejte na mé webové stránce

Krok 6: Prohlížení našich změn tak daleko

Máme název, máme nějaký obsah, podívejme se na naši webovou stránku, jak to zatím probíhá.

1. Uložte soubor do poznámkového bloku
2. Přejděte na místo, kam jste soubor uložili, a dvakrát na něj klikněte. Mělo by se automaticky otevřít ve vašem výchozím webovém prohlížeči. Vypadáš dobře!

Krok 7: Přidání odstavcové značky

Máme nadpis, nadpis, nyní přidejme odstavec s dalším textem. Název prvku odstavce je „p“. Jeho použití můžete vidět níže:

Taylorův web

Vítejte na mé webové stránce

Dnes se naučíme, jak vytvořit tuto velmi jednoduchou webovou stránku!

Poznámka: Změny si můžete kdykoli prohlédnout uložením poznámkového bloku a otevřením souboru.

Krok 8: Dejte tomu trochu barvy

Naše webová stránka se pohybuje přímo, ale je docela prostá. Dejme naší odstavcové značce nějakou barvu!

Různé prvky můžeme vybarvit přidáním atributu 'style' do značky 'p', jak je popsáno níže:

Taylorův web

Vítejte na mé webové stránce

Dnes se naučíme, jak vytvořit tuto velmi jednoduchou webovou stránku!

Krok 9: Přidání obrázku

Co je to web bez obrázků? Pojďme přidat obrázek na náš web!

Prvním krokem je najít obrázek, který se vám líbí. K vyhledání zlatého retrívra jsem použil obrázky Google. Vytáhněte obrázek nahoru a ujistěte se, že adresa URL končí na.jpg,.png,.gif,-j.webp

Jakmile si vyberete svůj obrázek, musíme jej přidat na stránku html pomocí značky „img“. Můj obrázek je:

Přidejte jej na svou stránku pomocí značky „img“s atributem „src“:

Taylorův web

Vítejte na mé webové stránce

Dnes se naučíme, jak vytvořit tuto velmi jednoduchou webovou stránku!

Krok 10: Zobrazení finálního produktu

Uložte soubor poznámkového bloku a otevřete konečný produkt. Měli byste vidět svou webovou stránku!