Vitajte na stránke informatikaa.wbl.sk v sekcii www a základy tvorby html
Úpravu tohto bloku zahájite dvojklikom...
- vznik približne od 2004
- charakteristické prvky web 2.0
používateľ je aktívnym tvorcom obsahu
otvorená komunikácia, zdieľanie údajov a znovuvyužívanie informácií
web-stránky sa stávajú platformou poskytujúcou webové aplikácie koncovému používateľovi web vs. web 2.04
lepšie organizovaný a triedený obsah s prepracovanejšou hyperlinkovou štruktúrou (portály, web-stránky tvorené aj CMS)
- najznámejšie aplikácie
Wiki - Wikipedia, Scholarpedia, ...
MashUp - Google News
Sociálne siete - Facebook, Plaxo, Twitter, ...
Blogy - Blogger.com, Blog.com, Blog.cz, ...
Zdieľanie videa - YouTube
Základné definície I
www stránka = hypertextový dokument
- vytvorený z lineárneho textu grafických, obrazových informácií iných multimediálnych objektov (audio, video, animácie), odkazov na ďalšie stránky
- nezávislý na platforme OS
(definované štandardy Internetu - http://www.rfc-editor.org/rfcxx00.html)
Základné definície II
rozdelenie HTML stránok:
- statické
- dynamické - umožňujú počas prehliadania stránky meniť obsah jednotlivých elementov a atribútov, pridávať a uberať elementy, …
- požiadavky sa vykonávanjú na strane klienta: Java applety, JavaScripty, DHTML, ActiveX, …
- požiadavky sa vykonávajú na strane servera: CGI, JavaScript, ASP, PHP, …
Základné definície III
- HTML (HyperText Markup Language) jazyk pre tvorbu hypertextových dokumentov (www stránok)
v prehliadači: ZOBRAZIŤ – ZDROJOVÝ KÓD (zobrazenie HTML kódu zobrazovanej stránky)
- URL (Uniform Resource Locator)
adresa ukazujúca na nejaký zdroj, ktorý je prístupný pomocou základných protokolov Internetu (http, ftp, mailto, ...)
- HTTP (HyperText Transfer Protocol)
protokol zaisťujúci prenos www stránok zo serveru na klientský počítač užívateľa (klient – server architektúra)
Základné definície IV
- HTML - programovací štrukturovaný jazyk, ktorý slúži na vytváranie dokumentov (stránok)
pre World Wide Web
- obsahuje tzv. „párové“ príkazy - HTML tagy
- <PRIKAZ> - aktivácia príkazu
- </PRIKAZ> - deaktivácia príkazu
- text uzavretý medzi aktiváciou a deaktiváciou príkazu bude riadený podľa použitého príkazu umožňuje vnáranie príkazov zápis:
<B><I>text</I></B> = text (v prehliadači www stránok)
Základné definície V
základné HTML tagy:
<html> - začiatok a koniec HTML dokumentu
<head> - hlavička dokumentu (základné def. - titulok stránky, metainformácie(name, content), ...)
<body> - telo dokumentu (zobrazovaný obsah stránky)
<b>,<i>,<u>,<s>,<sup>,<sub> - formátovanie písma
<ul>,<ol>,<li> - zoznamy a ich súčasti
<a> - odkaz na iné stránky, e-mail, súbor, ...
<table>,<tr>,<td> - tabuľka a jej súčasti
Základné definície VI
- adresa spĺňajúca nasledujúce požiadavky:
- umožňuje prenos informácií pomocou viacerých služieb Internetu (www, e-mail, ftp, diskusné skupiny, ...)
- jedna adresa ukazuje práve na jednu službu alebo zdroj informácií
- ľahko čitateľná pre človeka aj pre počítač
ukážka: ftp://www3.ekf.tuke.sk
všeobecný tvar URL:
«schema»://«uzivatel»:«heslo»@«pocitac»:«port»/
«cesta»;«parametre»?«dotaz»#«fragment»
Základné definície VII
«schema» - typ zdroja, na ktorý adresa ukazuje (http,ftp, ...)
«uzivatel» - meno, pod ktorým sa prihlasujeme k určitej službe
«heslo» - oddeľuje sa od uzivateľa :
«pocitac» - udáva adresu PC (aj v IP tvare)
«port» - číslo portu, na ktorom je služba dostupná
«cesta» - určuje cestu k dokumentu na konkrétnom počítači
«parametre» - pri špeciálnych schémach (php, asp, ...)
«dotaz» - predávanie dotazov rôznym vyhľadávacím službám Internetu
«fragment» - za mriežkou sa uvádza konkrétne miesto v danom dokumente
Vytváranie HTML stránok I
- HTML editor:
- textový editor - Poznámkový blok, PSPad
- WYSIWYG editor – NVU, MS FrontPage, Macromedia Dreamviewer, 1st Page, Home Site, ...
- Neznamenajú viac možností tvorby html dokumentu, iba pohodlnejšiu prácu
3. Neexistuje ideálny web editor, pretože HTML jazyk je neustále vo vývoji, každý editor má výhody a nevýhody
Vytváranie HTML stránok II
CMS (Content Management System)
základné funkcie:
- tvorba, úprava a zverejňovanie dokumentov cez web-rozhranie bez nutnosti znalosti HTML,
- riadenie prístupu k dokumentom podľa prístupových práv,
- správa
diskusií a komentárov, súborov (aj obrázkov),
- kalendár,
- štatistika prístupov
Vytváranie HTML stránok II
CMS (Content Management System)
štruktúra web stránky vytváraná umiestňovaním obsahu jednotlivých stránok podľa potrieb používateľa
Vytváranie HTML stránok II
Prehliadač HTML stránok:
aplikácia, ktorá na základe html kódu dokáže stránku preložiť a zobraziť do tvaru, v akom má vyzerať u koncového užívateľa (klienta)
IE 7.0 – posledná verzia Internet Explorer od MS
Netscape Comunicator – Netscape Communitations
Opera
Mozilla, iné
Znalosť HTML jazyka niektoré editory podporujú jeho neznalosť, ale počas dolaďovania je jeho znalosť výhodou
Vytváranie HTML stránok III
dôležité dbať na:
vecnosť
čitateľnosť
zrozumiteľnosť
originalitu
aktuálnosť údajov
Vytváranie HTML stránok IV
1. Návrh štruktúry web-site:
organizácia a členenie informácií do jednotlivých stránok
grafický dizajn
farby
typ písma
2. Kompletizácia používaných informácií
3. Vytvorenie stromovej štruktúry súborov web-site
počas vytvárania html stránky:
na zvýraznenie textu možno použiť číslované a nečíslované zoznamy (obrázky alebo symboly)
na vytvorenie dvoj a viacstĺpcového textu sa využívajú tabuľky
nie je vhodné vkladať veľké obrázky
po vytvorení stránky je potrebné skontrolovať gramatiku, prepojenie jednotlivých stránok, odkazov na stránky
web-stránka zložená z viacerých stránok
index.html (index.htm)
jednotná grafická vizualizácia
vytvorenie jedného adresára pre všetky obrázky umiestnených na stránkach
NVU - free aplikácia – dostupná na http://www.mozilla.sk/nvu/
slovenská lokalizácia
tzv. portable verzia – bez potreby inštalácie na konkrétny počítač
1. stiahnutie zip súboru
2. extrakcia zip súboru do adresára
3. spustenie aplikácie súborom NvuPortable.exe
Uloženie stránky - špecifiká:
! obrázky nie sú súčasťou dokumentu
! pred ukladaním skontrolujte adresáciu
v rámci dokumentu
! názvy súborov definujte bez diakritiky a medzier - na oddelenie využívajte podčiarkovník
! názvy súborov definujte len malými písmenami
odkaz = linka = hypertextový odkaz:
aktívny objekt slúžiaci na vytvorenie prepojenia medzi viacerými dokumentami
odkazuje na ďalšiu stránku, obrázok, email, text umiestnený priamo na stránke
dva typy adresácie:
relatívna
absolútna
odporúčania:
hierarchiu vytvárať premyslene - podobne ako obsah knihy
pozor na odlíšenie relatívnych a absolútnych adries, aby nenastala nefunkčnosť niektorých odkazov po prenose stránky
na server
niekoľko možností organizácie stránok:
každá stránka samostatne v jednom okne prehliadača
- stránka sa zakaždým načítava nanovo
výsledná stránka zložená z niekoľkých samostatných častí - Framov (Rámcov)
- stránka s menu a hlavičkou ostáva, mení sa iba obsah rámca na to určeného