informatika.bilíčka.sk

Webové stránky, HTML

Webové stránky využívajú architektúru klient-server, webový server poskytuje službu (webovú stránku), ktorú si môžeme zobraziť pomocou špeciálneho programu - webového prehliadača (klienta). Príkladom na webový prehliadač je Opera, Chrome, Internet Explorer, Safari, Brave, Tor,... Internetovému prehliadaču zvyčajne zadáme URL adresu, na ktorej sa nachádza nami žiadaná webová stránka (alebo len obrázok či iný súbor). (Po zadaní URL adresy môže prebehnúť dohľadanie IP adresy požadovaného servera v systéme DNS - o tom sme sa učili v rámci počítačových sietí.) Webový prehliadač odošle požiadavku na server a ten mu odpovie - v prípade, že sa všetko podarilo, odošle webový server nášmu prehliadaču súbory, z ktorých pozostáva webová stránka, aby ju mohol zobraziť používateľovi. (Niekedy sa to aj nepodarí, napríklad v prípade, že na požadovanej adrese nie je k dispozícii žiaden dokument, alebo napríklad nemáme k danej adrese prístup - vtedy nám prehliadač zobrazí známu hlášku s kódom, napríklad "404 Not Found".)

Webová stránka môže pozostávať z niekoľkých (aj stoviek) súborov. Ich obsahom je jednak "obsah stránky" - teda samotný text, ktorý sa nám zobrazí ale aj inštrukcie, ako má stránka vyzerať (čo má byť akou farbou, čo má byť kde umiestnené), prípadne ako sa má stránka správať (napríklad sa môže po kliknutí na nejaký element zobraziť animácia, stránka nás presmeruje na inú, ...).

Úloha

Vytvorte webovú stránku v jazyku HTML a publikujte ju cez svoj FTP účet na webiky.bilicka.sk. Stránka musí byť zobraziteľná navštívením webiky.bilicka.sk/vase_id (ako to docieliť, nájdete v návode nižšie) a spĺňať/obsahovať nasledovné:

Ak hľadáte námet na stránku:

Ak vytvoríte čosi (bilíčkarsky) zmysluplné, môžeme vašu stránku oceniť extra bodmi a tiež zavesiť na krajšiu adresu ako st.bilicka.sk/id, napríklad na vas_nazov.bilicka.sk, ak máte nápad, povedzte...

V ďalšom uvádzame stručný návod, ako postupovať pri tvorbe vašej webovej stránky, tak, aby spĺňala požiadavky zadania...

SERVER - Kam uložiť súbory stránky?

Kľudne kamkoľvek. :) Ak si však súbor uložíte len lokálne na počítači, nikto sa k nemu z verejného internetu nedostane. Na experimentálne účely hodín informatiky to ale určite stačí. Aby sa k súboru (a teda aj k našej stránke) dostali používatelia, je nutné ho nahrať na webový server. Na webový server sa súbory zvyčajne nahrávajú pomocou protokolu FTP (File Transfer Protocol). S týmto protokolom pracujú FTP klienti (programy, ktoré sa pomocou tohoto protokolu pripoja na vzdialený server a umožnia nám nahrávať naň súbory ako by sme ich len premiestňovali medzi priečinkami). Takýto program si môžete doma stiahnuť a vyskúšať (odporúčam program FileZilla alebo WinSCP), k dispozícii sú aj weboví ftp klienti.

Pre naše školské experimenty vám bol zriadený osobný FTP účet s prístupom k podstránke na subdoméne webiky.bilicka.sk. Súbory svojej stránky môžete na server nahrať pomocou webového FTP klienta dostupného na webftp.bilicka.sk. Prihlasovacie meno je v tvare meno.priezvisko a heslo je rovnaké ako pre prístup k vášmu @bilicka mailu - nájdete ho medzi známkami z informatiky na Edupage. Vaša stránka je dostupná na adrese webiky.bilicka.sk/xxx kde xxx je vaše ID, ktoré zistíte po prihlásení cez webového FTP klienta (je to 6 čísel, teda úplná adresa vašej stránky je niečo ako webiky.bilicka.sk/534234 a je dostupná celosvetovo).

Najprv sa zoznámte s FTP klientom a serverom

Choďte na stránku webftp.bilicka.sk a prihláste sa. Zobrazí sa vám čosi takéto:

