1.47k likes | 1.68k Views
Tvorba webových stránek. RNDr. Pavel Vlach, Ph.D. WWW – World Wide Web - nejrozšířenější služba na internetu na serveru jsou vystaveny webové stránky webová stránka – multimediální dokumenty (text, grafika, hudba, video) doplněné o hypertext – odkaz na jiné místo webu
E N D
Tvorba webových stránek RNDr. Pavel Vlach, Ph.D.
WWW – World Wide Web - nejrozšířenější služba na internetu • na serveru jsou vystaveny webové stránky • webová stránka – multimediální dokumenty (text, grafika, hudba, video) doplněné o hypertext – odkaz na jiné místo webu • základní www stránky jsou tvořeny pomocí jazyka HTML (HyperText Markup Language) • stránky jsou zobrazovány ve webovém prohlížeči (nejčastější Mozilla, Firefox, MS Explorer)
Používané „technologie“ • HTLM (budeme se učit) • CSS (budeme se učit) • dHTML – JavaSript (stručně se budeme učit v příkladech) • Flash – zmíníme (jiný kurz) • PHP (asp….) zmíníme (jiný kurz)
HTML • základní jazyk pro tvorbu www stránek • prochází historickým vývojem • specifikace druhu HTML je důležitá pro správné zobrazenístránky (dnes nejčastěji html 4.01 Strict, případně xhtml, starší 4.01 Transitional)
HTML • použití jazyka je poměrně variabilní × existuje množství různých prohlížečů • => pro validní zobrazení (v postatě garantované zobrazení pro všechny prohlížeče) je třeba dodržovat striktní pravidla • čím vyšší specifikace HTML, tím přísnější pravidla použití
HTML • základním nástrojem práce v html jsou strukturální a formátovací značky zvané tagy • tagy umožňují vytvářet strukturu dokumentu a také jeho formátování, tzn. pomocí HTML lze vytvořit obsah i formu dokumentu • ALE – v současné době se volá po „čistotě“ html kódu, tj. po oddělení obsahu a formy – výhodou je, libovolná změna obsahu při zachování formy,nebo naopak nové formátování – změna celého vzhledu stránek bez zasahování do obsahu • v současné době preferujeme tedy použití HTML pouze na vytváření obsahu, tj. struktury dokumentu • na vzhled tj. formátování dokumentu používáme CSS
CSS • Cascade Styles Sheet • soubory tabulek, které definují formát struktur definovaných v HTML dokumentu • mohou být součástí HTML dokumentu nebo být v externím textovém souboru (a pak mají svůj správný význam)
Java Script • scriptovací jazyk • dynamické HTML – poskytuje vyšší míru interaktivity • pohyblivá menu, kalendář, rozbalovací menu… • scripty se vykonávají na straně prohlížeče
Flash • většinou animace, bannery, hry a další webové aplikace, ale i celé webové stránky • výhody • perfektní grafické rozhraní • neomezená interaktivita • nevýhody • není přístupné standardním službám • není možnost hypertextu • ne vyhledávání webových aplikací uvnitř flashových souborů)
PHP (asp) • scriptovací jazyk • scripty se vykonávají na serveru • webové aplikace (formuláře, ankety, ale i grafy, diáře) • spolupráce s databází MySQL a dalšími • nutnost webového serveru
Výuka 1. HTML
tagy • tagy jsou párové značky, které umožňují strukturovat (i formátovat) html dokument • tagy mají následující strukturu: • počáteční tag<název tagu> • ukončovací tag</název tagu> • mezi počátečním a ukončovacím tagem je obsah (text)
html dokument - shrnutí • má tyto 4 nezbytné části: 1. specifikaci dokumentu • tag <!DOCTYPE> 2. označení dokumentu • tag <html> </html> 3. označení hlavičky • tag <head></head> 4. označení těla dokumentu • tag <body> </body>
tagy pro strukturování textu • nadpis • 6 úrovní značek (tagů) pro nadpisy • <h1>zde bude text</h1> • <h2></h2> • <h3></h3> • <h4></h4> • <h5></h5> • <h6></h6>
tagy pro strukturování textu • řádkový prvek <span> zde je obsah prvku </span> • odstavcový prvek 1 <div> zde je obsah prvku </div> • odstavcový prvek 2 <p> zde je obsah prvku </p>
tagy pro strukturování textu • seznam 1 • seznam (výčet s odrážkami) se značí tagem <ul> výčet položek </ul> • jednotlivé položky se označují tagem <li> (většinou nedoplňujeme koncový tag </li>) • seznam 2 • seznam (číslovaný) se značí tagem <ol> výčet položek </ol> • jednotlivé položky se označují tagem <li> • seznam 3 • seznam (definiční seznam) se značí tagem <dl> výčet položek </dl> • jednotlivé položky se označují tagem <dt> a jejich vysvětlení <dd>
tagy pro formátování textu I. • jejich použití je i nových specifikacích validní – doporučuji jejich používání <cite> pro citace (normálně kurzíva) <pre> pro ukázky programového kódu (normálně písmem Courier) <em> pro zvýraznění (normálně kurzíva) <strong> pro zvýrazněné (normálně tučně) • ostatní viz www.kosek.cz(nepoužívají se tolik) • vzhled těchto tagů lze měnit pomocí CSS
tagy pro formátování textu II. • jejich použití do budoucna nebude v nových specifikacích validní – nedoporučuji jejich používání!! <b> tučně <i> kurzíva <big> větší písmo <small> menší písmo <tt> neproporcionální písmo (courier) <u> podškrtnuté písmo <strike> přeškrtnuté písmo <sub> dolní index <sup> spodní index • lze měnit jejich obsah pomocí CSS ale není to logické × CSS plně nahrazuje použirí těchto tagů • oblíbené je používání tagu <br />, který způsobí odřádkování. • tento tag je vždy nahraditelný!!! Pokud možno NEPOUŹÍVAT
úkol • vytvořte jednoduchý html dokument, který bude: • respektovat správnou strukturu html dokumentu (tzn. bude mít všechny nutné náležitosti) • obsahovat 2 nadpisy různé úrovně • obsahovat jeden seznam • tři odstavce textu • použijte „správné“ tagy pro formátování
odkazy • odkazy (hypertextové odkazy) umožní kliknutím na odkaz: • přesunout se na jiné místo v dokumentu • spustit jiný html dokument • spustit jiný soubor (video, zvuk, obrázek….)
odkazy • struktura hypertextového odkazu: • <a href=“URL“>text nebo objekt, na který se bude klikat</a> • URL je adresa na webu nebo pevném disku • http://www.blovice.cz • ftp://www.blovice.cz • mailto:vlach.pavel@mybox.cz • mojevideo.mpeg • obrazky/mujobzar.jpg
odkazy • URL může být také návěští – určitý bod v dokumentu • použitím návěští se přesuneme v dokumentu na místo označené návěštím • návěští se označuje značkou # • návěští (místo, kam se odkazem přesuneme v dokumentu) se musí specifikovat: <a name=„navesti“>SEM</a> • odkaz potom bud vypadat: <a href=„#navesti“>přesun TAM</a>
obrázky • obrázky vkládáme pomocí tagu <img src=„URL“ alt=„popis“ height=„výška“ width =„šířka“ align=zarovnání /> • kde URL je adresa na obrázek (na webu na disku) • http://www.blovice.cz/logo.jpg • obrazky/esf.gif • altje popis obrázku (po najetí kurzoru se objeví text, který obrázek popisuje – opodstatěné dříve při pomalém internetu, vhodné – při nenahrání obrázku je aspoň k dispozici text) • heigthawidthlze uvést v bodech nebo procentech – nemusí být uvedeny, pak se obrázek zobrazí ve své skutečné velikosti • alignje zarovnání vůči textu – tři možnosti – top, center, bottom
úkol • vytvořte 4 html dokumenty • index.html • bude obsahovat obrázek jako logo, název stránky, jméno autora a krátký popis (2-3 odstavce) • odkazy (menu) na 3 následující stránky • mypage.html • bude obsahovat název stránky a informace (3 odstavce) o Vás • odkazy (menu) na 3 následující stránky • mypicture.html • bude obsahovat 4 obrázky (stáhněte z internetu) • odkazy (menu) na 3 následující stránky • kontakt.html • bude obsahovat název stránky a informace o telefonu adrese, emailu atd.. ve formě seznamu • odkazy (menu) na 3 následující stránky
Tabulky a jejich formátování • tabulky vkládáme pomocí tagu <table> obsah tabulky </table> • jednotlivé řádky vkládáme pomocí tagu <tr> • jednotlivé sloupce vkládáme pomocí tagu <td>
tabulky • tabulka o 2 řádcích a 3 sloupcích tedy bude vypadat takto: <table> <!-- definice tabulky <tr> první řádek <td> první buňka <td> druhá buňka <td> třetí buňka <tr> první řádek <td> první buňka <td> druhá buňka <td> třetí buňka </table>
úkol • vytvořte stránku s několika tabulkami • používejte slučování polí (řádků a sloupců) • použijte změnu velikosti tabulky
komentáře v html • hojně vkládáme komentáře – zpřehledňují kód, po delší době umožňují vrátit se ke kódu <!-- komentář -->
úkol • vytvořte svou první opravdovou rozsáhlejší stránku se potřebnou strukturou, obsahem dle zájmu • minimálně 4 stránky s použitím prvků <p> <div> <span> <a> • rozumně využívat formátovací tagy • pod nadpisem bude menu shodné pro všechny stránky • první oficiální výstup kurzu
Výuka 2. CSS
doporučená literatura • CSS – Kaskádové styly • kompletní průvodce • Petr Staníček (pixy) • www.knihy.cpress.cz • cena cca 190 Kč • k dostání všude (i hypermarkety)
co to je CSS • tabulky (správně externí) se styly – formáty prvků definovaných v html • prvky jsou všechny pojmenované tagy • pojmenování se provádí pomocí doplňků v tagu class (třída) a id (unikátní kód) • pojmenování tagu pak vypadá takto: <div class=“mujodstavec“> <a href=„URL“ class=“odkaz1“> <p id=“uvodni_odstavec“ >
připojení stylů k html dokumentu 1. definice stylu přímo u příslušného tagu <div style= “definice stylu“> obsah odstavcového prvku </div>