17. díl - Nahrání webu na internet

HTML a CSS Statický web Nahrání webu na internet American English version English version

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Stylování tabulek a galerie fotek v HTML a CSS, jsme dokončili náš web. V dnešním tutoriálu ho nahrajeme na internet.

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.

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 :)


 

Stáhnout

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

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
38 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (8)

 

 

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

Avatar
Adam Ježek
Tým ITnetwork
Avatar
Adam Ježek:28.12.2015 0:55

Za prvné, popiš to trochu srozumitelněji a detailněji, nejsem si jistý že přesně chápu co máš za problém(ale tipuju něco s pozicováním).
Za druhé, svůj dotaz napiš raději do fóra, tak se dočkáš rychlejší a lepší odpovědi. http://www.itnetwork.cz/…s-webtvorba/

Odpovědět 28.12.2015 0:55
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Michal Štěpánek:28.12.2015 10:07

To je přece logické. Footer je patička, tzn., že je na konci stránky. Když do patičky "narveš" celou stránku, kam bys chtěl pak scrolovat?

Odpovědět 28.12.2015 10:07
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
David Tilšer:11.1.2016 22:31

Famózní seriál na HTML a CSS. Klobouk dolů!

Odpovědět  +3 11.1.2016 22:31
Odpočinek je pro slabochy.
Avatar
Petr Galeta
Člen
Avatar
Petr Galeta:10.5.2016 14:17

Ahoj, dokončil jsem paralélně web s návodem a umístil na hosting. Když jsem zkusil validovat přes w3c, vyhodilo mi to informaci:

Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

From line 39, column 5; to line 39, column 13

↩ ↩ <section>↩ <

Zkusil jsem stáhnout zdroják příkladu z návodu a též jej validovat, ale vyhazuje podobnou chybu asi jen na jiném místě v kódu.
Warning: Section lacks heading. Consider using h2-h6 elements to add identifying headings to all sections.

From line 34, column 5; to line 34, column 13

>↩ ↩ <section>↩

Warning: Consider using the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).

From line 31, column 6; to line 31, column 9

er> ↩ <h1>O mně<

Nevíte v čem je zakopaný pes?

 
Odpovědět  +1 10.5.2016 14:17
Avatar
Andrej Kuraksa:16.5.2017 14:59

Děkuji za rady

Editováno 16.5.2017 15:02
 
Odpovědět 16.5.2017 14:59
Avatar
Honza Rada
Člen
Avatar
Honza Rada:4.6.2017 15:27

Super Seriál děkuji

Odpovědět 4.6.2017 15:27
#c#
Avatar
Daniel Vraspír:9.11.2017 22:56

Zdravím,
asi jsem úplně mimo ale nechápu, jak to nahrání na WinSPC vlastně funguje. Všechno mám hotové. Stránky propojené, obrázky taky fungují a poslední věci z tohoto tutoriálu tak také jsou. Koupil jsem si ten home a samozřejmě dostal ty přihlašovací údaje. Na onebitu jsem si aktivoval svojí IP adresu. Stáhl jsem si následně WinSCP, přihlásil se a do složky www hodil soubory. (Vůbec nevím jestli v tom musí být systém. Prostě jsem tam přetáhl celou složku s celým mým webem.) To se úspěšně nahrálo a teď ta otázka. Co teď? Na své doméně mi to napsalo "No index
Vítejte
Na této doméně chybí indexní soubor (index.php, index.html). Vlastník zřejmě zatím nenahrál na server své stránky. Zkuste to prosím později."
Ale jak to? Kde je chyba? Vždyť jsem vše udělal podle tutoriálu. Musím to ještě někde uložit, potvrdit nebo jaký to má vlastně systém. Popřípadě jestli někoho napadá, kde jsem udělal chybu? Předem děkuji za všechny rady a omlouvám se, za svojí dost možná hloupou otázku.

 
Odpovědět 9.11.2017 22:56
Avatar
Petr Stastny
Redaktor
Avatar
Odpovídá na Daniel Vraspír
Petr Stastny:9.11.2017 23:31

S onebitem jsem nikdy nepracoval, ale zkus presunout vsechny soubory do korenove slozky webu (proste tam nahraj soubory rovnou, nedavej je do dalsi slozky) a soubor, ktery chces, aby se ti otevrel pojmenuj index.html

Kdyby to neslo, zeptej se primo OneBitu, meli by mit dobrou podporu.

 
Odpovědět 9.11.2017 23:31
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Daniel Vraspír
David Čápka:10.11.2017 0:57

Buď jsi to nahrál do špatné složky nebo jsi tam nechal nějaký index soubor. Mohlo se také stát, že tam byl od nich třeba index.htm a ty jsi nahrál index.html nebo tak něco.

Odpovědět 10.11.2017 0:57
Miluji svou práci a zdejší komunitu, baví mě se rozvíjet, děkuji každému členovi za to, že zde působí.
Avatar
Odpovídá na David Čápka
Daniel Vraspír:10.11.2017 12:49

Tak jsem na to přišel. Měl jsem tam rovnou několik chyb. První byla ten index, který byl opravdu jiný. Ale před vložením jsem všechny soubory smazal, takže nevím, jak se to mohlo stát. No a pak jsem to neměl přes odkazy propojené, neboť jsem to dělal dost nesématickým způsobem. Jednotlivé stránky jsem si vkládal do samostatných složek, aby složky s webem tvořili strom jako na webu a tím jsem chtěl docílit větší přehlednosti ale jen jsem to tím celé zhoršil. Navíc odkaz na další stránku nebyl udělaná npř. Obrazky/auto.jpg ale takto C:\Web/Obazky/au­to.jpg. Teď už mám web v pořádku a přehledný. Každopádně chybami se člověk učí a já děkuji Petrovi a Davidovi za ochotu. :)

 
Odpovědět 10.11.2017 12:49
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 105. Zobrazit vše