Mgr. Vlastislav Kučera přednáška č. 5.  Seznamy  CSS – vlastnosti seznamů ◦ list-style-type, list-style-image, list-style-position  Tabulky  CSS –

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ř.
Tagy neboli příkazy Olga Kasafírková Základy HTML.
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.
Seznamy Seznamy lze použít pro zpřehlednění zobrazovaných dat na stránce. Seznamy lze použít pro zpřehlednění zobrazovaných dat na stránce. Seznamy se.
Mgr. Vlastislav Kučera přednáška č. 2.  Struktura stránky  hlavička  meta tagy  titulek stránky  připojení stylů,...  CSS.
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.
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4
Statické dokumenty v jazyce HTML Informatika pro ekonomy I přednáška 2, 3.
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 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
Úvod do html kódu. Roman Hendrich
Mgr. Vlastislav Kučera přednáška č. 10.  Polohování ◦ Absolutní polohování  Vlastnosti ◦ umístění ◦ display ◦ visibility.
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
Tematická oblast: Aplikační software pro práci s informacemi II.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111)
Formátování textu. Odstavce  tvoříme párovou značkou  text bude od ostatního textu oddělen Konec řádky  nepárová značka způsobuje ukončení řádku a.
Jazyk HTML.
Střední průmyslová škola strojnická Olomouc, tř.17. listopadu 49 Výukový materiál zpracovaný v rámci projektu „Učíme moderně“ Registrační číslo projektu:
KASKÁDOVÉ STYLY 4.
Mgr. Vlastislav Kučera přednáška č. 8.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Blokový model v CSS Obr. 1.
GWEB2 MGR. VLASTISLAV KUČERA 2. PŘEDNÁŠKA. Obsah přednášky  Prvky rozdělující obsah  article, aside, nav, section  header  footer.
Mgr. Vlastislav Kučera 4. přednáška.  vícenásobná pozadí  velikost pozadí  zobrazení pozadí  gradienty.
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.
David Klíma- 1 - Seznamy Číslované Ordered list Nečíslované Unordered list Definiční Pro vložení do seznamu.
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.
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.
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.
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.
CSS styly Kaskádové styly (CSS – Cascading Style Sheets) jsou prostředkem, který zajišťuje jednotný vzhled publikovaných stránek. Technologii CSS podporují.
CSS Cascading Style Sheets Kaskádové styly
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 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.
Mgr. Vlastislav Kučera lekce č. 6.  Polohování ◦ normální řazení ◦ plovoucí boxy  Vlastnosti ◦ float ◦ clear.
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.
HTML 5 a CSS 3.
Mgr. Vlastislav Kučera lekce č. 3
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í.
Mgr. Vlastislav Kučera přednáška č. 3
Mgr. Vlastislav Kučera lekce č. 5.  Boxy  Vlastnosti ◦ width ◦ height ◦ padding ◦ border ◦ margin.
Textový procesor (MS Word) Ing. Jan Roubíček. Tabulky v textu VY_32_INOVACE_10_2_15_AP.
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.
Úvod Excel – tabulkový procesor. Řádek vzorců – zobrazuje úplný a skutečný obsah buňky Označená aktivní buňka Pozice aktivní buňky.
1 Kurz XHTML a CSS Část 1: Náš první XTHML dokument a jeho publikace na internetu.
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.
Tvorba webových stránek - tabulka
Co je to webová prezentace?
Inf Tvorba WWW – tabulky a seznamy
Číslo projektu školy CZ.1.07/1.5.00/
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:

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

 Seznamy  CSS – vlastnosti seznamů ◦ list-style-type, list-style-image, list-style-position  Tabulky  CSS – vlastnosti tabulek ◦ border-collapse, border-spacing, empty-cells  Citace  Horní a dolní index  Zkratky  Horizontální čára

 2 typy ◦ uspořádaný, neuspořádaný ◦ blokové, párové  uspořádaný: ◦  neuspořádaný: ◦  položky seznamu: ◦ ◦ párové, každá položka seznamu se zobrazí na novém řádku  př. – priklad-seznamy.htmlpriklad-seznamy.html

 seznamy lze vnořovat  lze kombinovat oba typy seznamů  vnořovaný seznam musí být obsažen v položce nadřazeného seznamu  př:  př. – priklad-vnorene_seznamy.htmlpriklad-vnorene_seznamy.html

 určuje vzhled odrážek položek seznamů  hodnoty ◦ disc, circle, square, decimal, decimal-leading-zero, ◦ lower-roman, upper-roman, lower-greek, lower- alpha ◦ lower-latin, upper-latin,...  výchozí hodnota ◦ disc  význam hodnot ◦ př. seznamy.htmlseznamy.html

 určí obrázek, který má sloužit jako odrážka položky seznamu  hodnoty ◦ none,, inherit  výchozí hodnota ◦ není  význam hodnot ◦ none  pro vykreslení se nepoužije obrázek a odrážka je definovaná pomocí list-style-type ◦  jako odrážka se zobrazí obrázek ze zadané adresy  př.: seznam-image.htmlseznam-image.html

 určuje pozici boxu odrážky vzhledem k základnímu boxu položky seznamu  hodnoty ◦ inside, outside, inherit  výchozí hodnota ◦ outside  význam hodnot ◦ inside – box odrážky je 1. řádkovým boxem uvnitř základního boxu položky seznamu ◦ outside – box odrážky leží vně základního boxu položky seznamu  př.: seznamy-position.htmlseznamy-position.html

 uvozují se  řádek tabulky:  buňka:  spec. tag: ◦ téměř jako, ale text je zobrazen tučně a je vycentrován  př. – priklad-tabulka-zaklad.htmlpriklad-tabulka-zaklad.html

 border ◦ rámeček kolem tabulky ◦ hodnota - číslo  cellpadding ◦ výplň v buňce ◦ hodnota - číslo  cellspacing ◦ rozestup mezi buňkami ◦ hodnota - číslo  př. – priklad-tabulka-parametry_01.htmlpriklad-tabulka-parametry_01.html

 colspan ◦ buňka přes více sloupců ◦ hodnota - číslo  rowspan ◦ buňka přes více řádků ◦ hodnota - číslo  !POZOR na počty buněk v řádku a sloupci!  př. – priklad-tabulka-parametry_02.htmlpriklad-tabulka-parametry_02.html

 určuje způsob orámování buněk tabulky  hodnoty ◦ collapse, separate, inherit  výchozí hodnota ◦ collapse  význam hodnot ◦ collapse  tabulka bude vykreslena v režimu splývajících orámování ◦ separate  tabulka bude vykreslena v režimu samostatného orámování

 určuje vzdálenost mezi orámováním jednotlivých sousedních buněk; funguje, je-li border-collapse nastavena na separate  hodnoty ◦ "velikost", inherit  výchozí hodnota  0  význam hodnot ◦ "velikost" "velikost"  vzdálenost mezi orámováním sousedních buněk  je-li udána jedna hodnota, použije se pro vertikální i horizontální vzdálenost  dvě hodnoty: 1. je pro horizontální, 2. pro vertikální

 určuje, zda se orámování vykreslí i okolo prázdných buněk  použití jen v kombinaci border-collapse: separate  hodnoty ◦ show, hide, inherit  výchozí hodnota ◦ show  význam hodnot ◦ show  orámování se vykreslí okolo prázdných buněk ◦ hide  okolo prázdných buněk se orámování nevykreslí  př.: tabulky-oramovani.htmltabulky-oramovani.html

 ◦ blokový, párový ◦ parametr cite – píše se zde adresa citovaného zdroje ◦ při použití cite se používá tag  nepodporuje IE, Firefox, Opera  ◦ řádkový, párový  př. – priklad-citace.htmlpriklad-citace.html

 horní index ◦  párový, řádkový  dolní index ◦  párový, řádkový  př. – priklad-horni_dolni_index.htmlpriklad-horni_dolni_index.html

 zkratky: ◦ ◦ párový, řádkový ◦ parametr title  hodnota - vysvětlení zkratky  akronymy: ◦ ◦ párový, řádkový ◦ parametr title  hodnota - vysvětlení akronymu  př. – priklad-zkratky.htmlpriklad-zkratky.html

 - XHTML, - HTML  nepárový, blokový  př. – priklad-cara.htmlpriklad-cara.html