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 přitažlivý vzhled Můžeme se chlubit, že umíme dělat webovky http://bit.ly/htmlgirl
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
HTML CSS
HTML Slovník element obsah <p>hello World!</p> tag tag
HTML Struktura <html> <head> popis stránky </head> <body> zde je obsah stránky </body> </html>
Cvičení 1 Titulek stránky http://bit.ly/htmlgirl 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ě).
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: http://www.sovavsiti.cz/c01201.html http://jecas.cz/nadpisy
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
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: https://www.jakpsatweb.cz/html/bloky.html http://jecas.cz/odstavec
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.
HTML Odkaz atribut <a href="http://www.czechitas.cz">text 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 http:// nebo https:// Pokud odkazujeme uvnitř stránky, pak použijeme formát #id-sekce Odkazy: https://www.jakpsatweb.cz/odkazy-html.html http://jecas.cz/odkaz
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 www.czechitas.cz.
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: https://www.jakpsatweb.cz/obrazky.html
Cvičení 5 Obrázek Za nadpis O mně vložte svoji fotku (můžete použít soubor profil.jpg ve složce obrazky).
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).
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: https://www.jakpsatweb.cz/html/seznamy.html http://jecas.cz/seznamy
Cvičení 7 Navigace stránky Pod hlavní nadpis vložte seznam s dvěma položkami O mně a Fotogalerie.
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
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
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
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: https://www.jakpsatweb.cz/barvy-zapis.html https://www.google.cz/search?q=web+color+picker
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
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
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.
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: http://jecas.cz/font#weight http://jecas.cz/text-align
Cvičení 10 Úpravy textu Zarovnejte titulek H1 na střed. Všechny odkazy nastavte tučné.
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í?
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: https://www.jakpsatweb.cz/html/bloky.html http://jecas.cz/div-span#najdi(div)
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
Cvičení 12 Bloky Nastavte fotogalerii světle modré pozadí #caedfc, css třídu pojmenujte fotogalerie.
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)
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: https://www.jakpsatweb.cz/okraje.html http://jecas.cz/box-model
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
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: https://www.jakpsatweb.cz/css/border.html
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.
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
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
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: https://css-tricks.com/almanac/properties/f/float/ Odkazy: http://jecas.cz/float
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.
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: http://jecas.cz/float
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í.
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: http://jecas.cz/display
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: http://jecas.cz/list-style http://jecas.cz/seznamy
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".
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 #177095 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
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 email (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%
Na domácí večery https://www.jakpsatweb.cz/ http://jecas.cz/ Anglicky https://www.codecademy.com/ar/tracks/htmlcss https://developer.mozilla.org/en-us/docs/learn
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.