tvoříme web Bootstrap
|
|
|
- Oldřich Havel
- před 4 lety
- Počet zobrazení:
Transkript
1 tvoříme web Bootstrap Zlín
2 Co s načatou sobotou V rychlosti zopakujeme základy HTML a CSS Dozvíme se něco o responsivitě Projdeme si úskalí responsivních webů Dáme jídlo Zjistíme, k čemu nám pomůže Bootstrap Umíme dělat responsivní webovky!
3 HTML Struktura <html> <head> popis stránky </head> <body> zde je obsah stránky </body> </html>
4 HTML Opakování <h1>hlavní titulek stránky</h1> <h2>titulek druhé úrovně</h2> <p>odstavec s textem - slouží k členění delšího textu</p> <div>oddíl - slouží k rozdělení obsahu, nějčastěji pro rozdílné stylování různých částí stránky. </div> <img src="obrazky/fotka.jpg" alt="moje fotka po ránu"> <a href=" odkazu</a> <ul> <li>text položky seznamu</li> <li>text položky seznamu</li> </ul>
5 CSS Slovník selektor p { color: red; font-size: 20px; vlastnost hodnota SELEKTOR na jaký HTML prvek budeme přidávat styl? VLASTNOST budeme měnit písmo, barvu nebo třeba odsazení? HODNOTA na jakou hodnotu nastavíme vlastnost? na všechny tagy <p> se nastaví červené písmo o velikosti 20px
6 CSS Opakování color: #f36f21; barva písma background-color: blue; barva pozadí font-size: 20px; velikost písma, udává se nejčastěji v pixelech font-family: "Merriweather", "Arial", sans-serif; druh písma, font-weight: bold; síla (tučnost) písma, výchozí je normal text-align: center; zarovnání písma vlevo: left (výchozí), na střed: center, vpravo: right padding: 25px; vnitřní odsazení bloku ze všech stran margin-right: 10%; vnější odsazení bloku border: 5px solid #177095; rámeček, 5px silný, plná čára, modrá barva width: 50%; šířka bloku, udává se nejčastěji v % a px max-width: 960px; šířka bloku
7 CSS Třídy Kromě HTML selektorů (elementů) H1, p, a,... je možné přidat styly na HTML elementy s vlastní CSS třídou. Přidání v HTML: <p class="cerveny-text">tento odstavec má CSS třídu cerveny-text</p> Přidání v CSS:.cerveny-text { color: red; font-size: 22px;
8 CSS Box model Padding = vnitřní odsazení Border = rámeček Margin = vnější odsazení Šířka nebo výška elementu = viditelná šířka nebo výška obsahu + padding + border. Slouží k odsazení obsahu (margin a padding) a zvýraznění (border). Odkazy:
9 CSS Display display: inline; element se zobrazí v řádku, nelze zadat rozměry a odsazení patří sem například textové elementy <a>, <strong>, <span> display: block; blokový element, lze zadat rozměry a odsazení patří sem například <div>, <p>, <ul>, <li> display: inline-block; zobrazuje se v řádku jako inline, ale lze zadat rozměry a odsazení jako block patří sem například <img> Odkazy:
10 Responsivita Co to je? Responsivní webdesign je způsob stylování HTML stránky, které zajistí, že bude stránka dobře fungovat na nejrůznějších zařízeních.
11 Responsivita Proč to řešit?
12 Responsivita Jak ji řešit? Viewport metatag Flexibilní struktura obsahu Flexibilní obrázky Media queries
13 Responsivita jak ji řešit? Viewport <meta name="viewport" content="width=device-width, initial-scale=1"> Informuje prohlížeč, že obsah stránky je připraven pro mobilní zařízení. Bez tohoto zápisu se stránka zobrazí na mobilu jen jako zmenšená.
14 Responsivita jak ji řešit? Flexibilní obsah Rozměry obsahu stránky zadáváme v relativních jednotkách. <div> <div class="blok"> <h2>první sekce</h2> <p>tady je text o mně</p> </div> <div class="blok"> <h2>druhá sekce</h2> <p>tady bude taky text o mně</p> </div> </div>.blok { width: 320px; height: 150px; float: left; background: blue; color: white;
15 Responsivita jak ji řešit? Flexibilní obsah Rozměry obsahu stránky zadáváme v relativních jednotkách. <div> <div class="blok"> <h2>první sekce</h2> <p>tady je text o mně</p> </div> <div class="blok"> <h2>druhá sekce</h2> <p>tady bude taky text o mně</p> </div> </div>.blok { width: 320px; height: 150px; float: left; background: blue; color: white;.blok { width: 50%; float: left; background: blue; color: white;
16 Responsivita jak ji řešit? Flexibilní obrázky.pruzny-obrazek { max-width: 100%; height: auto;
17 Cvičení Úkol 1 - responsivita otevřete si v prohlížeči soubor ukol-01.html v adresáři zadani/ukol-01/ na stránce je obrázek větší než červený rámeček cílem je, aby obrázek byl vždy uvnitř rámečku (za jekéhokoliv rozlišení obrazovky) úpravu doplňte do souboru zadani/ukol-01/styly.css
18 Responsivita jak ji řešit? Media Queries Možnost zápisu CSS pravidel podle různých podmínek. p { font-size: only screen and (min-width: 800px) { p { font-size: 18px;
19 Media Queries Jak to funguje médium only screen and (min-width: 800px) {... hodnota
20 Media Queries Přehled hodnot Logické only screen and (min-width: 800px) and (max-width: 1200px) {... only print {... Detekce only screen and (orientation: landscape) {... Odkazy:
21 Media Queries Breakpointy Body zlomu stylů webové only screen and (min-width: 576px) {... /* styly pro malé displeje only screen and (min-width: 768px) {... /* styly pro větší displeje only screen and (min-width: 992px) {... /* styly pro ještě větší displeje only screen and (min-width: 1200px) {... /* styly pro velké displeje */ Hodnoty zlomu nastavujeme podle grafického zadání, obsahu a můžeme je mít stejné nebo naopak jedinečné pro každý prvek.
22 Media Queries Breakpointy.navigace { background-color: (min-width: 992px) {.navigace { background-color: white; h1 { font-size: 18px; color: (min-width: 768px) { h1 { font-size: (min-width: 1200px) { h1 { font-size: 26px;
23 Media Queries Rozlišení displeje 1920 x 1050px 1366 x 768px 768 x 1024px 360 x 640px
24 Media Queries Pixel Hardwarový pixel versus CSS pixel V Media Queries pracujeme pouze s CSS pixely Je potřeba s retina displeji počítat Odkazy: zdroj: Martin Michálek,
25 Media Queries Mobile First! mobile first desktop first h1 { font-size: 18px; color: only screen and (min-width: 768px) { h1 { font-size: only screen and (min-width: 1200px) { h1 { font-size: 26px; h1 { font-size: 26px; color: only screen and (max-width: 1199px) { h1 { font-size: only screen and (max-width: 767px) { h1 { font-size: 18px;
26 Cvičení Úkol 2 media queries otevřete si v prohlížeči soubor ukol-02.html v adresáři zadani/ukol-02/ změňte barvu oranžového rámečku a nechte zmizet červený rámeček na velké obrazovce bonusový úkol zarovnejte modrý a fialový blok vedle sebe na velké obrazovce úpravu doplňte do souboru zadani/ukol-02/styly.css
27 Bootstrap framework Co to je? Sada hotových HTML komponent, CSS stylů a JS funkcí, pomocí kterých lze velmi rychle budovat webové stránky. Bootstrap verze 4 versus verze 3
28 Bootstrap Začínáme
29 Bootstrap Breakpointy
30 Bootstrap Grid Bootstrap Grid ( = mřížka) je sada CSS stylů, pomocí kterých lze obsah stránky zarovnat v různých bodech zlomu (breakpointech). Tyto CSS styly využívají media-queries. Bootstrap využívá mřížku s 12 sloupci.
31 Bootstrap Grid
32 Bootstrap Grid
33 Bootstrap Grid row (řádek obaluje sloupce) col (sloupec 1) col (sloupec 2) col (sloupec 3) <div class="row"> <div class="col-sm-4"> Jeden ze tří sloupců </div> <div class="col-sm-4"> Jeden ze tří sloupců </div> <div class="col-sm-4"> Jeden ze tří sloupců </div> </div> sloupec 1 sloupec 2 sloupec 3 řádek
34 Bootstrap Grid od jakého breakpointu platí <div class="col-md-6"> kolik sloupců z 12 zabere na šířku
35 Bootstrap Grid
36 Bootstrap Grid <div class="col-6 col-sm-4 col-lg-3"> - na mobilu polovina šířky (6/12) - na malém tabletu třetina šířky (4/12) - na desktopu čtvrtina šířky (3/12) </div> <div class="col-md-8 col-xl-2"> - na mobilu přes celou šířku - na velkém tabletu 66.66% šířky (8/12) - na velkém desktopu 16.66% šířky (2/12) </div>
37 Bootstrap Container container CSS třída.container zajišťuje vnitřní odsazení od okrajů webu V kombinaci s gridem: <div class="container"> <div class="row"> <div class="col-6"> Jeden ze dvou sloupců </div> <div class="col-6"> Jeden ze dvou sloupců </div> </div> </div>
38 Cvičení Úkol 3 Bootstrap grid otevřete si v prohlížeči soubor ukol-03.html v adresáři zadani/ukol-03/ první řada - nastav 2 stejně široké sloupce vedle sebe druhá řada - nastav 3 stejně široké sloupce vedle sebe (každý zabírá třetinu). třetí řada - nastav plnou šířku sloupců pro mobil, poloviční šířku pro tablet a čtvrtinovou pro desktop Bonus Sloupce nemusí být vždy stejně široké, vyzkoušej různé šířky sloupců. Co když součet šířek sloupců není 12? úpravu doplňte do souboru zadani/ukol-03/ukol-03.html
39 Bootstrap Pomocné CSS třídy Odsazení.m-4 = margin: 24px;.mr-lg-2 (min-width: 960px) { margin-right: 8px;.py-3 = padding-top: 16px; padding-bottom: 16px; Display.d-none = display: none;.d-sm-block (min-width: 576px) { display: block;
40 Projekt Začínáme otevřete si v prohlížeči soubor index.html v adresáři zadani/projekt/ projděte si v editoru HTML kód a podívejte se na strukturu jednotlivých sekcí
41 Projekt Vložíme Bootstrap doplňte do projektu napojení na CSS a JS Bootstrapu jak na to? změnil se nějak vzhled stránky?
42 Projekt Navigace najděte na webu Bootstrapu komponentu Navbar a překopírujte vhodnou variantu z webu dobře vypadá například: upravíme hlavní titulek webu upravíme odkazy v menu aby odpovídaly našemu projektu doplníme okolo obsahu navigace třídu.container pro odsazení vyberte vzhled a zafixujeme pozici navigace v horní části obrazovky s použitím pomocných tříd pro odsazení zarovnáme menu doprava (zkuste doplnit CSS třídu ml-auto na seznam <ul class="navbar-nav">)
43 Projekt Carousel najděte si komponentu Carousel překopírujte si kód do projektu doplňte cestu k fotkám - carousel-1.jpg, carousel-2.jpg a carousel-3.jpg
44 Projekt Akce nastavte grid pro blok Akce: titulek o šířce 4/12 pro breakpoint sm (od 576px) a vyšší text šířka 8/12 pro breakpoint sm (od 576px) a vyšší
45 Projekt Kadeřnice rozdělte obsah pomocí gridu na tři sloupce (opět od breakpointu sm) zarovnejte obsah na střed (mrkněte na pomocné Bootstrap třídy pro text) nastavte obrázky responsivní (Bootstrap web sekce Content) nastavte obrázkům tvar kruhu (řešení najdeme kde?)
46 Projekt Služby a ceník zarovnáme obsah do sloupců - Služby vlevo (sm-6, md-7), Ceník vpravo (sm-6, md-5) Služby nastavte jako komponentu media (využijte třídy media, media-body) obrázky pro malé rozlišení schováme (využijeme pomocné třídy pro Display) Ceník - podíváme se na styly Bootstrapu pro tabulky a vybereme si nějaký vhodný Jak bychom mohli jiným způsobem (než media komponentou) zarovnat obrázek a text ve Službách vedle sebe?
47 Projekt Reference (Řekli o nás) zarovnáme obsah do dvou sloupců (opět od breakpointu sm) pro fotku s textem opět využijeme media komponentu fotky nastavíme responsivní a kruhové
48 Projekt Fotogalerie fotky zarovnáme: do 3 sloupců na mobilu do 4 sloupců pro tablety (sm) do 6 sloupců pro desktop (md) nastavíme, aby sloupce gridu neměly odsazení (třída.no-gutter na řádku) nezapomenout na responsivitu fotek
49 Projekt Kontakt Obsah rozdělíme následovně: Otvírací doba: sm-6, md-4 Adresa: sm-6, md-4 Mapa: sm-12, md-4 (= na tabletu 2 sloupce a mapa na celý řádek, na desktopu 3 sloupce) tabulce dodáme nějaký hezký styl
50 Projekt Zápatí obsah rozdělíme 8 ku 4 (copyright a odkazy na sociální sítě) odkazy na sociální sítě vypíšeme vedle sebe bez odrážek seznamu (využijeme třídy.list-inline a.list-inline-item)
51 Projekt Vlastní styly použijeme na veškerý text font Lora 00,700i jako výchozí písmo nastavíme: 15px pro mobily 16px pro tablety 18px pro větší obrazovky výchozí barvou odkazu bude fialová #c5308a
52 Projekt Vlastní styly nadpisy nastavíme kurzívou (font-style) text nadpisů druhé úrovně H2 nastavíme na střed a spodní odsazení 36px text nadpisů třetí úrovně H3 nastavíme fialové #c5308a
53 Projekt Rozdělení do sekcí pro všechny části obsahu (Akce, Kadeřnice, Služby, Reference, Fotogalerie a Kontakt) nastavíme vnitřní odsazení nahoře a dole 24px sekcím Kadeřnice, Reference a Kontakt nastavíme šedé pozadí #f0f0f0 v ideálním případě budeme mít jednu vlastní CSS třídu společnou pro všechny sekce a jednu pro sekce s šedým pozadím
54 Projekt Vlastní styly - navbar titulku webu nastavíme fialovou barvu #c5308a položky menu budou mít bílý text při najetí myši bude mít položka fialovou barvu pozadí a bílý text aktivní položka menu bude mít fialovou barvu pozadí a bílý text
55 Projekt Vlastní styly - akce pozadí celého bloku Akce bude mít fialovou barvu a bílý text zrušíme vnější spodní odsazení odstavce i H2 nadpisu
56 Projekt Vlastní styly - Kadeřnice fotky odsadíme od textu pod ním a nastavíme jim maximální šířku 220px obsah Akce odsadíme od horního a dolního okraje zrušíme vnější odsazení odstavce
57 Projekt Vlastní styly - Reference fotkám nastavíme maximální šířku 80px
58 Projekt Vlastní styly - Fotogalerie Fotogalerii zrušíme spodní odsazení, aby nám pěkně navazovala na Kontakt
59 Na domácí večery Responsivita a školení Anglicky
60 to je vše! Díky Zlín
61 Přídavek Další systémy: Foundation, Semantic UI, Material UI,... CSS preprocesory SASS, LESS Jednotky vw, vh, rem Responsivní obrázky srcset, sizes, picture SVG obrázky Flex
62 Přídavek Další frameworky Foundation <div class="row"> <div class="medium-6 large-4 columns">12/6/4 columns</div> <div class="medium-6 large-8 columns">12/6/8 columns</div> </div> Semantic UI <div class="ui grid"> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> <div class="four wide column"></div> </div>
63 Přídavek CSS Preprocesory SASS: Proměnné $primary-color: #c5308a; h1 { color: $primary-color; a { color: $primary-color; Vnoření kódu.sekce { background: blue; h1 { font-size: #{$screen-md { font-size: 3rem; Funkce $primary-color: #c5308a; a { color: $primary-color; &:hover { color: darken($primary-color, 5%); LESS ( PostCSS (
64 Přídavek Nové jednotky rem hodnota, která odpovídá velikosti písma na <html> elementu výchozí hodnota je 1rem = 16px pokud všechna odsazení i velikosti písma máme zadány v rem jednotce, pak lze jednou změnou velikosti písma na <html> elementu zvětšit/zmenšit celý web vw, vh jednotky viewportu (velikosti okna) 1vw = 1/100 z šířky okna viewportu (viewport width) 1vh = 1/100 z výšky okna viewportu (viewport height)
65 Přídavek Responsivní obrázky srcset: seznam dostupných obrázků a jejich velkosti sizes: rozměry prostoru pro obrázek pro různá rozlišení <img src="images/photo-405x225.jpg" srcset="images/photo-405x225.jpg 405w, images/photo-810x450.jpg 810w" sizes="(max-width: 639px) 50vw, (max-width: 979px) 33.33vw, (max-width: 1519px) 324px, 405px" alt="..." width="405" height="225">
66 Přídavek SVG vektorový obrázek lze měnit jeho velikost bez ztráty kvality vždy perfektně ostrý i na retina displejích lze jej stylovat pomocí CSS
67 Přídavek CSS Flexbox pružné elementy layoutu umí vyplnit zbývající prostor = stejná výška pro všechny prvky možnost měnit pořadí prvků <div style="flex"> <div>... </div> <div>... </div> <div>... </div> </div>
tvoříme web HTML/CSS
tvoříme web HTML/CSS 22. 4. 2018 Zlín HTML/CSS Co s načatou nedělí Pochopíme k čemu slouží HTML a CSS Naučíme se pár nových slovíček Vytvoříme webovou stránku v HTML Dáme jídlo Pomocí CSS dodáme stránce
školení frontend CSS Preprocesory
školení frontend CSS Preprocesory CSS preprocesory Preprocesory Způsob zápisu, který zjednodušuje a zrychluje tvorbu CSS Přidává do CSS další funkce a nástroje, snaží se řešit slabiny CSS Snaží se řešit
Základy CSS (3. přednáška)
Základy CSS (3. přednáška) Kaskádové styly k čemu jsou HTML definuje strukturu, CSS definuje vzhled. CSS stylesheet soubor pravidel určujících vzhled jednotlivých prvků dokumentu CSS pravidlo sestává ze
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 24.4.2015 Webové aplikace
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 24.4.2015 Webové aplikace Návrh webové stránky responsivní design strana 2 WEB Dříve: místo pro prezentaci a umístění dat prohlížeče pouze na PC Nyní: platforma
Přehled základních html tagů
Přehled základních html tagů h1... hlavní nadpis h2... podnadpisy h3... podnadpisy další úrovně p... odstavec strong... tučné písmo b... tučné písmo em... kurzíva i... kurzíva br... zalomení řádku ol...
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako
CSS 1 Relativní pozicování Relativní pozicované bloky jsou pozicované vůči nornálnímu toku elementů dokumentu. (nejsou vyjmuty z normálního toku jako absolutně pozicované bloky)
CSS Kaskádové styly. formátování webových stránek
CSS Kaskádové styly formátování webových stránek Co je CSS? Layout webových stránek Nástroj na formátování html tagů Cascading style sheets možnost vrstvení Význam tagy HTML významová vs. formátovací
O CSS podrobněji. Box model Document flow Layout
O CSS podrobněji Box model Document flow Layout O CSS podrobněji Box model Každý element má: -obsah (content) -spadávku (padding) -rámeček (border) -okraj (margin) O CSS podrobněji http://www.w3.org/tr/css21/box.html
Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD
Tvorba www-stránek Webové stránky jsou napsané pomocí jazyka HTML (HyperText Markup Language). Ke tvorbě webových stránek potřebujeme - speciální program umožňuje tvořit stránku bez znalostí HTML-kódu
Tvorba webových stránek
Tvorba webových stránek 1 HTML Hyper Text Markup Language = hypertextový značkovací jazyk Slouží pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy HTML soubor je obyčejný text obalený
Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www
Číslo projektu Název školy Název Materiálu Autor Tematický okruh Ročník CZ.1.07/1.5.00/34.0499 Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www Ing. Pavel BOHANES
Úvod do jazyka HTML (Hypertext Markup Language)
Úvod do jazyka HTML (Hypertext Markup Language) WWW zdroje: http://www.jakpsatweb.cz/ Jak psát web, návod na HTML stránky (Dušan Yuhů Janovský) http://www.kit.vslib.cz/~satrapa/www/kurs/ Kurs vytváření
TNPW1 Cvičení 6 24.3.2015 aneta.bartuskova@uhk.cz
6 24.3.2015 aneta.bartuskova@uhk.cz Layout 24.3.2015 aneta.bartuskova@uhk.cz Layout stránky = strukturní i vizuální rozvržení webové stránky Stránka je chápána jako skupina oblastí, každá oblast má svůj
TVORBA WEBOVÝCH STRÁNEK
TVORBA WEBOVÝCH STRÁNEK Výukový modul TWS_03c Ing. Pavel Chmiel, Ph.D. UNIV 2 - KRAJE Osnova výukového modulu TWS_03c 1. Box model v CSS 2. Obtékání blokových (X)HTML elementů 3. Pozicování blokových (X)HTML
Tvorba webových stránek
Tvorba webových stránek HTML Hypertext Markup Language jazyk pro tvorbu webových stránek Rozšíření: JavaScript, CSS Dynamické stránky: PHP, ASP(X), JSP Prohlížeče: IE, Firefox, Opera, Google Chrome mohou
DESETIMINUTOVKY CSS - DOVEDNOSTI TÉMATA:
1 DESETIMINUTOVKY CSS - DOVEDNOSTI TÉMATA: Obsah CSS... 1 VKLÁDÁNÍ CSS DO HTML DOKUMENTU + MEDIA... 1 ADRESOVÁNÍ ČÁSTÍ HTML POMOCÍ SELEKTORŮ A JEJICH PRIORITA... 2 RESETOVÁNÍ CSS... 3 BARVY... 3 STYLOVÁNÍ
Internetové publikování. Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.
Internetové publikování Doc. Ing. Petr Zámostný, Ph.D. místnost: A-72a tel.: 4222, 4167 (sekretariát ústavu 111) e-mail: petr.zamostny@vscht.cz Internetové publikování CSS 4. Formátovací model, pozicování
Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border
Mgr. Vlastislav Kučera Header, footer, navv, article, section, boxy, margin, padding, border Prvky rozdělující obsah article, aside, nav, section Header Footer Boxy Vlastnosti width height padding border
RESPONZIVNÍ WEBDESIGN INFORMAČNÍCH SYSTÉMŮ RESPONSIVE WEBDESIGN OF INFORM SYSTEMS
RESPONZIVNÍ WEBDESIGN INFORMAČNÍCH SYSTÉMŮ RESPONSIVE WEBDESIGN OF INFORM SYSTEMS Stanislav Machalík 1 Anotace: V příspěvku jsou popsány základy tvorby responzivního webu, online aplikací a informačních
<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura
mv Všechny html tagy jsou uzavřeny do závorek . Většina tagů je párových, tzn. ke každému tagu existuje druhá značka s lomítkem před tagem. (, ) HTML tagy by měly udávat pouze logické členění
CSS Stylování stránek. Zpracoval: Petr Lasák
CSS Stylování stránek Zpracoval: Petr Lasák Cascade Style Sheets Sada stylů každý element má styl svého zobrazení Říká, jak má být element zobrazen, ne co v něm je Do verze HTML 4.0 byl vzhled měněn pouze
22. Tvorba webových stránek
22. Tvorba webových stránek Webové stránky jsou spolu s elektronickou poštou nejpoužívanější prostředky internetu. Brouzdáme li internetem používáme nějaký prohlížeč. To, co vidíme na obrazovce v prohlížeči
HTML Hypertext Markup Language
HTML Hypertext Markup Language je jazyk určený na publikování a distribuci dokumentů na Webu velmi jednoduchý jazyk používá ho mnoho uživatelů má výkonné prostředky (příkazy) k formátování dokumentů (různé
(X)HTML, CSS a jquery
Prezentační vrstva webové aplikace (X)HTML, CSS a jquery jquery Java Scriptová knihovna Ing. Martin Dostal (X)HTML první stránka Textový soubor s příponou.htm nebo.html: moje
Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www
Číslo projektu Název školy Název Materiálu Autor Tematický okruh Ročník CZ.1.07/1.5.00/34.0499 Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_135_IVT_HTML_08_tvorba_www Ing. Pavel BOHANES
Webové stránky. 5. Kaskádové styly formátování textu. Datum vytvoření: 3. 10. 2012. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.
Webové stránky 5. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 3. 10. 2012 Webové Strana: 1/11 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM
Manuál tvorby webových stránek dle webu Jihočeské univerzity v Českých Budějovicích www.jcu.cz. Guideline pro fakulty a celoškolská pracoviště
Manuál tvorby webových stránek dle webu Jihočeské univerzity v Českých Budějovicích www.jcu.cz Guideline pro fakulty a celoškolská pracoviště Červen 014 1 z 9 O manuálu Guideline tvorby webu Jihočeské
Tvorba fotogalerie v HTML str.1
Tvorba fotogalerie v HTML str.1 obr. A obr. B 1) Spustíme PsPad, vytvoříme nový dokument a otevře se nám okno nový soubor, kde si můžeme zvolit jaký chceme typ. My označíme HTML a potvrdíme. 2) Pro správné
KIV/PIA 2012 Ing. Jan Tichava
KIV/PIA 2012 Ing. Jan Tichava Opera Mini Zobrazených stránek za měsíc 90 G 80 G 70 G 60 G 50 G 40 G 30 G 20 G 10 G 0 G January 2011 May 2011 September 2011 January 2012 May 2012 September 2012 State of
Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou
Zá klady HTML Jazyk HTML (Hypertext Markup Language) - jedná se o souhrn pravidel pro formatování textu, obrázků atd. pro použítí na webových stránekách. Webovou stránku tvoří prvky, které jsou definovány
TNPW1 Cvičení
13.10.2015 aneta.bartuskova@uhk.cz Úvod do CSS 13.10.2015 aneta.bartuskova@uhk.cz Výchozí styly prohlížeče Pokud nepřiřadíme elementům žádný styl v CSS, formátují se výchozími hodnotami prohlížeče (v CSS
Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument
Informatika pro moderní fyziky (8) Javascript, CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a
FFUK Uživatelský manuál pro administraci webu Obsah
FFUK Uživatelský manuál pro administraci webu Obsah FFUK Uživatelský manuál pro administraci webu... 1 1 Úvod... 2 2 Po přihlášení... 2 3 Základní nastavení webu... 2 4 Menu... 2 5 Bloky... 5 6 Správa
Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela
Základy informatiky HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra HTML
Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči
Název: VY_32_INOVACE_PG4119 Tipy a triky, rozdíly mezi prohlížeči Autor: Mgr. Tomáš Javorský Datum vytvoření: 06 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: DUM seznamuje
Základy HTML. Autor: Palito
Základy HTML Autor: Palito Zobrazení zdrojového kódu Zobrazení zdrojového kódu Každá stránka je na disku nebo na serveru uložena ve formě zdrojového kódu. Ten kód je psaný v jazyce HTML. Když si chcete
Blokový model v CSS:
Blokový model v CSS: Blokový model v CSS: Vlastnosti textu Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis word-spacing normal, délka normal o kolik se zvětší mezera mezi slovy letter-spacing
Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.
Bloky Tu se popisuji blokové tagy, což jsou všechny, za kterými se zalamuje řádka. Jde o různé oddíly textu a odstavce. Opakem blokových tagů jsou řádkové (in-line) tagy na značkování textu. Tag Význam
HTML - Úvod. Zpracoval: Petr Lasák
HTML - Úvod Zpracoval: Petr Lasák Je značkovací jazyk, popisující obsah HTML stránek Je z rodiny SGML jazyků, jako např. XML, DOCX, XLSX Nejedná se o programovací ale značkovací jazyk Dynamičnost dodávají
www.zlinskedumy.cz Pracovní list VY_32_INOVACE_33_20 Databáze Databáze Databáze Projekt II. Ing. Petr Vilímek
VY_32_INOVACE_33_20 Pracovní list Škola Název projektu, reg. č. Vzdělávací oblast Vzdělávací obor Tematický okruh Téma Tematická oblast Název Autor Vytvořeno, pro obor, roč. Anotace Přínos/cílové kompetence
Nová struktura souborů a složek
Tvorba podstránek Vytvoření podstránek Asi si kladete otázku, jakým způsobem docílíme toho, aby se všechny podstránky na našem webu zobrazovaly v námi vytvořeném layoutu. Máme 4 možnosti jak vytvářet podstránky
Kaskádové styly (CSS)
Kaskádové styly (CSS) Přednáška z předmětu Počítačová kartografie (KMA/POK) Otakar ČERBA Západočeská univerzita v Plzni Vznik dokumentu: 20.11.2007 Poslední aktualizace: 5.11.2009 Cascading Style Sheets
CSS kaskádové styly a jejich využití při tvorbě internetových stránek
Základní škola Dr. E. Beneše, Praha 9 Čakovice, nám. J. Berana 500 Ročník 9. A CSS kaskádové styly a jejich využití při tvorbě internetových stránek Školní rok: 2010 / 2011 Vypracoval: Michal Kolář Vedoucí
KAPITOLA 5. Základní stylování seznamů
KAPITOLA 5 Stylování seznamů a vytváření navigačních lišt Je naší přirozeností dávat světu kolem nás nějaký řád. Vědci vytváří seznamy zvířat, rostlin a chemických prvků. V časopisech jsou seznamy deseti
INTERSTENO 2013Ghent Mistrovstvísvta v profesionálním word processingu
POUŽITÝ OPERAČNÍ SYSTÉM POUŽITÝ SOFTWARE PRO WORD PROCESSING SOUTĚŽNÍ ID A 1 Instrukce pro účastníky Otevřete dokument TRANSPORT.DOC, ihned uložte jako TRANSPORTXXX.DOCneboDOCX,kde XXX je Vašesoutěžní
Rozměry, okraje a rámečky
Rozměry, okraje a rámečky 185 Jaké jednotky délky lze v CSS použít Jednotky délky slouží k zapisování vzdálenosti a definují se jimi jak rozměry elementů, tak rozměry okrajů či rámečků. Zapisují se hned
CSS Selektory tříd a ID, dědičnost, další vlastnosti. Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace
CSS Selektory tříd a ID, dědičnost, další vlastnosti Internetové publikování 1 Cascading Style Sheets Formátování HTML dokumentu, které je více či méně oddělené od obsahu Způsoby implementace Specifikace
Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant
Základy informatiky 03 HTML, tvorba webových stránek Kačmařík/Szturcová/Děrgel/Rapant Obsah přednášky princip webového dokumentu, ukázka nástroje pro tvorbu pravidla tvorby HTML, značky kostra HTML dokumentu
Techniky rozvržení KAPITOLA 2
Techniky rozvržení KAPITOLA 2 V této kapitole: Box model Blokové versus řádkové elementy Zkrácené versus běžné vlastnosti jazyka CSS Rozvržení založené na obtékání Pozicování v jazyce CSS Responzivní web
CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek.
Kaskádové styly CSS (Cascading Sytle Sheets) neboli kaskádové styly vznikly jako souhrn metod pro úpravu vzhledu stránek. CSS se využívá k formátování obsahu HTML, XHTML a XML dokumentů. Ve srovnání s
Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití
Název: VY_32_INOVACE_PG4113 Relativní pozicovaní a jeho využití Autor: Mgr. Tomáš Javorský Datum vytvoření: 05 / 2012 Ročník: 3 Vzdělávací oblast / téma: webdesign, počítačová grafika Anotace: Seznámení
www.zlinskedumy.cz Pracovní list VY_32_INOVACE_33_19 Databáze Databáze Databáze Ing. Petr Vilímek
VY_32_INOVACE_33_19 Pracovní list Škola Název projektu, reg. č. Vzdělávací oblast Vzdělávací obor Tematický okruh Téma Tematická oblast Střední průmyslová škola Zlín Inovace výuky prostřednictvím ICT v
Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne
Obrázky Tag Význam Párový Výskyt img obrázek ne img video ne map klikací mapa ano area oblast v klikací mapě ne Img Obrázek (angl. image). Nepárový tag. Do stránky se vloží obrázek načtený z jiného
Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument
Informatika pro moderní fyziky (8) CSS - stylování dokumentů, SVG - tvorba obrázků, složitější interaktivní dokument František HAVLŮJ e-mail: haf@ujv.cz ÚJV Řež oddělení Reaktorové fyziky a podpory palivového
Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela
Základy informatiky 03, HTML, tvorba WWW stránek Daniela Szturcová Část převzata z přednášky P. Děrgela Obsah přednášky Princip WWW dokumentu, ukázka Nástroje pro tvorbu Pravidla tvorby HTML, tagy Kostra
CSS styly. Cascading Style Sheets kaskádové styly
CSS styly Cascading Style Sheets kaskádové styly Kaskádové styly Jednotný vzhled publikovaných www stránek Rozsáhlé změny jdou provést snadno Široká podpora (prohlížeče + WYSIWIG) Standard CSS byl představen
Název školy: SOŠ NET OFFICE Orlová, spol. s r.o. Vypracoval/a: Mgr. Alena Sovová
Název projektu: Podpora výuky v technických oborech Registrační číslo projektu: CZ.1.07/1.5.00/34.0458 Název šablony: V/2 Inovace a zkvalitnění výuky směřující k rozvoji odborných kompetencí žáků středních
12. Základy HTML a formuláře v HTML
12. Základy HTML a formuláře v HTML 1) Co je to HTML a historie HTML 2) Termíny v HTML a. tag b. značka c. element d. atribut e. entita 3) specifikace a. html, xhtmll b. rozdíly xhtml a html 4) struktura
Dokumentace k ročníkové práci
Dokumentace k ročníkové práci 1) Cílem mé práce bylo udělat webové stránky splňující všechny požadavky zadání ročníkové práce. Zároveň jsem se však snažil lidem sdělit, o čem je hra Counter-Strike: Source,
INTERSTENO 2011 Paris World championship professional word processing
POUŽITÝ OPERAČNÍ SYSTÉM POUŽITÝ SOFTWARE PRO WORD PROCESSING SOUTĚŽNÍ ID A 1 Instrukce pro soutěžící Otevřete koncept dokumentu WINDENERGY.DOC, ihned jej uložte jako WINDENERGYXXX.DOC nebo DOCX, kde XXX
Formát stránky, písma, odstavce Word 2007 egon. Formát stránky a písma, okraje, odstavce, oddíly
Formát stránky, písma, odstavce Word 2007 egon Formát stránky a písma, okraje, odstavce, oddíly Jan Málek 11.6.2010 Formát stránky Před psaním textu bychom se měli rozmyslet, na jaký formát papíru případně
Office Arena 2017 Krajské kolo
Krajské kolo Název soutěžního projektu: Návštěva známé osobnosti Úlohy v zadání můžete řešit v libovolném pořadí. Hodnotí se přesnost a shoda se zadáním, dodržení typografických pravidel, přehlednost práce
Dokument XHTML. Prohlížeč. styl CSS. Výstupní dokument. Soubor DTD
CSS 1 Výhody: Udřování prezentace oddělené od dokumentu znamená, že můžete nastavit styly dokumentu pro různá média; Oddělení dokumentu od jeho prezentace znamená menší dokument, což dále znamená, že se
TNPW1 Cvičení 2 6.10.2015 aneta.bartuskova@uhk.cz
6.10.2015 aneta.bartuskova@uhk.cz TNPW1 Cvičení 1 Technologie pro tvorbu webu HTML, HTML5 značkovací jazyk struktura, obsah, odkazy - hypertext CSS, CSS3 kaskádové styly vzhled (rozvržení, formátování,
Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda
Kaskadové styly (CSS) VOŠG Hellichova Praha 2010 Jirka Jahoda Kaskadové styly CSS 1996 Cascading Style Sheets (tabulky kaskádových stylů) Jazyk pro popis způsobu zobrazení stránek napsaných v jazycích
Uživatelský manuál Radekce-Online.cz
Uživatelský manuál Radekce-Online.cz (revize 06/2011) V prvním kroku třeba vstoupit do administrace na adrese www.redakce-online.cz kterou naleznete na záložce Administrace / Vstup do Administrace, pro
Word 2007 Word 2007 egon. Spuštění, vzhled, zobrazení dokumentu
Word 2007 Word 2007 egon Spuštění, vzhled, zobrazení dokumentu Jan Málek 30.4.2010 Word 2007 V roce 2007 přichází firma Microsoft s novou verzí kancelářského balíku MS Office 2007 a tedy i textového editoru
KAPITOLA 3 - ZPRACOVÁNÍ TEXTU
KAPITOLA 3 - ZPRACOVÁNÍ TEXTU KLÍČOVÉ POJMY textové editory formát textu tabulka grafické objekty odrážky a číslování odstavec CÍLE KAPITOLY Pracovat s textovými dokumenty a ukládat je v souborech různého
HTML - pokračování. Co už víme?
HTML - pokračování Co už víme? HTML slouží ke strukturovanému zápisu informací HTML dokument je jako skládačka Je to text uvozený značkou Základní části jsou HEAD a BODY Nadpisy pomocí
Tématická oblast: dědičnost, kaskáda. CSS a média. Stylové předpisy pro různé typy zobrazovacích zařízení
Tématická oblast: dědičnost, kaskáda CSS a média Stylové předpisy pro různé typy zobrazovacích zařízení Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je ( Ing. Petr Měrka). VY_32_INOVACE_185
CSS 1. Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. Zde je dlouhý text v kterém nachazí vložené...
Blokový model Každý element tvoří obdélník. Dva druhy obdélníků: - Blokové; - Vložené. CSS 1 blokové To je blokové Zde je dlouhý text v kterém nachazí vložené... vložené Vnější okraje umožňují nastavovat
Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS
Výstupový indikátor 06.43.19 Motivační název: Autor: Vzdělávací oblast: Vzdělávací obory: Ročník: Časový rozsah: Pomůcky: Projekt Integrovaný vzdělávací systém města Jáchymov - Mosty Tvorba webu I Petr
NSWI096 - INTERNET. Úvod do HTML
NSWI096 - INTERNET Úvod do HTML XHTML CO TO JE? XML extensible Markup Language Sada pravidel, jak kódovat dokumenty Podle těchto pravidel lze vytvořit nekonečně mnoho různých jazyků HTML HyperText Markup
Manuál pro obsluhu Webových stránek
ResMaster Systems s.r.o. Truhlářská 1119/20, 110 00 Praha 1 Manuál pro obsluhu Webových stránek (Prosinec 2018) Jana Vítová, +420 225 388 130 2018 Obsah Úvod Webové stránky... 3 Slovník pojmů... 3 URL
INTERNET A SÍTĚ. Role při tvorbě webových aplikací. Rozhodovací vrstvy při tvorbě webových aplikací. povrch kostra struktura obsah strategie
INTERNET A SÍTĚ Ing. Pavel Smutný, Ph.D. Kancelář: H305 Telefon: 3511 Email: pavel.smutny@vsb.cz Role při tvorbě webových aplikací 1996 2009 GIF HTML CSS CGI analytik, informační architekt, grafik, programátor
TNPW1 Cvičení
TNPW1 Cvičení 7 10.11.2015 aneta.bartuskova@uhk.cz Box modely 10.11.2015 aneta.bartuskova@uhk.cz TNPW1 Cvičení Box model IE řešil jinak šířku elementu, muselo se řešit hacky, dnes už se ale problematické
Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>
Tabulky Přehled tagů z oblasti tabulek Tag Význam Párový Výskyt table tabulka ano tr řádek tabulky nepovinně , , , td buňka tabulky nepovinně th hlavičková buňka tabulky
Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se.
Úvod do tvorby www stránek Tvorba www 3 Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami , je považováno za poznámku a nezobrazuje se. Odkaz (hyperlink)
Skripta ke školení. Autor: Tomáš Herout Telefon: (+420)
Skripta ke školení Autor: Tomáš Herout E-mail: herout@helpmark.cz Telefon: (+420) 739 719 548 2017 Obsah CSS... 3 Co je to CSS... 3 Druhy selektorů... 4 Pseudotřídy a pseudoelementy nejpoužívanější z nich...
ŠKODA Portal Platform
ŠKODA Portal Platform Struktura LESS stylů Jan Obrátil Účel dokumentu Účelem tohoto dokumentu je vysvětlit strukturu stylů v Portálové Platformě tak, aby bylo možné je správně použít a rozšířit je pro
MODERNÍ WEB SNADNO A RYCHLE
SNADNO A RYCHLE Marek Lučný Pavoučí síť přes celý svět Co prohlížeče (ne)skrývají Tajemný kód HTML Všechno má svůj styl Interaktivní je IN Na obrazovce i na mobilu Začni podle šablony Informace jsou základ
Internet 02 - Tvorba statických www stránek za pomoci HTML tagů
Tagy Jak bylo uvedeno na předchozích stránkách, tag je vlastně značka, podle které se prohlížeč řídí. Tag určuje, jakým způsobem bude stránka upravena. Například - teď zarovnej text doprava, nyní zvětši
David Tejzr I.2.C Společnost TzComp.cz
David Tejzr I.2.C 19.5.2017 Společnost TzComp.cz 1 Obsah 1. Úvod... 3 1.1. Volba tématu... 3 1.2. Volba designu stránek... 3 1.3. Použitá technologie... 3 2. Postup... 4 2.1. Layout... 4 2.2. Header...
Mgr. Vlastislav Kučera Struktura stránky, hlavička,
Mgr. Vlastislav Kučera Struktura stránky, hlavička, Struktura stránky hlavička meta tagy titulek stránky připojení stylů,... CSS to
zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o.
zoom-driver Manuál k redakčnímu systému zoom-driver created by virtual-zoom s.r.o. 1 Obsah 1. Přihlášení 2. Výpis sekcí 3. Vytvoření nové sekce 4. Editace sekce 4.1. Výběr sekce k editaci 5. Editace hlavičky
Rozvržení stránky. Co se v modulu dozvíte? Pozicování
Rozvržení stránky Co se v modulu dozvíte? jakým způsobem je možné uspořádat prvky na stránce jak lze prvky překrývat jak fungují plovoucí prvky Pozicování Pro rozmístění prvků na stránce je možné použít
PŘÍRUČKA PRO REDAKTORY UNIVERZITY PARDUBICE
CMS Aladin CMS Aladin je modulární a otevřený publikační systém pro jednoduchou a uživatelsky přívětivou správu webových stránek. PŘÍRUČKA PRO REDAKTORY UNIVERZITY PARDUBICE VERZE 3.0 ZÁŘÍ 2012 Obsah CMS
Úvod do tvorby internetových stránek v jazyce HTML
Úvod do tvorby internetových stránek v jazyce HTML Dostupné z Metodického portálu www.rvp.cz, ISSN: 1802-4785, financovaného z ESF a státního rozpočtu ČR. Provozováno Výzkumným ústavem pedagogickým v Praze.
52 nd INTERSTENO congress Cagliari, July 2019
www.intersteno.org www.intersteno2019.org 52 nd INTERSTENO congress Cagliari, 13-19 July 2019 OPERAČNÍ SYSTÉM SOFTWARE POUŽITÝ PRO WORD PROCESSING SOUTĚŽNÍ ID A-1 A Instrukce pro soutěžící Otevřete si
LED Display Eyetv (počítačový panel)
LED Display Eyetv (počítačový panel) manuál Obsah 1) vlastnosti produktu 2) název a funkce počítačového programu 3) příprava scénáře 4) přenos scénáře do panelu 5) ostatní 6) komunikační protokol 1) Vlastnosti
Microsoft Office Word 2003
Microsoft Office Word 2003 č. 6 název anotace očekávaný výstup druh učebního materiálu druh interaktivity Microsoft Office Word 2003 - Cesta k základním úpravám Prezentace je zaměřena na úpravy textu v
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: Webové technologie
Připravil: Ing. Jiří Lýsek, Ph.D. Verze: 21.1.2016 Webové technologie Tworba webu, Hybridní aplikace, Responsivní design, HTML5, nová API strana 2 Úvod http://akela.mendelu.cz/~lysek/ IPI Úkol Cvičení
1. Základní pojmy, používané v tomto manuálu. 2. Stránky
Redakční systém manuál 1. Základní pojmy, používané v tomto manuálu Hlavní menu Menu v horní světlemodré liště obsahující 7 základních položek: Publikovat, Správa, Vzhled, Komentáře, Nastavení, Pluginy,
Elektronické publikování - prezentace. 23. dubna 2009 VŠB - TUO. Beamer - grafické zpracování prezentace. Rostislav Šuta, sut017.
Beamer - Elektronické publikování - VŠB - TUO 23. dubna 2009 Obsah 1 2 3 4 5 6 Obsah 1 2 3 4 5 6 schémata barvy písma změna fontu vnitřní schémata vnější schémata Obsah Prezentace bez navigace e stromovou
KAPITOLA 1 Přehled aktuálního vývoje webů 11
Obsah Úvodem 9 KAPITOLA 1 Přehled aktuálního vývoje webů 11 Definice webového designu 12 Poznejte sedm pravidel webového designu 14 Pochopte tři přístupy k webovému designu 16 Shrnutí 24 KAPITOLA 2 Design
Webové stránky. 19. Úprava šablony HTML. Datum vytvoření: 1. 3. 2013. str ánk y. Vytvořil: Petr Lerch. www.isspolygr.cz
Webové stránky 19. Vytvořil: Petr Lerch www.isspolygr.cz Datum vytvoření: 1. 3. 2013 Webové Strana: 1/11 Škola Ročník Název projektu Číslo projektu Číslo a název šablony Autor Tématická oblast Název DUM
Karel Punčoch Jan Sequens. Moderní trendy webdesignu
Karel Punčoch Jan Sequens Moderní trendy webdesignu Budouctnost internetu? internet zmizí! ERIC SCHMIDT šéf Google Ekonomické fórum v Davosu leden 2015 Budouctnost internetu? internet zmizí! ERIC SCHMIDT
25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY
25. TVORBA HTML DIALOGŮ PRO PEVNÉ TVARY 25.1 Přidání nového tlačítka do menu Abychom mohli zpřístupnit nový pevný tvar do systému, je třeba přidat nové tlačítko do Menu. V našem případě se jedná o příčné
Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML
Název školy: Základní škola a Mateřská škola Žalany Číslo projektu: CZ. 1.07/1.4.00/21.3210 Téma sady: Informatika pro sedmý až osmý ročník Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML Vyučovací