Webová stránka: Porovnání verzí

Z WikiKnihovna
Řádek 13: Řádek 13:
  
 
== Co je webová stránka ==
 
== Co je webová stránka ==
Webová stránka je textový soubor s čistým neformátovaným textem, do něhož zapisujeme značky, popisujeme styly a vkládáme textový obsah stránky. Aby bylo možné stránku vůbec vytvořit, je nutné znát alespoň základní tagy (značky). Mezi nejdůležitější tagy patří:
+
Webová stránka je textový soubor s čistým neformátovaným textem, do něhož zapisujeme značky, popisujeme styly a vkládáme textový obsah stránky.[[#Použitá literatura|[3]]] Aby bylo možné stránku vůbec vytvořit, je nutné znát alespoň základní tagy (značky). Mezi nejdůležitější tagy patří:
  
 
<blockquote>'''html''' - označuje celý dokument html</blockquote>
 
<blockquote>'''html''' - označuje celý dokument html</blockquote>
Řádek 28: Řádek 28:
 
<blockquote>'''tr, td''' - prvky tabulky</blockquote>
 
<blockquote>'''tr, td''' - prvky tabulky</blockquote>
 
<blockquote>'''ul, ol''' - tagy pro seznam</blockquote>
 
<blockquote>'''ul, ol''' - tagy pro seznam</blockquote>
<blockquote>'''li''' - prvky seznamu</blockquote>
+
<blockquote>'''li''' - prvky seznamu</blockquote>[[#Použitá literatura|[2]]]
  
 
== Typy webových stránek ==
 
== Typy webových stránek ==
 
'''Statické webové stránky''' – zůstávají v podobě, v níž jsme je vytvořili, při každém zobrazení jsou stále stejné a nelze je ani změnit.
 
'''Statické webové stránky''' – zůstávají v podobě, v níž jsme je vytvořili, při každém zobrazení jsou stále stejné a nelze je ani změnit.
 
   
 
   
'''Dynamické webové stránky''' – na těchto stránkách lze měnit obsah pomocí tzv. skriptovacího jazyka. Existují dva druhy skriptovacích jazyků – ''klientské skriptovací jazyky'', o něž se stará prohlížeč a jsou určeny pro návštěvníky webové stránky, a ''serverové skriptovací jazyky'', o které se stará server.
+
'''Dynamické webové stránky''' – na těchto stránkách lze měnit obsah pomocí tzv. skriptovacího jazyka. Existují dva druhy skriptovacích jazyků – ''klientské skriptovací jazyky'', o něž se stará prohlížeč a jsou určeny pro návštěvníky webové stránky, a ''serverové skriptovací jazyky'', o které se stará server.[[#Použitá literatura|[6]]]
  
 
== Tři vrstvy moderní webové stránky ==
 
== Tři vrstvy moderní webové stránky ==
 
'''Vrstva struktury'''
 
'''Vrstva struktury'''
 
<blockquote>'''HTML''' (hypertextový značkovací jazyk) – původní jazyk pro tvorbu webových stránek, který vytváří logickou (významovou) strukturu webového dokumentu.</blockquote>   
 
<blockquote>'''HTML''' (hypertextový značkovací jazyk) – původní jazyk pro tvorbu webových stránek, který vytváří logickou (významovou) strukturu webového dokumentu.</blockquote>   
<blockquote>'''XHTML''' (rozšiřitelný hypertextový značkovací jazyk) – mladší verze jazyka HTML, spojuje prvky jazyka HTML (díky tomu ho mohou přečíst všechny prohlížeče) a sílu a flexibilitu jazyka XML (jazyk určený pro tvorbu jiných jazyků), lze ho použít k jisté, byť značně omezené, definici vzhledu částí webové stránky (např. barva nebo velikost písma).</blockquote>
+
<blockquote>'''XHTML''' (rozšiřitelný hypertextový značkovací jazyk) – mladší verze jazyka HTML, spojuje prvky jazyka HTML (díky tomu ho mohou přečíst všechny prohlížeče) a sílu a flexibilitu jazyka XML (jazyk určený pro tvorbu jiných jazyků), lze ho použít k jisté, byť značně omezené, definici vzhledu částí webové stránky (např. barva nebo velikost písma).</blockquote>[[#Použitá literatura|[5]]]
  
 
'''Vrstva prezentační'''
 
'''Vrstva prezentační'''
  
<blockquote>'''CSS''' (Cascading Style Sheets) – kaskádové styly jsou druhem stylového jazyka, který popisuje vzhled a fungování elementů ve zdrojovém kódu.</blockquote>  
+
<blockquote>'''CSS''' (Cascading Style Sheets) – kaskádové styly jsou druhem stylového jazyka, který popisuje vzhled a fungování elementů ve zdrojovém kódu.</blockquote>[[#Použitá literatura|[5]]]
  
 
'''Vrstva chování'''  
 
'''Vrstva chování'''  
 
<blockquote>'''JavaScript''' – klientský skriptovací jazyk, který se zapisuje přímo do zdrojového kódu HTML, jedná se o různé vizuální efekty  a animace.</blockquote>   
 
<blockquote>'''JavaScript''' – klientský skriptovací jazyk, který se zapisuje přímo do zdrojového kódu HTML, jedná se o různé vizuální efekty  a animace.</blockquote>   
<blockquote>'''PHP''' – serverový skriptovací jazyk, který umožňuje programovat aplikace schopné spolupracovat s databázemi, poštou atd., mezi jeho nesporné výhody patří jednoduchost, fugování na různých operačních systémech a  otevřený zdrojový kód (Open Source), což znamená, že se na jeho upravování a zdokonalování může podílet každý schopný programátor.</blockquote>  
+
<blockquote>'''PHP''' – serverový skriptovací jazyk, který umožňuje programovat aplikace schopné spolupracovat s databázemi, poštou atd., mezi jeho nesporné výhody patří jednoduchost, fugování na různých operačních systémech a  otevřený zdrojový kód (Open Source), což znamená, že se na jeho upravování a zdokonalování může podílet každý schopný programátor.</blockquote>[[#Použitá literatura|[6]]]
  
<blockquote>Další serverové skriptovací jazyky – '''ASP''' (technologie Microsoftu určena pouze pro Windows), '''JSP''' (postaven na jazyce JAVA, pro všechny operační systémy), '''ASP.NET''' (dokonalejší verze ASP, funguje na různých operačních systémech i webových serverech)</blockquote>
+
<blockquote>Další serverové skriptovací jazyky – '''ASP''' (technologie Microsoftu určena pouze pro Windows), '''JSP''' (postaven na jazyce JAVA, pro všechny operační systémy), '''ASP.NET''' (dokonalejší verze ASP, funguje na různých operačních systémech i webových serverech)</blockquote>[[#Použitá literatura|[6]]]
  
 
== V čem se tvoří webové stránky ==
 
== V čem se tvoří webové stránky ==
'''Editory WYWISIG''' (What You See Is What You Get) – tyto editory umožňují tvorbu webových stránek jednoduše výběrem a stavením prvků v grafickém rozhraní. Hned vidíme, co bude webová stránka zobrazovat. Výhodou je, že není třeba znát jazyky HTML (XHTML) a CSS. Nevýhodou je, že nemáme nad kódem, který tvoříme, téměř žádnou kontrolu. Nejznámějšími editory jsou ''Adobe Dreamweaver, Microsoft FrontPage, Microsoft Expression Web''.
+
'''Editory WYWISIG''' (What You See Is What You Get) – tyto editory umožňují tvorbu webových stránek jednoduše výběrem a stavením prvků v grafickém rozhraní. Hned vidíme, co bude webová stránka zobrazovat. Výhodou je, že není třeba znát jazyky HTML (XHTML) a CSS. Nevýhodou je, že nemáme nad kódem, který tvoříme, téměř žádnou kontrolu. Nejznámějšími editory jsou ''Adobe Dreamweaver, Microsoft FrontPage, Microsoft Expression Web''.[[#Použitá literatura|[3]]]
  
'''Strukturní editory''' – obyčejné textové editory, do nichž zapisujeme kód, usnadňují nám ovšem práci pomocí různých nástrojů a nápověd. Výsledek kódu si poté zobrazíme v prohlížeči. Mezi strukturní editory patří i klasický ''Poznámkový blok'', dále český ''PSPad, HomeSite, jEdit, EasyPad, UltraEdit'' aj.  
+
'''Strukturní editory''' – obyčejné textové editory, do nichž zapisujeme kód, usnadňují nám ovšem práci pomocí různých nástrojů a nápověd. Výsledek kódu si poté zobrazíme v prohlížeči. Mezi strukturní editory patří i klasický ''Poznámkový blok'', dále český ''PSPad, HomeSite, jEdit, EasyPad, UltraEdit'' aj.[[#Použitá literatura|[1]]]
  
 
== Internetové prohlížeče ==
 
== Internetové prohlížeče ==
Jsou velice důležitou částí při tvorbě webových stránek. Jazyky HTML, XHTML a CSS vychází z určitých technických standardů. Tyto standardy ale nemusí všechny prohlížeče vykládat správně, krize nastává při zobrazování prvků CSS, tedy vzhledu a formátování webových stránek. Tímto problémem trpí především starší prohlížeče. V současné době se vyvíjí standardy, které programátoři vloží přímo do webových prohlížečů.   
+
Jsou velice důležitou částí při tvorbě webových stránek. Jazyky HTML, XHTML a CSS vychází z určitých technických standardů. Tyto standardy ale nemusí všechny prohlížeče vykládat správně, krize nastává při zobrazování prvků CSS, tedy vzhledu a formátování webových stránek.[[#Použitá literatura|[4]]] Tímto problémem trpí především starší prohlížeče. V současné době se vyvíjí standardy, které programátoři vloží přímo do webových prohlížečů.   
  
 
'''Internet Explorer'''
 
'''Internet Explorer'''

Verze z 7. 1. 2011, 10:40

Autor: Eliška Hrabalová

Klíčová slova: Internet, webdesign, WWW technologie, World Wide Web

Synonyma: webový dokument

Související pojmy:

nadřazené: ---

podřazené: ---


Co je webová stránka

Webová stránka je textový soubor s čistým neformátovaným textem, do něhož zapisujeme značky, popisujeme styly a vkládáme textový obsah stránky.[3] Aby bylo možné stránku vůbec vytvořit, je nutné znát alespoň základní tagy (značky). Mezi nejdůležitější tagy patří:

html - označuje celý dokument html

head - označuje hlavičku webové stránky

title - označuje titulek webové stránky

meta - nastavuje jazyk webové stránky, její nastavení atd.

body - označuje začátek a konec těla webového dokumentu

p - označuje odstavec textu

span - definuje prvky jednoho řádku

div - definuje prvky jednoho bloku

img - tag pro vložení obrázku

a - tag pro hypertextový odkaz

table - tag pro tabulku

tr, td - prvky tabulky

ul, ol - tagy pro seznam

li - prvky seznamu

[2]

Typy webových stránek

Statické webové stránky – zůstávají v podobě, v níž jsme je vytvořili, při každém zobrazení jsou stále stejné a nelze je ani změnit.

Dynamické webové stránky – na těchto stránkách lze měnit obsah pomocí tzv. skriptovacího jazyka. Existují dva druhy skriptovacích jazyků – klientské skriptovací jazyky, o něž se stará prohlížeč a jsou určeny pro návštěvníky webové stránky, a serverové skriptovací jazyky, o které se stará server.[6]

Tři vrstvy moderní webové stránky

Vrstva struktury

HTML (hypertextový značkovací jazyk) – původní jazyk pro tvorbu webových stránek, který vytváří logickou (významovou) strukturu webového dokumentu.

XHTML (rozšiřitelný hypertextový značkovací jazyk) – mladší verze jazyka HTML, spojuje prvky jazyka HTML (díky tomu ho mohou přečíst všechny prohlížeče) a sílu a flexibilitu jazyka XML (jazyk určený pro tvorbu jiných jazyků), lze ho použít k jisté, byť značně omezené, definici vzhledu částí webové stránky (např. barva nebo velikost písma).

[5]

Vrstva prezentační

CSS (Cascading Style Sheets) – kaskádové styly jsou druhem stylového jazyka, který popisuje vzhled a fungování elementů ve zdrojovém kódu.

[5]

Vrstva chování

JavaScript – klientský skriptovací jazyk, který se zapisuje přímo do zdrojového kódu HTML, jedná se o různé vizuální efekty a animace.

PHP – serverový skriptovací jazyk, který umožňuje programovat aplikace schopné spolupracovat s databázemi, poštou atd., mezi jeho nesporné výhody patří jednoduchost, fugování na různých operačních systémech a otevřený zdrojový kód (Open Source), což znamená, že se na jeho upravování a zdokonalování může podílet každý schopný programátor.

[6]

Další serverové skriptovací jazyky – ASP (technologie Microsoftu určena pouze pro Windows), JSP (postaven na jazyce JAVA, pro všechny operační systémy), ASP.NET (dokonalejší verze ASP, funguje na různých operačních systémech i webových serverech)

[6]

V čem se tvoří webové stránky

Editory WYWISIG (What You See Is What You Get) – tyto editory umožňují tvorbu webových stránek jednoduše výběrem a stavením prvků v grafickém rozhraní. Hned vidíme, co bude webová stránka zobrazovat. Výhodou je, že není třeba znát jazyky HTML (XHTML) a CSS. Nevýhodou je, že nemáme nad kódem, který tvoříme, téměř žádnou kontrolu. Nejznámějšími editory jsou Adobe Dreamweaver, Microsoft FrontPage, Microsoft Expression Web.[3]

Strukturní editory – obyčejné textové editory, do nichž zapisujeme kód, usnadňují nám ovšem práci pomocí různých nástrojů a nápověd. Výsledek kódu si poté zobrazíme v prohlížeči. Mezi strukturní editory patří i klasický Poznámkový blok, dále český PSPad, HomeSite, jEdit, EasyPad, UltraEdit aj.[1]

Internetové prohlížeče

Jsou velice důležitou částí při tvorbě webových stránek. Jazyky HTML, XHTML a CSS vychází z určitých technických standardů. Tyto standardy ale nemusí všechny prohlížeče vykládat správně, krize nastává při zobrazování prvků CSS, tedy vzhledu a formátování webových stránek.[4] Tímto problémem trpí především starší prohlížeče. V současné době se vyvíjí standardy, které programátoři vloží přímo do webových prohlížečů.

Internet Explorer

Nejrozšířenější prohlížeč, který má obtíže se zobrazováním CSS, především verze 5.5 a a verze 6. Verze IE 7 již zobrazuje CSS lépe.

Mozilla Firefox

Druhý nejrozšířenější prohlížeč, zobrazuje CSS velmi dobře a přesně podle standardů.

Opera

Prohlížeč s menším uživatelským zastoupením, byť se paradoxně jedná o nejlepší variantu. CSS zobrazuje přesně a bez odchylek.

Další prohlížeče

Mají percentuálně velmi malé zastoupení, tudíž se jim nevěnuje taková pozornost.

Použitá literatura

  1. JANOVSKÝ, Dušan. Jak psát web : o tvorbě, údržbě a zlepšování internetových stránek [online]. [2007], 12. prosince 2010 [cit. 2010-12-28]. Jak si vytvořit stránku. Dostupné z WWW: <http://www.jakpsatweb.cz/jak-udelat.html>. ISSN 1801-0458.
  2. GRIMMICH, Šimon. Tvorba webu [online]. c2003-2008 [cit. 2010-12-28]. HTML tagy. Dostupné z WWW: <http://www.tvorba-webu.cz/html/html_tagy.php>.
  3. DOMES, Martin . Tvorba WWW stránek pro úplné začátečníky. Vydání první. Brno : Computer Press, 2008. Než se pustíme do práce, s. 15-29. ISBN 978-80-251-2160-3.
  4. CASTRO, Elizabeth. HTML, XHTML a CSS : názorný průvodce tvorbou WWW stránek. Vydání první. Brno : Computer Press, 2009. Úvodem, s. 15-23. ISBN 978-80-251-1531-3.
  5. CROFT, Jeff; LLOYD, Ian; RUBIN, Dan. Mistrovství v CSS : pokročilé techniky pro webové designéry a vývojáře. Vydání první. Brno : Computer Press, c2007. Závazek CSS, s. 27-37. ISBN 978-80-251-1705-7.
  6. PONKRÁC, Miloslav. PHP a MySQL bez předchozích znalostí : průvodce pro samouky. Vydání první. Brno : Computer Press, 2007. Příprava, s. 13-32. ISBN 978-80-251-1758-3.