HTML/CSS 1: úvod do HTML

TEÓRIA: Veľmi stručne o internete

Web a Jazyky

Webstránky budeme písať v jazyku HTML. HTML (Hypertext Markup Language) nie je programovací jazyk, je to iba formátovací jazyk, čiže neviete v ňom programovať, iba mu diktovať ako má daný obsah zobraziť. Spolu s html sa budeme učiť css (Cascading Style Sheets), čo je taký pomocník pre HTML. Tieto dva jazyky spolupracujú, v praxi sa používajú vždy spolu.

Ak chcete na stránke aj programovať, väčšinou sa zvykne používať JavaScript (k tomu sa zrejme aj trošku dostaneme) a PHP (k tomuto sa nedostaneme). PHP zvykne pracovať s tzv. databázami, napríklad MySQL.

Ako to dať na internet?

Stručne a zjednodušene, každá webstránka, ktorú nájdete na internete je uložená na nejakom serveri. Server je v podstate obyčajný počítač správnym spôsobom sprístupnený internet (reálne je možné kúpiť si normálny počítač v obchode a vyrobiť z neho server). Svoju stránku vo forme .html súboru si uložíte na server (prípadne spolu so všetkými ďalšími súbormi, ktoré využíva).

Človek, ktorý si chce danú stránku zobraziť zo svojho počítača, sa v tomto vzťahu nazýva klient.

Čo sa deje: Klient požiada o zobrazenie webstránky (napríklad wikipedia.org). Jeho výkrik zachytí tzv DNS (domain name system) a pošle mu adresu servera (to už je iba hromada čísel). Teraz už klient môže komunikovať so serverom.

Server pošle klientovi html súbor a jeho browser (chrome/firefox/…) mu ho zobrazí. Teda samotné vykonanie html kódu sa deje u klienta, server už na neho nemá dosah. Teoreticky by mohol klient prikázať svojmu browseru, aby stránku zobrazil nejak inak, napríklad všetko písmo prefarbil nazeleno. Toto v podstate robia adblockery – prepisujú html kód, aby sa v ňom niektoré časti nezobrazili.

A čo tie programovacie jazyky?

JavaScript sa vykonáva u klienta, je v ňom možné robiť nejaké miniaplikácie/hry, dekoratívne prvky a dynamické súčasti stránky. JavaScript je pre vás bezpečný. Nech si so stránkou klient porobí čo chce, servera sa to nedotkne.

PHP sa vykonáva u servera. V php sa programujú všetky súčasti stránky, kde musíte nejak komunikovať so serverom – napríklad účty a prihlasovanie, komentáre, nakupovanie, atď. PHP má v sebe riziká. Tým, že musí pracovať s údajmi od klienta, je tu riziko krádeže údajov počas cesty od klienta k serveru. Druhá hlavné riziko je, že vám klient napríklad miesto svojich prihlasovacích údajov pošle škodlivý kód.

Čo ja teraz s tým?

Na cvičeniach viete pracovať aj bez internetu. HTML stránku si viete zobraziť v browseri aj bez servera, jednoducho z počítača. Ak by ste chceli používať PHP, treba si už nejaký server zadovážiť a šupnúť to tam.

Ak si chcete v reálnom živote urobiť vlastný web, potrebujete doménu (teda svoje meno a adresu pre DNS) a hosting (teda priestor na nejakom serveri). Oboje sa dá ľahko kúpiť od rôznych dodávateľov, ktorí vám to aj sami poprepájajú. Vlastná doména stojí rádovo 20€ ročne, hosting okolo 60€ ročne (rôzne domény sú rôzne drahé a hosting je veľmi závislý od toho, koľko priestoru pre stránku chcete). Napríklad ja používam websupport.

PRAX: Primitívne formátovanie textu

Takže ideme si vytvoriť našu prvú webstránku. Aké je minimum, aby ju nám vedel browser prečítať? V skutočnosti takmer žiadne. Ak si vytvoríte notepad (poznámkový blok), niečo doňho napíšete a uložíte to ako „index.html“, tak už to browser otvorí. (pozn: "index" je štandardné meno pre domovskú stránku - ak ju máte na serveri, ten najskôr hľadá niečo s menom index. Ináč fungovať vám bude, aj keď si to nazvete ľubovoľne inak)

