Slevový týden - Srpen
30 % bodů zdarma na online výuku díky naší Slevové akci!
Pouze tento týden sleva až 80 % na e-learning týkající se Javy.

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" />
Favicon v HTML

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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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.

Objenání ONEbit webhostingu

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.

Zadanie údajov ONEbit

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.

Administrácia webu u ONEbit

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.

Povolenie IP adresy u ONEbit

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:

Nahranie webu na FTP pomocou FTP klienta WinSCP

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


 

Stiahnuť

Stiahnuté 6734x (1.1 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

 

Predchádzajúci článok
Riešené úlohy k 14.-16. lekciu HTML a CSS
Všetky články v sekcii
Webové stránky krok za krokom
Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
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 university Autor sa informačné technológie naučil na Unicorn College - prestížnej súkromnej vysokej škole IT a ekonómie.
Aktivity (1)

 

 

Komentáre

Avatar
Niesomtu Hraskova:26.11.2018 20:57

preklep:Do každé podstránky vložíme 2 informace do vyhledávače.
oprava:Do každé podstránky vložíme 2 informace pre vyhledávače.

Odpovedať
26.11.2018 20:57
Hľadám si prácu, tak mi smelo napíš mail.
Avatar
Adam Svoboda
Člen
Avatar
Adam Svoboda:11. marca 10:36

Možná jsem to nečetl úplně celé úplně poctivě, ale mám 2 dotazy. Jak upravovat web až ho nahraju. A druhý je tento: Jak je možné že se média apod. na webu zobrazí, když je tam odkaz do paměti zařízení, ne na nějakou url stránku?

 
Odpovedať
11. marca 10:36
Avatar
Adam Svoboda
Člen
Avatar
Odpovedá na Adam Svoboda
Adam Svoboda:1. apríla 17:22

Už chápu

 
Odpovedať
1. apríla 17:22
Avatar
Gina Jana Dvořáková:7. apríla 10:33

Moc děkuji za krásně napsané lekce, které jako začátečník chápu a vše mi funguje jak má :-) Dále se posunu na PHP, a snad časem i na C# a C++ :-)

 
Odpovedať
7. apríla 10:33
Avatar
Matěj M
Člen
Avatar
Matěj M:6. mája 13:18

Já používám webzdarma.cz, konkrétně verzi zdarma a není to tak hrozné..!!

 
Odpovedať
6. mája 13:18
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Matěj M
Člen
Avatar
Matěj M:6. mája 13:26

Chtěl bych mooc poděkovat za tento úžasný seriál, který mi pomohl se naučit alespoň základy HTML a trochu CSS. Určitě budu pokračovat v učení!
Děkuju moc.
~ M.

 
Odpovedať
6. mája 13:26
Avatar
Selfis1
Člen
Avatar
Selfis1:9. júna 19:49

Ahoj hele záleží co na těch složkách chceš mít kupříkladu když máš server na kterým chceš mít webovou aplikaci je lepší mít vše ve složkách protože se v tom
1.lépe vyznáš **2. když máš webovou aplikaci např. vezmu itnetwork tak má adresa tohoto kurzu ** https://www.it­network.cz/html-css/webove-stranky/jak-psat-moderni-web-html-tutorial-nahrani-stranek-na-internet tak to je ve složce html-css a tento kurz je ve složce webové stránky a tam je ten kurz jak nahrát na web pomocí tvé pak domény jde vidět jako www.web.cz/slozka/neco a není to www.web.cz/…ka/neco.html

 
Odpovedať
9. júna 19:49
Avatar
Daniel Vítek
Redaktor
Avatar
Odpovedá na Selfis1
Daniel Vítek:10. júna 13:28

Struktura článků na ITnetworku rozhodně není na disku rozdělena do složek, to by bylo absolutně neudržitelné.

K tomuto účelu se používá tzv. Apache mod_rewrite, který ti umožňuje vytvářet různé "virtuální cesty".

ITnetwork používá další úroveň a cokoliv za prvním lomítkem se předává do PHP, kde se to dále rozpadá. Pokud tě to zajímá, koukni na tento kurz: https://www.itnetwork.cz/…er-kontroler

Editované 10. júna 13:29
Odpovedať
10. júna 13:28
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Selfis1
Člen
Avatar
Odpovedá na Daniel Vítek
Selfis1:10. júna 18:52

Aha děkuji za odpověd' .

 
Odpovedať
10. júna 18:52
Avatar
Elias Bim
Člen
Avatar
Elias Bim:30. júla 10:41

Díky moc za skvělý seriál :D

 
Odpovedať
30. júla 10:41
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!