Tvorba www stránek Seznam, tabulky, grafika a barvy (1.část) Ing. Miroslav Vachůn, Ph.D.

Slides:



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

Technologie pro publikování na webu 1
Úvod do tvorby internetových stránek v jazyce HTML Dostupné z Metodického portálu ISSN: , financovaného z ESF a státního rozpočtu.
Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.
Styly, záhlaví a zápatí, oddíly
TVORBA WEBOVÝCH STRÁNEK
WWW stránky.
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.
Technologie pro publikování na webu 1 Ing. Jiří Štěpánek.
VY_32_INOVACE_4.3.IVT1.15/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.
TNPW1 Technologie pro publikování na webu Přednáška č. 4 seznamy seznamy tabulky tabulky jejich sémantika jejich sémantika Ing. Martin Adámek Katedra informačních.
Tvorba www stránek Obrázky, animace a transparentnost, grafická menu a klikací oblasti obrázku (1.část) Ing. Miroslav Vachůn, Ph.D.
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
Základy HTML.
Mgr. Vlastislav Kučera přednáška č. 5.  Seznamy  CSS – vlastnosti seznamů ◦ list-style-type, list-style-image, list-style-position  Tabulky  CSS –
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,
Tvorba stránek  komu jsou stránky určeny  grafická úprava stránek  obsah  motivy vzhledu stránky
HyperText Markup Language
Programování HTML stránek
VY_32_INOVACE_4.3.IVT1.14/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.
TNPW1 Cvičení
Úvod do html kódu. Roman Hendrich
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í.
Tematická oblast: Aplikační software pro práci s informacemi II.
Jazyk HTML.
Odkazy Pomocí odkazu se lze pohybovat mezi stránkami. Cílem může být další stránka nebo identifikátor na aktuální stránce. Pomocí odkazu se lze pohybovat.
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.
Blokový model v CSS Obr. 1.
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:
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
HTML (XHTML) 2. 2 HYPERTEXTOVÉ ODKAZY Odkaz může ukazovat na různá místa v internetu, na další Vaše internetové stránky nebo obrázky či jiné dokumenty.
ZÁKLADY HTML – ODKAZY, SEZNAMY. - vodorovná čára atributy:  width – délka čáry – pixely nebo %  size - šířka ve smyslu tloušťky  align - zarovnání.
CSS – rámečky Mgr. Lenka Švancarová.
Čí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.
CSS – vlastnosti textu text-align (vodorovné zarovnání)
HTML Text, seznamy, tabulky. Formátování textu Tučné... Kurzíva … Velké … Malé … Dolní index … Horní index … Přeškrtnuté … Podtržené … MOŽNO KOMBINOVAT.
TNPW1 Cvičení
Čí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.
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é.
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:
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.
Tvorba webu Jazyk HTML, úvod
XHTML – formátování textu, vodorovná čára Mgr. Lenka Švancarová.
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.
HTML JAZYK Výuka HTML jazyka pro střední školy. 1. Jazyk HTML Standardní značkovací jazyk používaný pro dokumenty na webu. Jazyk HTML pomocí tágů (značek)
Čí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á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í.
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.
Tvorba www stránek CSS (Úvod do kaskádových stylů (Úvod do kaskádových stylů) Ing. Miroslav Vachůn, Ph.D.
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.
CSS – menu vlevo Mgr. Lenka Švancarová. CSS – menu vlevo.
Programujeme v kódu HTML (Hyper Text Markup Language)
HTML - vložení obrázku značka pro vložení obrázku : <img>
Tvorba www stránok.
HTML pokračování. Co obsahuje každý html dokument? stránka stránka ahoj světe HTML.
Elektronické učební materiály - II. stupeň Informatika – aplikace informačních technologií Autor: Bc. Pavel Šiktanc Internetové stránky III. Co se všechno.
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.
Základy tvorby www stránky v HTML kódu.
Tvorba WEBOVÝCH stránek – tabulky
Tvorba webových stránek - tabulka
Tvorba WEBOVÝCH stránek – formátování textu, oddělovací čára
Co je to webová prezentace?
Tvorba WEBOVÝCH stránek – obrázky
NÁZEV ŠKOLY: Základní škola Josefa Bublíka, Bánov
Jazyk HTML (1) Jazyk HTML (Hypertext Markup Language) se používá pro vytváření Web Pages (www stránek) HTML používá text a sadu formátovacích značek, označovaných.
Typy tagů stylové (formátovací) - tučné , šikmé , styl , písmo  ... strukturální- odstavce , nadpisy , seznamy , tabulky  ...
Transkript prezentace:

Tvorba www stránek Seznam, tabulky, grafika a barvy (1.část) Ing. Miroslav Vachůn, Ph.D.

Nečíslované seznamy, obsah první položky obsah druhé položky obsah třetí položky Atribut tagu je type - udává vzhled grafických symbolů, obsah první položky obsah druhé položky obsah třetí položky Atribut tagu je type - udává vzhled grafických symbolů type=disk - plná tečka, implicitně type=disk - plná tečka, implicitně type=circle - prázdný kroužek type=circle - prázdný kroužek type=square - čtvereček type=square - čtvereček style=list-style-image: URL(puntik.gif)

Číslované seznamy Atributy type type a - čísluj malými písmeny arabské abecedy a - čísluj malými písmeny arabské abecedy A - velkými písmeny arabské abecedy A - velkými písmeny arabské abecedy i - římské číslice malými písmeny i - římské číslice malými písmeny I - římské číslice velkými písmeny I - římské číslice velkými písmeny 1 - arabskými číslicemi, implicitní hodnota 1 - arabskými číslicemi, implicitní hodnota start ="počáteční hodnota" - od které poč. hodnoty má začít číslovat seznam, např. start=20, start=VII start ="počáteční hodnota" - od které poč. hodnoty má začít číslovat seznam, např. start=20, start=VII continue - zajišťuje návaznost číslování na předchozí seznam, tzn. že jestliže poslední číslovaný seznam skončil na čísle 10, potom nový seznam s atributem continue začne číslovat položky u čísla 11 continue - zajišťuje návaznost číslování na předchozí seznam, tzn. že jestliže poslední číslovaný seznam skončil na čísle 10, potom nový seznam s atributem continue začne číslovat položky u čísla 11 align=[left|right|center|justify] - určuje zarovnání položek v seznamu: vlevo, vpravo, uprostřed, na oba okraje align=[left|right|center|justify] - určuje zarovnání položek v seznamu: vlevo, vpravo, uprostřed, na oba okraje

Vymezení tabulky <table> Atributy Atributy border - určuje tloušťku rámečku, implicitně bývá 0 nebo 1, border=0 způsobí, že se zobrazí tabulka bez obrysových čar border - určuje tloušťku rámečku, implicitně bývá 0 nebo 1, border=0 způsobí, že se zobrazí tabulka bez obrysových čar width - definuje šířku tabulky, lze zadat absolutně v bodech, např. width=300, nebo v procentech relativně vzhledem k velikosti okna prohlížeče, např. width=50% width - definuje šířku tabulky, lze zadat absolutně v bodech, např. width=300, nebo v procentech relativně vzhledem k velikosti okna prohlížeče, např. width=50% bgcolor - definuje barvu pozadí tabulky, implicitně je tabulka "průhledná", tj. má takové pozadí, jako je aktuální pozadí dokumentu bgcolor - definuje barvu pozadí tabulky, implicitně je tabulka "průhledná", tj. má takové pozadí, jako je aktuální pozadí dokumentu cellspacing - definuje vzdalenost (v bodech) mezi jednotlivými buňkami v tabulce, implicitně je cellspacing=1 cellspacing - definuje vzdalenost (v bodech) mezi jednotlivými buňkami v tabulce, implicitně je cellspacing=1 cellpadding - definuje vzdalenost textu v buňce od okraje buňky, implicitně cellpadding=1 cellpadding - definuje vzdalenost textu v buňce od okraje buňky, implicitně cellpadding=1

Řádek tabulky a buňka hlavičková... (centrován doprostřed buňky a je tučný) hlavičková... (centrován doprostřed buňky a je tučný) normální... (normální a zarovnán standardně k levému okraji) normální... (normální a zarovnán standardně k levému okraji) Atributy buňky Atributy buňky align - zarovnání objektu v buňce, možnosti: align=left|right|center|justify align - zarovnání objektu v buňce, možnosti: align=left|right|center|justify bgcolor - nezávislá barva pozadí buňky, každá buňka může mít svou vlastní barvu bgcolor - nezávislá barva pozadí buňky, každá buňka může mít svou vlastní barvu width - definice šířky buňky v bodech, např. width=100 width - definice šířky buňky v bodech, např. width=100 nowrap - potlačuje automatické dělení řádků uvnitř buňky nowrap - potlačuje automatické dělení řádků uvnitř buňky Tabulka uvozená tagem a ukončená bude na sránce vycentrována Tabulka uvozená tagem a ukončená bude na sránce vycentrována