(X)HTML a CSS. VOŠ a SŠT Česká Třebová



Podobné dokumenty
Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

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

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

Úvod do aplikací internetu a přehled možností při tvorbě webu

Uspořádání klient-server. Standardy pro Web

Inovace výuky prostřednictvím šablon pro SŠ

Mgr. Vlastislav Kučera přednáška č. 1

Základy WWW publikování

Úvod do tvorby internetových aplikací

Mgr. Vlastislav Kučera přednáška č. 1

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

Registrační číslo projektu: Škola adresa:

DUM č. 11 v sadě. 36. Inf-12 Počítačové sítě

1. Začínáme s FrontPage

Internetové publikování

Stránka se dá otevřít dvěma způsoby

DELTA - STŘEDNÍ ŠKOLA INFORMATIKY A EKONOMIE, s.r.o. Obor informační technologie AJAX ESHOP. Maturitní projekt. Třída:

PHP PHP je skriptovací programovací jazyk dynamických internetových stránek PHP je nezávislý na platformě

Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují.

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky

Webové stránky. 1. Publikování na internetu. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

14. Jazyk HTML (vývoj, principy, funkce, kostra stránky). Jazyk XML, XHTML. Algoritmizace - cyklus for, while a do while, implementace v jazyce

Gymnázium Vysoké Mýto nám. Vaňorného 163, Vysoké Mýto

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Internet 1 vývoj, html, css

HTML - Úvod. Zpracoval: Petr Lasák

Databázové aplikace pro internetové prostředí PHP úvod, základní princip, vkládání skriptu, komentáře, výpis na obrazovku

WWW a HTML. Základní pojmy. Ivo Peterka

Vývoj Internetových Aplikací

Prezentace navrhované struktury internetových stránek

Tvorba webu. Úvod a základní principy. Martin Urza

Současný svět Projekt č. CZ.2.17/3.1.00/32038, podpořený Evropským sociálním fondem v rámci Operačního programu Praha adaptabilita

VY_32_INOVACE_INF3_18. Textové formáty PDF, TXT, RTF, HTML, ODT

Naše Město Web design

HLEDEJCENY.mobi. Obsah. Mobilní verze e-shopu. Důvody instalace

Webová stránka. Matěj Klenka

Zadání maturitní práce ve školním roce 2016/2017

Ukazka knihy z internetoveho knihkupectvi

Webové stránky. 4. Tvorba základní HTML webové stránky. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

3 MOŽNÉ PŘÍSTUPY K TVORBĚ APLIKACÍ NAD SVG DOKUMENTY

22. Tvorba webových stránek

Internet WEB stránky HTML, Hypertext MarkUp Language - nadtextový jazyk - Místo příkazů obsahuje tagy - značky

STŘEDNÍ ŠKOLA INFORMAČNÍCH TECHNOLOGIÍ A SOCIÁLNÍ PÉČE

VÝVOJ INTERNETOVÝCH APLIKACÍ - VIA

Střední odborná škola a Střední odborné učiliště, Hořovice

Tvorba WWW stránek. Mojmír Volf

Střední odborná škola a Střední odborné učiliště, Hořovice

Tvorba internetových stránek

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

TNPW1 Cvičení aneta.bartuskova@uhk.cz

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

Internet 2 css, skriptování, dynamické prvky

Odborný článek. Petr Klán, VŠE v Praze, IMRAD Introduction, Material and Method, Results, Discussion

Značkovací jazyky a spol. HTML/XHTML XML JSON YAML Markdown, Texy!

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Historie Internetu instalace prvního uzlu společností ARPA

Základní pojmy spojené s webovým publikováním ~ malý slovníček pojmů~ C3231 Základy WWW publikování Radka Svobodová, Stanislav Geidl

Programy pro psaní textů. textové editory, textové procesory

Tvorba jednoduchých WWW stránek. VŠB - Technická univerzita Ostrava Katedra informatiky

