Webová stránka Bare Bones: 10 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 12:00

Dnes vytvoríme veľmi jednoduchú webovú stránku s holými kosťami od začiatku. Povieme si o prvkoch HTML, štýle vašej webovej stránky (farby, písma, zarovnanie atď.) A nakoniec o tom, ako do nej vložiť obrázok!

Na konci tohto návodu budete mať základné znalosti o vytváraní webovej stránky od začiatku a zistíte, že kódovanie nie je také ťažké, ako sa zdá!

Krok 1: Použitie programu Poznámkový blok

Na vytvorenie našej prvej webovej stránky použijeme program Poznámkový blok v oknách. Aj keď to urobí každý textový editor, poznámkový blok je na počítačoch so systémom Windows predinštalovaný, takže je skvelým východiskovým bodom.

Poznámkový blok otvoríte tak, že prejdete na vyhľadávací panel v ľavom dolnom rohu obrazovky a napíšete „Poznámkový blok“. Potom vyberte aplikáciu „Poznámkový blok“, ktorá sa zobrazí vo výsledkoch vyhľadávania. Malo by sa otvoriť nové okno.

Krok 2: Pridanie základného stromu dokumentov HTML

Aby váš webový prehliadač (Chrome, Firefox, Edge, Internet Explorer, Safari …) mohol spracovať a zobrazovať vašu webovú stránku, všetky webové stránky musia mať štandardnú kostrovú štruktúru.

Toto sa nazýva strom dokumentov html. Do programu Poznámkový blok zadajte html „prvky“alebo „značky“zobrazené na obrázku. Neváhajte a skopírujte aj prilepte:

Krok 3: Uloženie ako stránka.html

Teraz, keď máme základnú štruktúru html v programe Poznámkový blok, uložme ho, aby sme neprišli o žiadnu prácu, a aby sme mohli vidieť svoje zmeny, ako postupujeme podľa inštrukcií.

1. Vyberte „Súbor“> „Uložiť ako …“(Snímka obrazovky 1)
2. Zmeňte typ súboru na „Všetky súbory“(Snímka obrazovky 2)
3. Zadajte názov súboru podľa vášho výberu. Nezabudnite si všimnúť, kam ukladáte dokument vo svojom počítači, aby ste ho mohli neskôr otvoriť. UPOZORNENIE: Najdôležitejšou súčasťou ukladania tohto súboru je pripojenie ".html" na koniec názvu súboru. Vďaka tomu ho počítač rozpozná ako webovú stránku. Ak teda chcete pomenovať svoj súbor „my_webpage“, nezabudnite na koniec pridať súbor.html, napr. "my_webpage.html"

Krok 4: Pridanie názvu na vašu webovú stránku

Máme teda základnú štruktúru html, ktorú webové prehliadače potrebujú na interpretáciu a zobrazenie našej webovej stránky, ale nemáme žiadny obsah. Zmeňme to!

Prvá vec, ktorú by sme mali urobiť, je dať názov našej webovej stránke. Väčšina všetkých webových stránok má názov. To sa zobrazí na karte vo vašom webovom prehliadači (pozri snímku obrazovky). Svojej webovej stránke dám názov „Taylor's Website“. Aby sme to urobili, musíme pridať prvok „názov“.

Web Taylor

V tomto mieste si všimnete, že každý štítok má „otváraciu“značku a „zatváraciu“značku. Ako napr

a.

Toto má rozoznať, kde názov začína a kde končí. Dodržiavajú to takmer všetky značky HTML, existujú však určité výnimky.

Krok 5: Pridanie obsahu na vašu webovú stránku

Máme názov našej webovej stránky, ale stále pre ňu nemáme žiadny skutočný obsah. Pridajme trochu vkusu!

Na našu webovú stránku sme pridali názov pomocou prvku „názov“. Dajme našej webovej stránke veľkú hlavičku pútajúcu pozornosť pomocou prvku „h1“, ktorý je prvkom nadpisu.

Web Taylor

Vitajte na mojej webovej stránke

Krok 6: Zobrazenie našich doterajších zmien

Máme názov, máme nejaký obsah, pozrime sa na našu webovú stránku, ako to zatiaľ prebieha.

1. Uložte súbor do poznámkového bloku
2. Prejdite na miesto, kam ste uložili súbor, a dvakrát naň kliknite. Malo by sa automaticky otvoriť vo vašom predvolenom webovom prehliadači. Dobre vyzerajúci!

Krok 7: Pridanie značky odseku

Máme názov, nadpis, teraz pridáme odsek s ďalším textom. Názov prvku odseku je „p“. Jeho použitie môžete vidieť nižšie:

Web Taylor

Vitajte na mojej webovej stránke

Dnes sa naučíme, ako vytvoriť túto veľmi jednoduchú webovú stránku!

Poznámka: Zmeny si môžete prezrieť kedykoľvek, uložením poznámkového bloku a otvorením súboru.

Krok 8: Dajte tomu nejakú farbu

Naša webová stránka sa pohybuje priamo, ale je celkom jednoduchá. Dajme našej značke odseku nejakú farbu!

Rôzne prvky môžeme zafarbiť pridaním atribútu „style“do značky „p“, ako je uvedené nižšie:

Web Taylor

Vitajte na mojej webovej stránke

Dnes sa naučíme, ako vytvoriť túto veľmi jednoduchú webovú stránku!

Krok 9: Pridanie obrázku

Čo je to webová stránka bez obrázkov? Pridajme obrázok na náš web!

Prvým krokom je nájsť obrázok, ktorý sa vám páči. Na vyhľadanie zlatého retrievera som použil obrázky Google. Vytiahnite obrázok nahor a uistite sa, že adresa URL končí príponou.jpg,.png,.gif,-j.webp

Keď ste si vybrali svoj obrázok, musíme ho pridať na stránku html pomocou značky „img“. Môj obrázok je:

Pridajte ho na svoju stránku pomocou značky „img“s atribútom „src“:

Web Taylor

Vitajte na mojej webovej stránke

Dnes sa naučíme, ako vytvoriť túto veľmi jednoduchú webovú stránku!

Krok 10: Zobrazenie konečného produktu

Uložte súbor poznámkového bloku a otvorte konečný produkt. Mali by ste vidieť svoju webovú stránku!