Vyskúšajte si to. Použite aj medzery a nové riadky, nech vidíte, ako to reaguje.

Z tohto pokusu nám plynú tri ponaučenia:

  1. Bežný browser sa nám stránku snaží za každú cenu otvoriť a pekne zobraziť, nech je hocijako debilne a nekorektne napísaná.
  2. Html kód neregistruje viac ako jednu medzeru, ani odsadenie pomocou tabulátoru.
  3. Html kód neregistruje nový riadok.

Teraz si vyskúšame nejaké primitívne formátovanie.

Základnou stavebnou jednotkou sú tzv. tagy. Píšu sa pomocou lomených zátvoriek a skladajú sa zo začiatočného a koncového tagu, ktoré ohraničujú obsah tagu. Napríklad tag pre nadpis vyzerá takto:

<h1>Nadpis</h1>

Skúste si ho doplniť do vašej webstránky a znova ju otvoriť (alebo refreshnúť).

(väčšina browserov používa tlačítko F5 ako skratku na refresh stránky)

Kúsok textu, ktorý ohraničíte tagom h1 sa vám premení na nadpis – zmení sa mu písmo na tučné a veľké a odsadí sa na samostatný riadok.

Napriek tomu, že nám browser prečíta takmer hocičo, budeme chcieť robiť korektný html kód. A to hlavne z dvoch dôvodov:

  1. Každú nekorektnosť a nejasnosť si browser vyloží po svojom, podľa nálady. Nemáte záruku, že stránku bude fungovať rovnako v inom browseri, dokonca ani v novej verzii browsera..
  2. Nekorektné stránky google zle vyhľadáva a často aj ignoruje. Ak vás google nenájde, tak ste skončili. O tomto si povieme viac neskôr.

Takže poďme si to trochu zlepšiť.

Za prvé, stránku NEBUDEME vyrábať v poznámkovom bloku, lebo nie sme blbí. Na html/css existuje veľmi veľa pekných editorov.

Na školských počítačoch zvykol byť Komodo Edit. Ja osobne mám rada Brackets, tento budem používať aj na cvičeniach. Popravde, takmer hocijaký, čo si stiahnete z internetu, bude dobrý, aspoň na to naše html a css. V zásade nám ide iba o to, aby nám náš editor zvýrazňoval syntax a ponúkal slová na doplnenie.

Nejaký editor si stiahnite a nainštalujte. Otvorte si v ňom vašu stránku.

Hneď je to krajšie, že? Takže skúsime si na ňom nejaký iný tag, napríklad <strong>. Editor vám ho ponúkne a môžete ho automaticky doplniť (v brackets enterom)

Strong nám zvýraznil text tučným písmom, ale nechal ho v riadku.

Tak už sa nám pracuje lepšie, ale naša stránka je stále nekorektná. Tak si ju poďme opraviť.

Čo musí obsahovať každá stránka?

Nevyhutné súčasti stránky sú:

Vložte si tieto časti do vášho súboru a vyskúšame si nejaké základné tagy. Budeme ich postupne dopisovať do časti body. Kadždý tag si vyskúšajte u seba.

Základné tagy

Heading = nadpis

V html existuje 6 úrovní nadpisov, sú očíslované 1, až 6

<h1>Nadpis</h1>
<h2>Podnadpis</h2>
<h3>Podpodnadpis</h3>
<h4>Podpodpodnadpis</h4>
<h5>Podpodpodpodnadpis</h5>
<h6>Podpodpodpodpodnadpis</h6>

Paragraph = blok textu

<p>blok textu</p>

Ak zatiaľ nemáte pripravený konkrétny text, vo svete webstránok sa ako placeholder používa tzv. Lorem Ipsum – je to fiktívny text generovaný pomocou latinskej knihy, jeho účelom je simulovať prirodzene vyzerajúci text (je to iba nato, aby ste nepoužívali niečo ako "text text text text text", pretože to pôsobí neprirodzene a rušivo). Na internete nájdete veľa generátorov Lorem Ipsum, napríklad na lipsum.com.