Elektronické publikování. doc. RNDr. Petr Šaloun, Ph.D. katedra informatiky FEI VŠB TU Ostrava

Geoportál DMVS využití a další rozvoj

Technologie pro tvorbu webových aplikací 1. díl (rozdělení, HTML, XHTML)

Vzdělávací obsah vyučovacího předmětu

Kartografická webová aplikace. Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar Čerba Západočeská univerzita

CZ.1.07/1.5.00/

MODERNÍ WEB SNADNO A RYCHLE

HTML Hypertext Markup Language

Nové přístupy tvorby web site. Doc. Ing. Zdeněk Havlíček, CSc. KIT PEF CZU - 13/11/2001

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Tvorba webových stránek

MATURITNÍ PRÁCE dokumentace

WEBOVÉ STRÁNKY SNADNO A RYCHLE ANEB JE TU WEB

Nástrojová lišta v editačním poli

Obsah. Stručná historie World Wide Webu 7

Mgr. Stěpan Stěpanov, 2013

DATAMINING SEWEBAR CMS

Web. Získání informace z internetu Grafické zobrazení dat a jejich struktura Rozšíření funkcí pomocí serveru Rozšíření funkcí pomocí prohlížeče

OBSAH. Předmluva 13 Poděkování Přehled dnešního vývoje webů Design pro minulost, přítomnost i budoucnost 33

Microsoft. Word. prostředí, základní editace textu. Mgr. Jan Veverka Střední odborná škola sociální Evangelická akademie

Úvod do tvorby internetových stránek v jazyce HTML

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

WEBOVÉ STRÁNKY

Help pro webmastery Vytvořte svůj vlastní web

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

Tvorba webových stránek

NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE. Ataxo Czech s.r.o.

Ukázka knihy z internetového knihkupectví

Uživatelský manuál Radekce-Online.cz

VÝUKOVÝ MATERIÁL. Bratislavská 2166, Varnsdorf, IČO: tel Číslo projektu

Easycars Aplikace pro správu autobazaru

konzultační hodiny: středa od 9:45-11:15 (předem napsat o konkrétním problému, který chcete konzultovat)

SEZNAM VZDĚLÁVACÍCH MATERIÁLŮ - ANOTACE

Výukový materiál KA č.4 Spolupráce se ZŠ

Tvorba webových stránek

Gymnázium Vysoké Mýto nám. Vaňorného 163, Vysoké Mýto

Tvorba jednoduchých WWW stránek

Minebot manuál (v 1.2)

Studentská tvůrčí a odborná činnost STOČ 2013

Transkript:

(X)HTML a CSS Mgr. Petr Slívko VOŠ a SŠT Česká Třebová

STRUKTURA WEBU Webová prezentace (anglicky website) je několik webových stránek provázaných hypertextovými odkazy. Tomu, které stránky web obsahuje a jak jsou mezi sebou provázány odkazy, se říká struktura webu. Struktura webu se navrhuje podle jeho obsahu. Návrh struktury nejlépe na papír, včetně názvů jednotlivých souborů. Přehlednost webu je ovlivněna grafickým ztvárněním. Důležité: Dobře navržená struktura stránek a odkazů mezi nimi. 2

Strukturní konvence Startovací stránka webu má název index.htm nebo index.html, popř. default.html nebo také index.php. Z každé stránky by měl vést odkaz na domovskou (úvodní) stránku webu. Názvy souborů - volba podle obsahu stránek. Omezení: Názvy by neměly obsahovat mezery a znaky s diakritikou a měly by být psány pouze malými písmeny. 3

