Číslo šablony: III/2 VY_32_INOVACE_P4_3.11 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - odkazy, obrázky Typ: DUM - kombinovaný.

Slides:

Advertisements

Podobné prezentace

Číslo šablony: III/2 VY_32_INOVACE_P4_ 2.5 Tematická oblast: Aplikační software pro práci s informacemi I. Textový editor – odkazy (obsah, rejstřík) Typ:

Advertisements

Základy HTML – vkládání objektů

Tematická oblast: Aplikační software pro práci s informacemi I.

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 www stránek Obrázky, animace a transparentnost, grafická menu a klikací oblasti obrázku (1.část) Ing. Miroslav Vachůn, Ph.D.

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:

Tvorba www stránek VLOŽENÍ OBRÁZKŮ ICT 4.ročník. Vložení obrázku OBRÁZEK NA WEBOVÝCH STRÁNKÁCH Binární data – ukládáme do samostatných složek (IMAGE,

Programování HTML stránek

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.

TAGY A STRUKTURA WEBOVÉ STRÁNKY. web – skupina webových stránek a dalších souborů (styly, obrázky, …), které na sebe navzájem odkazují jazyky pro psaní.

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:

Tematická oblast: Aplikační software pro práci s informacemi II.

Tvorba webových stránek II. Odkazy, obrázky, seznamy.

Číslo šablony: III/2 VY_32_INOVACE_P4_3.7 Tematická oblast: Aplikační software pro práci s informacemi II. Databáze - sestava Typ: DUM - kombinovaný Předmět:

Číslo šablony: III/2 VY_32_INOVACE_P4_3.1 Tematická oblast: Aplikační software pro práci s informacemi II. Vektorová grafika – výplň, pero Typ: DUM - kombinovaný.

Číslo šablony: III/2 VY_32_INOVACE_ P4_2.11 Tematická oblast: Aplikační software pro práci s informacemi I. Tabulkový kalkulátor-funkce, adresy Typ: DUM.

Číslo šablony: III/2 VY_32_INOVACE_P4_3.15 Tematická oblast: Aplikační software pro práci s informacemi II. PowerPoint - animace Typ: DUM - kombinovaný.

Tematická oblast: Aplikační software pro práci s informacemi I.

Číslo šablony: III/2 VY_32_INOVACE_ P4_2.14 Tematická oblast: Aplikační software pro práci s informacemi I. Tabulkový kalkulátor-řady Typ: DUM - kombinovaný.

ZÁKLADY HTML – ODKAZY, SEZNAMY. - vodorovná čára atributy:  width – délka čáry – pixely nebo %  size - šířka ve smyslu tloušťky  align - zarovnání.

Číslo šablony: III/2 VY_32_INOVACE_P4_3.13 Tematická oblast: Aplikační software pro práci s informacemi II. CSS - vlastnosti Typ: DUM - kombinovaný Předmět:

Číslo šablony: III/2 VY_32_INOVACE_P4_3.5 Tematická oblast: Aplikační software pro práci s informacemi II. Databáze - dotazy Typ: DUM - kombinovaný Předmět:

Tematická oblast: Hardware, software a informační sítě

Číslo šablony: III/2 VY_32_INOVACE_P4_2.17 Tematická oblast: Aplikační software pro práci s informacemi I. Rastrová grafika-hromadné úpravy Typ: DUM -

Číslo šablony: III/2 VY_32_INOVACE_P4_ 2.7 Tematická oblast: Aplikační software pro práci s informacemi I. Textový editor – matematické výrazy Typ: DUM.

Číslo šablony: III/2 VY_32_INOVACE_ P4_2.3 Tematická oblast: Aplikační software pro práci s informacemi I. Tabulkový kalkulátor-databázové funkce Typ:

HTML, XHTML a CSS Základy jazyků značek.

Číslo projektuCZ.1.07/1.5.00/ Číslo materiáluVY_32_INOVACE_259 Název školyGymnázium, Tachov, Pionýrská 1370 Autor Ing. Roman Bartoš Předmět Informatika.

Číslo šablony: III/2 VY_32_INOVACE_P4_3.8 Tematická oblast: Aplikační software pro práci s informacemi II. Databáze – základy SQL Typ: DUM - kombinovaný.

Číslo šablony: III/2 VY_32_INOVACE_P4_3.6 Tematická oblast: Aplikační software pro práci s informacemi II. Databáze - formulář Typ: DUM - kombinovaný Předmět:

David Klíma- 1 - Obrázky na webu Než dám obrázek na web co musím udělat? Získat ho Upravit Zmenšit na publikovatelnou formu POZOR! někdy se obrázek natahuje.

CSS Cascading Style Sheets Kaskádové styly

DHTML Jan Felger. Kapitola 0: Základní tagy Základy HTML © Jan Felger 2005 Úvod Tato prezentace zobrazuje pouze zcela základní minimum znalostí, které.

XHTML – obrázky Mgr. Lenka Švancarová Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Mgr. Lenka Švancarová. Dostupné z Metodického portálu.

Obchodní akademie a Střední odborná škola, gen. F. Fajtla, Louny, p.o. Osvoboditelů 380, Louny Číslo projektuCZ.1.07/1.5.00/ Číslo sady29Číslo DUM16.

Číslo šablony: III/2 VY_32_INOVACE_P4_1.13 Tematická oblast: Hardware, software a informační sítě DĚLENÍ PC SÍTÍ Typ: DUM - kombinovaný Předmět: ICT, ICTS.

Číslo šablony: III/2 VY_32_INOVACE_P4_1.17 Tematická oblast: Hardware, software a informační sítě OS WIN 7, 1. část Typ: DUM - kombinovaný Předmět: ICT.

Obrázky Obrázky se používají pro oživení stránek. Obrázky se používají pro oživení stránek. Obrázky se do stránek vkládají nepárovou značkou. To znamená,

Obrázky v HTML dokumentech Druhy a použití. Obrázky + Zvyšují atraktivitu stránek. + Zvyšují vypovídací schopnost stránek. - Zvyšují dobu načítání stránky.

CO NÁS ČEKÁ ve cvičení 5 Oč. - KIT PEF CZU 1. O DKAZY Chceme-li, aby čtenář naší html stránky někam odklepnul..... Oč. - KIT PEF CZU.

Číslo šablony: III/2 VY_32_INOVACE_P4_1.15 Tematická oblast: Hardware, software a informační sítě AKT. SÍŤ. PRVKY – ROUTER, SWITCH Typ: DUM - kombinovaný.

Číslo šablony: III/2 VY_32_INOVACE_P4_ 2.6 Tematická oblast: Aplikační software pro práci s informacemi I. Textový editor-hromadná korespondence Typ: DUM.

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.

Číslo šablony: III/2 VY_32_INOVACE_P4_1.18 Tematická oblast: Hardware, software a informační sítě OS WIN 7, 2. část Typ: DUM - kombinovaný Předmět: ICT.

Číslo šablony: III/2 VY_32_INOVACE_P4_1.11 Tematická oblast: Hardware, software a informační sítě PC SÍTĚ, TOPOLOGIE Typ: DUM - kombinovaný Předmět: ICT,

Číslo šablony: III/2 VY_32_INOVACE_P4_ 2.4 Tematická oblast: Aplikační software pro práci s informacemi I. Textový editor – záhlaví, zápatí Typ: DUM -

Číslo šablony: III/2 VY_32_INOVACE_P4_ 2.3 Tematická oblast: Aplikační software pro práci s informacemi I. Textový editor - odstavec Typ: DUM - kombinovaný.

Párová a nepárová značka, atributy a jejich hodnoty

VY_32_INOVACE_4.3.IVT1.13/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.

HTML – TABULKY. - uzavírá celou strukturu tabulky atributy tabulky:  align - obtékání tabulky ostatním textem – right, left, center  cellpadding – vnitřní.

Střední škola služeb a podnikání, Ostrava-Poruba příspěvková organizace Výukový materiál v rámci projektu OPVK 1.5 Peníze středním školám Číslo projektu:

Číslo šablony: III/2 VY_32_INOVACE_P4_1.19 Tematická oblast: Hardware, software a informační sítě Komprimace Typ: DUM - kombinovaný Předmět: ICT Ročník:

Základy HTML 1 Odkazy. 2 a aOdkaz (z angl.anchor). Obsah odkazu Vše, co je mezi značkami a bude sloužit jako odkaz (tzn. bude klikatelné). Např. Hlavní.

Číslo šablony: III/2 VY_32_INOVACE_P4_1.20 Tematická oblast: Hardware, software a informační sítě Operační systém sítě Typ: DUM - kombinovaný Předmět:

Odkazy. Href Nejdůležitější atribut, cíl odkazu. Zjednodušeně pojato tato hodnota říká, jaká stránka se objeví po kliknutí. Href se zapisuje jako URL.

Základy HTML 1 Vložení obrázku. 2 Grafické formáty První předpoklad pro vložení obrázku do stránky je jeho uložení ve vhodném formátu. Prohlížeče podporují.

Title of the document The content of the document Úroveň 1 Úroveň 2 Úroveň 3 Titulek Výrobky Služby O nás Autorem materiálu a všech jeho částí, není-li.

PHP Programy pro tvorbu WWW stránek - 01

Základy tvorby www stránky v HTML kódu. © Mgr. Petr Loskot, leden Časopis PPK Časopis PC World.

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.

Tvorba webových stránek - tabulka

Tvorba WEBOVÝCH stránek – obrázky

Tvorba WEBOVÝCH stránek – hypertextové odkazy

Základy HTML TNPW1 Ing. Jiří Štěpánek.

Průvodní list Šablona: III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Vzdělávací materiál: Prezentace – zápis pro žáky Určen pro: 4. ročník oboru.

Transkript prezentace:

Číslo šablony: III/2 VY_32_INOVACE_P4_3.11 Tematická oblast: Aplikační software pro práci s informacemi II. HTML - odkazy, obrázky Typ: DUM - kombinovaný Předmět: ICT Ročník: 2., 3. r. (6leté), 1. r. (4leté) Zpracováno v rámci projektu EU peníze školám CZ.1.07/1.5.00/ Zpracovatel: Mgr. René Brauner Gymnázium, Třinec, příspěvková organizace Datum vytvoření: březen 2014

Metodický list Prezentace je určena k procvičení učiva v 2., 3. ročníku šestiletého a 1. ročníku čtyřletého studia. Je možné ji zařadit i do plánů seminářů ICT v rámci opakování. Prezentace vede žáka k pochopení problematiky tvorby webových stránek, prezentované učivo se ihned aplikuje do výuky. Žák prokazuje znalost pojmů HTML, CSS. Žák je schopen napsat krátký zdrojový kód. Úkoly řeší žáci samostatně na pracovních stanicích. Mohou používat doporučené učebnice, google nebo wikipedii. Práce a následná kontrola probíhají ve spolupráci s učitelem.

Obrázky – tag Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený ze souboru. Atributy Význam Hodnoty src umístění souboru s obrázkem URL alt alternativní popis libovolný text lowsrc náhradní obr. pro malé displeje URL width šířka délka nebo procento height výška délka nebo procento border tloušťka rámečku align zarovnání obrázku left, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom

Použití tagů: obrázek TITUL NADPIS TEXT

Odkaz – tag Odkaz (z angl.anchor). Vše, co je mezi značkami a bude sloužit jako odkaz (tzn. bude možno na to kliknout). Např. Hlavní stránka se zobrazí jako nápis Hlavní stránka. Na tento nápis lze kliknout. Href Nejdůležitější atribut, cíl odkazu. Tato hodnota říká, jaká stránka se objeví po kliknutí. Href se zapisuje jako URL. Příklad: Portál Seznam GYMTRI

Použití tagů: odkaz TITUL NADPIS GYMTRI TEXT

Obrázek jako odkaz Odkazem může být text, např.: GYMTRI Odkazem může být jiný element (obrázek):

Použití tagů: odkaz TITUL NADPIS TEXT

Cvičení 1.Zjistěte na internetu, jaké typy tagů se vyskytují nejčastěji ve zdrojových kódech. 2.Klikněte pravým tlačítkem myši na oblíbenou www stránku a zvolte „Zobrazit zdrojový kód“. 3.Které atributy můžete (musíte) použít u tagu IMG?

Citace zdrojů Wikipedia. HTML [online]. [cit ]. Dostupný na WWW: