DESETIMINUTOVKY CSS - DOVEDNOSTI TÉMATA:
|
|
|
- Vilém Pravec
- před 5 lety
- Počet zobrazení:
Transkript
1 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Í TEXTU... 3 STYLOVÁNÍ ODKAZŮ... 3 SLOUPCE... 4 DÉLKOVÉ JEDNOTKY V CSS... 4 STYLOVÁNÍ LAYOUTU... 4 OKRAJE A RÁMEČKY... 4 OBTÉKÁNÍ... 5 ABSOLUTNÍ POZICOVÁNÍ... 5 PLOVOUCÍ POZICOVÁNÍ... 6 ZOBRAZENÍ... 6 STYLOVÁNÍ ČÍSLOVANÝCH A NEČÍSLOVANÝCH SEZNAMŮ... 7 TABULKY... 7 STYLOVÁNÍ FORMULÁŘŮ... 7 VERTIKÁLNÍ CENTROVÁNÍ... 8 HORIZONTÁLNÍ CENTROVÁNÍ... 8 HORIZONTÁLNÍ MENU... 8 VERTIKÁLNÍ MENU... 9 RESPONZIVNÍ STYLOVÁNÍ... 9 DROPDOWN MENU ROZBALOVACÍ MENU... 9 PARALAX... 9 CSS VKLÁDÁNÍ CSS DO HTML DOKUMENTU + MEDIA 1. OPRAVTE TENTO TAG, ABY PLNIL SVOJI FUNKCI: <linked href= stylesheet rel= text/css type= style.css > 2. VYTVOŘTE LINK PRO NAPOJENÍ CSS SOUBORU style.css V ADRESÁŘI css DO HTML SOUBORU
2 2 3. VYTVOŘTE TAG ODKAZU NA WEB google.com, KTERÝ BUDE NA TEXTU google A PŘI NAJETÍ MYŠÍ NA TENTO ODKAZ SE ZOBRAZÍ TEXT vyhledávač Google. INLINE STYLOVÁNÍM NASTAVTE ODKAZ TAK, ABY NEBYL PODTRŽENÝ. 4. VYTVOŘTE ČÁST HLAVIČKY HTML DOKUMENTU, KTERÁ BUDE OBSAHOVAT CSS. AŤ TOTO CSS ZAROVNÁ VŠECHNY ODSTAVCE DO BLOKU. 5. VYTVOŘTE LINK PRO NAPOJENÍ CSS SOUBORU print.css V ADRESÁŘI css DO HTML SOUBORU TAK, ABY HO BROWSER POUŽIL V PŘÍPADĚ TISKU WEB STRÁNKY. ADRESOVÁNÍ ČÁSTÍ HTML POMOCÍ SELEKTORŮ A JEJICH PRIORITA 6. VYTVOŘTE CSS PRAVIDLO, KTERÉ NASTAVÍ VŠECHNY ODSTAVCE V HTML DOKUMENTU TAK, ŽE BUDOU MÍT MODRÝ TEXT. POUŽIJTE CSS VLASTNOST color: blue;. 7. VYTVOŘTE CSS PRAVIDLO, KTERÉ NASTAVÍ VŠECHNY OBRÁZKY, KTERÉ JSOU UVNITŘ TAGU POLOŽKY NEČÍSLOVANÉHO SEZNAMU, KTERÁ JE UVNITŘ TAGU div, NA OBRÁZKY Z VELIKOSTÍ RÁMEČKU 5 px. POUŽIJTE CSS VLASTNOST border-width: 5px; 8. VYTVOŘTE CSS PRAVIDLO, KTERÉ NASTAVÍ U VŠECH TAGŮ VLASTNOST margin NA NASTAVTE TEXT je stylovaný V NÁSLEDUJÍCÍM PŘÍKLADU NA TEXT S ČERVENOU BARVOU: <p>toto je významný <strong>text, který <span>je stylovaný</span>. Ukažte jak</strong></p> V KÓDU STRÁNKY JE MNOHO TAGŮ span. ALE CHCETE NASTYLOVAT POUZE TEN, KTERÝ JE UVNITŘ TAGU p A strong. POUŽIJTE CSS VLASTNOST color: red; 10. NASTAVTE VÝŠKU A ŠÍŘKU UVEDENÉHO TAGU div NA 100px x 200px. PŘEDPOKLÁDEJTE, ŽE JE V DOKUMENTU MNOHO TAGŮ div. ALE CHCETE NASTYLOVAT POUZE TENTO JEDEN. <div id= rectangle ></div>. POUŽIJTE CSS VLASTNOSTI width A height. 11. V E-SHOPU JE SEZNAM PRODUKTŮ. V SEZNAMU PRODUKTŮ, JE VÍCE PRODUKTŮ, ZOBRAZENÝCH NA JEDNÉ STRÁNCE A CHCETE VŠECHNY NÁHLEDY PRODUKTU NASTAVIT STEJNĚ. BUDETE STYLOVAT TAG div. NA WEB STRÁNCE JE SPOUSTA divů. POTŘEBUJETE NASTYLOVAT ALE JEN TY, KTERÉ JSOU URČENY K NÁHLEDU PRODUKTŮ. UPRAVTE KÓD HTML TAK ABY SE DALY ADRESOVAT A STYLOVAT. HTML KÓD JE: <div>obsah tagu.</div> A DÁLE VYTVOŘTE CSS PRAVIDLO, KTERÉ U DANÉHO TAGU NASTAVÍ ZPŮSOB POZICOVÁNÍ NA PLOVOUCÍ VLEVO. POUŽIJTE CSS VLASTNOST: float: left; 12. CHCETE STYLOVAT FORMULÁŘ A JE V NĚM TAKÉ INPUT EDITAČNÍ POLIČKO. JEDNO EDITAČNÍ POLÍČKO JE PRO UŽIVATELSKÉ JMÉNO A JEDNO PRO HESLO. NASTYLUJTE TAG input PRO VYPSÁNÍ HESLA JINAK NEŽ EDITAČNÍ POLÍČKO PRO ZÁPIS UŽIVATELSKÉHO JMÉNA. AŤ MÁ EDITAČNÍ POLÍČKO PRO ZÁPIS HESLA RÁMEČEK O VELIKOSTI 4px. POUŽIJTE CSS VLASTNOST: border-width. 13. VE VZOROVÉM KÓDU JE NASTYLOVÁNA BARVA TAGU h1 NA ZELENOU BARVU TÍMTO ZPŮSOBEM: main h1 { color: green; }. NEMÁTE ŠANCI ZASÁHNOUT DO TOHOTO KÓDU. ALE MUSÍTE ZMĚNIT BARVU TAGU h1. MŮŽETE PŘIDAT KÓD DO CSS JINÉHO SOUBORU, KTERÝ VLOŽIT MŮŽETE. TENTO PŘÍPAD MŮŽE NASTAT NAPŘÍKLAD PŘI STYLOVÁNÍ ŠABLON V CMS SYSTÉMECH JAKO JE WORDPRESS NEBO JOOMLA. JAKÝ SELEKTOR ZAPÍŠETE DO JINÉHO CSS SOUBORU, KTERÝ SE SLINKUJE K SOUBORU HTML AŽ PO TOM UVEDENÉM TAK, ABY BYL TAG h1 ČERVENÝ. POUŽIJTE CSS VLASTNOST color: red; VZOROVÝ KÓD: <body> <div id="wrapper"> <header> </header> <nav>
3 3 </nav> <main> <h1>nadpis</h1> RESETOVÁNÍ CSS 14. VYTVOŘTE CSS RESET STYLŮ PRO VŠECHNY TAGY NA margin: 0px; A padding: 0px; 15. VYTVOŘTE CSS RESET STYLŮ PRO VŠECHNY VÝZNAMNÉ TAGY VČETNĚ html A body JMENOVITĚ NA margin: 0px; A padding: 0px; border: 0px; BARVY 16. NASTAVTE BARVU TEXTU V ODSTAVCÍCH NA MODROU. BARVU VYJÁDŘETE SLOVNĚ. 17. NASTAVTE BARVU POZADÍ TAGU DIV NA BARVU, KTERÁ MÁ TYTO HODNOTY SLOŽEK BARVY. ČERVENOU: 112, ZELENOU: 10 A MODROU NASTAVTE BARVU POZADÍ TAGU NAV NA BARVU, KTERÁ MÁ TYTO HODNOTY SLOŽEK BARVY V ŠESTNÁCTKOVÉ SOUSTAVĚ. ČERVENÁ: FF, MODRÁ: 1A A ZELENÁ: 4C. 19. NASTAVTE BARVU TEXTU NADPISU H1 NA PRŮHLEDNÝ RŮŽOVÝ ZÁVOJ S POLOVIČNÍ PRŮHLEDNOSTÍ. ČERVENÁ BARVA BUDE MÍT HODNOTU 255, ZELENÁ 200 A MODRÁ TAKÉ 200. STYLOVÁNÍ TEXTU 20. VYGENERUJTE SI ODSTAVEC TEXTU POMOCÍ A NASTYLUJTE HO NÁSLEDOVNĚ: AŤ JE VELIKOST TEXTU 14px, AŤ JE TVOŘEN FONTEM Verdana, ODSTAVEC, AŤ JE ZAROVNÁN DO BLOKU A PRVNÍ ŘÁDKA ODSTAVCE AŤ JE ODSAZENÁ O 50px, VÝŠKA ŘÁDKY TEXTU, AŤ JE 20px. VYTVOŘTE KOMPLETNÍ PRAVIDLO STYLOVÁNÍ I SE SELEKTOREM. 21. VYTVOŘTE SI NADPIS WEBU H1 S TEXTEM: NEMÁ TO HLAVU A NASTYLUJTE HO NÁSLEDOVNĚ: VELIKOST 22px, TUČNÉ PÍSMO, BARVA TMAVĚ MODRÁ, FONT TAHOMA A AŤ JE PODTRŽENÝ. VYTVOŘTE KOMPLETNÍ PRAVIDLO STYLOVÁNÍ I SE SELEKTOREM. 22. VYTVOŘTE SI NADPIS WEBU H1 S TEXTEM: PLOCHOZEMĚ A NASTYLUJTE HO NÁSLEDOVNĚ: VELIKOST 30px, TUČNÉ PÍSMO, BARVA TMAVĚ ČERVENÁ, FONT TAHOMA A AŤ MÁ ŠEDIVÝ STÍN, VRŽENÝ 5px VPRAVO A 5px DOLŮ POD TEXT, S ROZOSTŘENÍM NA 4px. VYTVOŘTE KOMPLETNÍ PRAVIDLO STYLOVÁNÍ I SE SELEKTOREM. STYLOVÁNÍ ODKAZŮ 23. VYTVOŘTE TAG ODKAZU NA WEB NAŠÍ ŠKOLY, KTERÝ UDĚLÁ DANÝ ODKAZ Z TEXTU: MOJE ŠKOLA. VYTVOŘTE CSS PRAVIDLO, KTERÉ ZPŮSOBÍ, ŽE DANÝ ODKAZ NEBUDE PODTRŽENÝ. 24. VYTVOŘTE TAG ODKAZU NA WEB SEZNAM.CZ, KTERÝ UDĚLÁ ODKAZ Z TEXTU: ČESKÝ VYHLEDÁVAČ. VYTVOŘTE CSS PRAVIDLA, KTERÁ ZPŮSOBÍ, ŽE TEXT ODKAZU NEBUDE PODTRŽEN, ALE V OKAMŽIKU, KDY SE NAD TEXT NAJEDE MYŠÍ, SE TEXT PODTRHNE. DÁLE, AŤ SE JIŽ NAVŠTÍVENÝ ODKAZ ZBARVÍ ZELENĚ. 25. VYTVOŘTE TAG ODKAZU KOLEM OBRÁZKU. ODKAZ, AŤ ODKAZUJE NA WEB JAKPSATWEB.CZ A OBRÁZEK AŤ ZOBRAZUJE OBRÁZEK web.jpg, KTERÝ MÁ VELIKOST 250px x 340px A PŘEDSTAVUJE POČÍTAČOVOU SÍŤ. NASTYLUJTE TENTO ODKAZ TAK, ABY SE KOLEM OBRÁZKU PO NAJETÍ VYTVOŘIL 2px ČERVENÝ RÁMEČEK. 26. VYTVOŘTE TAG ODKAZU, KTERÝ BUDE ZOBRAZEN JAKO BLOKOVÝ ELEMENT A BUDE MÍT VELIKOST 200px x 70px. UVNITŘ AŤ JE HORIZONTÁLNĚ I VERTIKÁLNĚ VYSTŘEDĚNÝ TEXT ODKAZ.AŤ SE PO NAJETÍ NA ODKAZ OBARVÍ POZADÍ TAGU ODKAZU NA ZELENOU.
4 4 SLOUPCE 27. VYGENERUJTE SI 5 ODSTAVCŮ TEXTU POMOCÍ A VLOŽTE JE DO DIVU. ROZDĚLTE TENTO DIV NA TŘI SLOUCE TEXTU, KTERÉ JSOU OD SEBE VZDÁLENÉ 30px A MAJÍ MEZI SEBOU ČÁRU O TLOUŠŤCE 1px. DÉLKOVÉ JEDNOTKY V CSS 28. VYTVOŘTE DIV O VELIKOSTI 300px x 500px SE ZELENOU BARVOU POZADÍ. 29. VYTVOŘTE DIV O VELIKOSTI POLOVINY VÝŠKY OBRAZOVKY A POLOVINY ŠÍŘKY OBRAZOVKY. AŤ MÁ MODROU BARVU POZADÍ. BUDE TAK PŘEDSTAVOVAT LEVOU HORNÍ ČTVRTKU OBRAZOVKY. 30. VYTVOŘTE DIV O VELIKOSTI 80% VÝŠKY OBRAZOVKY A 80% ŠÍŘKY OBRAZOVKY. AŤ MÁ ZELENOU BARVU POZADÍ. UVNITŘ TOHOTO DIVU, VYTVOŘTE JINÝ DIV, KTERÝ BUDE MÍT 50% ŠÍŘKY SVÉHO RODIČOVSKÉHO ELEMENTU A 100% JEHO VÝŠKY. 31. VYTVOŘTE EDITAČNÍ POLÍČKO, PRO VKLÁDÁNÍ TEXTU A NASTYLUJTE JEHO ŠÍŘKU POMOCÍ CSS TAK, ABY SE DO NĚJ VŽDY VEŠLO MINIMÁLNĚ 30 ZNAKŮ. I TĚCH NEJŠIRŠÍCH. 32. PŘEDSTAVTE SI, ŽE VYTVÁŘÍTE V HTML VERZI DOKUMENTU PRO TISK. POTŘEBUJETE NASTAVIT VELIKOST V JEDNOTKÁCH, KTERÉ JSOU UŽITEČNÉ PRO TISK. VYTVOŘTE SI DIV, KTERÝ MÁ ČERNÝ RÁMEČEK O VELIKOSTI 1px A MÁ VELIKOST JAKO LIST O VELIKOSTI A4 NA STOJATO. STYLOVÁNÍ LAYOUTU 33. VYTVOŘTE LAYOUT PLOCHY PRO VLOŽENÍ WEB STRÁNKY, KTERÁ OBALUJE CELOU WEB STRÁNKU A MÁ ŠÍŘKU 1280px A VÝŠKU PŘES CELÉ OKNO. AŤ JE CELÁ ŠÍŘKA HORIZONTÁLNĚ UPROSTŘED OKNA A MÁ MODRÉ POZADÍ. 34. VYTVOŘTE LAYOUT WEBU TAK, ŽE JE ŠÍŘKA LAYOUTU 1280px UPROSTŘED PLOCHY WEB STRÁNKY, NAHOŘE NECHTE 200px NA HLAVIČKU A PODBARVĚTE JI MODŘE, PAK UDĚLEJTE PRUH NAVIGAČNÍ LIŠTY 80px PŘES CELOU ŠÍŘKU A TO ŽLUTOU. POD TÍM DEJTE ZE 70% ŠÍŘKY HLAVNÍ ČÁST WEB STRÁNKY MODROU A NAPRAVO 30% POSTRANNÍHO PANELU ZELENOU. MINIMÁLNÍ VÝŠKU TÉTO ČÁSTI URČETE NA 800px. POD TÍMTO ROZLOŽENÍM UMÍSTĚTE PATIČKU O VÝŠCE 100px A BARVĚ ŽLUTÉ. 35. VYTVOŘTE LAYOUT WEBU TAK, ŽE JE ŠÍŘKA LAYOUTU 1280px UPROSTŘED PLOCHY WEB STRÁNKY, NAHOŘE NECHTE 200px NA HLAVIČKU A PODBARVĚTE JI ŽLUTĚ. POD TÍM DEJTE ZE 30% ŠÍŘKY NAVIGAČNÍ ČÁST PRO VERIKÁLNÍ MENU MODROU A VEDLE TOHO HLAVNÍ ČÁST WEB STRÁNKY ZELENOU. MINIMÁLNÍ VÝŠKU TÉTO ČÁSTI URČETE NA 800px. POD TÍMTO ROZLOŽENÍM UMÍSTĚTE PATIČKU O VÝŠCE 100px A BARVĚ ŽLUTÉ. 36. VYTVOŘTE HLAVNÍ ČÁST LAYOUTU WEB STRÁNKY O ŠÍŘCE 1280px A DO NÍ VLOŽTE POD SEBE DVĚ SEKCE O STEJNÉ ŠÍŘCE A VZÁJEMNÉ MEZEŘE 50px. OBĚMA DEJTE MODROU BARVU. DO TĚCHTO SEKCÍ DEJTE DO KAŽDÉ PO TŘECH ČLÁNCÍCH POD SEBE PRO VLOŽENÍ TEXTU. ZASE O STEJNÉ ŘÍŘCE A OD SEBE VZÁLENÝCH 20px A SE ŽLUTÝM POZADÍM. OKRAJE A RÁMEČKY 37. V TĚLE WEB STRÁNKY VYTVOŘTE OBDÉLNÍK O ŠÍŘCE 1280px A VÝŠCE 600px. OBDÉLNÍK VYTVOŘTE POMOCÍ TAGU div. OBARVĚTE POZADÍ TAGU NA ZELENOU BARVU A VLOŽTE DO NĚJ TEXT NAPŘÍKLAD POMOCÍ UDĚLEJTE KOLEM ELEMENTU DIVU RÁMEČEK TEČKOVANOU ČÁROU O ŠÍŘCE 2px A ŠEDÉ BARVĚ. ZAJISTĚTE, ABY SE VEŠKERÝ TEXT ZOBRAZOVAL 20px OD VNITŘNÍHO OKRAJE RÁMEČKU. 38. VYTVOŘTE V TĚLE WEB STRÁNKY TŘI DIVY, KTERÉ MAJÍ VELIKOST 200px NA ŠÍŘKU A 100px NA VÝŠKU. AŤ MAJÍ NA POZADÍ MODROU BARVU A RÁMEČEK O ŠÍŘCE 1px A
5 5 NEPŘERUŠOVANOU ČERNOU ČAROU. NYNÍ ZAJISTĚTE, ABY SE TYTO OBDÉLNÍKY RÁMEČKŮ ZOBRAZOVALI POD SEBOU VE VZÁJEMNÉ VZDÁLENOSTI 30px. 39. VYTVOŘTE UVNITŘ WEB STRÁNKY OBDÉLNÍK Z TAGU ASIDE, KTERÝ BUDE SLOUŽIT PRO ZOBRAZENÍ NOVINEK. BUDE MÍT ŠÍŘKU 200px A VÝŠKU 600px. AŤ MÁ JEN HORNÍ ČÁST RÁMEČKU O ŠÍŘCE 5px, NEPŘERUŠOVANOU MODROU ČAROU. POZADÍ OBDÉLNÍKU OBARVĚTE BARVOU #AAAAAA. DOVNITŘ UMÍSTĚTE NADPIS ÚROVNĚ 2 S TEXTEM NOVINKY. 40. VYTVOŘTE ČTYŘI OBDÉLNÍKY, KTERÉ BUDOU PŘEDSTAVOVAT VERTIKÁLNÍ MENU. AŤ OBSAHUJÍ POSTUPNĚ TENTO TEXT: O NÁS, SLUŽBY, GALERIE, KONTAKT. AŤ JSOU OBDÉLNÍKY TVOŘENY TAGY H2 A MAJÍ NA POZADÍ BARVU #69F. AŤ MAJÍ VELIKOST 70px NA VÝŠKU A 200px NA ŠÍŘKU. AŤ JE KAŽDÝ TEXT UPROSTŘED OBDÉLNÍKU A JE MINIMÁLNĚ 5px OD KRAJE. VYTVOŘTE NAHOŘE A DOLE NA KAŽDÉM OBDÉLNÍKU 1px NEPŘERUŠOVANOU ČÁRU ČERNOU BARVOU. AŤ JEDNOTLIVÉ OBDÉLNÍKY NA SEBE NAVAZUJÍ SHORA TAK, ŽE NEBUDE ZNÁT ANI NEJMENŠÍ MEZERA MEZI ČÁSTMI RÁMEČKU. OBTÉKÁNÍ 41. VYTVOŘTE VE WEBOVÉ STRÁNCE TAG ODSTAVCE S DESETI ODSTAVCI TEXTU A DO TOHOTO ODSTAVCE VLOŽTE DVA OBRÁZKY. JEDEN ZAROVNEJTE V TEXTU VLEVO A DRUHÝ O KUS DÁL ZAROVNEJTE VPRAVO. OBTÉKÁNÍ TEXTU KOLEM OBRÁZKU ZAROVNANÉHO VLEVO AŤ FUNGUJE TAK, ŽE JE TEXT OD OBRÁZKU NAHOŘE A DOLE MINIMÁLNĚ VZDÁLEM 10px A VPRAVO 20px. ZÁROVEŇ ALE, AŤ JE OBRÁZEK TĚSNĚ U LEVÉHO KRAJE TEXTU A NIKOLI DÁL OD NĚJ. PRO OBRÁZEK ZAROVNANÝ VPRAVO TO PLATÍ NÁSLEDOVNĚ: TEXT NAHOŘE A DOLE STEJNĚ JAKO PŘEDCHOZÍ OBRÁZEK A TEXT OD LEVÉHO OKRAJE OBRÁZKU 20px. NAVÍC AŤ TENTO OBRÁZEK ZAROVNANÝ DOPRAVA JE ZÁROVEŇ S PRAVÝM OKRAJEM TEXTU. 42. VYTVOŘTE POMOCÍ H2 TEXT TOTO JE NADPIS A VLOŽTE HO DO DIVU, KTERÝ OBSAHUJE TEXT NĚKOLIKA OSTAVCŮ. NYNÍ TENTO NADPIS ZAROVNEJTE V RÁMCI TEXTU DOPRAVA A UDĚLEJTE KOLEM NĚJ OKRAJE 20px KOLEM DOKOLA, KROMĚ PRAVÉ STRANY, KDE NEBUDE ŽÁDNÝ OKRAJ. ABSOLUTNÍ POZICOVÁNÍ 43. VYTVOŘTE ČTVEREC Z TAGU DIV O VELIKOSTI 400px KRÁT 400px. OHRANIČTE HO RÁMEČKEM O ŠÍŘCE 1px A ČERNÉ BARVĚ. DO NĚJ VLOŽTE ČTVEREC Z TAGU DIV O VELIKOSTI 100px KRÁT 100px, KTERÝ BUDE MODRÝ. NYNÍ ČTVEREC UVNITŘ UMÍSTĚTE DO PRAVÉHO HORNÍHO ROHU VĚTŠÍHO ČTVERCE. 44. VYTVOŘTE ČTVEREC Z TAGU DIV O VELIKOSTI 400px KRÁT 400px. OHRANIČTE HO RÁMEČKEM O ŠÍŘCE 1px A ČERNÉ BARVĚ. DO NĚJ VLOŽTE TŘI ČTVRCE Z TAGU DIV O VELIKOSTI 100px KRÁT 100px, KTERÉ BUDOU: ČERVENÝ, MODRÝ A ZELENÝ. ČERVENÝ ČTVEREC UMÍSTĚTE DO LEVÉHO HORNÍHO ROHU VĚTŠÍHO ČTVERCE BEZ OKRAJŮ, MODRÝ DO PRAVÉHO HORNÍHO ROHU TAKÉ BEZ OKRAJŮ A ZELENÝ DO LEVÉHO SPODNÍHO ROHU VĚTŠÍHO ČTVERCE BEZ OKRAJŮ. 45. VYTVOŘTE OBDÉLNÍK Z TAGU DIV O VELIKOSTI 600px KRÁT 400px. OHRANIČTE HO RÁMEČKEM O ŠÍŘCE 1px A ČERNÉ BARVĚ. DO NĚJ VLOŽTE ČTVEREC Z TAGU DIV O VELIKOSTI 100px KRÁT 100px A BARVOU POZADÍ MODROU. UMÍSTĚTE HO TAK, ABY BYL OD HORNÍHO OKRAJE VZDÁLENÝ 10px A OD LEVÉHO OKRAJE 50px. 46. VYTVOŘTE OBDÉLNÍK Z TAGU DIV O VELIKOSTI 600px KRÁT 400px. OHRANIČTE HO RÁMEČKEM O ŠÍŘCE 1px A ČERNÉ BARVĚ. DO NĚJ VLOŽTE ČTVEREC Z TAGU DIV O VELIKOSTI 100px KRÁT 100px A BARVOU POZADÍ ZELENOU. UMÍSTĚTE HO TAK, ABY BYL OD SPODNÍHO OKRAJE VZDÁLENÝ 10px A OD PRAVÉHO OKRAJE POLOVINU ŠÍŘKY NADŘAZENÉHO OBDÉLNÍKU.
6 6 47. VYTVOŘTE OBDÉLNÍK Z TAGU DIV O VELIKOSTI 600px KRÁT 300px. OHRANIČTE HO RÁMEČKEM O ŠÍŘCE 1px A ČERNÉ BARVĚ. DO NĚJ VLOŽTE TŘI ČTVRCE Z TAGU DIV O VELIKOSTI 200px KRÁT 200px, KTERÉ BUDOU: ČERVENÝ, MODRÝ A ZELENÝ. ČERVENÝ ČTVEREC UMÍSTĚTE DO LEVÉHO HORNÍHO ROHU VĚTŠÍHO ČTVERCE BEZ OKRAJŮ, MODRÝ TAKÉ DO LEVÉHO HORNÍHO ROHU, PŘES PŘEDCHOZÍ ČTVEREC, ALE 10px OD HORNÍHO I LEVÉHO OKRAJE NADŘAZENÉHO OBDÉLNÍKU. ANAKONEC UMÍSTĚTE ZELENÝ ČTVEREC TAKÉ DO LEVÉHO HORNÍHO ROHU VĚTŠÍHO ČTVERCE, PŘES PŘEDCHOZÍ ČTVEREC, ALE VE VZDÁLENOSTI 30px OD HORNÍHO I LEVÉHO OKRAJE NADŘAZENÉHO OBDÉLNÍKU. PLOVOUCÍ POZICOVÁNÍ 48. VYTVOŘTE 3 OBDÉLNÍKY POMOCÍ TAGU DIV O VELIKOSTI 200px NA ŠÍŘKU A 80px NA VÝŠKU A OHRANIČTE JE CELÉ RÁMEČKEM O ŠÍŘCE 1px ČERNÉ BARVĚ. DO KAŽDÉHO RÁMEČKU VLOŽTE TEXT: TEST1, TEST2, TEST3. VŠECHNY OBDÉLNÍKY SEŘAĎTE V JEDNÉ HORIZONTÁLNÍ LINII, JEDEN VEDLE DRUHÉHO K LEVÉ STRANĚ TAK, ABY BYLY MEZI SEBOU VZDÁLENÉ 6px. 49. POMOCÍ TAGŮ MAIN A ASIDE VYTVOŘTE DVĚ ČÁSTI WEB STRÁNKY O VÝŠCE 600px. AŤ JE ŠÍŘKA TAGU MAIN 70% A ŠÍŘKA TAGU ASIDE 30% CELKOVÉ ŠÍŘKY WEB STRÁNKY. MAIN PODBARVĚTE MODŘE A TAG ASIDE ČERVENĚ. POD OBA DVA HLAVNÍ TAGY ROZDĚLUJÍCÍ ČÁSTI WEB STRÁNKY VLOŽTE TAG FOOTER O VÝŠCE 200px A ŠÍŘCE 100% ŠÍŘKY WEB STRÁNKY. TEN PODBARVĚTE ŽLUTOU BARVOU. 50. POMOCÍ TAGŮ NAV, MAIN A ASIDE, VYTVOŘTE TŘI ČÁSTI WEB STRÁNKY TAK, ŽE MINIMÁLNÍ VÝŠKA VŠECH BUDE 600px. POZADÍ NAV BUDE MODRÉ, POZADÍ MAIN BUDE ŠEDÉ A POZADÍ ASIDE BUDE ŽLUTÉ. ŠÍŘKA NAV BUDE 200px, ŠÍŘKA ASIDE BUDE 20% A MAIN BUDE ZBYTEK. ZADÁNÍ VYŘEŠTE POMOCÍ VLASTNOSTI FLOAT. 51. VYTVOŘTE 3 OBDÉLNÍKY POMOCÍ TAGU A - ODKAZU O VELIKOSTI 200px NA ŠÍŘKU A 80px NA VÝŠKU A OHRANIČTE JE CELÉ RÁMEČKEM O ŠÍŘCE 1px ČERNÉ BARVĚ. DO KAŽDÉHO RÁMEČKU VLOŽTE TEXT: CZ, EN, DE. AŤ JSOU NÁPISY V OBDÉLNÍCÍCH VYSTŘEDĚNÉ. VŠECHNY OBDÉLNÍKY SEŘAĎTE V JEDNÉ HORIZONTÁLNÍ LINII, JEDEN VEDLE DRUHÉHO K PRAVÉ STRANĚ TAK, ABY BYLY MEZI SEBOU VZDÁLENÉ 6px. 52. VYTVOŘTE DEVĚT ČTVERCŮ O VELIKOSTI 200px KRÁT 200px OHRANIČENÝCH ČERNÝM RÁMEČKEM O ŠÍŘCE 1px. VYTVOŘTE JE POMOCÍ TAGU DIV A NAPIŠTE DO NICH TEXT PRODUKT 1 AŽ PRODUKT 9. VYTVOŘTE Z TĚCHTO ČTVERCŮ SESTAVU 3 KRÁT 3 ČTVERCŮ, ZAROVNANÝCH K LEVÉ STRANĚ WEB STRÁNKY A VZDÁLENÝCH OD SEBE VERTIKÁLNĚ 10px A HORIZONTÁLNĚ 5px. ZOBRAZENÍ 53. VYTVOŘTE DVA ČTVERCE O VELIKOSTI 200px KRÁT 200px A 5 OBDÉLNÍKŮ O ROZMĚRECH 50px NA VÝŠKU A 200px NA ŠÍŘKU. VŠECHNY AŤ MAJÍ MODRÉ POZADÍ A JSOU STVOŘENY POMOCÍ TAGU DIV. VŠEM DEJTE HODNOTU VLASTNOSTI FLOAT: LEFT. NAKONEC ZMĚŇTE ZOBRAZENÍ VŠECH TAGŮ Z block NA inline-block A VYNECHTE FLOAT. POZORUJTE, CO SE ZMĚNILO. PO ÚPRAVÁCH ZAROVNEJTE VŠECHNY ČTVERCE VERTIKÁLNĚ DOPROSTŘED A POZORUJTE, JAK SE ZMĚNIL LAYOUT. 54. VYTVOŘTE DEVĚT ČTVERCŮ O VELIKOSTI 200px KRÁT 200px OHRANIČENÝCH ČERNÝM RÁMEČKEM O ŠÍŘCE 1px. VYTVOŘTE JE POMOCÍ TAGU DIV A NAPIŠTE DO NICH TEXT PRODUKT 1 AŽ PRODUKT 9. VYTVOŘTE Z TĚCHTO ČTVERCŮ SESTAVU 3 KRÁT 3 ČTVERCŮ, ZAROVNANÝCH K LEVÉ STRANĚ WEB STRÁNKY A VZDÁLENÝCH OD SEBE VERTIKÁLNĚ 10px A HORIZONTÁLNĚ 5px. TO VŠE VYTVOŘTE BEZ PLOVOUCÍHO POZICOVÁNÍ. 55. DO WEB STRÁNKY VLOŽTE 5 ODSTAVCŮ TEXTU VYGENEROVANÝCH NAPŘÍKLAD POMOCÍ DÁLE DO NÍ VLOŽTE DVA OBRÁZKY ZAROVNANÉ VLEVO. NYNÍ
7 7 VYTVOŘTE CSS SOUBOR, KTERÝ BUDE SLINKOVANÝ S DANÝM SOUBOREM A KTERÝ ZAKÁŽE ZOBRAZENÍ OBOU OBRÁZKŮ. PO TOM, CO OVĚŘÍTE, ŽE SE OBRÁZKY SKUTEČNĚ NEZOBRAZUJÍ, ZMĚŇTE VLOŽENÍ CSS TAK, ABY FUNGOVALO JEN PRO TISK. 56. VYTVOŘTE UVNITŘ WEB STRÁNKY OBDÉLNÍK Z TAGU DIV O VÝŠCE 400px A ŠÍŘCE 600px. AŤ MÁ SVĚTLE MODRÉ POZADÍ. DOVNITŘ TOHOTO OBDÉLNÍKU VLOŽTE JINÝ OBDÉLNÍK TVOŘENÝ TAKÉ TAGEM DIV O VÝŠCE 200px A ŠÍŘCE 300px SE ŽLUTÝM POZADÍM. ZKUSTE NYNÍ VNITŘNÍ OBDÉLNÍK VERTIKÁLNĚ VYSTŘEDIT VE VNĚJŠÍM OBDÉLNÍKU POMOCÍ CSS VLASTNOSTI VERTICAL-ALIGN. POKUD SE VÁM TO NEPODAŘÍ, POKUSTE SE ZMĚNIT VLASTNOST DISPLAY U NADŘAZENÉHO OBDÉLNÍKU. STYLOVÁNÍ ČÍSLOVANÝCH A NEČÍSLOVANÝCH SEZNAMŮ 57. VYTVOŘTE NEČÍSLOVANÝ SEZNAM PŘEDSTAVUJÍCÍ NÁZVY TAGŮ HTML5 PRO TVORBU LAYOUTU WEB STRÁNKY. AŤ MÁ MINIMÁLNĚ 4 POLOŽKY A TVAR ODRÁŽEK JE DISK. AŤ SE ODRÁŽKY ZOBRAZUJÍ UVNITŘ ELEMENTU SEZNAMU. 58. VYTVOŘTE ČÍSLOVANÝ SEZNAM OBSAHUJÍCÍ SEZNAM VŠECH PLANET SLUNEČNÍ SOUSTAVY. AŤ JSOU PLANETY ČÍLOVANÉ MALÝMI ŘECKÝMI PÍSMENY. TABULKY 59. VYTVOŘTE TABULKU OBSAHUJÍCÍ ČTYŘI SLOUPCE (1. HODINA, 2. HODINA, 3. HODINA A 4. HODINA) A DVA ŘÁDKY: ZAČÁTEK A KONEC. DO HLAVIČKY VEPIŠTE NÁZVY HODNOT HODIN. AŤ JSOU HODNOTY V BUŇKÁCH HORIZONTÁLNĚ I VERTIKÁLNĚ VYCENTROVANÉ A PRVNÍ ŘÁDEK MÁ TUČNÉ PÍSMO. JEDNOTLIVÉ ŘÁDKY TABULKY AŤ JSOU ODDĚLENY JEN JEDNOU ČAROU SPODNÍ OD BUNĚK A SLOUPCE AŤ OD SEBE ODDĚLENY NEJSOU VŮBEC. 60. VYTVOŘTE TABULKU OBSAHUJÍCÍ TŘI SLOUPCE A 4 ŘÁDKY S ŘÁDKOU VE HLAVIČCE S TĚMITO NÁZVY: (B, kb, MB). DO ZBYLÝCH BUNĚK TABULKY VLOŽTE NÁHODNÁ ČÍSLA. NYNÍ TABULKU NASTYLUJTE TAK, ABY SE ZVÝRAZNIL ŽLUTOU BARVOU JAKÝKOLIV ŘÁDEK, V OKAMŽIKU, KDY SE NAD NÍ NACHÁZÍ UKAZATEL MYŠI. 61. VYTVOŘTE TABULKU OBSAHUJÍCÍ ČTYŘI SLOUPCE A ČTYŘI ŘÁDKY. DO PRVNÍ ŘÁDKY UMÍSTĚTE NÁSLEDUJÍCÍ NÁZVY SLOUPCŮ: NÁZEV, DRUH TAGU, DRUH ELEMENTU, POUŽITÍ. DÁLE DO TABULKY VYPIŠTE PŘÍKLADY TŘECH TAGŮ, KTERÉ ZNÁTE A TABULKU NASTYLUJTE TAK, ABY KAŽDÝ SUDÝ ŘÁDEK MĚL SVĚTLE ŠEDÉ POZADÍ. ZÁROVEŇ NASTYLUJTE HLAVIČKU TABULKY TAK, ABY BYLO POZADÍ MODRÉ A TEXT NÁZVŮ SLOUPCŮ BÍLÝ. 62. VYTVOŘTE TABULKU, KTERÁ BUDE OBSAHOVAT 5 ŘÁDKŮ (VČETNĚ PRVNÍHO HLAVIČKY S NÁZVY A POSLEDNÍHO, PŘEDSTAVUJÍCÍHO PATIČKU) A 3 SLOUPCE. DO HLAVIČKY TABULKY OBSAHUJÍCÍ NÁZVY SLOUPCŮ VLOŽTE TYTO NÁZVY: NÁZEV, CENA, KOUPENO. DÁLE VYPIŠTE PŘIBLIŽNĚ NÁKUP DO TŘECH NÁSLEDUJÍCÍCH ŘÁDKŮ. A DO ŘÁDKU PATIČKY VYPIŠTE TOTO: CELKEM:, SEČTENÁ CENA V Kč A DO POSLEDNÍ BUŇKY NEPIŠTE NIC. NASTYLUJTE HLAVIČKU A PATIČKU TABULKY TAK, ABY MĚLA TMAVĚ ŠEDÉ POZADÍ A BÍLÝ TEXT. POMOCÍ CSS ZRUŠTE MEZERY MEZI BUŇKAMI TABULKY A PONECHTE ZBYTEK RÁMEČKŮ JEN MEZI JEDNOTIVÝMI ŘÁDKY. VŠECHNY HODNOTY, VE VŠECH BUŇKÁCH ZAROVNEJTE VERTIKÁLNĚ NA STŘED. TEXT V HLAVIČCE ZAROVNEJTE HORIZONTÁLNĚ NA STŘED. HODNOTY V TĚLE TABULKY ZAROVNEJTE: 1. SLOUPEC VLEVO, 2. SLOUPEC VPRAVO, 3. SLOUPEC DOPROSTŘED. POSLEDNÍ ŘÁDEK PATIČKY, ZAROVNEJTE PRVNÍ BUŇKU HORIZONTÁLNĚ VLEVO A DRUHOU VPRAVO. POD TABULKU UMÍSTĚTE POPIS TABULKY DNEŠNÍ NÁKUP. PRO POPIS POUŽIJTE TAG CAPTION. UMÍSTĚNÍ TAGU URČETE POMOCÍ CSS. STYLOVÁNÍ FORMULÁŘŮ 63. VYTVOŘTE EDITAČNÍ POLÍČKO PRO VKLÁDÁNÍ TEXTU SPOLU S POPISEM, KTERÝ PO KLIKU NA NĚJ, PŘENESE KURZOR DO TOHOTO EDITAČNÍHO POLÍČKA. NASTYLUJTE EDITAČNÍ POLÍČKO
8 8 TAK, ABY MĚL KOLEM SEBE RÁMEČEK Z ŠEDIVÉ BARVY O ŠÍŘCE 3px, ŠEDIVÝ STÍN VPRAVO DOLE O 2px POSUNUTÝ A POZADÍ POLÍČKA AŤ SE ZMĚNÍ PO AKTIVACI POLÍČKA NA SVĚTLE MODROU BARVU. AŤ JE POLÍČKO ŠIROKÉ 50% Z TÉ ŠÍŘKY, KTERÁ JE MU K DISPOZICI A V OKAMŽIKU ŽE JE AKTIVNÍ, AŤ SE NATÁHNE NA 75%. AŤ MÁ EDITAČNÍ POLÍČKO ZAKULACENÉ ROHY O POLOMĚRU 8px. 64. VYTVOŘTE EDITAČNÍ OBLAST POMOCÍ TAGU TEXTAREA. PRO VKLÁDÁNÍ DELŠÍHO TEXTU. ZAKAŽTE MOŽNOST ZMĚNY JEHO VELIKOSTI A ŠÍŘKU URČETE POMOCÍ JEDNOTKY em TAK, ABY BYLO MOŽNO VLOŽIT DO TÉTO OBLASTI NA ŠÍŘKU 50 PÍSMEN O VELIKOSTI 16px ZAPSANÉHO FONTEM Verdana. VÝŠKU ŘÁDKY URČETE NA 22px A VÝŠKU TEXTOVÉ OBLASTI NASTAVTE NA ZOBRAZENÍ 7 ŘÁDEK. RÁMEČEK NASTAVTE NA ČISTĚ MODRÝ, O ŠÍŘCE 5px. 65. VYTVOŘTE ROZBALOVACÍ SEZNAM S ŠESTI POLOŽKAMI PŘEDSTAVUJÍCÍMI PĚT BAREV. JAKO PRVNÍ POLOŽKU UMÍSTĚTE TEXT VYBERTE BARVU S HODNOTOU 0. HODNOTY ODESLANÝCH BAREV OČÍSLUJTE OD JEDNÉ DO PĚTI. PODBARVĚTE JI TOUTO BARVOU #AAFFFF. VYTVOŘTE KOLEM PRVKU RÁMEČEK O ŠÍŘCE 2px A ŠEDIVÉ BARVĚ. POSUŇTE TEXT UVNITŘ PRVKU POMOCÍ PADDINGU 120px OD LEVÉHO OKRAJE. POMOCÍ PADDINGU SI MŮŽETE NASTYLOVAT TEXT UVNITŘ V PŘÍPADĚ SEZNAMU VÍCE POLOŽEK, KTERÉ JSOU DO SEBE RŮZNĚ VNOŘENÉ. 66. VYTVOŘTE TLAČÍTKO S FUNKCÍ ODESÍLÁNÍ, KTERÉ BUDE MÍT NA SOBĚ TEXT ODESLAT FONTEM ARIAL O VELIKOSTI 18px A BOLDEM. TLAČÍTKO OBARVĚTE NA TMAVĚ ZELENOU BARVU A TEXT VYPIŠTE V BÍLÉ BARVĚ. AŤ MÁ TLAČÍTKO ŠEDIVÝ STÍN VPRAVO DOLE O 5px S ROZMAZÁNÍM DO 10px. NASTAVTE TLAČÍTKO POMOCÍ CSS TAK, ABY SE PO NAJETÍ KURZORU MYŠI STÍN ZMĚNIL NA ODSAZENÍ 2px S ROZMAZÁNÍM 2px A ZNOVU SE OBJEVIL V PŮVODNÍM STAVU PO TOM, CO KURZOR MYŠI SJEDE PRYČ. VERTIKÁLNÍ CENTROVÁNÍ 67. VYTVOŘTE V ČÁSTI WEB STRÁNKY TAG PATIČKY O ŠÍŘCE 1280px A VÝŠCE 300px. PODBARVĚTE CELOU PATIČKU TMAVĚ MODROU BARVOU. DO PATIČKY VLOŽTE ODSTAVEC O ŠÍŘCE 1280px A VÝŠCE 80px, OBSAHUJÍCÍ TEXT Copyright 2020, WebDesign Studio Antverpy. TEXT ZOBRAZTE BÍLOU BARVOU A VYSTŘEĎTE V RÁMCI ODSTAVCE A ODSTAVEC V RÁMCI PATIČKY VERTIKÁLNĚ. VYTVOŘTE POUZE V HORNÍ ČÁSTI ODSTAVCE RÁMEČEK O ŠÍŘCE 2px NEPŘERUŠOVANOU BÍLOU ČÁROU. KDYŽ VÁM TO NEPŮJDE, ZKUSTE JINÝ ZPŮSOB ZOBRAZENÍ NADŘAZENÉHO ELEMENTU VŮČI ODSTAVCI. 68. VYTVOŘTE DIV O VELIKOSTI 200px x 80px (PRVNÍ JE ŠÍŘKA). PODBARVĚTE HO ŽLUTOU BARVOU A VLOŽTE DO NĚJ TEXT VAŠEHO JMÉNA BEZ POUŽITÍ JAKÉHOKOLIV JINÉHO HTML TAGU. TEXT NAPIŠTE FONTEM ARIAL, VELIKOSTI 30px. NYNÍ TEXT V TAGU DIVU VERTIKÁLNĚ VYSTŘEĎTE BEZ POUŽITÍ VLASTNOSTI VERTICAL-ALIGN. HORIZONTÁLNÍ CENTROVÁNÍ 69. VYTVOŘTE TŘI TAGY DIV, KTERÉ JSOU VZÁJEMNĚ V SOBĚ, KAŽDÝ PODBARVĚTE JINOU BARVOU A DEJTE JIM NÁSLEDUJÍCÍ VELIKOSTI, KDY PRVNÍ ROZMĚR JE ŠÍŘKA A DRUHÝ VÝŠKA: 1000px x 300px, 800px x 200px A 300px x 100px. NYNÍ VZÁJEMNĚ HORIZONTÁLNĚ VYSTŘEĎTE VŠECHNY TŘI OBDÉLNÍKY. HORIZONTÁLNÍ MENU 70. VYTVOŘTE HORIZONTÁLNÍ MENU POMOCÍ NEČÍSLOVANÉHO SEZNAMU A ODKAZŮ. MENU SE BUDE SKLÁDAT Z 5 POLOŽEK: O NÁS, PRODUKTY, SLUŽBY, GALERIE, KONTAKT. DOVNITŘ ATRIBUTŮ HREF VŠECH ODKAZŮ VE STRUKTUŘE SEZNAMU VLOŽTE #. AŤ JE MENU PODBARVENO SVĚTLE MODROU BARVOU. A TEXT ZAPSANÝ FONTEM VERDANA O VELIKOSTI
9 9 22px. ŠÍŘKU JEDNÉ POLOŽKY MENU DEJTE 200px A VÝŠKU 50px. V JEDNOTLIVÝCH POLOŽKÁCH MENU TEXT VYSTŘEĎTE VERIKÁLNĚ I HORIZONTÁLNĚ. VERTIKÁLNÍ MENU 71. VYTVOŘTE VERTIKÁLNÍ MENU POMOCÍ NEČÍSLOVANÉHO SEZNAMU A ODKAZŮ. MENU SE BUDE SKLÁDAT Z 5 POLOŽEK: TECHNIKA, FINANCE, POLITIKA, STRATEGIE, ŽIVOT. DOVNITŘ ATRIBUTŮ HREF VŠECH ODKAZŮ VE STRUKTUŘE SEZNAMU VLOŽTE #. AŤ JE MENU PODBARVENO SVĚTLE ZELENOU BARVOU. A TEXT ZAPSANÝ FONTEM VERDANA O VELIKOSTI 22px. ŠÍŘKU JEDNÉ POLOŽKY MENU DEJTE 200px A VÝŠKU 50px. V JEDNOTLIVÝCH POLOŽKÁCH MENU TEXT VYSTŘEĎTE VERIKÁLNĚ I HORIZONTÁLNĚ. RESPONZIVNÍ STYLOVÁNÍ 72. VYTVOŘTE HORIZONTÁLNÍ MENU POMOCÍ NEČÍSLOVANÉHO SEZNAMU A ODKAZŮ. MENU SE BUDE SKLÁDAT Z 5 POLOŽEK: ZPRÁVY, RADIO, PROGRAM, STANICE, ESHOP. DOVNITŘ ATRIBUTŮ HREF VŠECH ODKAZŮ VE STRUKTUŘE SEZNAMU VLOŽTE #. AŤ JE MENU PODBARVENO ŠEDOU BARVOU. A TEXT ZAPSANÝ FONTEM VERDANA O VELIKOSTI 22px. ŠÍŘKU JEDNÉ POLOŽKY MENU DEJTE 15% Z DOSTUPNÉ ŠÍŘKY A VÝŠKU 50px. V JEDNOTLIVÝCH POLOŽKÁCH MENU TEXT VYSTŘEĎTE VERIKÁLNĚ I HORIZONTÁLNĚ. VYTVOŘTE CSS KÓD, KTERÝ VYTVOŘÍ RESPONZIVNÍ MENU, KTERÉ SE V OKAMŽIKU, KDY SE MAXIMÁLNÍ ŠÍŘKA PROHLÍŽEČE ZMENŠÍ NA 500px A MÉNĚ, ZMĚNÍ NA VERTIKÁLNÍ MENU O ŠÍŘCE JEDNOTLIVÝCH POLOŽEK 100% DOSTUPNÉ ŠÍŘKY. 73. VYTVOŘTE VERTIKÁLNÍ MENU POMOCÍ NEČÍSLOVANÉHO SEZNAMU A ODKAZŮ. MENU SE BUDE SKLÁDAT Z 5 POLOŽEK: RUBRIKY, ČASOPIS, VIDEOFILMY, SOUTĚŽE, ANKETY. DOVNITŘ ATRIBUTŮ HREF VŠECH ODKAZŮ VE STRUKTUŘE SEZNAMU VLOŽTE #. AŤ JE MENU PODBARVENO SVĚTLE MMODROU BARVOU. A TEXT ZAPSANÝ FONTEM VERDANA O VELIKOSTI 22px. ŠÍŘKU JEDNÉ POLOŽKY MENU DEJTE 100% Z DOSTUPNÉ ŠÍŘKY A VÝŠKU 50px. V JEDNOTLIVÝCH POLOŽKÁCH MENU TEXT VYSTŘEĎTE VERIKÁLNĚ I HORIZONTÁLNĚ. VYTVOŘTE CSS KÓD, KTERÝ VYTVOŘÍ RESPONZIVNÍ MENU, KTERÉ SE V OKAMŽIKU, KDY SE MAXIMÁLNÍ ŠÍŘKA PROHLÍŽEČE ZVĚTŠÍ NAD 600px A VÍCE, ZMĚNÍ NA HORIZONTÁLNÍ MENU O ŠÍŘCE JEDNOTLIVÝCH POLOŽEK 16% Z DOSTUPNÉ ŠÍŘKY. DROPDOWN MENU ROZBALOVACÍ MENU 74. VYTVOŘTE ODKAZ, NA GOOGLE.COM, S TEXTEM VYHLEDÁVAČ, KTERÝ BUDE MÍT TVAR OBDÉLNÍKU O VELIKOSTI 200px x 80px A 1px ČERNÝ NEPŘERUŠOVANÝ RÁMEČEK KOLEM DOKOLA. VYTVOŘTE ROZBALOVACÍ MENU, KTERÉ SE ZOBRAZÍ V OKAMŽIKU, KDY NAJEDETE MYŠÍ NA TENTO VÝŠE ZMÍNĚNÝ ODKAZ. BUDE TO VERTIKÁLNÍ MENU O TŘECH POLOŽKÁCH: PRVNÍ, DRUHÝ, TŘETÍ. KAŽDÁ Z POLOŽEK MÁ ROZMĚRY: 180px x 80px A BARVU SVĚTLE MODROU. ZAŘIĎTE, AŤ SE PŘI PŘEJÍŽDĚNÍ PO ROZBALOVACÍM MENU SHORA DOLŮ A NAOPAK VŽDY PODBARVÍ DANÁ POLOŽKA ŠEDIVĚ. V OKAMŽIKU, KDYŽ KURZOR MYŠI OPUSTÍ POVRCH MENU, A PŮVODNÍHO ODKAZU SE ROZBALOVACÍ MENU ZNOVU SKRYJE. PARALAX 75. VYTVOŘTE EFEKT PARALAX. DO WEB STRÁNKY VLOŽTE TŘI ODSTAVCE TEXTU GENEROVANÉHO NAPŘÍKLAD POMOCÍ: KAŽDÝ ODSTAVEC DEJTE DO TAGU ODSTAVCE A MEZI PRVNÍ A DRUHÝ A DÁLE DRUHÝ A TŘETÍ VLOŽTE OBRÁZEK S EFEKTEM PARALAXU. AŤ MÁ MINIMÁLNÍ VÝŠKU 400px. A ŠÍŘKU ALESPOŇ 600px.
DESETIMINUTOVKY HTML - DOVEDNOSTI TÉMATA:
DESETIMINUTOVKY HTML - DOVEDNOSTI TÉMATA: 1 Obsah HTML... 1 ZÁKLADNÍ STRUKTURA WEB STRÁNKY... 1 OBSAH HLAVIČKY WEB STRÁNKY... 1 ZÁKLADNÍ HTML LAYOUT WEB STRÁNKY... 1 ZOBRAZOVANÁ HLAVIČKA WEB STRÁNKY...
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...
Formátování obsahu adminweb
Formátování obsahu adminweb verze 24032015 1 Obsah 1. Možnosti formátování textu...3 2. Formátování v editoru...4 3. Tabulka pro pozicování obsahu...5 4. Tabulka se stylem... 6 5. Šablony...7 6. Obrázky
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
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í
Administrace webových stránek
Administrace webových stránek Obsah Kontakt technické podpory... 2 Přihlášení... 2 Změna textového obsahu... 3 Nahrávání/mazání obrázků... 5 Vložení obrázku do textu... 6 Nastavení pozice obrázku vůči
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
ZŠ ÚnO, Bratří Čapků 1332
TS Výuka informatiky I (ovládání textových editorů) Terasoft - možnost instalovat jeden až tři kurzy (cvičení fungují pouze s nainstalovaným vlastním editorem) : o Výuka MS Office Word 2003 o Výuka MS
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
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
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ý
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
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
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)
Použitý operační systém. Použitý textový procesor
INTERSTENO International Federation for Information Processing Internationale Föderation für Informationsverarbeitung Fédération internationale pour le traitement de l information Professional Word Processing
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í
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
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
Ú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í
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
MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress
MANUÁL K OBSLUZE REDAKČNÍHO SYSTÉMU / wordpress www.webdevel.cz Webdevel s.r.o. IČ 285 97 192 DIČ CZ28597192 W www.webdevel.cz E info@webdevel.cz Ostrava Obránců míru 863/7 703 00 Ostrava Vítkovice M 603
Manuál k tvorbě absolventské práce
Manuál k tvorbě absolventské práce VLOŽENÍ ČÍSLA STRÁNKY... 2 OBRÁZKOVÝ NÁVOD PRO VKLÁDÁNÍ ČÍSEL STRÁNEK... 2 ŘÁDKOVÁNÍ 1,5... 3 OBRÁZKOVÝ NÁVOD PRO ŘÁDKOVÁNÍ... 3 ZAROVNÁNÍ TEXTU DO BLOKU... 4 OBRÁZKOVÝ
Formuláře. Téma 3.2. Řešený příklad č Zadání: V databázi formulare_a_sestavy.accdb vytvořte formulář pro tabulku student.
Téma 3.2 Formuláře Formuláře usnadňují zadávání, zobrazování, upravování nebo odstraňování dat z tabulky nebo z výsledku dotazu. Do formuláře lze vybrat jen určitá pole z tabulky, která obsahuje mnoho
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
Manuál k editoru TinyMCE
Manuál k editoru TinyMCE Popis ovládacích prvků UPOZORNĚNÍ: Některé tlačítka nemusí být k dispozici. Styl písma Dolní a horní index Zarovnání textu Může se aplikovat na označený text. B - tučné písmo,
MANUÁL. Jak používat administraci webových stránek. Obsah ZÁKLAD... 2 ÚPRAVY POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY... 4
MANUÁL Jak používat administraci webových stránek Obsah ZÁKLAD... 2 PŘIHLÁŠENÍ DO ADMINISTRACE... 2 HLAVNÍ MENU... 2 VÝBĚR POLOŽKY... 2 ÚPRAVY POLOŽKY... 3 DETAIL POLOŽKY... 3 ÚPRAVY TEXTOVÉ STRÁNKY...
Příjmení, jméno... Třída... Skupina...Počet bodů...
Příjmení, jméno... Třída... Skupina...Počet bodů... Zdrojové soubory se nachází na síťové jednotce disku H:. Do této složky ukládejte všechny výsledné soubory. Do složky rovněž uložte úkoly OBK, jejich
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
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...
Zadání domácího úkolu pro studenty s UČO končícím na 0
Zadání domácího úkolu pro studenty s UČO končícím na 0 2. Nastavte okraje stránky na 2 cm. 6 bodů, c) odsazení prvního (a jen prvního) řádku 0,5 cm. 4. Vytvořte nový styl nazvaný Kennedy, který bude mít
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
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é
INTERSTENO 2015 Budapest World championship professional Word Processing
OPERAČNÍ SYSTÉM WORD PROCESSING SOFTWARE (TEXTOVÝ PROCESOR) ID SOUTĚŽÍCÍHO Úloha A-1 Instrukce pro účastníky Otevřete dokument YEAROFLIGHT, ihned ho uložte/převeďte do YEAROFLIGHTXXX.DOC NEBO DOCX, kde
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
Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu...
Tvorba článků na knihožroutu: Slovo úvodem... 2 Přihlášení... 3 Tvorba tabulky... 5 Vložení obrázků... 8 Vložení hypertextového odkazu... 9 Slovo úvodem Editaci článků provádějte v prohlížeči MOZILLA FIREFOX!
Š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
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
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
K 2 - Základy zpracování textu
Radek Maca Makovského 436 Nové Město na Moravě 592 31 tel. 0776 / 274 152 e-mail: rama@inforama.cz http://www.inforama.cz K 2 - Základy zpracování textu Mgr. Radek Maca Word I 1 slide ZÁKLADNÍ POJMY PRVKY
Nástrojová lišta v editačním poli
Nástrojová lišta v editačním poli Název projektu PŘEJÍT NA konkrétní sekci webu ZOBRAZIT zobrazí a) pracovní verzi webu (tj. nepublikovanou) b) publikovanou verzi webu a) Odstranit odstraní zobrazenou
WEBOVÉ STRÁNKY www.krestanskevanoce.cz
WEBOVÉ STRÁNKY www.krestanskevanoce.cz Domovská stránka Křesťanských Vánoc je založena na databázi, která vedle běžných funkcí redakčního systému internetové prezentace umožňuje též uložit údaje o jednotlivých
1 Tvorba WWW stránek pomocí programu Microsoft FrontPage
1 Tvorba WWW stránek pomocí programu Microsoft FrontPage Pomocí tohoto programu můžete vytvářet WWW stránky s minimální znalostí HTML kódu. Bohužel takto vytvořené stránky obsahují množství chyb a nejsou
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
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
Vzorový zápočtový test. Windows
Vzorový zápočtový test Windows 1. Otevřete okno Průzkumníka. 2. Ve složce Dokumenty vytvořte novou složku s názvem Vašeho příjmení (např. Kratky). Na tuto složku se budeme v dalším textu odvolávat jako
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
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
Zemětřesení a sopečná činnost
Zemětřesení a sopečná činnost V tomto cvičení vytvoříte interaktivní webovou mapu, která bude zobrazovat výskyt zemětřesení a sopečné činnosti a dávat je do souvislosti s hranicemi litosférických desek.
Prezentace. Prezentace. 5. InDesign vzory, znakové styly. Vytvořil: Tomáš Fabián vytvořeno 10. 11. 2012. www.isspolygr.cz
5. InDesign vzory, znakové styly www.isspolygr.cz Vytvořil: Tomáš Fabián vytvořeno 10. 11. 2012 Strana: 1 Škola Ročník 4. ročník (SOŠ, SOU) Název projektu Interaktivní metody zdokonalující proces edukace
NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE. Ataxo Czech s.r.o.
NÁVOD NA OBSLUHU INTERNETOVÉ PREZENTACE Ataxo Czech s.r.o. ÚVOD Internetové stránky vytvořené společností Ataxo v rámci produktu Mini web můžete jednoduše a rychle upravovat prostřednictvím on-line administrace.
6. Formátování: Formátování odstavce
6. Formátování: Formátování odstavce Obrázek 1: Formát / Odstavec Odstavec je text mezi dvěma znaky konce odstavce. Konec odstavce je skrytý znak a vkládáme jej během psaní při každém stisknutí klávesy
WEBOVÉ STRÁNKY
WEBOVÉ STRÁNKY www.krestanskevanoce.cz Domovská stránka Křesťanských Vánoc je založena na databázi, která vedle běžných funkcí redakčního systému internetové prezentace umožňuje též uložit údaje o jednotlivých
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í
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
Náměty samostatných cvičení
Náměty samostatných cvičení 153 1 Editace dokumentu 2.1 až 2.3 Formát: písmo, ohraničení a stínování, odstavec 2.4 Formát: odrážky a číslování Náměty samostatných cvičení Připravte text, který upozorňuje
Přejmenování listu Dvakrát klepněte na pojmenování listu, napište nový název a potvrďte klávesu ENTER.
Výplň a ohraničení tabulky Označte text, z nabídky vyberte Formát Buňky Ohraničení (nejdříve vyberte typ, pak barvu a nakonec typ ohraničení (dole, vnitřní atd...). Změna formátu písma (styl, velikost,
EU-OPVK:VY_32_INOVACE_FIL19 Vojtěch Filip, 2014
Číslo projektu CZ.1.07/1.5.00/34.0036 Tématický celek Inovace výuky ICT na BPA Název projektu Inovace a individualizace výuky Název materiálu Microsoft Word styly, tabulky, obrázky Číslo materiálu VY_32_INOVACE_FIL19
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
<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í
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
1. Přihlášení Práce s webem Nová stránka Aktuální stránka Moduly Editace textu... 6
CMS / Manuál 1. Přihlášení... 1 2. Práce s webem... 2 Změnit strukturu webu...2 3. Nová stránka... 2 4. Aktuální stránka... 3 Přidat obsah na stránku...3 Upravit stávající obsah...3 SEO stránky...3 Vlastnosti
INTERSTENO 2017 Berlin World championship professional Word Processing
OPERAČNÍ SYSTÉM SOFTWARE POUŽITÝ PRO WORD PROCESSING ID SOUTĚŽÍCÍHO A-1 A Instrukce pro soutěžící Otevřete si připravený soubor TOURISM, uložte/převeďte jej ihned na TOURISMXXX.DOC NEBO DOCX, přičemž XXX
WEBOVÉ STRÁNKY WWW.NOCKOSTELU.CZ
WEBOVÉ STRÁNKY WWW.NOCKOSTELU.CZ Zpracováno na základě podkladů poskytnutých organizátory akce Lange Nacht der Kirchen, Rakousko. Domovská stránka Noci kostelů je založena na databázi, která vedle běžných
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
Vkládání prvků do dokumentu MS Word
Vkládání prvků do dokumentu MS Word 1. Vkládání Do dokumentu můžeme vložit celou řadu prvků, počínaje čísly stránek a obrázky konče. 1.1. Konec stránky Pokud chceme, aby odstavec byl vždy posledním na
WORD. 4. Texty vyskytují se v dokumentu 3x mají zelenou barvu
Příjmení, jméno... Třída... Skupina... Počet bodů... Zdrojové soubory se nachází na síťové jednotce disku H:. Do této složky ukládejte všechny výsledné soubory. Do složky rovněž uložte úkoly OBK, jejich
Redakční systém IPO manuál
Redakční systém IPO manuál 1 Obsah 1 Základní informace...3 1.1 Co je IPO...3 1.2 Kde najít IPO na internetu...3 1.3 IPO oddělení pro zákaznickou podporu...3 2 Příhlášení do systému...4 2.1 Vzhled systému
Microsoft PowerPoint 2007
Konání kurzu financováno z Operačního programu Vzdělávání pro konkurenceschopnost ZVYŠOVÁNÍ IT GRAMOTNOSTI ZAMĚSTNANCŮ VYBRANÝCH FAKULT MU Registrační číslo: CZ.1.07/2.2.00/15.0224 Microsoft PowerPoint
(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
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
1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce.
2. lekce Čtení dokumentů 1. Otevřete dokument, který chcete číst. 2. Na kartě Zobrazení klikněte ve skupině Zobrazení dokumentů na položku Čtení na celé obrazovce. 3. Přecházení mezi stránkami v dokumentu:
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ápověda k redakčnímu systému InstantWeb.cz
Nápověda k redakčnímu systému InstantWeb.cz Přihlášení na adrese www.vasedomena.cz/admin naleznete přihlašovací pole se jménem a přiděleným heslem. Toto heslo je zpočátku přiděleno poskytovatelem programu,
INFORMATIKA. aplikační software pro práci s informacemi DIPLOM. Pracovní list pro žáky
INFORMATIKA aplikační software pro práci s informacemi DIPLOM Pracovní list pro žáky Vytvořila: RNDr. Ivanka Dvořáčková 2013 Diplom Otevřete nový soubor a uložte pod názvem diplom.docx. Postupujte podle
František Hudek. květen 2012
VY_32_INOVACE_FH07 Jméno autora výukového materiálu Datum (období), ve kterém byl VM vytvořen Ročník, pro který je VM určen Vzdělávací oblast, obor, okruh, téma Anotace František Hudek květen 2012 8. ročník
2. Cvičení Formáty dat, jednoduché vzorce
2. Cvičení Formáty dat, jednoduché vzorce 1. Vytvořte složku s vaším příjmením a jménem. 2. Otevřete soubor MS Excel, uložte ho do vaší složky pod názvem 02_Priklad. K názvu nepřidávejte své jméno, při
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í
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
Microsoft Word (opakování formátování, práce s objekty atd.)
Základní škola a Mateřská škola Dolní Hbity, okres Příbram Microsoft Word (opakování formátování, práce s objekty atd.) Mgr. Radka Hlaváčová VY_32_INOVACE_Inf.Hl.20-1 - Předmět: Informatika Stupeň vzdělávání:
Administrace webu Postup při práci
Administrace webu Postup při práci Obsah Úvod... 2 Hlavní menu... 3 a. Newslettery... 3 b. Administrátoři... 3 c. Editor stránek... 4 d. Kategorie... 4 e. Novinky... 5 f. Produkty... 5 g. Odhlásit se...
Snadná úprava stránek, nemusím umět HTML, tvořím obsah téměř jako ve Wordu. Jak změnit obsah nástěnky: vpravo nahoře Nastavení zobrazených informací
Školení Wordpress Nainstalované pluginy: WPML Multilingual CMS Adminize Capability Manager Contact Form 7 Wordpress Download Monitor Google Analytics for WordPress Simple Google Sitemap XML Seznámení s
Metodický materiál. Cvičné příklady a témata pro soutěž OFFICE - ZŠ. Ing. Zdeněk Matúš, Mgr. Čestmír Glogar, 2015,
KRAJSKÉ ZAŘÍZENÍ PRO DALŠÍ VZDĚLÁVÁNÍ PEDAGOGICKÝCH PRACOVNÍKŮ A INFORMAČNÍ CENTRUM, NOVÝ JIČÍN, příspěvková organizace, IČ: 62330403 ředitelství organizace, Štefánikova 826/7, 741 01 Nový Jičín, 595-538-000,
Styly odstavců. Word 2010. Přiřazení stylu odstavce odstavci. Změna stylu odstavce
Styly odstavců V textu, který přesahuje několik stránek a je nějakým způsobem strukturovaný (což znamená, že se dá rozdělit na části (v knize jim říkáme kapitoly) a jejich podřízené části (podkapitoly),
Naučte se víc... Microsoft Office Excel 2007 PŘÍKLADY
Naučte se víc... Microsoft Office Excel 2007 PŘÍKLADY Autor: Lukáš Polák Příklady MS Excel 2007 Tato publikace vznikla za přispění společnosti Microsoft ČR v rámci iniciativy Microsoft Partneři ve vzdělávání.
Požadované dovednosti v ovládání textového procesoru Microsoft Word 2013 pro předměty VA1 a VT1
Požadované dovednosti v ovládání textového procesoru Microsoft Word 2013 pro předměty VA1 a VT1 1 Úvod 1.1 Práce s dokumenty 1.1.1 Spustit a ukončit textový editor. 1.1.2 Otevřít jeden nebo několik dokumentů.
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
WebNews 2.4 (publikační systém)
WebNews publikační systém Strana 1 WebNews 2.4 (publikační systém) popis administračního rozhraní terc.cz Ing. Michal Terč, Sokolovská 2720, 530 02 Pardubice tel.: +420 604 793 955, tel./fax: +420 466
PŘÍRUČKA. Správa obsahu webové prezentace. Formátování textu
PŘÍRUČKA Správa obsahu webové prezentace Formátování textu Verze: 6.2 Datum: 4.12.2009 Autor: Ing. Michal Šídlo, michal.sidlo@netgenium.com Společnost: NetGenium s.r.o., www.netgenium.com Obsah 1. Základní
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,
Prezentace. Prezentace. 6. InDesign obtékání textu, zarovnání. Vytvořil: Tomáš Fabián vytvořeno 14. 11. 2012. www.isspolygr.cz
6. InDesign obtékání textu, zarovnání www.isspolygr.cz Vytvořil: Tomáš Fabián vytvořeno 14. 11. 2012 Strana: 1 Škola Ročník 4. ročník (SOŠ, SOU) Název projektu Interaktivní metody zdokonalující proces
Jak se orientovat ve světě ESTOFANu verze 3.0.3?
Jak se orientovat ve světě ESTOFANu verze 3.0.3? Systém ESTOFAN je určen pro administraci a editaci webových stránek, které jsou provozovány reklamní agenturou PANKREA. 1. Přihlášení Po objednávce a vytvoření
Sestavy. Téma 3.3. Řešený příklad č Zadání: V databázi zkevidence.accdb vytvořte sestavu, odpovídající níže uvedenému obrázku.
Téma 3.3 Sestavy Sestavy slouží k výstupu informací na tiskárnu. Tisknout lze také formuláře, ale v sestavách má uživatel více možností pro vytváření sumárních údajů. Pokud všechna pole, která mají být
Office Arena 2017 Krajské kolo
Krajské kolo Název soutěžního projektu: Školní televize Ú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 a jednotný
Microsoft Office PowerPoint 2003
Microsoft Office PowerPoint 2003 Školení učitelů na základní škole Meteorologická Maturitní projekt SSPŠ 2013/2013 Vojtěch Dušek 4.B 1 Obsah 1 Obsah... 2 2 Seznam obrázků... 4 3 Základy programu PowerPoint...
Prezentace (Presentation) - ECDL / ICDL Sylabus 6.0
Prezentace (Presentation) - ECDL / ICDL Sylabus 6.0 Upozornění: Oficiální verze ECDL / ICDL Sylabu verze 6.0 je publikovaná na webových stránkách ECDL Foundation - www.ecdl.org a lokalizovaná verze na
Úvod do email systému
Úvod do email systému Základní informace Toto emailové prostředí je rozloženo do tří hlavních částí - rámců. Levý rámec zobrazuje aktuálně přihlášené složky. V pravé části strany se realizuje veškerá činnost
WEBOVÉ STRÁNKY
WEBOVÉ STRÁNKY WWW.NOCKOSTELU.CZ Zpracováno na základě podkladů poskytnutých organizátory akce Lange Nacht der Kirchen, Rakousko. Domovská stránka Noci kostelů je založena na databázi, která vedle běžných
M E T O D I K A W I K I
M E T O D I K A W I K I STŘEDNÍ ŠKOLY INFORMATIKY A SPOJŮ, BRNO, ČICHNOVA 23 NÁPOVĚDA OBSAH Webové stránky Střední školy informatiky a spojů, Brno, Čichnova 23... 3 Moje stránka... 6 Přihlášení... 6 Po
Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML
Čtvrtek 11. dubna Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje