Brána k poznání Dokončení první fáze – základní značky HTML.

Prezentace na téma: "Brána k poznání Dokončení první fáze – základní značky HTML."— Transkript prezentace:

1 Brána k poznání Dokončení první fáze – základní značky HTML.

2 Program Zvolení šéfa skupiny Doladění vývojového prostředí Jak rychleji psát Jak formátovat kód Opakování HTML Dotazy

3 Doladění vývojového prostředí Stáhněte si TopStyleLite3. Odkaz na něj naleznete na stránkách naší skupiny http://3zs.zabreh.cz/index.php?a=cat.10 http://3zs.zabreh.cz/index.php?a=cat.10 Rozbalte si TopStyleLite3 do složky informatici na ploše Otevřete Mozillu firefox, naleznete ji ve složce informatici nebo přímo na ploše. –Nástroje – správce doplňků - získat rozšíření –Vyhledat html tidy – nainstalujte první nalezenou položku –Vyhledat dev tools – nainstalujte první nalezenou položku Otevřete pspad. Naleznete jej ve složce informatici na ploše. Vytvořte si složku, do které budete ukládat své stránky. Rozbalte si do ní vzorové dokumenty. Odkaz na ně naleznete na stránkách naší skupiny Šéf skupiny mi dá vědět, až budou mít tyto úkony všichni splněny.

4 Jak psát rychleji Používejte klávesové zkratky!!! –Ctrl+c – kopírovat do schránky označený text –Ctrl+v – vložit ze schránky na místo označeného textu nebo kurzoru –Ctrl+x – výjmout, text zmizí a dostane se do schránky –Ctrl+a – označit vše –Ctrl+f – hledat, někdy i nahradit (vyzkoušejte obojí) –Ctrl+b – označený text bude tučný –Ctrl+i – označený text bude psaný kurzívou –Ctrl+u – označený text bude podtržený

5 Pokračování – klávesa shift –Shift + šipka doprava – označuje text vpravo –Shift + šipka doleva – označuje text vlevo –Shift + šipka nahoru – označuje text nahoře –Shift + šipka dolu – označuje text dole –Shift + end – označí text kurzor až konec řádku –Shift + home – označuje text kurzor až začátek řádku –Shift + pg nahoru – označuje předchozí stránku –Shift + pg dolu – označuje následující stránku –Del – smaže následující znak

6 Pokračování – cizí znaky Pravý alt + –v @ –q \ –c & –x # –B { –N } –, < –. > –F [ –G ] –W | Ctrl + alt + –, < –. > –X # –1 ~ –3 ^^ Možností je mnoho. Další naleznete v případě potřeby na internetu. Vhodné klíčové slovo při hledání je ASCII.

7 Formátování kódu Pro formátování kódu se používají odskoky od začátku řádku Element Vnořený element Druhá úroveň vnoření Konec druhé úrovně vnoření Konec vnořeného elementu Konec elementu

8 Formátování kódu Odstavec začátek nečíslovaného seznamu začátek položky začátek odkazu obrázek konec odkazu konec položky konec nečíslovaného seznamu Konec odstavce

9 Formátování kódu Formátovat kód je z jisté části naučená dovednost, z druhé strany umění Pravidla formátování jsou doporučená, nikoliv striktní Pište váš kód tak, aby se v něm ostatní vyznali. Naučte se toto jednoduché pravidlo vnořování, ať už jej budete používat, či nikoliv.

10 HTML - jazyk HTML je značkovací jazyk pro webové dokumenty Pomocí tagů, tj. dohodnutých znaků, se upravuje vzhled textu, případně dokumentu Například text, který je v HTML kód uzavřený mezi tagy a se zobrazí tučně Více nalezneta na www.jakpsatweb.czwww.jakpsatweb.cz

11 HTML - tagy Párové –Příklad: text odstavce –Obsahují počátek – –Obsahují konec - –Vše, co je mezi těmito znaky je jimy ovlivněno Nepárové –Příklad: –Začínají znakem (mezera+lomítko+je menší) –Většinou mají na svědomí jednorázovou změnu

12 Křížení tagů Tagy se nesmí křížit!! –Příklad křížení: Tagy se mohou do sebe vnořovat –Příklad vnoření:

13 HTML – struktura dokumentu Deklarace dokumentu !DOCTYPE – typ dokumentu - hlavička dokumentu – - pomocné informace – - vnější soubor – - titulek stránky - tělo dokumentu

14 HTML – fyzické formátování - tučný text - kurzíva - podtržené Tagy ovlivňují vzhled obsahu, neříkají nic o tom, jaký obsah nesou.

15 HTML – logické formátování - nese řádek kódu, nemění jeho vlastnosti - důležitá informace - důraz - citace - kód Tyto tagy říkají, jaký druh obsahu nesou.

16 HTML - bloky - odstavec - odskok na další řádek.. nadpisy různých úrovní - víceřádkový blok bez formátování

17 HTML – seznamy, odkazy, obrázky Návrat o prezentaci dozadu…

18 Zakončení Které části této přednášky mám zopakovat? Které části mám prohloubit? Ohodnoťte vaše vystupování. Ohodnoťte srozumitelnost výkladu. Ohodnoťte celkový dojem Chcete body? Napadá mě mnoho věcí, které můžete pro jejich zisk udělat…