17. diel - Nahranie webu na internet

V predchádzajúcom cvičení, Riešené úlohy k 14.-16. lekciu HTML a CSS, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Riešené úlohy k 14.-16. lekciu HTML a CSS , sme dokončili náš web. V dnešnom tutoriále ho nahráme na internet.

Meta tagy

Podstránky webu máme hotové, ale v ich hlavičkách nám chýba posledná vec. Keď bude web online, všimnú si ho internetové vyhľadávače a jeho podstránky si tzv. Zaindexujú. Zjednodušene povedané si uloží čo na nich je, aby ich potom mohli zobrazovať medzi výsledky, keď niekto niečo hľadá. To je pre nás veľmi dôležité, pretože práve takto sa na náš web dostanú návštevníci.

Do každej podstránky vložíme 2 informácie do vyhľadávača. Prvý informácií je krátky popis toho, čo je na stránke. Ďalšia je zoznam niekoľkých kľúčových slov, ktoré opäť súvisí s obsahom stránky. Ešte raz zopakujem, že kód vkladáme do hlavičky

<meta name="description" content="Osobní portfolio programátora HoBiho." />
<meta name="keywords" content="portfolio, programátor, HoBi" />

Tag meta už poznáme, používali sme ho na určenie kódovanie stránky. Keď sme u meta informácií, môžeme vložiť aj údaje o tom, kto stránku vytvoril:

<meta name="author" content="HoBi" />

V hlavičke zostaňme ešte na poslednú chvíľu a nastavme našim webovým stránkam favicon. Ide o tú malú ikonku, ktorá sa zobrazí v záložke vášho webového prehliadača. Pre ikonku pôjdeme ako vždy na iconfinder.com, stiahneme si ju vo veľkosti 16x16 pixelov vo formáte ico a uložíme ju do zložky obrázky. Do hlavičky pridáme odkaz na ikonu:

<link rel="shortcut icon" href="obrazky/ikona.ico" />

Pozn. v niektorých verziách Google Chrome sa ikona na lokálnych stránkach nezobrazí.

Metainformácie si doplňte do všetkých podstránok webu. Teraz sme pripravení nahrať stránky na internet.

Nahranie webu na internet

Pre svoje hotové webové stránky teraz potrebujeme webhosting a doménu. Webhosting je priestor na vzdialenom serveri, kam môžeme nahrať naše stránky. Doména je adresa, cez ktorú budú naše stránky z internetu prístupné. Webhosting aj doména pre bežný web sú veľmi lacná záležitosť, zvyčajne sa pohybujú v rádoch desiatok korún mesačne.

Pozn. Existujú aj tzv. Hostingoch ale tie sú pomerne nekvalitné, s reklamami a neobsahujú veľa služieb, ktoré by vám mohli chýbať. Ak sa chcete v oblasti webov rozvíjať a učiť, tak určite zvoľte klasický hosting. Záujemcom odporúčam prečítať článok 10 rád, vďaka ktorým neurobíte pri výbere webhostingu chybu.

Z českých hostingov vychádza najlepšie https://www.onebit.cz, na ktorom hosťuje i ITnetwork. Má kvalitnú podporu, ktorá vždy ochotne poradia s čímkoľvek, čo vám nefunguje, vaše dáta zálohuje a má prepracovanú administráciu, kde si môžete nastaviť veľa funkcií a vyskúšať si zaujímavé technológie.

Registrácia na onebit.cz

Prejdite na web https://www.onebit.cz a v navigačnom menu zvoľte webhosting. Budete opýta či chcete osobné alebo firemné. V našom prípade vyberieme, že chceme osobné web. Odporúčam vybrať variantu Lite, ktorá obsahuje aj PHP a umožní vám do webu neskôr pridávať dynamické prvky ako diskusie a podobne.

Na konci formulára si zvoľte svoju doménu. Odporúčam voliť čo najkratšie, bez pomlčiek as koncovkou .sk.