Anchor = link

Tag a je link na nejaký súbor, ktorý môže byť vnútorný (napríklad podstránka), ale aj vonkajší (niekde na internete). Teraz prvýkrát dáme tagu aj atribút (nejakú vlastnosť), musíme mu totiž povedať na akú adresu má odkazovať. Atribút píšeme vždy do začiatočného tagu. Náš atribút sa volá href (hypertext reference). Atribútu priradíme nejakú hodnotu, tá sa vždy píše za znak "=" do úvodzoviek. V našom prípade bude hodnotou konkrétna adresa.

<a href="https://www.wikipedia.org/">Link na wikipédiu</a>

Iný atribút, ktorý tu vieme využiť sa volá target – hovorí, na akom okne sa nám link otvorí. Hodnota "_blank" znamená, že sa nám link otvorí na novom okne.

<a href="https://www.wikipedia.org/" target="_blank">Link na wikipédiu</a>

Pomocou atribútov vlastne vieme meniť vlastnosti tagu.

Undordered list, ordered list = nečíslovaný a číslovaný zoznam

Tagy unordered list (ul) aj ordered list (ol) fungujú rovnako, rozdiel je iba v tom, či vám ako výsledok vypíšu odrážky, alebo čísla. Jednotlivé položky zoznamu sa dávajú v obidvoch prípadoch do tagu li (list item)

<ul>
	<li>prvá položka</li>
	<li>druhá položka</li>
	<li>tretia položka</li>
</ul>

Ak chcete mať zoznam rozvetvený, treba do konkrétnej položky zoznamu vložiť druhý zoznam.

<ol>
	<li>ja som 1</li>
	<li>ja som 2</li>
	<li>
		<ol>
			<li> ja som 3.1 </li>
			<li> ja som 3.2 </li>
			<li> ja som 3.3 </li>
		</ol>
	</li>
</ol>

V obidvoch prípadoch platí, že ľubovoľný obsah existujúci v číslovanom/nečíslovanom zozname MUSÍ byť vnútri tagu li. Ak dáte niečo do ol, ale mimo li, bude z toho nekorektný kód.

Image = obrázok

Tagy sa delia na dve základné skupiny – párové a nepárové. Všetky doposiaľ použité tagy boli párového typu – mali začiatočný a koncový tag, ktorý niečo ohraničoval. Nepárový tag má iba jeden komponent. Príkladom je obrázok.

Do tagu image treba ako atribút src (source) vložiť adresu, odkiaľ obrázok načíta. Môže byt lokálna (obrázok uložený hneď pri súbore index.html), alebo vonkajšia (niekde na internete).

<img src=”https://upload.wikimedia.org/wikipedia/commons/3/3e/Bunny_Nibbler.jpg” />

Nepárový tag je ukončený lomkou na konci tagu. Ak ju tam nedáte, kód vám zbehne aj tak, ale takto je to korektnejšie. Je to určené na to, aby browser nemusel hľadať, či tam ten koncový tag predsalen niekde nie je.

Emphasize, Strong = zdôraznenie v texte

Tagy em a strong nám zdôrazňujú nejakú časť v texte.

<p>Tento text má <em>dôležitú časť</em> a potom nejaké ďalšie. Aj v tejto vete je
jedna <strong>dôležitá časť</strong>. </p>

Žiadnu časť textu nenechávajte len tak navoľno. Buď ho zabaľte to paragrafu, alebo iného tagu. Každý obsah stránky musí niekam patriť.

Špeciálne slovenské znaky

Ak vám browser zle zobrazuje špeciálne slovenské znaky, treba si skotrolovať, ako kóduje text váš html editor a vložiť do vašej webstránky do časti head riadok:

<meta charset="utf-8">

K meta tagom sa ešte dostaneme, zatiaľ ho berte len tak.

SAMOSTATNÉ CVIČENIE

Pomocou týchto tagov naformátujte tento text na takúto webstránku.

Úlohu mi pošlite ako .html súbor: