Vytvorenie vlastnej webovej stránky pre začiatočníkov: 5 krokov

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

Či už ste niekedy snívali o tom, že budete počítačovým programátorom, alebo ste niekedy použili webovú stránku, povedzme si to na rovinu, sme takmer všetci z nás, informačné technológie sa stali chrbticou podnikania. Napriek tomu, že sa programovanie môže na prvý pohľad zdať trochu strašidelné, mojím cieľom je naučiť vás základy webového dizajnu, aby ste si po tomto návode mohli vytvoriť vlastnú webovú stránku. Keď už sme mimo, poďme na to!

Zásoby

• Počítač Macintosh alebo Windows (aj keď je možné použiť aj distribúcie Linuxu, zatiaľ ich preskakujem, pretože toto je úvod pre začiatočníkov).
• Váš výber textového editora (Poznámkový blok vo Windows, TextEdit na Mac) alebo váš výber IDE. Podľa mojich skúseností som zistil, že kód Visual Studio funguje najlepšie pre mňa, takže by som ho tiež odporučil skontrolovať tu: https://code.visualstudio.com/ nehovoriac o tom, že funguje na všetkých platformách OS.

Krok 1: Značky a trochu histórie

Keď ste sa rozhodli pre svoj výber textového editora alebo IDE, začnime so základmi.

Verte či neverte, HTML alebo HyperText Markup Language je k dispozícii už takmer 30 rokov a s každým ďalším rokom prichádza stále viac a viac vylepšení jazyka. Teraz sa môžete pýtať, ako prehliadač interpretuje, čo má umiestniť na obrazovku? To sa deje v niekoľkých častiach:

Formátovanie dokumentu HTML je jednoduché. Máte dve časti známe ako hlava a telo. Hlavička webovej stránky obsahuje kód, ktorý nie je pre používateľa viditeľný. Toto sa používa na prepojenie štýlov a deklarovanie ďalších potrebných bitov potrebných na správne zobrazenie stránky. Nasleduje hlavu, telo je, ako to znie, telo webovej stránky. Tu budete môcť hovoriť svojim hlasom a ukázať publiku svoje fantastické znalosti HTML! Teraz to nie je také jednoduché, ako zadať text do tela a nechať ho zobrazovať presne tak, ako chcete, ale v takom zmysle je to takmer také jednoduché s použitím vecí, ktoré nazývame značky.

Tu sú niektoré zo základných značiek HTML:

• title - slúži na informovanie prehliadača o názve stránky. To je to, čo vidíte aj pri pohľade na kartu webovej stránky.
• h1, h2, h3, h4 - ktoré sa používajú pre rôzne veľkosti hlavičiek, pričom h1 je najväčšia a h4 najmenšia. Podrobnejšie sa tomu budem venovať v ďalšej časti.
• p - odsek, ktorý sa používa na písanie odsekov textu. Ako odseky na papieri.
• br - break, ktorý vloží zlom v súlade s textom.
• a - používa sa na vytváranie odkazov na iné stránky, napríklad na odkazy, na ktoré sa dá kliknúť.
• img - slúži na prepojenie obrázku s webovou stránkou.
• ul, ol, li - neusporiadané zoznamy, usporiadané zoznamy a položky zoznamu.
• - slúži na vytváranie vložených komentárov v kóde, ktoré koncový používateľ neuvidí.

A tu je niekoľko značiek CSS (vizuálnych):

• farba - slúži na priradenie konkrétnej farby k určitému prvku alebo množine na webovej stránke.
• font-size-slúži na zmenu veľkosti písma na stránke.
• farba pozadia-slúži na zmenu farby pozadia určitého prvku alebo celej stránky.

Tiež som pripojil malý cheat list, ktorý vám pomôže, ak sa budete cítiť trochu stratení, ale nebojte sa, čoskoro to pochopíte! Navyše, www.w3schools.com je tiež fantastickým zdrojom pre akékoľvek vaše otázky týkajúce sa programovania. Rozhodne mi ušetrili čas alebo tiež.

V zásade je spôsob, akým prehliadač číta súbor, ľahký. Ide to riadok po riadku a spracúva funkciu po funkcii. Znaky sa používajú na deklarovanie značky ako

a slúžia na zatvorenie tagu ako napr

. To je dôležité, inak prehliadač nevie, kde sa má zastaviť. Medzi tým

a

tagy, kde zadávate všetko, čo chcete!

Krok 2: Nastavenie editora

Teraz, keď sme sa trochu venovali základným prvkom webovej stránky HTML, ponorme sa do toho a vyskúšajte si to sami. V tomto ďalšom kroku budem na programovanie webu používať kód Visual Studio, ale rozloženie kódu bude rovnaké, ak vám viac vyhovuje používanie programu Poznámkový blok alebo TextEdit.

V programe Poznámkový blok:

• V programe Poznámkový blok sa program spustí s prázdnym súborom, vďaka ktorému je začatie veľmi jednoduché. To nám tiež umožní skočiť niekoľko krokov v porovnaní s používaním kódu VS. Začnime uložením súboru v správnom formáte.
• Kliknite na položky Súbor> Uložiť
• Zadajte názov súboru, za ktorým nasleduje.html a v časti Uložiť ako typ vyberte všetky súbory. Kliknite na uložiť.

V rámci kódu VS:

