Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML/CSS

Školení HTML/CSS

Prezentace: www.lukassvoboda.cz/coding/html/kurz-html.pdf

Pracovní prostředí pro praktickou část: https://thimbleprojects.org/lukassvoboda/460330

Vypracování praktické části: www.lukassvoboda.cz/coding/html/index.html

Vypracování praktické části ke stažení (zip): www.lukassvoboda.cz/coding/html/priklad.zip

Prázdné zadání praktické části ke stažení (zip): www.lukassvoboda.cz/coding/html/prazdny.zip

Cvičení 1

  • Klikněte na https://thimbleprojects.org/lukassvoboda/460330, 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ě).

Cvičení 2

  • 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ě).

Cvičení 3

  • 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.

Texty ke cvičení 3

Ahoj, jmenuji se ..., žiju na Moravě a baví mě zkoušet nové věci, například se učit HTML a CSS.

I když je dnes neděle a venku svítí slunce, tak jsem raději ve Zlíně na kurzu tvorby webových stránek. Až odsud v podvečer odejdu, tak budu mít asi hlavu jako balón, ale nejpozději hned zítra si vyzkouším vytvořit další webovou stránku. A pak další, až ze mne bude webový profík.

Cvičení 4

  • 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.

Cvičení 5

  • Za nadpis O mně vložte svoji fotku (můžete použít soubor profil.jpg ve složce obrazky).

Cvičení 6

  • 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.jpgfoto-6.jpg).

Cvičení 7

  • Pod hlavní nadpis vložte seznam s dvěma položkami O mně a Fotogalerie.

Cvičení 8

  • 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.

Cvičení 9

  • 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.

Cvičení 10

  • Zarovnejte titulek H1 na střed.
  • Všechny odkazy nastavte tučné.

Cvičení 11

  • 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

  • Nastavte fotogalerii světle modré pozadí #caedfc, css třídu pojmenujte fotogalerie.

Cvičení 13

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)

Cvičení 14

  • 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.

Cvičení 15

  • 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

Cvičení 16

  • Nastavte profilovou fotografii (v sekci O mně) obtékat textem.
  • Doplňte 30px vnější pravý okraj, aby byl text od fotky odsazen.

Cvičení 17

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>
  ...
 </div>
</div>
  • 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í.

Cvičení 18

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

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

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%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment