1 / 143

Tvorba webových stránek

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

luther
Download Presentation

Tvorba webových stránek

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Tvorba webových stránek RNDr. Pavel Vlach, Ph.D.

  2. 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)

  3. 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)

  4. 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)

  5. 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í

  6. 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

  7. 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)

  8. 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

  9. 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ů)

  10. 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

  11. Výuka 1. HTML

  12. 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)

  13. struktura HTML dokumentu

  14. 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>

  15. 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>

  16. 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>

  17. 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>

  18. 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

  19. 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

  20. ú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í

  21. 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….)

  22. 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

  23. 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>

  24. 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

  25. ú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

  26. 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>

  27. 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>

  28. úkol • vytvořte stránku s několika tabulkami • používejte slučování polí (řádků a sloupců) • použijte změnu velikosti tabulky

  29. 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ář -->

  30. ú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

  31. Výuka 2. CSS

  32. 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)

  33. 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“ >

  34. 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>

More Related