Chování blokových prvků v rámci HTML dokumentu

Slides:



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

Technologie pro publikování na webu 1
Jazyk HTML. Zdrojový kód  Elementy obsah obsah př. důležité př. důležité př. př.
TNPW1 Technologie pro publikování na webu Cvičení č. 8 Obtékání a sloupce Martin Adámek.
TVORBA WEBOVÝCH STRÁNEK
WWW stránky.
Referát č. 22 Tvorba webových stránek (Struktura webu, struktura HTML dokumentu, vytvoření webové stránky exportem z aplikačního programu, provázání.
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.
Základy HTML.
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,
TNPW1 Cvičení
Kaskádové styly (Cascading Style Sheets, CSS) slouží k formátování HTML prvků. Pomocí kaskádových stylů lze nastavit font, řez písma, velikost písma, zarovnání,
Mgr. Vlastislav Kučera přednáška č. 10.  Polohování ◦ Absolutní polohování  Vlastnosti ◦ umístění ◦ display ◦ visibility.
GWEB2 MGR. VLASTISLAV KUČERA 3. PŘEDNÁŠKA. Obsah přednášky  CSS3  barvy  border-radius  box-shadow  text-shadow.
Třídy, generické třídy, pseudotřídy
KASKÁDOVÉ STYLY 4.
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.
Mgr. Vlastislav Kučera přednáška č. 8.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Centrování, Box model, Plovoucí fotogalerie Ing. Jiří Štěpánek.
Blokový model v CSS Obr. 1.
Mgr. Vlastislav Kučera 4. přednáška.  vícenásobná pozadí  velikost pozadí  zobrazení pozadí  gradienty.
Seznam - menu Seznam a jeho položky lze použít například i na vytvoření vysouvacího menu. Seznam a jeho položky lze použít například i na vytvoření vysouvacího.
Kaskádové styly Cascading Style Sheets. Využití CSS jde o jazyk pro popis způsobu zobrazení stránek napsaných v jazycích HTML, XHTML nebo XML umožňuje.
CSS – rámečky Mgr. Lenka Švancarová.
Přehled dalších vlastností
CSS: šířka prvku, rámečky, okraje, výplně plovoucí prvky #CSS – šířka prvku, rámečky, okraje, výplně #CSS – plovoucí prvky.
Gymnázium, Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Hodonín Tvorba webu Úvod do CSS 1.
Kaskádové styly - CSS.
TNPW1 Cvičení
TNPW1 Technologie pro publikování na webu Cvičení č. 7 Menu Martin Adámek.
Čí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.
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.
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.
Mgr. Vlastislav Kučera přednáška č. 5.  transformace  přechody.
Tvorba www stránek Seznam, tabulky, grafika a barvy (1.část) Ing. Miroslav Vachůn, Ph.D.
CSS – float a clear Mgr. Lenka Švancarová. CSS – float Vlastnost určuje obtékání prvku. Hodnoty:  right – prvek bude zarovnán vpravo, okolní obsah stránky.
CSS – Kaskádové styly IZI 228.
Mgr. Vlastislav Kučera lekce č. 6.  Polohování ◦ normální řazení ◦ plovoucí boxy  Vlastnosti ◦ float ◦ clear.
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.
TNPW1 Technologie pro publikování na webu Cvičení č. 9 Boxmodel Martin Adámek.
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.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
Čí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ý.
HTML – TABULKY. - uzavírá celou strukturu tabulky atributy tabulky:  align - obtékání tabulky ostatním textem – right, left, center  cellpadding – vnitřní.
Mgr. Vlastislav Kučera lekce č. 5.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
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í.
VY_32_INOVACE_4.3.IVT1.06/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 pozicování.
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.
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.
VY_32_INOVACE_4.3.IVT1.07/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 formátování.
Styly CSS VýhodyDruhyZápis. Výhody CSS oddělení struktury od formátování oddělení struktury od formátování přilinkováním souboru styl.css lze formátovat.
CSS – menu vlevo Mgr. Lenka Švancarová. CSS – menu vlevo.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
Ing. Jiří Štěpánek. Technologie pro publikování na webu 1, Ing. Jiří Štěpánek.
NSWI096 - INTERNET CSS – kaskádové styly Mgr. Petr Lasák.
Vývojová prostředí Objektově Orientované Programování OB21-OP-EL-KON-DOL-M Orbis pictus 21. století.
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 – tabulky
Rozvržení HTML dokumentu
Kaskádové styly CSS.
Tvorba WEBOVÝCH stránek – obrázky
Tabulky a prostředí tabular
Tvorba webových stránek
Layout v Xamarin.Forms Polohovací prvky
Transkript prezentace:

Chování blokových prvků v rámci HTML dokumentu Blokové prvky Chování blokových prvků v rámci HTML dokumentu Ivo Peterka, FHS UK 2009

Rozměry blokového prvku margin width Vnitřní obsah prvku border-width padding Ivo Peterka, FHS UK 2009

Rozměry blokových prvků Okrajové rozměry lze nastavit i jednotlivě border-top-width, border-bottom-width, border- left-width, border-right-width margin-top, margin-right, margin-bottom, margin- left padding-top, padding-bottom, padding-left, padding-right Ivo Peterka, FHS UK 2009

Plovoucí prvky Prvek se stává plovoucím nastavením vlastnosti float Hodnoty left, right left je vlastnost, kdy se plovoucí prvek umisťuje co nejvíce doleva v rámci vnitřního obsahu nadřazeného prvku right je vlastnost, kdy se plovoucí prvek umisťuje co nejvíce doprava v rámci vnitřního obsahu nadřazeného prvku Prvky jsou umístěny vedle sebe, pakliže součty šířek, padding (left i right), šířek okrajů (left i right) a margin (left i right) jsou menší než šířka nadřazeného prvku. Ivo Peterka, FHS UK 2009

Samostatné plovoucí prvky Chceme-li samostatný plovoucí prvek (bez „sousedů“), použijeme vlastnost clear. clear: both Žádný z předchozích prvků nemůže být vedle tohoto prvku clear: left Žádný z předchozích prvků nemůže být nalevo od tohoto prvku clear: right Žádný z předchozích prvků nemůže být napravo od tohoto prvku Ivo Peterka, FHS UK 2009

Plovoucí a neplovoucí prvky Je-li jeden z prvků neplovoucí, pak vzdálenost mezi prvky je větší z jejich margin vlastností. Jsou-li oba prvky plovoucí, pak vzdálenost mezi nimi je součet vlastností margin jednotlivých prvků. Ivo Peterka, FHS UK 2009