Lekce 17 - Nahrání webu na internet

V předešlém cvičení, Řešené úlohy k 14.-16. lekci HTML a CSS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

V dnešním HTML/CSS tutoriálu nahrajeme náš web na webhosting.

Nahrání webu na internet

Pro své hotové webové stránky nyní potřebujeme webhosting a doménu. Webhosting je prostor na vzdáleném serveru, kam můžeme nahrát naše stránky. Doména je adresa, přes kterou budou naše stránky z internetu přístupné. Webhosting i doména pro běžný web jsou velmi levná záležitost, obvykle se pohybují v řádech desítek korun měsíčně.

Existují i tzv. freehostingy, ale ty jsou poměrně nekvalitní, s reklamami a neobsahují spoustu služeb, které by vám mohly chybět. Pokud se chcete v oblasti webů rozvíjet a učit, tak určitě zvolte klasický hosting. Zájemcům doporučuji přečíst článek 10 rad, díky kterým neuděláte při výběru webhostingu chybu.

Z českých hostingů vychází nejlépe https://www.onebit.cz, na kterém hostuje i ITnetwork. Má kvalitní podporu, která vždy ochotně poradí s čímkoli, co vám nefunguje, vaše data zálohuje a má propracovanou administraci, kde si můžete nastavit spoustu funkcí a vyzkoušet si zajímavé technologie.

Registrace na onebit.cz

Přejděte na web https://www.onebit.cz a v navigačním menu zvolte webhosting. Zde budete dotázáni na variantu (tarif) webhostingu. Doporučuji vybrat variantu Start, která obsahuje i PHP a umožní vám do webu později přidávat dynamické prvky jako diskuze a podobně.

Na konci formuláře si zvolte svou doménu. Doporučuji volit co nejkratší, bez pomlček a s koncovkou .cz:

Pod formulářem se nachází tlačítko pro ověření, kterým zjistíte, zda je zadaná doména volná. Pokud ne, musíte si vymyslet jinou.

V dalším kroku formuláře stačí již jen vyplnit kontakt. K doméně je vyžadováno datum narození a to proto, aby bylo jednoznačně dané komu patří a předešlo se případným sporům o její vlastnictví. Ze stejného důvodu zadáváte i telefon:

Po odeslání stačí již jen potvrdit objednávku a uhradit fakturu, která vám dorazila na email. Následně vám dorazí přístupové údaje k vašemu novému hostingu.

Povolení IP adresy

ONEbit poskytuje pokročilé zabezpečení, díky kterému se můžete na své stránky přihlásit jen z určité nastavené IP adresy. IP adresa je jednoduše řečeno označení počítače na internetu. Pokud by vám někdo odcizil přístupové údaje a chtěl se na web připojit, musel by to provést z vašeho počítače, jinak by měl jinou adresu a přístup by mu byl zamítnut.

Tuto adresu musíme nejprve nastavit v administraci účtu. Přejdeme na web https://www.oneadmin.cz, kde do dialogu zadáme údaje z emailu:

V administraci se přesuneme do záložky Služby a v menu zvolíme FTP ➜ Povolené IP adresy/rozsahy. Pomocí tlačítka Přidat IP adresu/rozsah otevřeme dialog, ve kterém jen klikneme na Vložit moji IP adresu. Do pole se vloží vaše IP adresa. Můžete si k ní dát nějaký popisek, např. "Má adresa z domova". Když se budete chtít připojit např. ze školy nebo z práce, je třeba přidat i tamější IP adresy:

Administraci můžeme nyní zavřít.

Nahrání obsahu

K nahrání souborů na webhosting se používá protokol FTP (protokol pro přenos souborů mezi počítači pomocí sítě). Lze k tomu využít buď webovou aplikaci nebo desktopového FTP klienta. Využijeme druhou variantu, jelikož je praktičtější.

Nikdy nenahrávejte obsah na FTP přes Průzkumníka Windows nebo přes Total Commander! Tyto nástroje nepřevádí kódování zdrojových souborů a mají časté výpadky.

Stáhněte si program WinSCP z webu http://winscp.net/…docs/lang:cs a nainstalujte. Případně můžete použít třeba FileZillu. Při instalaci si můžete vybrat jestli chcete, aby aplikace vypadala jako explorer nebo jako commander. Mně více sedí režim explorer.

Po spuštění si vytvoříte nový FTP účet. FTP údaje vám přišly v emailu. Jako protokol vyberte FTP. Mé údaje vypadají takto:

Přihlaste se a otevřete složku www/. Pokud je v ní nějaký obsah, tak ho odstraňte a přetáhněte na okno všechny soubory ve složce s vaším webem na počítači.

Gratuluji vám, máte nyní pěkný a moderní web na kvalitním webhostingu! Vyťukejte do prohlížeče adresu a vyzkoušejte si ho.

Kam dál

Web tedy máte a docela pěkný. Další taje HTML a CSS se dozvíte v seriálu Moderní a profesionální webové portfolio, kde se vytváří podobný web, ale již na profesionální úrovni.

Dále si určitě v sekci HTML a CSS prostudujte české manuály k HTML a CSS. Je tam několik věcí, které jsme ještě nezkoušeli a které by se vám mohly někdy hodit.

Až budete umět HTML a CSS velmi dobře, můžete se podívat na PHP, ve kterém lze dělat dynamické weby, jako jsou např. eshopy, fóra, redakční systémy a podobně. Je po něm velká pracovní poptávka a běží na něm spousta firem.

Web s vyplněnými metainformacemi máte opět v příloze a já se na vás těším u dalších kurzů na ITnetwork 🙂

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.