Webová stránka a její (X)HTML kód Webová stránka je dokument ve formátu HTML nebo v jeho modernější podobě XHTML souhrnně je značíme (X)HTML. (X)HTML dokument může obsahovat jen textové znaky a číslice. Nejsou v něm žádné obrázky a neobsahuje žádné formátování textu. Obsahuje však pokyny (příkazy) pro prohlížeč, jak má stránku zobrazit a kde na ní má zobrazit jaký obrázek. Obrázky jsou uloženy zvlášť v samostatných souborech a načítají se podle pokynů v (X)HTML kódu na určená místa v dokumentu. Formát textu a vůbec celé stránky je často obsažen v samostatném souboru s definicí kaskádových stylů (CSS). 4

Postup tvorby webu: Navrhnete strukturu webu a názvy jednotlivých souborů. Navrhnete vzhled webu a připravíte si CSS soubor(y) s definicemi stylů. Vytvoříte nebo jinak získáte obrázky a připravíte je v přesné velikosti, barevné hloubce a přesném typu souboru. Napíšete potřebné texty. Poskládáte webové stránky s využitím všech výše uvedených komponent. Odladíte kompletní web (vyzkoušíte jej, odhalíte a opravíte chyby). Nahrajete hotový web na server Internetu a opět zkontrolujete funkčnost. 5

DŮLEŽITÉ POJMY HTML hypertextový značkovací jazyk (HyperText Markup Language) CSS kaskádové styly (Cascading Style Sheets) PHP skriptovací jazyk na straně serveru (PHP: Hypertext Preprocessor) JavaScript skriptovací jazyk na straně klienta 6

HTML (XHTML) HTML je značkovací jazyk. Značkuje (označuje) části dokumentu, stránky. To znamená, že pomocí HTML určujeme, jaký význam bude mít ta která část HTML stránky. Tedy pomocí HTML řekneme, že tenhle kus textu bude nadpis, jiný kus textu odstavec a jiný tabulka. 7

CSS CSS je formátovací jazyk, určuje vzhled stránky. Např: barvu a velikost nadpisu, textu, pozadí a šířku tabulky, Neříká ale, která část stránky bude nadpisem, odstavcem či tabulkou. CSS tedy určuje jen vzhled stránky. Samostatný css soubor. 8

PHP PHP je skriptovací jazyk. Dělají se pomocí něj různé webové aplikace jako je kniha hostů, počítadlo návštěv, anketa, diskusní fórum nebo chat. Rozhodně s PHP nezačínáme, pokud ještě neovládáme základy HTML. 9

JavaScript JavaScript je také skriptovací jazyk. Rozdíl mezi JavaScriptem a PHP je v tom, že PHP funguje na serveru a JavaScript na klientovi. To znamená, že to, co dělá JavaScript se vždy odehrává na vašem počítači (resp. na počítači uživatele vašich stránek) a neodesílá žádná data na server. Pomocí JavaScriptu tedy nevytvoříte nic, co by muselo proběhnout Internetem. JavaScripty dokonce fungují, i když nejste k Internetu zrovna připojeni. V JavaScriptu tedy chat ani knihu hostů neuděláte. Uděláte v něm ale různé efekty jako je rozbalovací menu, běhací a točící se nesmysly, otevírání nových oken s nějakým nastavením a podobně. 10

Verze jazyka HTML Verze 0.9 Byla vydána zhruba v roce 1991. Nepodporuje grafický režim Verze 2.0 Zachycuje stav jazyka v polovině roku 1994. Přidává k původní specifikaci interaktivní formuláře, podpora grafiky. Verze 3.2 Byla vydána 14. ledna 1997 a zachycuje stav jazyka v roce 1996. Připravovaná verze HTML 3.0 nebyla nikdy přijata jako standard kvůli své složitosti a slabé podpoře v prohlížečích. Standard už vydalo konsorcium W3C, stejně jako následující verze. Přidává k jazyku tabulky, zarovnávání textu a stylové elementy pro ovlivňování vzhledu. Verze 4.0 Byla vydána 18. prosince 1997. Do specifikace jazyka přidala nové prvky pro tvorbu tabulek, formulářů a nově byly standardizovány rámy (frames). Verze 4.01 Byla vydána 24. prosince 1999. Tato verze opravuje některé chyby verze předchozí a přidává některé nové tagy. Verze 5.0 7. března 2007 byla založena nová pracovní skupina HTML, jejíž cílem je vývoj nové verze HTML. V květnu 2007 bylo odhlasováno, že základem nové specifikace se stanou Web Applications 1.0 a Web Forms 2.0 ze specifikace WHATWG. Jako název nové specifikace bylo odhlasováno HTML 5.0 a specifikace by měla být hotova v roce 2010. 11

