Veronika Hladíková. V dnešní době se dají webové stránky zhotovit mnoha způsoby, ale zdaleka ne všechny jsou ty správné. V následující prezentaci se Vám.

Slides:



Advertisements
Podobné prezentace
Základy HTML – vkládání objektů
Advertisements

Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.
Štěpán Šípal Gymnázium Čakovice. Dnešní témata  Vznik XHTML a předchůdci  Základní prvky XHTML dokumentu  Tagy a atributy  Elementy a jejich druhy.
Tvorba webových stránek
WWW stránky.
Tvorba WWW stránek ÚVOD
Martin Holý.  HTML  xHTML  CSS  JavaScript  PHP.
ZÁKLADY HTML Číslo DUM: VY_32_INOVACE_04_11 Autor: Mgr. Ivana Matyášková Datum vytvoření: duben 2013 Ročník: tercie Vzdělávací obor: informační technologie.
Základní škola a mateřská škola Bzenec Číslo projektu: CZ.1.07/1.4.00/ Číslo a název šablony klíčové aktivity: III/2: využívání ICT – inovace Vypracoval/a:
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
Základy HTML.
Tvorba stránek  komu jsou stránky určeny  grafická úprava stránek  obsah  motivy vzhledu stránky
HyperText Markup Language
Jazyk HTML Název školyZákladní škola a Mateřská škola Tatenice Číslo projektuCZ Název šablony klíčové aktivity Inovace a zkvalitnění výuky pomocí.
CSS a HTML 5. HTML 5 HTML5 je nová verze specifikace značkovacího jazyka HTML, která přináší podstatné změny v technologiích webových stránek. HTML5 umožňuje.
VY_32_INOVACE_4.3.IV1.02/Ku Html dokument a jeho struktura Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/
Nové modulové výukové a inovativní programy - zvýšení kvality ve vzdělávání Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem.
Základy html pro úplné začátečníky.
ÚVOD DO HTML Jak vytvořit stránky. Jak vytvořit www-stránky 1) Vytvořit soubor *.htm, nebo *.html 2) Nahrát soubor na server =>dát na internet.
Jak na web První krůčky Lukáš Reindl. Co je potřeba Budeme potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (ve Windows Notepad.
HYPERTEXT PREPROCESSOR. JAZYK PHP. Jazyk PHP (Hypertext PreProcessor) je intepretovaný jazyk určený pro web. Je celkem jednoduchý, snadno přenositelný.
Tvorba www stránek SYNTAXE ICT 4.ročník. Obsah TAGY TAGY ATRIBUTY ATRIBUTY KŘÍŽENÍ TAGŮ KŘÍŽENÍ TAGŮ VELIKOST PÍSMEN VELIKOST PÍSMEN MEZERY VE ZDROJOVÉM.
TVORBA WEBOVÝCH STRÁNEK
Číslo šablony: III/2 VY_32_INOVACE_P4_3.10 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - tagy Typ: DUM - kombinovaný Předmět:
Radek Štěpán, VIII.A Referát č Osnova  A) Standardy pro tvorbu webových stránek  B) Základní pravidla pro vytváření internetových stránek  C)
PHP – vkládání souborů a html 5
XHTML Tvorba webových stránek. Vývoj značkovacích jazyků HTML – HyperText Markup Language  Značkovací jazyk pro vytváření www stránek. Pomocí značek.
Jazyk HTML.
VY_32_INOVACE_4.3.IVT1.17/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
WWW stránky – Struktura, adresování, hosting Mgr. Lenka Švancarová.
Skladba HTML dokumentu
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_258 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_257 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.
VY_32_INOVACE_4.3.IVT1.12/Oc Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Ing. Jaroslav Ochodek CZ.1.07/1.5.00/ Tvorba webových.
Pravidla a doporučení pro názvy souborů
Maturitní okruh 22: Úvod do HTML. Značkovací a klasické jazyky Klasické: převládá strukturovaný text (programovací kód), skripty jsou prováděny na straně.
HTML, XHTML a CSS Základy jazyků značek.
Referát č.13 Textový editor (struktura textu – přiřazení stylu, formátování (vzhled) textu, změna stylu, typografická a estetická pravidla)
Návrh a tvorba WWW Cvičení 4
CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují.
Poznámkový blok a WWW Mgr. Lenka Švancarová. Poznámkový blok a WWW Spustíme si Poznámkový blok.  Soubor-Uložit jako Uložit jako typ – Všechny soubory.
KASKÁDOVÉ STYLY 1. 2 PRVNÍ STANDARD (CSS1) BYL PŘEDSTAVEN V ROCE 1996, PROTO STARŠÍ PROHLÍŽEČE ("ČTYŘKOVÉ" VERZE) IE A NN KASKÁDOVÉ STYLY NEPODPORUJÍ.
CSS Cascading Style Sheets Kaskádové styly
Brána k poznání Dokončení první fáze – základní značky HTML.
WWW stránky – Úvod Mgr. Lenka Švancarová.
VY_32_INOVACE_4.3.IVT1.05/Ku Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Pavla Kubínková CZ.1.07/1.5.00/ CSS.
Základní pojmy (1) Nejpoužívanější internetové prohlížeče: Google Chrome (32.0.x), Mozilla Firefox (27.0), Internet Explorer (11.0.2), Opera (19.0.x),
Párová a nepárová značka, atributy a jejich hodnoty
Tvorba efektních www stránek pro každého Od historie až po současnost… Úvod Porovnání Validace Prohlížeče Závěr.
Elektronická prezentace Alžběta Srnová Brno Prezentace obsahuje Úvodní snímek Obsah - může být na druhém snímku Snímky Shrnutí– na závěr (pokud je nutno.
Tvorba www stránek CSS (Úvod do kaskádových stylů (Úvod do kaskádových stylů) Ing. Miroslav Vachůn, Ph.D.
Jak učit tvorbu www stránek Navarová Adéla. Proč učit tvorbu www stránek? Prezentace na internetu (Výrobky, firmy, celebrity, kluby…)
PHP Programy pro tvorbu WWW stránek - 01
HYPERTEXT PREPROCESSOR. JAZYK PHP. VYUŽITÍ JAZYKA Programování dynamických internetových stránek a webových aplikací vytvoření šablony webu kniha návštěv.
Kristýna Krejčí, Aneta Smyčková, Tereza Kryzanová, Zuzana Purová 9.B.
Jak fungují webové stránky Úvod do HTML (1). Projekt: CZ.1.07/1.5.00/ OAJL - inovace výuky Příjemce: Obchodní akademie, odborná škola a praktická.
Tvorba www stránek – (01) úvod Autor: Mgr. Josef Motl Datum: , ročník: 7. ročník ZŠ Vzdělávací oblast: Informační technologie Anotace: Prezentace.
Inf Webová stránka, princip HTML a CSS. Výukový materiál Číslo projektu: CZ.1.07/1.5.00/ Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím.
Tvorba WEBOVÝCH stránek – kostra dokumentu Šablona 32 VY_32_INOVACE_12_10_Tvorba webových stránek-kostra dokumentu.
HTML pokračování. Co obsahuje každý html dokument? stránka stránka ahoj světe HTML.
ŠKOLA: Gymnázium, Chomutov, Mostecká 3000, příspěvková organizace AUTOR:Mgr. Martin Jiřiště NÁZEV:VY_32_INOVACE_08C_17_uvod_do_html TEMA:Multimédia a grafika.
Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Internetové stránky II. Co se všechno.
1 Kurz XHTML a CSS Část 1: Náš první XTHML dokument a jeho publikace na internetu.
Krátký úvodní kurz HTML Jenyk Obecně 1 - html  V HTML jazyce nezáleží na rozložení a délce řádku, extrémem je napsat celý program v jednom řádku.
WWW a HTML Základní pojmy Ivo Peterka.
NÁZEV ŠKOLY: Masarykova základní škola a mateřská škola Melč, okres Opava, příspěvková organizace ČÍSLO PROJEKTU: CZ.1.07/1.4.00/ AUTOR: Mgr. Vladimír.
Základy tvorby www stránky v HTML kódu.
WWW a HTML Základní pojmy Ivo Peterka.
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
Transkript prezentace:

Veronika Hladíková

V dnešní době se dají webové stránky zhotovit mnoha způsoby, ale zdaleka ne všechny jsou ty správné. V následující prezentaci se Vám takovou tvorbu webové stránky pokusím přiblížit od jejího zrodu až po samotnou prezentaci na webu.

Struktura webu Záhlaví Je nejdůležitějším prvkem na webové stránce. Webovou stránku identifikuje a návštěvníkovi dává najevo, čeho se server týká a co na něm najdeme. Mělo by obsahovat název webové stránky.

Navigace Bez navigace se neobejde žádná dobrá stránka. Pomocí kvalitně promyšlené navigace je zpřístupněn celý obsah webu. Nesmí se hnout z místa. Nachází se v horní části webové stránky. Musí obsahovat odkaz na úvodní stranu.

Vyhledávání Je neocenitelnou součástí internetové stránky. Návštěvníkovi nabízí možnost dostat se co nejrychleji k vyhledávaným informacím. Vyhledávací pole by mělo být zcela jasně viditelné. Obsahová část Text musí být čitelný s neagresivní barvou podkladu. Struktura textu musí být jednoduchá a o přehlednost se postará tučné písmo, kurziva, barvy, seznamy a ikonky.

Zápatí stránky Je to grafické zakončení stránky. Obsahuje určité informace a odkazy, které návštěvník hledá nejčastěji....Copyright a právní ujednání..stáří stránky..kontakt..odkaz na RSS kanál.. atd.

Co to vlastně HTML je? HTML je jednoduchý značkovací jazyk, kterým se tvoří webové stránky Při tvorbě www. stránek se nepoužívá jen html, ale i další jazyky: css, php, javascript a další.

Co je potřeba pro tvorbu HTML stránek? Jednoduchý textový editor. Postačí poznámkový blok nebo speciální editory s podporou html kódu. Poslední důležité vybavení jsou internetové prohlížeče. (Internet Explorer) Pro publikování webhosting.

Struktura HTML dokumentu Každý HTML soubor by měl obsahovat několik základních tagů, hlavičky a těla. Tím se zaručí, že všichni klienti (zejm. prohlížeče) pochopí, o co v dokumentu vlastně jde.

Základní značky TagVýznamVýskyt HtmlZačátek HTML dokumentu Na začátku souboru HeadHlavička stránkyNa začátku souboru BodyTělo stránky + definice pozadí Za poznámkakdekoliv !doctypeSpecifikace DTDÚplně na začátku souboru

Html- Začíná a končí celý dokument. Veškerý další obsah musí být uvnitř. Jedná se o značku nepovinnou, většina prohlížečů si ji domyslí. Head- Hlavička dokumentu Body- Tělo dokumentu. Obsahuje veškerý zobrazovaný obsah stránky. Každý text má obsah a formu. Protože se jazyk HTML vyvíjel, vznikaly časem různé způsoby, jak formátovat text. Proto dnes existují dva odlišné způsoby, jak v HTML třeba obarvit písmo nebo ztučnit text.

1. Starší způsob používá přímo HTML tagy. (Například kurzíva se dělá pomocí tagů a : kurzíva ). Pomocí tagů se některé věci nedají udělat. 2. Novější způsob - CSS styly -- používá tag a obecný atribut "style", kterému se přiřazuje nějaká definice. Je to složitější, ale užitečnější a všeobecné.

Atributy tagu Atribut tagu VýznamHodnotyCSS náhrada pro tag body BgcolorBarva pozadíBarvabackground-color backgroundObrázek na pozadíURLobrázkuBackground- imagine textBarva textuBarvacolor Pro příklad níže uvádím pár základních atributů tagu i s využitím CSS.

Poznámka- Všechno, co je v HTML souboru obaleno značkami, je považováno za poznámku !doctype- Specifikace DTD. Píše se úplně na začátek souboru, ještě před značku. Hlavní funkcí !doctype je dnes přepínání zobrazovacích modů CSS. Jinak řečeno podle doctype se určuje, ve kterém prohlížeči se budou jak počítat šířky a velikosti písma.

Příklad Tvorba webových stránek Tvorba webových stránek. A nějaké další texty.

začíná dokument končí dokument a začíná a končí hlavičku a vymezující název dokumentu Co je mezi a, se bude zobrazovat. je tag, kterým začíná vlastní tělo dokumentu (angl. body = tělo).

Prvky stránek Obrázky a pozadí V HTML se obrázky vkládají nepárovým tagem IMG, který má jeden povinný a mnoho nepovinných parametrů. Odkazy Text, který slouží jako odkaz, je obalen párovým tagem : Text odkazu

Obecná syntaxe HTML HTML má několik málo zásad, které je dobré zmínit. Nezáleží na velikosti písmen, je totéž co V adresách a jménech souborů záleží na velikosti písmen, nesmějí tam být mezery a čeština. Na začátku tagu nesmí být mezera, třeba je špatně.

Jak dostat stránky na web? Jsou dva způsoby, jak publikovat na webu 1. Zadarmo- Buďto využijete služeb veřejných serverů (freehostingů) nebo Vás někdo nechá publikovat na své doméně. 2. Placený- Pokud můžete obětovat pár korun, doporučuji najít si nějaký placený hosting.

Pravidla tvorby přístupného webu 1. Obsah webových stránek je dostupný a čitelný. 2. Práci s webovou stránkou řídí uživatel. 3. Informace jsou srozumitelné a přehledné. 4. Ovládání webu je jasné a pochopitelné. 5. Odkazy jsou zřetelné a návodné. 6. Kód je technicky způsobilý a strukturovaný.