web FTP manual

FTP login page

Po prihlásení...

Uvidíte obsah priečinku, ktorý je použitý ako zdrojový priečinok vašej stránky, sú tam dva súbory:

web FTP manual

FTP client environment

Najdôležitejší je súbor index.html...

Vašou úlohou bude postupne vytvoriť (upravit) obsah súboru index.html...
Názov "index" nie je náhodný, je to zauživaný štandard, webový server vie, ze ak sa niekto pokúsi zobraziť obsah vášho webu, má v zdrojovom priečinku hľadať práve takto pomenovaný súbor. Premenovať ho teda nie je dobrý nápad :)

web FTP manual

FTP html edit options

Integorovaný textový editor

Ak ste podľa predošlého kroku klikli na súbor "index.html" a vybrali možnosť "edit", zobrazí sa vám takýto editor. V ňom môžete vykonávať všetky zmeny podľa zadania a po uložení súboru (tlačítko vpravo dole) budú zmeny ihneď na serveri. Súbor HTML si môžete aj stiahnuť, upraviť ho vo vašom obľúbenom textovom editore na počítači a potom znova nahrať na server.

web FTP manual

FTP text editor

Vaša webstránka je verejná...

Takže na ňu nedávajte žiadne hlúposti!
Adresa vašej stránky je webiky.bilicka.sk/ID.

Pomocou URL webiky.bilicka.sk/ID pristupujete na webový server do svojho priečinka - ako ale server vie, ktorý súbor z neho chcete? Tu je práve uplatnené pravidlo, že webový server vám zobrazí (ak nájde) práve súbor pomenovaný "index". Rovnako by ste sa k tomuto súboru dostali, ak by ste napísali webiky.bilicka.sk/ID/index.html a takto je tiež možné dostať sa k ľubovoľnému súboru vo vašom priečinku, napríklad ak cez webftp.bilicka.sk nahráte aj nejaký obrázok, napríklad obrazok.png, každý si ho môže zobraziť na stránke webiky.bilicka.sk/ID/obrazok.png. Ak by ste vo svojom webovom priečinku vytvorili ďalší priečinok, napríklad s názvom "folder" a doň dali obrázok "obr.jpg", bol by verejne dostupný na webiky.bilicka.sk/ID/folder/obr.jpg.

web FTP manual

access your website

Nasledujú úlohy a návody ako splniť zadanie.
Všetky vyjadrujú, ako upraviť váš hlavný HTML dokument index.html.

HTML

Základnými súbormi, ktoré špecifikujú, čo bude obsahom stránok a aká bude ich štruktúra, sú textové súbory obsahujúce kód písaný v jazyku HTML (HyperText Markup Language). Jazyk HTML pozostáva z tagov (značiek), ktoré ich obsahu dodávajú štruktúru. Nie všetky informácie v súbore HTML sa na stránke priamo zobrazia ako text, súbor môže obsahovať aj informácie ako kam má smerovať odkaz v texte, aký obrázok sa má na nejakom mieste v rámci textu zobraziť (pričom obrázok je separátny súbor) alebo aký "pomocný" súbor špecifikuje vzhľad a rozloženie daného obsahu.

Jednoduchá webová stránka môže pozostávať aj z len jedného súboru obsahujúceho HTML kód. Úplným základom takéhoto súboru je nasledovné:

<!DOCTYPE html>
<html>
	<head>

	</head>
	<body>

	</body>
</html>

Značky v HTML sú len skratky alebo slová "obalené" v špicatých zátvorkách (znaky nerovnosti). Značky sú buď to nepárové (je len jedna) alebo párové - v tom prípade dvojica značiek (otváracia a zatváracia) obkolesujú obsah, ktorý tak zaraďujú do štruktúry dokumentu. Zatváracia značka má totožný základný text ako otváracia a navyše pred ním lomeno. V ukážke vyššie môžete vidieť tagy ako <html>, <head> či <body>. Neviditeľné znaky (viacnásobné medzery, prázdne riadky, tabulátory) v súbore HTML nehrajú rolu, zvykneme ich ale používať (ako vidíte v ukážke vyššie), aby bol súbor čitateľnejší. Dve základné veľké časti HTML súboru sú head a body. Do svojho HTML dokumentu skopírujte základnú štruktúru uvedenú v ukážke vyššie, v ďalšom postupe dotvoríte časti <head> a <body>.