Pod formulárom sa nachádza tlačidlo overiť, ktorým zistíte, či je zadaná doména voľná. Ak nie, musíte si vymyslieť inú.

V ďalšom kroku formulára stačí už len vyplniť kontakt. K doméne je vyžadované dátum narodenia a to preto, aby bolo jednoznačne dané komu patrí a predišlo sa prípadným sporom o jej vlastníctvo. Z rovnakého dôvodu zadávate aj telefón.

Po odoslaní stačí už len potvrdiť objednávku a uhradiť faktúru, ktorá vám dorazila na email. Následne vám dorazí prístupové údaje k vášmu novému hostingu.

Povolenie IP adresy

ONEbit poskytuje pokročilé zabezpečenie, vďaka ktorému sa môžete na svoje stránky prihlásiť len z určitej nastavenej IP adresy. IP adresa je jednoducho povedané označenie počítača na internete. Ak by vám niekto odcudzil prístupové údaje a chcel sa na web pripojiť, musel by to urobiť z vášho počítača, inak by mal inú adresu a prístup by mu bol zamietnutý.

Túto adresu musíme najprv nastaviť v administrácii účtu. Prejdeme na web https://www.oneadmin.cz a vyberieme Administrácia ONEbit. Do dialógu zadáme údaje z emailu.

V administrácii sa presunieme do záložky Služby a v menu zvolíme FTP -> Povolené IP adresy / rozsahy. Pomocou tlačidla Pridať IP adresu / rozsah otvoríme dialóg, v ktorom len klikneme na "Vložiť moju IP adresu". Do poľa sa vloží vaša IP adresa. Môžete si k nej dať nejaký popis, napr. "Moja e z domova". Keď sa budete chcieť pripojiť napr. Zo školy alebo z práce, je potrebné pridať aj temější IP adresy.

Administráciu môžeme teraz zatvoriť.

Nahranie obsahu

K nahratie súborov na webhosting sa používa protokol FTP. Možno k tomu využiť buď webovú aplikáciu alebo desktopového FTP klienta. Využijeme druhú variantu, pretože je praktickejšie. Nikdy nenahrávajte obsah na FTP cez Prieskumníka Windows alebo cez Total Commander. Tieto nástroje neprevádza kódovanie zdrojových súborov a majú časté výpadky.

Stiahnite si program WinSCP z webu http://winscp.net/...docs/lang:cs a nainštalujte. Prípadne môžete použiť napríklad FileZilla. Pri inštalácii si môžete vybrať či chcete, aby aplikácia vyzerala ako explorer alebo ako commander. Mne viac sedí režim explorer.

Po spustení si vytvoríte nový FTP účet. FTP údaje vám prišli v emailu. Ako protokol vyberte FTP. Moje údaje vyzerajú takto:

Prihláste sa a otvorte priečinok www. Ak je v nej nejaký obsah, tak ho odstráňte a pretiahnite na okno všetky súbory v priečinku s vaším webom na počítači.

Gratulujem vám, máte teraz pekný a moderný web na kvalitnom webhostingu! Vyťukaj do prehliadača adresu a vyskúšajte si ho.

Kam ďalej

Web teda máte a celkom pekný. Ďalšie topí HTML a CSS sa dozviete v seriáli Moderné a profesionálne webové portfólio, kde sa vytvára podobný web, ale už na profesionálnej úrovni.

Ďalej si určite v sekcii HTML a CSS preštudujte slovenskej manuály k HTML a CSS. Je tam niekoľko vecí, ktoré sme ešte neskúšali a ktoré by sa vám mohli niekedy hodiť.

Až budete vedieť HTML a CSS veľmi dobre, môžete sa pozrieť na PHP, v ktorom je možné robiť dynamické weby, ako sú napr. Eshopy, fóra, redakčné systémy a podobne. Je po ňom veľká pracovná dopyt a beží na ňom veľa firiem.

Web s vyplnenými metainformáciami máte opäť v prílohe a ja sa na vás teším u ďalších kurzov na ITnetwork

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.