tvoříme web HTML/CSS
|
|
|
- Vít Toman
- před 5 lety
- Počet zobrazení:
Transkript
1 tvoříme web HTML/CSS Zlín
2 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 přitažlivý vzhled Můžeme se chlubit, že umíme dělat webovky
3 HTML HyperText Markup Language značkovací jazyk, který definuje strukturu obsahu provázanou odkazy CSS Cascading Style Sheets jazyk popisující způsob zobrazení obsahu stránek
4 HTML CSS
5 HTML Slovník element obsah <p>hello World!</p> tag tag
6 HTML Struktura <html> <head> popis stránky </head> <body> zde je obsah stránky </body> </html>
7 Cvičení 1 Titulek stránky Klikněte na odkaz výše, po načtení stránky stiskněte zelené tlačítko Upravit vpravo nahoře. Pokud chcete, můžete se zde zaregistrovat (odkaz Zaregistrujte se vpravo nahoře) V souboru index.html najděte tag title a změňte jeho text na Můj web (můžete změnit za své jméno, například Jančin web, Web o Martině a podobně).
8 HTML Nadpisy <h1>hlavní titulek stránky v obsahu</h1> Definují strukturu obsahu od nejdůležitějšího <h1> po nejméně důležitý <h6> Měly by na sebe logicky navazovat: <h1>náš eshop</h1> <h2>kontakt</h2> <h3>kde nás najdete</h3> Odkazy:
9 Cvičení 2 Nadpisy Vložte do těla stránky nadpis první úrovně se stejným textem jako máte titulek (například Jančin web, Web o Martině a podobně). Levá závorka < 1. Levý Alt + Ctrl + klávesa pro tečku 2. Pravý Alt + klávesa pro tečku Pravá závorka > 1. Levý Alt + Ctrl + klávesa pro čárku 2. Pravý Alt + klávesa pro čárku
10 HTML Odstavec <p>text nového odstavce vždy začíná nový řádek a konec odstavce končí řádek. Klasický odstavec v HTML má před sebou a za sebou navíc vertikální mezeru, která většinou přesně odpovídá výšce jednoho řádku. Pokud se vyskytnou za sebou dva odstavce nebo jiné elementy s vertikální mezerou, výška mezery se nesčítá. Podobná mezera se dělá i u jiných blokových prvků, nejčastěji u nadpisů.</p> Slouží k členění delšího textu. Odkazy:
11 Cvičení 3 Odstavec Vložte nadpis druhé úrovně s textem "O mně". Za nadpis vložte dva odstavce s textem o vás. Můžete využít připravené texty.
12 HTML Odkaz atribut <a href=" odkazu</a> cíl odkazu Slouží k propojení dokumentů (webových stránek, obrázků, PDF,...). Odkaz může směřovat na dokument na našem webu nebo na cizím Pokud odkazujeme mimo naše stránky, musí cíl odkazu začínat nebo Pokud odkazujeme uvnitř stránky, pak použijeme formát #id-sekce Odkazy:
13 Cvičení 4 Odkaz Na konec stránky vložte odstavec s textem "Vyrobeno s láskou pro Czechitas" a na slově Czechitas vytvořte odkaz na web
14 HTML Obrázek <img src="obrazky/fotka.jpg" alt="moje fotka po ránu > cesta k obrázku popis obrázku Vloží do stránky obrázek Nepárový tag = nemá na konci uzavírací značku. Popis obrázku obsahuje informaci o tom, co je na obrázku vidět. Zobrazí se, pokud se obrázek nenačte. Odkazy:
15 Cvičení 5 Obrázek Za nadpis O mně vložte svoji fotku (můžete použít soubor profil.jpg ve složce obrazky).
16 Cvičení 6 Fotogalerie Před odstavec "Vyrobeno s láskou..." vložte nadpis druhé úrovně Fotogalerie Vložte za něj odstavec s popisem fotogalerie (například Moje fotky z výletu na Kokořín) Za nadpis vložte 6 fotek z výletu (foto-1.jpg až foto-6.jpg).
17 HTML Seznamy <ul> <li>text položky seznamu</li> <li>text další položky</li> <li>třetí položka seznamu</li> </ul> <ol> <li>text položky seznamu</li> <li>text další položky</li> <li>třetí položka seznamu</li> </ol> Text položky seznamu Text další položky Třetí položka seznamu 1. Text položky seznamu 2. Text další položky 3. Třetí položka seznamu Odkazy:
18 Cvičení 7 Navigace stránky Pod hlavní nadpis vložte seznam s dvěma položkami O mně a Fotogalerie.
19 CSS Co to je? Slouží k formátování (stylování) obsahu stránek Pomocí stylů nastavujeme například barvu a velikost písma, pozadí, zarovnání textu = cokoliv co nepatří do obsahu. Zapisují se do samostatného souboru s koncovkou.css Do stránky jej vkládáme pomocí HTML tagu <link> <link rel="stylesheet" href="style.css"> umístění souboru se styly
20 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
21 CSS Slovník Selektory můžeme skládat za sebe. h1, h2 { } color: red; titulky H1 a H2 budou mít červenou barvu textu h1 a { } color: blue; odkaz uvnitř titulku H1 bude mít modrou barvu
22 CSS Barvy color: #f36f21; barva písma, zapsáno šestnáctkovým RGB způsobem background-color: blue; barva pozadí, zapsáno pojmenovanou barvou Odkazy:
23 Cvičení 8 Barvy textu Nastavte propojení stránky s CSS souborem style.css pomocí elementu link v hlavičce. Nastavte nadpisům h1 a h2 oranžovou barvu #f36f21. Levá závorka { 1. Levý Alt + Ctrl + B 2. Pravý Alt + B Pravá závorka } 1. Levý Alt + Ctrl + N 2. Pravý Alt + N
24 CSS Písmo font-size: 20px; velikost písma, udává se nejčastěji v pixelech font-family: "Merriweather", "Arial", sans-serif; druh písma, zapisuje se název fontu, může jich být více za sebou název fontu se zapisuje do závorek
25 Cvičení 9 Velikost a druh písma Nastavte celému dokumentu jednotný font Open Sans o velikosti 18px. pro zacílení na celý dokument využijte selektor body Nastavte velikost písma nadpisu první úrovně na 48px a druhé úrovně na 32px. Nastavte nadpisům font Merriweather.
26 CSS Formátování textu 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 Odkazy:
27 Cvičení 10 Úpravy textu Zarovnejte titulek H1 na střed. Všechny odkazy nastavte tučné.
28 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; } Kdy se to hodí?
29 HTML Oddíl <div>zahrnuje v sobě libovolně velkou oblast textu včetně nadpisů, obrázků a tabulek. Někdy se celá stránka vyskytuje uvnitř jednoho <div> elementu. Slouží k rozdělení obsahu, nějčastěji pro rozdílné stylování různých částí stránky. </div> Slouží k strukturování obsahu, nemá žádný specifický význam. Odkazy:
30 Cvičení 11 Bloky V HTML souboru obalte obsah sekce O mně oddílem <div> a doplňte mu css třídu o-mne. <div class="o-mne"> <h2>o mně</h2> <p>...</p> </div> Do CSS souboru vložte novou třídu.o-mne a nastavte jí šedou barvu pozadí #ededed
31 Cvičení 12 Bloky Nastavte fotogalerii světle modré pozadí #caedfc, css třídu pojmenujte fotogalerie.
32 Cvičení 13 Bloky Nastavte zápatí css třídu paticka a doplňte mu styly: tmavě modré pozadí #1b4b59 text na střed bílou barvu textu (#ffffff nebo white) žlutou barvu odkazu (#f4e842 nebo yellow)
33 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:
34 CSS Odsazení padding: 25px; vnitřní odsazení bloku ze všech stran padding-bottom: 25px; vnitřní odsazení bloku pouze ze spodu, kromě bottom lze použít padding-left, padding-right a padding-top margin-right: 10%; odsazení (padding i margin) lze zadat i v % šířky obsahu, pro margin platí stejná pravidla zápisu jako pro padding
35 CSS Rámeček border: 5px solid #177095; zápis je postupně: tloušťka rámečku - styl čáry - barva čáry na příkladu je 5px silný rámeček, plná čára, barva modrá border-top: 1px dotted red; opět lze zadat jen pro vybrané strany, styl čáry může být například tečkovaný (dotted) Odkazy:
36 Cvičení 14 Úpravy sekcí Nastavte sekcím O mně, Fotogalerie a patičce vnitřní odsazení 25px ze všech stran. Nastavte všem fotografiím ve fotogalerii bílý rámeček o tloušťce 5px plnou čarou.
37 CSS Rozměry width: 50%; šířka bloku, udává se nejčastěji v % a px max-width: 960px; maximální šířka bloku, použít lze opět % a px
38 Cvičení 15 Rozměry v akci Fotky ve fotogalerii zarovnáme vedle sebe do dvou řádků po třech fotkách. Šířka každé fotky ve fotogalerii bude 30% Vnější odsazení každé fotky bude 1% vpravo a 1% dole
39 CSS Obtékání obsahu float: left; blok se snažít plavat co nejvíce vlevo obsah za ním jej obtéká vpravo float: right; blok se snažít plavat co nejvíce vpravo obsah za ním jej obtéká vlevo float: none; blok nikde neplave zdroj obrázku: Odkazy:
40 Cvičení 16 Obtékání Nastavte profilovou fotografii (v sekci O mně) obtékat textem. Doplňte 30px vnější pravý okraj, aby byl text od fotky odsazen.
41 CSS Obtékání obsahu plaveme ven overflow: hidden; zruší přetékání obsahu ven, nastavuje se na nadřazený element (tzv. rodič) nad plovoucím prvkem Odkazy:
42 Cvičení 17 Obtékání Nastavíme maximální šířku obsahu a zabráníme přetékání obsahu ven ze sekce. V HTML vložíme do sekcí O mně a Fotogalerie nový div, který obalí vnitřní obsah a nastavíme mu css třídu obsah. <div class="o-mne"> <div class="obsah"> <h2>o mně</h2>... V CSS nastavíme pro novou třídu.obsah maximální šířku (max-width) na 960px a pravidlo pro zabránění přetékání.
43 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:
44 CSS Seznamy list-style: square; styl odrážkového seznamu, hodnota none zruší odrážky Seznam má ve výchozím stavu už nastaven margin a padding, můžeme je zrušit (pokud chceme použít seznam například jako navigaci): ul { margin: 0; padding: 0; } Odkazy:
45 Cvičení 18 Navigace stránky Propojíme navigaci se sekcemi naší stránky. Sekcím O mně a Fotogalerie doplňte v HTML atribut id a jako hodnotu mu nastavte o-mne, resp. fotogalerie. Tedy to samé, co už máte v atributu class. <div class="o-mne" id="o-mne"> Z položek seznamu (text uvnitř <li></li>) vytvořte odkaz a jako cíl odkazu zadejte hodnoty atributu id z předchozího kroku se znakem # na začátku. Odkaz O mně bude mít cíl href="#o-mne".
46 Cvičení 19 Navigace stránky Nastylujeme navigaci, aby trochu vypadala: css třídu bloku obalující navigaci pojmenujeme navigace. pozadí celé navigace bude mít barvu modrou # navigace bude mít vnitřní odsazení okrajů jako ostatní bloky zrušíme výchozí styly seznamu v navigaci obsah bude vycentrován na střed položky seznamu budou od sebe odsazeny o 15px z obou stran
47 Cvičení 20 Samostatný úkol Vložte novou sekci Kontakt (mezi fotogalerii a patičku) Obsahovat bude: nadpis Kontakt mapka (soubor mapa.png) odstavec s libovolným textem ve kterém bude odkaz na Facebook a odkaz na (jakýkoliv) Odkaz na kontakt doplňte do navigace. Jak to bude vypadat: barevné pozadí (dejte vaši oblíbenou barvu) stejné vnitřní odsazení jako jinde obrázek bude napravo od textu a trochu odsazený maximální šířka obrázku 50%
48 Na domácí večery Anglicky
49 Přídavek Jak publikovat webové stránky? Co to jsou inline styly. Jak doplnit události - pseudotřídy: hover. Zaoblení okrajů: border-radius. Několik dalších tagů header, footer, section, nav, video. Použití fontů na webu Google Fonts a další možnosti.
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
NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák
NSWI096 - INTERNET CSS kaskádové styly Mgr. Petr Lasák MINULE
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
tvoříme web Bootstrap
tvoříme web Bootstrap 15. 9. 2018 Zlín 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
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...
Ú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í
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ý
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
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
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
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
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 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)
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> - 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í
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Í
(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
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é
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
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é
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
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í
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
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
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
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
Vývoj Internetových Aplikací
2 Vývoj Internetových Aplikací HTML a CSS Ing. Michal Radecký, Ph.D. www.cs.vsb.cz/radecky HTML a CSS - Tvorba webových stránek - Struktura - Obsah - Vzhled - Funkcionalita zdroj: http://www.99points.info
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
Č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
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
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
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
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Ý
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
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
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í
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
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
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í,
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
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
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í
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
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
Internet 1 vývoj, html, css
Internet 1 vývoj, html, css Martin Hejtmánek hejtmmar@fjfi.cvut.cz http://kmlinux.fjfi.cvut.cz/ hejtmmar Počítačový kurs Univerzity třetího věku na FJFI ČVUT Znalci 19. března 2009 Dnešní přednáška 1 Historie
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
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
Tvorba webových stránek
Tvorba webových stránek Kaskádové styly Úprava vzhledu webové stránky pomocí atributů má několik nevýhod a úskalí. Atributy nabízejí málo možností úprav. Obtížně se sjednocují změny na různých částech
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ě
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...
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
Základy HTML. Obecná syntaxe HTML. Struktura HTML
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 publikaci dokumentů
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
Kaskádové styly základy grafiky
1 Kaskádové styly základy grafiky Vymezení pojmů Historie Základy stylů 2 Co je to CSS? Vznik CSS a je možné zařadit přibližně do roku 1997. Pojem CSS by se dal shrnout definicí :"souhrn pravidel a metod
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
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
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
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
INFORMATIKA. aplikační software pro práci s informacemi TSUNAMI. Pracovní list pro žáky. Gymnázium K. V. Raise, Hlinsko, Adámkova 55
INFORMATIKA aplikační software pro práci s informacemi TSUNAMI Pracovní list pro žáky Autor: RNDr. Ivanka Dvořáčková 2013 Tsunami pracovní list Otevřete pracovní soubor IT 34 Tsunami pracovní soubor.docx
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...
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
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í
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
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
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,
SKUPINA ČEZ GRAFICKÝ MANUÁL PRO WEBOVÉ STRÁNKY SKUPINY ČEZ / VERZE 06/2014
GRAFICKÝ MANUÁL PRO WEBOVÉ STRÁNKY SKUPINY ČEZ / VERZE 06/0 OBSAH ZÁKLADNÍ PRAVIDLA JEDNOTLIVÉ ŠABLONY UNIVERZÁLNÍ MODULY 0 Základní pravidla 0 Práce s grafickým manuálem 05 Barevné schéma 06 Typografie
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
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í
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
Stránka se dá otevřít dvěma způsoby
Co je potřeba Mozek, to zaprvé. Budete potřebovat počítač, na kterém běží alespoň nějaký jednoduchý textový editor (Poznámkový blok). Potřebujete webový prohlížeč. Hodí se připojení na internet. Kdo nemá
Ú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.
13. Vytváření webových stránek
13. Vytváření webových stránek značkovací jazyk HTML, základní členění dokumentu, odkazy, tabulky, seznamy, obrázky, HTML editory Značkovací jazyk HTML HTML - Hypertext markup Language (hypertextový značkovací
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 Seznamy Seznam je skupina odstavců označených odrážkou. Seznam je: číslovaný je označen pořadovým číslem nebo písmenem, nečíslovaný je označen značkou (odrážkou) Seznam Celý blok
Dokument a jeho části oddíly, záhlaví, zápatí
Dokument a jeho části oddíly, záhlaví, zápatí Nejčastějším úkolem bývá ukončení stránky a pokračování textu na další stránce nebo vložení stránky před napsaný text. Podobným úkolem je jiné svislé zarovnání
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í
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
APLIKACE XML PRO INTERNET
APLIKACE XML PRO INTERNET Jaroslav Ráček Fakulta Informatiky, Masarykova Universita Brno Abstrakt Text je věnován možnostem využití XML technologie pro prezentaci dokumentů pomocí Internetu. V úvodu je
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
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),
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
HTML. ICT_01., 02. konzultace; 2. ročník 1/6
ICT_01., 02. konzultace; 2. ročník 1/6 HTML Vystavení vlastních dat na Internetu Každý uživatel Internetu, který chce svoje webové stránky publikovat na Internetu potřebuje: - místo na webovém serveru,
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
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
Výukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585
Výukový materiál vytvořen v rámci projektu EU peníze školám "Inovace výuky" registrační číslo CZ.1.07/1.5.00/34.0585 Škola: Adresa: Autor: Gymnázium, Jablonec nad Nisou, U Balvanu 16, příspěvková organizace
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
Kaskádové styly. 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
IE1 jazyk HTML a kaskádové styly
IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.
Základy HTML. Obecná syntaxe HTML. Struktura HTML
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 publikaci dokumentů
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
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
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
IE1 jazyk HTML a kaskádové styly
IE1 jazyk HTML a kaskádové styly Tvorbu webových stránek v jazyce HTML a jejich formátování pomocí kaskádových stylů (CSS) budeme zkoušet na souvislém příkladu. Můžete si zvolit vlastní téma webové prezentace.
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
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