Súbor HTML môžeme vytvoriť aj lokálne na počítači - je to len obyčajný textový súbor. Súbory obsahujúce HTML kód majú príponu .html. Vytvorte si na počítači priečinok, do ktorého budete postupne pridávať súbory svojej stránky. Na začiatok v priečinku vytvorte jediný súbor a pomenujte ho index.html. Tento súbor si následne otvorte v textovom editore (odporúčam program Notepad++) a zároveň v internetovom prehliadači. Ak súbor v editore upravíte a uložíte, v prehliadači po obnovení stránky (tlačidlo f5) uvidíte zmeny.

Súbor HTML - časť <head>

Táto časť neobsahuje informácie, ktoré by sa zobrazovali v hlavnom okne prehliadača ako stránka. HEAD je priestor, v ktorom špecifikujeme rôzne meta informácie o stránke (dodatočné informácie). Môžeme tu napríklad špecifikovať, aký text a ikona sa zobrazia v záhlaví stránky (ako pomenovanie tab-u v prehliadači) alebo kto je autorom stránky, opis stránky, ktorý môže uľahčiť prácu webovým vyhľadávačom alebo určenie súborov, ktoré ďalej špecifikujú ako má stránka vyzerať (čo je akou farbou a čo je kde umiestnené) alebo ako sa má stránka správať (čo sa stane napríklad po po kliknutí na nejaký komponent).

Zdrojový kód vo forme HTML kódu, akejkoľvek stránky, ktorú máte zobrazenú v prehliadači si môžete zobraziť. Kliknite kdekoľvek na stránke pravým tlačidlom myši a zvoľte možnosť "zobraziť zdrojový kód stránky". Zobrazte si zdrojový kód tejto stránky a zistíte, čo môže byť súčasťou sekcie HEAD.

Váš HTML súbor by mal obsahovať aspoň takúto základnú hlavičku:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="keywords" content="informatika, bilicka, gymnazium bilikova">
		<meta name="description" content="Výučba informatiky na gymnáziu Bilíkova v Bratislave.">
		<meta name="author" content="Martin">
		<title>Informatika | Bilicka.sk</title>
	</head>
	<body>

	</body>
</html>

Základné časti:

Upravte hlavičku svojho HTML dokumentu, aby obsahovala tieto časti. Upravte ju, aby reprezentovala Vašu stránku (zrejme bude treba zmeniť text uvedený v úvodzovkách za slovíčkom "content", upravte kľúčové slová, opis, meno autora a title podľa témy Vašej stránky).

Súbor HTML - časť <body>

V časti <body> definujeme, čo sa na stránke zobrazí. K dispozícii je tu k tomuto účelu mnoho HTML tagov. Zobrazovať môžeme obyčajný text, nadpisy rôznych úrovní, zoznamy (číslované alebo len "bodkované"), obrázky, videá, mapy, odkazy, ...

Tu nájdete zoznam HTML tagov s vysvetlením, praktickou ukážkou a mnoho ďalšieho. Pre úspešné vypracovanie domácej úlohy je nutné oboznámiť sa so značkami v sekciách headings, paragraphs, links, images, tables, formatting a lists na uvedenej stránke alebo tejto stránke (čítajte ďalej...)

V ďalších ukážkach sú uvedené úryvky kódu, ktorý je v HTML súbore potrebné vložiť medzi tagy <body> a </body>

Nadpisy (headlines)

Nadpisy ohraničujeme tagmi <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (a ich zatváracími variantami </h1>, </h2>, </h3>, </h4>, </h5>, </h6> ). Čím nižšie číslo, tým dôležitejší nadpis, niekedy sa tieto tagy označujú aj "nadpis prvej úrovne", "nadpis druhej úrovne" atď. podľa čísla v tagu. <h1> by na stránke vo všeobecnosti mal byť len jeden, je to hlavý nadpis - o čom stránka je (vo vašom prípade to teda bude podľa vašej témy čosi ako "Najdôležitejšie sviatky" alebo "Národné parky Slovenska"). Tagov <h2> môže byť na stránke viac, sú to podnadpisy, v prípade témy národných parkov, by ako nadpisy druhej úrovne <h2> mohli byť uvedené názvy konkrétnych parkov, ak ideme o každom písať čosi viac. <h3> sú "podpodnadpisy", teda napríklad o každom parku by to mohla byť "poloha", "fauna", "flóra". <h4> sú podpodpodnadpisy, <h5> sú podpodpodpodnadpisy a <h6> podpodpodpodpodnadpisy.

