Tvorba webových stránek

Z Maturita 2012
Přejít na: navigace, hledání
  • co to je webová stránka (statická, dynamicky generovaná)
  • serverový a klientský software pro provoz webového obsahu
  • protokoly webu
  • role W3C
  • popis HTML (tagy párové a nepárové, příklady
  • struktura HTML dokumentu
  • CSS
  • formuláře na webu
  • klientské skriptování a DOM
  • ActiveX, JavaApplet


Obsah

Co to je webová stránka (statická, dynamicky generovaná)

Webová stránka:

  • má svůj obsah a nese určitou informaci
  • skládá se z textu, multimediálních dat (obrázky, videa, zvuky, …) a odkazů, které umožňují přechod na další webové stránky
  • může být uložena v podobě souborů na pevném disku nebo je poskytuta webovým serverem prostřednictvím počítačové sítě (LAN, Internet, ...)
  • po síti je přenášena pomocí protokolu HTTP
  • je psána pomocí HTML nebo XHTML (případně může být použito i XML, ale není to příliš pohodlné)
  • zobrazuje se uživateli skrz webový prohlížeč

Webová stránka poskytuje své informace prostřednictvím WWW (World Wide Web). WWW je služba internetu – informační systém založený na hypertextovém modelu. Jedná se v podstatě o nejrozšířenější internetovou službu. Veškeré webové stránky jsou součástí WWW.


Webové stránky se dělí na:

  • statické - obsahují stále stejný obsah, jsou uloženy v souborech
  • dynamické- mění svůj obsah v čase, vytváří je program na straně webového serveru

Stránka se může měnit i přímo v prohlížeči použitím skriptovacích jazyků, Javy, ActiveX a dalších technologií.


Serverový a klientský software pro provoz webového obsahu

  • serverový software
    • webový server
      • např. Apache, nginx, ISS (od Microsoftu vyžaduje Windows)
  • klientský software
    • webový prohlížeč
      • např. Opera, Firefox, Chrome, Internet Explorer, Safari, Links (pracuje v textovém režimu), apod.


Protokoly webu

HTTP (port 80)

Standardním protokolem, který se používá pro komunikaci mezi klientem a serverem je protokol HTTP, defaultně komunikující na portu 80. Protokol je textově orientovaný, nešifrovaný.

HTTPS (port 443)

Pro zabezpečenou komunikaci přes protokol HTTP se používá jeho zabezpečená varianta známá jako HTTPS, defaultně komunikující na portu 443.


Role W3C

Popis HTML (tagy párové a nepárové, příklady)

Struktura HTML dokumentu

Na začátku každého HTML dokumentu je tzv. DOCTYPE. Ten oznamuje prohlížeči, kterou konkrétní verzi HTML používáme. Za ním následuje element html a v něm vnořené elementy head a body.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>Titulek stránky</title>
    </head>
    <body>
        Vlastní obsah stránky.
    </body>
</html>

DOCTYPE obsahuje nejrůznější informace, např. podle jakého DTD (viz XML) je HTML stránka napsána. V případě HTML na DOCTYPE, ale tolik nezáleží, ve většině případů ho prohlížeče ignorují.

... Jediné, na čem záleží, je to, aby se stránka vykreslila v IE stejně jako v jiných prohlížečích. Toho se dosáhne tím, že se do stránky přidá libovolná doctype deklarace, která Explorer přepne do standardního módu.
Zdroj: http://www.jakpsatweb.cz/doctype.html

Nejnovější HTML5 používá jako DOCTYPE prostý zápis <!DOCTYPE html>.

Hlavička stránky (element head) obsahuje informace o připojených stylech (CSS), skriptech (JavaScript), informace o autorovi, klíčová slova, stručný popis stránky, titulek stránky, použité kódování (UTF-8, windows-1250, ...), apod. Vlastní obsah stránky, který vidí návštěvník webu je umístěn v elementu body.


CSS

Formuláře na webu

Klientské skriptování a DOM

Na straně klienta (webového prohlížeče) je možné spouštět programový kód, který je schopen manipulovat se stránkou, upravovat ji, reagovat na akce uživatele, apod. V oblasti webových stránek je nejrozšířenějším klientským skriptovacím jazykem JavaScript (v IE jeho obdoba JScript). Je možné použít i jiné jazyky, ty ale nemají takovou podporu v prohlížečích a díky jejich minimálnímu využívání je lze zanedbat (patří sem např. některé jazyky z dílny Microsoftu, které jsou podporovány pouze v Internet Exploreru).

Jelikož se jedná o skriptovací jazyky (a ne jazyky kompilované) je na straně klienta nutná přítomnost interpretu, který je schopen do stránky vložený kód načíst a vykonat dané příkazy.

DOM (Document Object Model - objektový model dokumentu)

ActiveX, Java Applet

Osobní nástroje
Jmenné prostory
Varianty
Akce
Navigace
Nástroje