Stáhnout prezentaci
Prezentace se nahrává, počkejte prosím
ZveřejnilGabriela Pavlíková
1
Lekce 2 Ustanovení firmy
2
Obsah hodiny Rozcvička – brainstorming (8) Ustanovení imaginární firmy (20) Název Cíl SWOT analýza firemního prostředí Přestávka (5) Algoritmizace – tréning abstraktního myšlení (10) HTML – základní značky, seznamy(10) Přestávka (5) Vyplnění osobních karet žáků, ohodnocení lekcí (25) HTML – obrázky, odkazy(10) Možnosti specializace(5) Přestávka (5) Feedback, rozdání úkolů, konzultace(5 – 30)
3
Na co vše lze použít plyšového medvídka? Rozcvička
4
Název firmy? Cíl firmy ? Kvantifikovaný Plánové obdbí SWOT analýza Strenghts – silné stránky Weaknesses – slabé stránky Opportunities - příležitosti Threats – hrozby Podrobný rozbor + vytvoření taktiky příště Ustanovení imaginární firmy
5
Proměnná – velmi zjednodušeně nějaké písmeno, pod kterým se skrývá nějaké číslo Čti(proměnná) – zeptá se to na číslo a to si potom uloží do proměnné Piš(proměnná) – vypíše na obrazovku obsah proměnné Proměnná := číslo – přiřadí číslo do proměnné ( a:=1 – v proměnné a je číslo 1) Dokud podmínka opakuj příkazy – opakuje blok příkazů dokud je splněna podmínka Podmínka - například proměnná>0 Příkaz – například čti(x); i := i+1; Algoritmizace - příkazy
6
Určete součet p čísel, postupně ukládaných do proměnné číslo. P = 1,2,3,4… Číslo = …-1,0,1… P i Číslo naklapeme na klávesnici, když se na něj program zeptá Algoritmizace – týmový úkol
7
začátek čti(p); součet:=0; i := 1; //čítač cyklu dokud i<=p opakuj začátek čti(číslo); součet := součet + číslo; i := i+1; //zvětšuje se než přestane platit podmínka konec piš(součet); konec Algoritmizace - řešení
8
Některé značky ovlivňují pouze vzhled, některé však mají i sématický význam. To znamená, že říkají, který obsah nesou. odstavec Můžeme očekávat, že obsah je nějaký blok textu, který představuje odstavec. nadpis první úrovně nadpis první úrovně nadpis druhé úrovně nadpis druhé úrovně odskok na další řádek – měl by se používat pouze v rámci odstavce. vodorovná čára - oddělovník HTML – základní značky
9
Některé značky o svém obsahu nic neříkají, snad jen, že je například tučný. tučné Pouze tučný text. Nenese žádnou informaci o obsahu. Chceme-li ukázat, že některá slova jsou důležitá, použijte radši Důležitá informace nebo tučné Pouze tučný text. Nenese žádnou informaci o obsahu. Chceme-li ukázat, že některá slova jsou důležitá, použijte radši Důležitá informace nebo podtržené Podtrhávat se doporučuje pouze odkaz, jinak je to matoucí. kurzíva Opět pouze značka ovlivňující vzhled. Značky a jsou zastaralé HTML – základní značky
10
- unordered list (nečíslovaný seznam) - list (položka seznamu) - list (položka seznamu) - konec položky seznamu - konec položky seznamu 1. - ordered list (číslovaný seznam) text - položka text - položka HTML - seznamy
11
Příklad kódu neuspořádaného seznamu: <ul> Polozka 1 Polozka 1 Polozka 2 Polozka 2 Polozka 3 Polozka 3 </ul> Na výstupu (v prohlížeči) se zobrazí tento seznam: Polozka 1Polozka 1 Polozka 2Polozka 2 Polozka 3Polozka 3<ul>
12
Příklad kódu uspořádaného seznamu: Polozka 1 Polozka 1 Polozka 2 Polozka 2 Polozka 3 Polozka 3 Na výstupu (v prohlížeči) se zobrazí tento seznam: 1)Polozka 1 2)Polozka 2 3)Polozka 3 <ol>
13
Osobní karta má složitou strukturu. Proto se jí nezajímeje a snažte se především vyplnit údaje zde uvedené. Pro zajímavost: Struktura karty: Vnější plovoucí kontejner kontejner pro obrázek konec kontejneru pro obrázek kontejner pro text konec kontejneru pro text Konec vnějšího kontejneru Vyplnění osobních karet
14
Pro nás je důležitý žlutý odstavec. Můžete si pohrát s barvou pozadí a s adresou obrázku, které jsou podtrženy. Neidentifikovaný HTML: Management: CSS: Grafika: JS: Databáze: Algoritmizace: Hardware: Vystupování: HTML kód karty
15
Podtržené položky můžete měnit background-color: je barva pozadí src je adresa k obrázku. Místo Neidentifikovaný napište svůj nick a ostatní položky doplníme společně. Máte-li obrázek, můžete mi jej rovnou poslat a já jej dopním do vaší karty nebo se o to pokusit sami podle dalšího snímku Budete-li chtít umístit obrázek sami, pošlete mi kód karty i s novou adresou obrázku. Vyplnění karty
16
Src=„URL“ je adresa k vašemu obrázku. Do příští hodiny by tam mělo být vaše foto. Přihlásíte se na http://3zs.zabreh.cz/admin http://3zs.zabreh.cz/admin Zadáte jméno informatik, heslo vám řeknu Rozkliknete si článek „odklad obrázků st“ Najdete tlačítko „soubor“, rozkliknete V dialogovém okně napíšete název souboru a pomocí procházet řeknete, kde je uložen na disku, stisknete přidat Od této chvíle je váš obrázek přístupný pro váš kód. Adresa k němu je http://3zs.zabreh.cz/wpimages/other/art45/název vašeho obrázku (bez mezer a diakritiky) nebo jen wpimages/other/art45/název vašeho obrázku http://3zs.zabreh.cz/wpimages/other/art45/název wpimages/other/art45/názevhttp://3zs.zabreh.cz/wpimages/other/art45/název wpimages/other/art45/název Proč to tak je?... O tom si někdy můžeme udělat samostatnou lekci Proč to tak je?... O tom si někdy můžeme udělat samostatnou lekci Uložení obrázku na server
17
S osobními kartami je spjato i hodnocení Ohodnoceny budou jak znalosti, tak i vynaložená práce a to body V rámci specializace, bez které se žádná firma neobejde, budou body získávány v různých kategoriích Celkové hodnocení může být dáno jednoduchým součtem bodů ve všech kategorií, ne všechny kategorie jsou však stejně cenné S postupem času se pravděpodobně vyčlení další kategorie. Například grafika lze rozdělit na kresbu, vektorovou grafiku a rastrovou grafiku Vyplňte svoji kartu a doplňte body, na kterých jsme se dohodnuli. Kód vaší karty mi poté pošlete na email. Systém hodnocení
18
http://lide.uhk.cz/fim/ucitel/freylva1 zde jsou stránky mého učitele se všemi podrobnostmi http://lide.uhk.cz/fim/ucitel/freylva1 Místo URL lze použít i relativní adresy. HTML – obrázky
19
Absolutní = URL http://3zs.zabreh.cz/wpimages/other/art45/fot o.gif http://3zs.zabreh.cz/wpimages/other/art45/fot o.gif http://3zs.zabreh.cz/wpimages/other/art45/fot o.gif Relativní adresa – je-li adresa volána ze stejného serveru, na který se odkazujete, není potřeba znovu udávat jméno serveru wpimages/other/art45/foto.gif wpimages/other/art45/foto.gif HTML – cesta
20
Ve své původní podobě to bylo propojení textů, což tvořilo základní kámen internetu. Také dnes tvoří odkaz základní kámen internetu. Jen již nespojuje pouze text. element element seznam seznam Odkaz uvnitř dokumentu Odkaz uvnitř dokumentu uvnitř stránky uvnitř stránky Do odkazu lze zabalit i obrázek Do odkazu lze zabalit i obrázek HTML - odkaz
21
Kus papíru.. 1. Oznámkujte vaše zvládnutí jazyka HTML z první a druhé lekce ( Ať vím, jestli potřebujete spíše opakovat nebo jít dál ). 2. Oznámkujte srozumitelnost této prezentace. 3. Oznámkujte srozumitelnost výkladu této lekce. 4. Oznámkujte svého dnešního šéfa. 5. Oznámkujte celkový dojem. Feedback
22
Do osobních karet nafotit obrázky. Odměna: body do managementu Termín: do středy (2 body); do pátku (1 bod) Kvantita: nad 50% (1 bod); 100% (2 body) Kvalita: 0 – 6 bodů Bonusové prostředky: možno rozdat maximálně 3 body do grafiky, když fotky budou oříznuté, případně zmenšené na šířku 144 pixelů a výšku 127 pixelů. Požaduji také fotky v původní velikosti pro možnost pozdějších úprav. Fotky zašlete společně se jmény na email mlcoch.zdenek@seznam.cz Hledáme nové „zaměstnance“? Jestli ano, tak někoho přiveďte. Úkol pro dnešního šéfa
23
1. Zjistěte rozdíl mezi a a vaše zjištění mi zašlete do příští hodiny na mail. Hodnocení: 0 – 2 body do HTML, úkol pro jednotlivce. 2. Obrázek má height=„82“ width=„93“. Potřebujete jej zvětšit na width=„143“. Jaká bude hodnota height? Hodnocení 1 bod do grafiky. Úkol pro jednotlivce. 3. HTML – rozšiřující literatura Jíří Kosek Tvorba dokonalých www stránek Bez této knihy se obejdeme, ale není nad dostatečný zdroj informací. Kniha se dá sehnat za cca 300 Kč. Kdyby o ni někdo měl zájem, dejte mi vědět. Úkol pro všechny, rozšiřující literatura
Podobné prezentace
© 2024 SlidePlayer.cz Inc.
All rights reserved.