V HTML dokumente to potom môže vyzerať napríklad takto:

<h1>Národné parky Slovenska</h1>
<h2>Tatranský národný park (TANAP)</h2>
<h3>poloha</h3>
<h3>fauna</h3>
<h3>flóra</h3>
<h2>Pieniny (PIENAP)</h2>
<h3>poloha</h3>
<h3>fauna</h3>
<h3>flóra</h3>
<h2>Poloniny</h2>
<h3>poloha</h3>
<h3>fauna</h3>
<h3>flóra</h3>

Odstavce textu (paragraphs)

Jednoduché odstavce textu tvoria základ takmer každej stránky. Na jeden z nich sa práve pozeráte! Bloky textu sú v HTML obalené tagmi <p> a </p>. Pod každý nadpis či podnadpis (podľa toho, ako sa nám to hodí) môžeme pridať jeden alebo viac paragrafov textu.

V HTML to môže vyzerať napríklad takto:

<p>Jednoduché odstavce textu tvoria základ takmer každej stránky. Na jeden z nich sa práve pozeráte! Bloky textu sú v HTML obalené tagmi &lt;p&gt; a &lt;/p&gt;. Pod každý nadpis či podnadpis (podľa toho, ako sa nám to hodí) môžeme pridať jeden alebo viac paragrafov textu.</p>

Všimnite si, že ak chceme na stránke mať zobrazený nejaký HTML tag, musíme používať špeciálne kódové označenie tagov, inak by prehliadač nevedel, či tým tagom myslíme v rámci HTML kódu platný tag alebo chceme tag len zobraziť na stránke...

Bold, italic, podčiarknutie

V rámci paragrafu alebo nadpisu môžeme niektoré časti zvýrazniť štandardným formátovaním - bold (tučné písmo), italic (šikmé písmo) či podčiarknutím. Časť textu zvýrazníme tak, že ju obalíme do príslušných tagov, čo má byť tučným písmom obalíme do tagov <b> a </b>, čo má byť šikmým italicom, obalíme do tagov <i> a </i>, a čo má byť podčiarknuté, obalíme pomocou tagov <u> a </u>.

V kóde to potom môže vyzerať napríklad takto:

<h3>Posledné slovo nadpisu bude <u>podčiarknuté</u></h3>
<p>Niečo môže byť <b>tučnými písmenami</b> a niečo <i>pekne šikmo</i>.</p>
<p>Niečo môže byť aj naraz <u><b><i>podčiarknuté, šikmé a tučné.</i></b></u></p>

Na tejto stránke by takýto kód zobrazil takto:

Posledné slovo nadpisu bude podčiarknuté

Niečo môže byť tučnými písmenami a niečo pekne šikmo.

Niečo môže byť aj naraz podčiarknuté, šikmé a tučné.

(Ne)číslované zoznamy ((un)ordered lists)

Zoznamy sú trošku komplikovanejšia štruktúra - celý zoznam ohraničujú tagy <ul> a </ul> v prípade nečíslovaného zoznamu alebo <ol> a </ol> v prípade číslovaného. Každý prvok zoznamu je obalený v tagoch <li> a </li> (list item).

V HTML to vyzerá nasledovne:

<h3>Top živočíchy žijúce v TANAPe:</h3>
<ul>
	<li>kamzík</li>
	<li>svišť</li>
	<li>orol</li>
	<li><b>veverička (toto bude celé boldom)</b></li>
</ul>

Vnútri tagov <li> a </li> môžete samozrejme používať bold, italic a underline.

Tabuľky