XHTML XHTML(eXtensible HyperText Markup Language) rozšiřitelný hypertextový značkovací jazyk je nástupce HTML založený na XML. Počáteční verze XHTML 1.0 nepřinesla žádné nové prvky v porovnání s HTML 4, jednalo se jen o přepis existujících prvků tak, aby vyhovovaly XML. (XML je jazyk, který nemá na starost zobrazovat data, ale být nositelem dat, obsahu. Umožňuje oddělení obsahu od formy, vzhledu, a tím jednoduché zobrazení stejného obsahu na různých zařízeních obrazovka, tiskárna, mobilní telefon atd.) (O rozvoj standardů pro Web se stará společnost W3C (World Wide Web Consorcium) www.w3.org, která sdružuje akademické i komerční organizace zabývající se WWW, Internetem a souvisejícími technologiemi.) 12

Co budeme potřebovat? Editory K psaní WWW-stránek tedy není třeba žádný speciální software, může postačit obyčejný textový editor, např. Poznámkový blok (nutná znalost (X)HTML). Pro tvorbu webových stránek existuje nepřeberné množství editorů. V zásadě je můžeme rozdělit na strukturní a WYSIWYG editory. 13

Strukturní editory Práce přímo ve zdrojovém kódu dokumentu, nutné znát HTML. Průběžný vzhled přepnutím do prohlížeče. Jsou to např. PSPad, HomeSite, HTML-Kit, Emacs, Vim, 1stPage, Golden HTML Editor, EasyPad, UltraEdit... Pro uživatele Linuxu pak například Quanta. 14

WYSIWYG editory Wysiwyg je anglická zkratka, která znamená What you see is what you get, tedy co vidíš, to dostaneš. Nepracuje se s kódem, ale se vzhledem stránky. Napíše se normálně text, vloží se obrázky a uloží se to na disk do souboru a příponou html. Editor všechny html značky (tagy) doplní sám. Výhoda: Pohodlnější práce. Nevýhoda: Výsledný kód je zmatečný, není validní. Např.: Dreamweaver, NVU, FrontPage, 15

Prohlížeče Nutné k zobrazení WWW stránek. Pozor! - Prohlížeče interpretují kód odlišně! Např.: Internet Explorer, Mozilla, Opera Pro uživatele Mac: Safari (asi 90% mac-uživatelů) Statistiky o používání internetových prohlížečů, rozlišení monitorů apod. www.toplist.cz (/global.html) 16

Pozn: Pro vytváření stránek lze použít tzv. konvertory z jiných datových formátů. Řada programů přímo obsahuje export do (X)HTML, např. MS Word, MS Excel, MS PowerPoint, atd. Kvalita výstupu bývá problematická, HTML kód je nekvalitní a často se zobrazuje chybně. 17

Kontrolní nástroje validátory (X)HTML, kontrola odkazů apod. Validátory provádějí kontrolu (X)HTML kódu a upozorňují na chybná či problematická místa. Validátory jsou k dispozici jak ve formě běžných programů, tak jako on-line služba, kde se zadá adresa stránky a validátor ji zhodnotí. Nejběžnější je validátor pocházející přímo od WWW Consorcia (http://validator.w3.org/). Jednou zčasto prováděných kontrol je testování funkčnosti odkazů. 18

Struktura webové stránky: 19