Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web,

Transkript

1 Maturitní otázka webové stránky (technologie tvorby webu) Co znamená pojem Web? Web, www stránky, celým názvem World Wide Web, v doslovném překladu "světová rozsáhlá síť neboli celosvětová síť, je označení pro aplikace internetového protokolu HTTP. Je tím myšlena soustava propojených hypertextových dokumentů. V češtině se slovo web často používá nejen pro označení celosvětové sítě dokumentů, ale také pro označení jednotlivé soustavy dokumentů dostupných na tomtéž webovém serveru nebo na téže internetové doméně nejnižšího stupně (internetové stránce). Webové stránky nejčastěji slouží jako: Firemní web Osobní prezentace E-shop Komunitní (blogy, stránky sdružení) Projektově zaměřené (produkt, myšlenka, vize) Nástroje (technologie) pro tvorbu webových stránek Pokud chceme vytvořit web, na počátku je potřeba se rozhodnout jak (v čem) webové stránky vytvořit. Existují tyto základní možnosti (technologie) pro tvorbu webových stránek: On-line webové editory Redakční systémy Wysiwyg editory Strukturní editory Každá z uvedených možností má své výhody a nevýhody. Hlavní kritérium pro rozhodnutí je bezpochyby znalost (neznalost) jazyka pro vlastní psaní webu. Základní jazyk pro tvorbu webu je dnes jazyk HTML. Zkratkou HTML je označován značkovací (strukturovaný) jazyk pro hypertext - HyperText Markup Language. V něm tvoříme základ webu. Pro nastavení zobrazení a dalších doplňků se vedle HTML jazyka používají jako jeho rozšíření (doplnění) kaskádové styly (v anglickém originále Cascading Style Sheets), zkráceně CSS. Pokud se rozhodneme vytvářet (programovat) stránky přímo (v nějakém jazyce), použijeme některý ze strukturních editorů. Pokud nemáme znalost jazyka nebo nechceme stránky přímo programovat vybereme si pro vytváření webu jinou technologii než strukturní editory. I když dnes již neexistuje přímá hranice. I při použití jiné technologie jako například pomocí on-line editorů, redakčních systémů nebo wysiwyg editorů můžeme vytvořenou stránku editovat přímo v kódu (jazyku) a například pomocí změny části CSS kódu dosáhnout změny i tímto způsobem. 1

2 On-line webové editory Jak napovídá název, jedná se o technologie pro tvorbu webu online tedy na síti. Tento způsob nevyžaduje žádnou znalost kódu (programování). Také není třeba instalovat na PC žádný software. Po přihlášení (vytvoření účtu) vytváříme webové stránky on-line (stačí webový prohlížeč). Prostředí je podobné jako například MS Word, stránku si prostě naklikáme přes tlačítka a formuláře. Hlavní výhody: rychlost, nenáročnost Hlavní nevýhody: nelze vytvořit stránky plně podle vlastního designu je potřeba si vybrat nějaký z nabízených vzhledů. Dnes však i toto úplně neplatí, se znalostí CSS jazyka můžeme vzhled upravit k obrazu svému, pokud je tato funkce u daného on-line editoru nabízená. Příklad editorů: estranky.cz, webnode.cz Redakční systémy Redakční systém neboli CMS (content management system) je systém nejen pro vytvoření, ale hlavně také pro správu obsahu webové prezentace. V praxi to znamená, že pomocí redakčního systému můžeme webovou prezentaci vytvořit a následně ji pomocí stejného systému spravovat, v praxi je častěji využívaná druhá varianta - webovou prezentaci vytvoří člověk (firma) pomocí redakčního systému, nastaví všechny potřebné atributy dle požadovaného nastavení, vytvoří (upraví) grafiku šablony, nainstaluje redakční systém na hostingový server, případně nastaví první obsah. Další správu (úpravy článků, doplnění informací, fotek) pak provádí již sám uživatel. Hlavní výhody: jednoduchá správa, možnost nastavení více správců (editorů) a nastavení různých oprávnění, většina systému je bezplatná, výborný poměr cena/výkon, se znalosti CSS lze téměř plně graficky přizpůsobit požadavkům. Hlavní nevýhody: složitější první instalace na hostingový server, potřeba větší znalost problematiky pro nastavení systému a práv, nutnost mít prostor pro instalaci Nejpoužívanější redakční sytémy: Wordpress, Joomla, Drupal, Prestashop, Zencart Wysiwyg editory Tyto editory nevíce vystihuje tento popis: What you see is what you get, česky co vidíš, to dostaneš. Tato zkratka označuje způsob editace dokumentů v počítači, při kterém je verze zobrazená na obrazovce vzhledově totožná s výslednou verzí dokumentu. Zjednodušeně řečeno editační prostředí podobné Wordu nebo Photoshopu, ve kterém přímo vidíme, co tvoříme. Tvorba webové 2