Tabuľky umožňujú prehľadne zobraziť čo treba - rebríčky, rozvrhy, kategórie, ... Podobne ako všade inde sa skladajú z riadkov a stĺpcov. Celá tabuľka je obalená v tagoch <table> a </table>. V týchto tagoch je niekoľko dvojíc tagov <tr> a </tr>, ktoré označujú jednotlivé riadky (table row). V rámci každého <tr> </tr> je niekoľko tagov <td> a </td>, ktoré ohraničujú každú jednu bunku tabuľky. Jedinou výnimkou je prvý riadok, v ktorom namiesto <td> a </td> používame <th> a </th>, čo označuje nadpisy stĺpcov.

Ukážka:

<table>
	<tr>
		<th>Meno</th>
		<th>Priezvisko</th>
		<th>rocnik</th>
		<th>znamka z informatiky</th>
	</tr>
	<tr>
		<td>Emanuel</td>
		<td>Bacigala</td>
		<td>3</td>
		<td>4</td>
	</tr>
	<tr>
		<td>Banála</td>
		<td>Anášová</td>
		<td>2</td>
		<td>1</td>
	</tr>
</table>

Toto by sa na stránke zobrazilo nasledovne:

Meno Priezvisko rocnik znamka z informatiky
Emanuel Bacigala 3 4
Banála Anášová 2 1

Odkazy

Odkaz je zvyčajne kus textu, na ktorý keď sa klikne, prehliadač nám zobrazí nejakú inú stránku. Odkaz môže byť na stránke akýkoľvek kus textu (kľudne aj len jedno písmenko, alebo aj celý paragraf), odkaz môže byť použitý v rámci nadpisu, paragrafu ale aj tabuľky. Text, ktorý má po kliknutí používateľa kamsi presmerovať, obalíme pomocou tagov <a> a </a>. V otváracom tagu <a> šepcifikujeme pomocou atribútu href, kam bude link smerovať. Ak by sme chceli napríklad vytvoriť link na slovách "túto super stránku", ktorý by smeroval na inf.bilicka.sk, mohli by sme do HTML súboru napísať:

<p>Poď sa pozrieť na <a href="https://bilicka.sk">túto super stránku</a>, budeš prekvapený.</p>

Takýto HTML kód sa v prehliadači zobrazí nasledovne:

Poď sa pozrieť na túto super stránku, budeš prekvapený.

Obrázky

Priložiť na stránku obrázok nie je žiadna veda! Slúži na to nepárový tag img. Tagu musíme pomocou parametra src (source) špecifikovať umiestnenie obrázka. Dobrým zvykom je špecifikovať tiež parameter alt, ktorý sa zobrazí, ak sa obrázok nepodarí načítať z umiestnenia uvedeného v src a tiež je použitý napríklad pri prezeraní stránky zrakovo postihnutými, ktorý na "prezeranie" stránok používajú špeciálne čítačky prevádzajúce písaný text na hovorený (ak čítačka narazí na obrázok, prečíta text uvedený pomocou atribútu alt). Pomôcť vám môžu aj atribúty width a height, ktorými môžeme špecifikovať rozmery obrázka v pixloch. Jediným nevyhnutným tagom je src, alt je silno odporúčaný a ostatné dobrovoľné.

V HTML to môže vyzerať napríklad takto:

<img src="vysoketatry.jpg" alt="Pohlad na Vysoke Tatry" width="350">

Pozor! Príklad vyššie bude fungovať len v prípade, že obrázok vysoketatry.jpg bude v rovnakom priečinku ako náš HTML dokument. V src môžeme tiež špecifikovať url adresu obrázka, ktorý sa nachádza kdekoľvek na internete, napríklad:

<img src="https://inf.bilicka.sk/6/image/ytb_embed_procedure_1.png" alt="Pohlad na Vysoke Tatry" width="350">

YouTube video

YouTube vie sám vygenerovať kus kódu, ktorý stačí vložiť do HTML dokumentu a na jeho miesto bude vložený cool YouTube prehrávač. Pre vygenerovanie kódu postupujte nasledovne:

Vyhľadajte video, ktoré chcete vložiť. Pod videom kliknite na možnosť "zdieľať".

Otvorí sa nové okno, vyberte možnosť "vložiť".

Otvorí sa okno, v ktorom bude v pravej časti kód, ktorý treba vložiť do vášho HTML kódu. Skopírujte...

Do vášho HTML dokumentu pridáte čosi ako:

<iframe width="560" height="315" src="https://www.youtube.com/embed/a4xMGTZY4yQ?si=tryODQCoLdCYbxxT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>