1 / 18

Brána k poznání

Brána k poznání. Dokončení první fáze – základní značky HTML. Program. Zvolení šéfa skupiny Doladění vývojového prostředí Jak rychleji psát Jak formátovat kód Opakování HTML Dotazy. Doladění vývojového prostředí.

bisa
Download Presentation

Brána k poznání

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • 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. 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. Pokračování – cizí znaky

  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 <b> a </b> se zobrazí tučně • Více nalezneta na www.jakpsatweb.cz

  11. HTML - tagy • Párové • Příklad: <p> text odstavce</p> • Obsahují počátek – <tag> • Obsahují konec - </tag> • Vše, co je mezi těmito znaky je jimy ovlivněno • Nepárové • Příklad: <br /> • Začínají znakem < a jsou zakončeny sekvencí zanků /> (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í: <p><span></p></span> • Tagy se mohou do sebe vnořovat • Příklad vnoření: <p><span></span></p>

  13. HTML – struktura dokumentu • Deklarace <xml> dokumentu • !DOCTYPE – typ dokumentu • <html> • <head> - hlavička dokumentu • <meta> - pomocné informace • <link> - vnější soubor • <title> - titulek stránky • <body> - tělo dokumentu

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

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

  16. HTML - bloky • <p></p> - odstavec • <br /> - odskok na další řádek • <h1></h1>..<h6></h6> nadpisy různých úrovní • <div></div> - 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…

More Related