Pouze tento týden sleva až 80 % na e-learning týkající se C# .NET
Využij akce až 80% zdarma při nákupu e-learningu. Více informací .
C# week

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.

Meta tagy

Podstránky webu máme hotové, ale v jejich hlavičkách nám chybí poslední věc. Až bude web online, všimnou si ho internetové vyhledávače a jeho podstránky si tzv. zaindexují. Zjednodušeně řečeno si uloží co na nich je, aby je pak mohli zobrazovat mezi výsledky, když někdo něco hledá. To je pro nás velmi důležité, protože právě takhle se na náš web dostanou návštěvníci.

Do každé podstránky vložíme 2 informace do vyhledávače. První informací je krátký popisek toho, co je na stránce. Další je seznam několika klíčových slov, které opět souvisí s obsahem stránky. Ještě jednou zopakuji, že kód vkládáme do hlavičky <head>. Každá stránka má samozřejmě v popisu něco jiného, pro index.html by to mohlo vypadat takto:

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

Tag meta již známe, používali jsme ho k určení kódování stránky. Když jsme u meta informací, můžeme vložit i údaje o tom, kdo stránku vytvořil:

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

V hlavičce zůstaňme ještě na poslední okamžik a nastavme našim webovým stránkám favicon. Jedná se o tu malou ikonku, která se zobrazí v záložce vašeho webového prohlížeče. Pro ikonku půjdeme jako vždy na iconfinder.com, stáhneme si jí ve velikosti 16x16 pixelů ve formátu ico a uložíme jí do složky obrázky. Do hlavičky přidáme odkaz na ikonu:

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

Pozn. v některých verzích Google Chrome se ikona na lokálních stránkách nezobrazí.

Metainformace si doplňte do všech podstránek webu. Nyní jsme připraveni nahrát stránky na internet.

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ě.

Pozn. 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.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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. Budete dotázáni zda chcete osobní nebo firemní. V našem případě vybereme, že chceme osobní web. Doporučuji vybrat variantu Lite, 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.

Objenání ONEbit webhostingu

Pod formulářem se nachází tlačítko ověřit, 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.

Zadání údajů ONEbit

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 a vybereme Administrace ONEbit. Do dialogu zadáme údaje z emailu.

Administrace webu u ONEbit

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 temější IP adresy.

Povolení IP adresy u ONEbit

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

Nahrání obsahu

K nahrání souborů na webhosting se používá protokol FTP. 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:

Nahrání webu na FTP pomocí FTP klienta WinSCP

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 spoustu 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š.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 7157x (1.1 MB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Řešené úlohy k 14.-16. lekci HTML a CSS
Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
59 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (11)

 

 

Komentáře
Zobrazit starší komentáře (128)

Avatar
Vlada
Člen
Avatar
Vlada:20.9.2020 23:52

Super, děkuji za seriál. Určitě budu pokračovat.

 
Odpovědět
20.9.2020 23:52
Avatar
Kristián Lörincz:21.9.2020 22:43

Ahoj, tak nakonec je stránka zdárně na webu, ale nebylo to úplně bez komplikací. A jenom takový poznatek - nezobrazoval se mi na webu 1 obrázek, ale na počítači se mi normálně zobrazoval (kód byl ten samý). Nemohl jsem přijít na to, co mi tam chybí a nakonec jsem si všiml, že mám příponu jpg napsanou capslockem JPG. Když jsem to na stránkách změnil, tak obrázek hned fungoval. Nemáte někdo podobnou zkušenost? Je to taková kravinka, ale chvilku mě potrápila... :-)
A nakonec samozřejmě děkuji, děláte to skvěle.

 
Odpovědět
21.9.2020 22:43
Avatar
Odpovídá na Kristián Lörincz
Tomáš Maňhal:21.9.2020 23:17

Občas se mi to stává taky. Některé FTP na hostingu mají case sensitive filesystem. Je třeba to hlídat.

 
Odpovědět
21.9.2020 23:17
Avatar
Lukáš Ptáček:17. ledna 17:20

Úplně ideální seriál na základy HTML a CSS. Určitě budu doporučovat mému okolí. Děkuji týmu ITnetwork za materiály a za úkoly na procvičování nabitých vědomostí :-)

Odpovědět
17. ledna 17:20
Nic není nemožné
Avatar
Petr Konečný:22. května 13:34

Děkuji za skvělý seriál

 
Odpovědět
22. května 13:34
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Dušan Kovářík:29. května 9:05

Dokončeno. Díky za seriál. Nevím, jestli někdy budu umět CSS "velmi dobře" - naučit se dobře stylování mně osobně přijde časově náročnější než se naučit například základní konstrukce a základy OOP v C# .NET nebo Javě. Jenže dnešní trend jsou aplikace webové, takže člověk se bez dobré znalosti CSS zřejmě neobejde... Nebo stačí základy?
Můžete mi, prosím, někdo poradit?
Nakolik dobře bych se měl stylování stránek naučit? Kolik času bych s tím měl strávit, než se vrhnu např. na ASP.NET nebo aspoň PHP, případně na front-endu JavaScript? Nebo mám dál pokračovat nějak souběžně?
Pamatuji si, že zde na ITnetwork byl před časem článek, kde autor psal, abychom se z HTML a CSS naučili základy, ale neztráceli s tím příliš mnoho času. Co si o tom myslíte?
Nechci nic ošidit, jen mě zajímá ta adekvátní míra.
Díky!

 
Odpovědět
29. května 9:05
Avatar
Petr Havlík
Člen
Avatar
Petr Havlík:14. června 22:03

Je to zvláštní, ale tvorba internetových stránek mi jde rozhodně lépe než C#.NET... To byl debakl s velkým D. Aneb „ševče, drž se svého kopyta"... Tvorba webů, mobilních aplikací (a když půjde PHP tak i e -shopů na míru) mě láká víc, a hlavně vím že mi jde. Díky kurzům na IT network jsem zjistil čemu se vyhnout, a naopak...
Díky moc!

Editováno 14. června 22:05
 
Odpovědět
14. června 22:03
Avatar
Odpovídá na Petr Havlík
Dušan Kovářík:16. června 3:04

Tak to palec nahoru. Ono se to možná nezdá, ale zjistit, kde jsou tvoje silné stránky a kde až tak ne, je z mého pohledu samo o sobě velká výhra. Zkrátka přesně, jak jsi to napsal: "Ševče, drž se svého kopyta." Vždycky mě fascinovala "moudrost přírody", která jakoby přesně věděla, jaké rozmanité talenty každému nadělit, aby společnost fungovala jako celek. Škoda, že si to každý neuvědomí, nebo se tím neřídí, tak jako ty. Myslím si, že bychom se všichni mnohem lépe doplňovali a žili v lepším světě. Přeju, ať se daří!

 
Odpovědět
16. června 3:04
Avatar
Petr Havlík
Člen
Avatar
 
Odpovědět
17. června 17:53
Avatar
Katka Mlázovská:1. července 17:50

Skvělý tutoriál - díky moc! :-)

 
Odpovědět
1. července 17:50
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 138. Zobrazit vše