• Najlepším spôsobom, ako využiť všetky funkcie IDE, je začať tým, že vytvoríte súbor a oznámite IDE, o aký typ súboru ide. To sa dá urobiť nasledovne:
• Kliknite na položky Súbor> Nový súbor
• Otvorí sa prázdny súbor
• Ďalej budete chcieť začať uložením súboru, aj keď je prázdny, pretože to umožní IDE pochopiť, aký typ súboru bude konečný produkt. Pri ukladaní nezabudnite na koniec názvu súboru uviesť príponu.html. Kliknite na uložiť.

Krok 3: Plány

Po úspešnom uložení súboru filename.html začneme vytvorením rámca pre našu webovú stránku. Z vyššie uvedeného si zapamätajte, aké kľúčové časti súboru musíme deklarovať, aby sme mohli začať s vytváraním zvyšku stránky HTML. Tip: Pri spustení rámca pre stránku značka! DOCTYPE HTML oznámi prehliadaču, že čítaný súbor je html. To môže prísť vhod, ak máte v jednom súbore rôzne typy kódu a chcete prepínať medzi tlmočníkmi. V rámci rozsahu tohto pokynu sa toho nebudeme príliš dotýkať, ale ak vás po tomto návode zaujíma viac o vývoji HTML, neváhajte ho vyskúšať. Na osvedčený postup vložím značku HTML! DOCTYPE HTML do hornej časti súboru. Nezabudnite otvoriť a zatvoriť pomocou.

Tu je vhodné uložiť súbor predtým, ako začnete s programovaním. Keď IDE vie, že pracuje so súborom HTML, na dokončenie výrazu použije intellisense a ponúkne návrhy, aby ste náhodou nezabudli zavrieť značku.. Všimnite si toho, že pre tých z vás, ktorí používajú Poznámkový blok, intellisense nie je k dispozícii ako v IDE. Začneme zadaním značiek hlavy a tela nasledovne: (pozri druhý obrázok).

Teraz, keď je nastavenie dokumentu dokončené, môžeme vyraziť na preteky a užiť si zábavu!

Krok 4: Kód; Kód; Kód;

Začneme vložením názvu pre náš novovytvorený súbor. Zadajte, čo chcete. Nezabudnite, že toto je názov, ktorý sa zobrazuje na karte prehliadača. Začnime tiež zadaním nadpisu na našu stránku. Pripomeňme si, ako to robíme. Počul som h1/2/3/4? To je správne!

Predtým, ako budeme pokračovať, považujem za užitočné otvoriť náš súbor v okne prehliadača, aby sme v reálnom čase mohli vidieť, ako sa naše zmeny prejavujú v prehliadači. Môžete to urobiť kliknutím na Súbor> Uložiť, aby ste súbor uložili, prejdite do priečinka, v ktorom je uložený súbor HTML, pre mňa je to pracovná plocha a na otvorenie súboru použite prehliadač, ktorý ste si vybrali, a pozreli by ste sa na to, Tu je vaša webová stránka! Poznámka: Osobne používam na svojom počítači prehliadač Safari, ktorý som si vybral, pri webovom vývoji je však Firefox zlatým štandardným prehliadačom na testovanie, pretože funguje takmer s každým skriptovacím jazykom.

Ako vidíte, nadpis sa zobrazuje na karte a tiež nadpis h1. Uprednostňujem, aby sa súčasne s IDE otvorilo okno prehliadača súboru, pretože keď vykonáte zmenu v IDE a uložíte, zmeny sú v prehliadači okamžité.

Neváhajte skúsiť pridať značky a pohrať sa s rôznymi vecami, ktoré môžete robiť s HTML. Ako vidíte nižšie, pridal som niekoľko odsekov, zlomov, externý hypertextový odkaz na stránku Instructables.com, obrázok (ktorý je možné prepojiť buď z externého zdroja, alebo v rámci rovnakého adresára, v ktorom je uložený súbor. HTML), príklad neusporiadaného zoznamu, usporiadaného zoznamu a nakoniec komentára.

Ak chcete skúsiť pridať nejaké farby a možnosti usporiadania, môžete do hlavičky súboru zadať značku štýlu. Toto je bod, v ktorom sa to presúva z HTML do CSS, ale kvôli vizuálnej stránke zadám niekoľko riadkov, aby ste videli, ako to funguje. V zásade funguje CSS tak, že vám umožňuje ovládať prvky HTML v rámci funkcií pomocou zátvoriek {} na zadanie kódu pre konkrétny prvok HTML.

Krok 5: Záverečné myšlienky

A tu to máte; úspešne ste vytvorili svoju prvú webovú stránku! Pretože je to príručka pre začiatočníkov, chcem, aby bola vaša prvá skúsenosť s HTML príjemná. Podľa mojich skúseností je najlepší spôsob, ako sa naučiť ponoriť sa a vyskúšať si veci osobne, zistiť, čo môžete s kódom robiť, a tiež zistiť, ako ho môžete prelomiť. To vytvára integritu a pomáha vám lepšie porozumieť tomu, ako a prečo kód funguje tak, ako funguje. Nezabudnite, že www. W3Schools.com je skvelým zdrojom otázok a dokonca ponúka virtuálne sandbox v prehliadači na vyskúšanie vášho kódu. Našťastie ste sa niečo naučili a šťastné kódovanie!