3 prezentace funguje obdobně jako u on-line editorů s pomocí tlačítek, formulářu, plochy, není tedy potřeba znát kód pro vytváření webu. Tento editor (software) je potřeba na PC nainstalovat. Většina programů je však placených. Výhody: snadná práce, rychlost, jednoduchost Nevýhody: potřeba instalace programu, převážná většina placených Příklady editorů: Adobe Muse, Adobe Dreamweaver, Microsoft Publisher, Microsoft FrontPage, NVU (tento je v licenci freeware) Strukturní editory Jedná se o programy, které vytvářejí pomocné prostředí (zjednodušují, zpřehledňují) vytváření webové prezentace přímo pomocí kódu (například pomocí jazyka HTML a CSS). V tomto případě je tedy znalost jazyka pro tvorbu webové prezentace nutností. Program je potřeba obvykle na PC nainstalovat. Výhody: pomocné prostředí pro psaní kódu Nevýhody: nutnost podrobné znalosti jazyka pro tvorbu webové prezentace Příklady: PSpad (rozšířený poznámkový blok) HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je hlavním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu. V současné době je aktuální HTML5. Příklad kódu jazyka HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <head> <title>umelecka</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <meta name="description" content="umelecka.cz" /> <meta name="keywords" content="umelecka.cz" /> <meta name="language" content="cz" /> </head> <body> 3

4 <p>lorem ipsum dolor sit amet.</p> <p>consectetuer feugiat at eleifend pretium rhoncus auctor leo.</p> </html> CSS Kaskádové styly (v anglickém originále Cascading Style Sheets se zkratkou CSS) je jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML. Složí zejména pro doplnění jazyka HTML a k nastavení vlastností stránky (velikosti, barvy, fonty atp.). V současnosti je aktuální verze CSS3. Příklad kódu CSS: body { background-color: white; color: black; padding: 10px!important;} Co lze udělat pomocí CSS nastavit řez písma (tučnost, kurzíva, podtržení, přeškrtnutí) nastavit fontu písma (jestli chcete použít Times New Roman nebo vlastní font) nastavit velikost písma automaticky formátovat nadpisy nebo odstavce (třeba že budou všechny červené) nastavit barevné i obrázkové pozadí čehokoliv (stránky, tabulky, odstavce, nadpisu), které se může např. opakovat jen v jednom směru umístit jakýkoliv objekt (např. kus textu) kamkoliv do stránky nastavit zarovnání objektů (doprava, doleva, na střed, do bloku) udělat kolem něčeho rámeček (jakékoliv barvy a druhu) nastavit okraje objektu i vzdálenost textu od jeho okraje nastavit odrážky v seznamu změnit barvu odkazu, když na něj najede myš Troje použití CSS můžete do stránky vložit přímým zápisem, stylopisem v hlavičce a nebo externím stylopisem. Na příkladch si ukážeme, jak nastavit nadpisu <h1> zelenou barvu. Provedeme to CSS vlastností color: green 4

5 Přímý zápis <h1 style="color: green">nadpis</h1> CSS styl jsme napsali mezi uvozovky u atributu style=" ". Color znamená barva a Green zelená. Toto platí pouze pro tento nadpis, ostatní nadpisy budou normální. Stylopis v hlavičce <html> <head> <title>název stránky</title> <style> h1 {color: green} </style> </head> <body> <h1>nadpis</h1> </html> Do hlavičky souboru jsme přidali tagy <style> a </style>. Mezi tyto tagy se zapisuje CSS. Nejprve zapíšeme název tagu (v našem případě h1) a poté do zašpičatělých závorek CSS vlastnost {color: green}. Je nutné používat zašpičatělé závorky! Výsledným efektem je, že všechny nadpisy <h1> budou zelené. Toho se dá skvěle využít. Externí stylopis Otevřte si Poznámkový blok a napište do něj: h1 {color: green} Uložte text jako soubor s příponou CSS, např. styly.css Uložte ho pokud možno do stejné složky jako HTML stránku. Pak se přepněte zpátky do editování kódu HTML stránky. Do hlavičky zapište tag, který určí, kde se soubor CSS nachází. Příklad stránky: <html> <head> 5

6 <title>název stránky</title> <linkrel="stylesheet" type="text/css" href="styly.css"> </head> <body> <h1>nadpis</h1> </html> Nastavení bude platit opět pro všechny h1 nadpisy. Výhodou externího stylopisu je, že ho můžeme takto přiřadit k více stránkám. Je tedy možné formátovat mnoho stránek najednou. To je hlavní důvod, proč se CSS používají. Snadno tak dodáte všem stránkám jednotný grafický vzhled. 2 a více hodnot ve stylopisu oddělujeme je středníkem. Příklad: h2 {color: silver; background-color: navy} Další jazyky spojené s webem pro rozšiřující funkce stránky: Java PHP Poznámky: Zdroje World Wide Web. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, [cit ]. Dostupné z: HyperText Markup Language. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, [cit ]. Dostupné z: Kaskádové styly. In: Wikipedia: the free encyclopedia [online]. San Francisco (CA): Wikimedia Foundation, [cit ]. Dostupné z: 6