Základy programovacího jazyka HTML Autor: Ing. Jan Nožička SOŠ a SOU Česká Lípa VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP
Název školy: Číslo a název projektu: Číslo a název šablony klíčové aktivity: Označení materiálu: Typ materiálu: Předmět, ročník, obor: STŘEDNÍ ODBORNÁ ŠKOLA a STŘEDNÍ ODBORNÉ UČILIŠTĚ, Česká Lípa, 28. října 2707, příspěvková organizace CZ.1.07/1.5.00/34.0880 Digitální učební materiály www.skolalipa.cz III/ 2 ICT pro studijní obor Mechanik elektronik VY_32_INOVACE_1133_Základy programovacího jazyka HTML_PWP PowerPointová prezentace ICT 1. až 4. ročník studijní obor Mechanik elektronik Číslo a název sady: Téma: Jméno a příjmení Ing. Jan Nožička autora: Datum vytvoření: 1. 10.2012 Anotace: sada č. 57 - ICT pro studijní obor Mechanik elektronik Základy programovacího jazyka HTML Materiál slouží k objasnění základních příkazů, skladby a syntaxi programovacího skriptovacího jazyka HTML. Skládání HTML pomoci skriptovacích serverových jazyků.
HTML je značkovací jazyk. Pomoci HTML označujeme text, části textu, objekty, aby prohlížeč věděl jak ho má zobrazit. Používané značky se nazývají TAGY. Je několik verzí HTML kódu.
Co je potřeba pro psaní HTML kódu Textový editor, který ukládá čistý text (notepad) Speciální editor HTML kódu (Pspad, Eclipse) Internetový prohlížeč (IE, Mozila, FireFox, Chrom) Počítač i bez připojení na internet Znalosti ukládání souborů na disk, strukturu adresářů (složek)
Uložení souboru na disk 1. Vytvořte si na disku složku, třeba pokus (d:\pokus) 2. Do složky pokus vytvořte další složky html zde budeme ukládat další soubory *.html css zde se budou ukládat soubory *.css images zde se budou ukládat všechny obrázky 3. Do složky pokus vytvořte první textový soubor s názvem index.html to je hlavní spouštěcí soubor našeho pokusného webu 4. Otevřete si index.html v editoru (třeba PSPad)
Pojem TAG a syntaxe TAG je pojmenovaná značka pro html kód TAG musí mít vždy začátek a konec (jako závorky v matematice) TAG je uložen do špičatých závorek TAG máme dva druhy Párové začátek a konec je samostatná značka Nepárový jen jedna značka Příklady: <html></html>; <body></body> <br />; <img />
Pojem TAG a syntaxe - pokračování TAG má atributy (parametry) ID identifikátor, je jedinečný (id= frantisek ) CLASS identifikátor skupiny (class= třída ) NAME identifikátor jména jako ID (name= frantisek ) WIDTH šířka tagu (width= 250px ) HEIGHT výška tagu (height= 150px ) COLOR barva písma (color= red ) Atributy, nastavení se dají ukládat do dalšího souboru a to s koncovkou *.css, ale to později.
Povinná struktura souboru *.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="pspad editor, www.pspad.com"> <title>můj první WEB</title> </head> <body> </body> </html> Začátek a konec stránky Hlavička stránky Nastavení kódové tabulky znaků V jakém editoru byla stránka zhotovena není povinná Titulek stránky na okraji prohlížeče Tělo stránky, vše co se zde napíše se zobrazí v prohlížeči.
TAGy a syntaxe <h1>, </h1> - vymezení nadpisu první úrovně. <h2>, </h2> - nadpis druhé úrovně (až šest úrovní) <p>, </p> - vymezení odstavce. <b>, </b> - text mezi těmito tagy bude tučný. <i>, </i> - kurzíva <span>, </span> - dvojice tagů vymezující odlišný text.<span style="color: red">, </span> <br /> - zalomení řádky, měkký enter. <img src="obr.jpg"/> - vložení obrázku <a href="adresa"></a> - hypertextový odkaz na adresu
TAGy a syntaxe - pokračování tag Význam Párový Použití, umístění a odkaz, hyperlink, záložka ano kdekoliv kromě <a> abbr ustálený výraz ano normální accesskey funkční klávesa acronym zkratka ano normální address adresa ano applet Java aplet ano area oblast v klikací mapě ne <map> b tučné písmo ano ano base základ odkazů ne <head> basefont základní font ne ne odkazy a formulářová pole bgsound zvuk na pozadí ano Internet Explorer big zvětšení písma ano blink blikání písma ano ne blockquote citace, odsazení br řádkový zlom ne button tlačítko ano <form> caption hlavička tabulky ano <table> ano center vycentrování ano cite citace ano kurzíva
TAGy a syntaxe - pokračování tag Význam Párový Použití, umístění class třída pro CSS selekci všechny HTML prvky code výpis kódu ano strojopis col ovlivnění sloupce tabulky ne <table> colgroup skupina sloupců tabulky ne <table> datalist data našeptávače ano dd definice termínu ano <dl> del smazaný obsah ano přeškrtnuto dfn nově použitý termín ano kurzíva dir zvláštní druh seznamu ano div oddíl ano dl seznam definic ano dt definovaný termín ano <dl> em zvýraznění (kurzíva) ano kurzíva embed objekt s plužinou asi fieldset skupina polí ano <form> font písmo ano ne form formulář ano frame rám ne <frameset> frameset skupina rámů ano za <head>
TAGy a syntaxe - pokračování tag Význam Párový Použití, umístění h1 nadpis 1. úrovně ano h2 nadpis 2 úrovně ano h3 nadpis 3. úrovně ano h4 nadpis 4. úrovně ano h5 nadpis 5. úrovně ano h6 nadpis 6. úrovně ano hr vodorovná čára ne i kurzíva ano ano id identifikátor pro CSS a skripty všechny HTML prvky iframe vložený rám ano img obrázek ne input vstupní pole ne <form> ins přidaný text ano podtrženo kbd vstup z klávesnice ano strojopis label popis pole ano <form> lang jazyk prvku všechny HTML prvky language jazyk skriptu script, zastaralé layer hladina, vrstva ano Netscape 4 legend popis pole ano <fieldset>
TAGy a syntaxe - pokračování tag Význam Párový Použití, umístění li položka seznamu nepovinně <ul>,<ol> <menu> nebo <dir> link nezobrazovaný odkaz ano <head> map klikací mapa ano marquee běžící text ano Internet Explorer menu typ seznamu ano meta informace o dokumentu ne <head> multicol sloupcová úprava ano Netscape name jméno pro spolupráci s dalšími prvky nobr nezalamovat obsah ano různá použitelnost noembed alternativa k embed ano <embed> noframes alternativa rámů ano <frameset> noscript alternativa ke skriptu ano vně skriptu object objekt ano ol číslovaný seznam ano optgroup skupina voleb ano <select> option volba ne <select>, <datalist> p odstavec nepovinně param parametry objektu ne <object>, <applet> pre předformátovaný text ano
TAGy a syntaxe - pokračování tag Význam Párový Použití, umístění q citace ano normální s přeškrtnutý text ano ne samp ukázka ano strojopis script skript, program ano kdekoliv select výběrové pole ano <form> small zmenšení textu ano spacer prázdné místo ne Netscape span úsek textu ano normální strike přeškrtnutý text ano strong zvýraznění (tučně) ano tučné style zápis CSS stylu ano <head> sub dolní index ano ano sup horní index ano ano tabindex pořadí aktivizace tabulátorem odkazy a formulářová pole table tabulka ano tbody tělo tabulky ano <table> td buňka tabulky nepovinně <tr> textarea velké vstupní pole ano <form> tfoot patička tabulky ano <table>
TAGy a syntaxe - pokračování tag Význam Párový Použití, umístění th hlavičková buňka tabulky nepovinně <tr> thead hlavička tabulky ano <table> title titulek stránky ano <head> title tr titulek prvku, doplňující info v bublině řádek tabulky nepovinně tt teletype ano strojopis u podtržení textu ano ne ul odrážkový seznam ano var formátování proměnné ano kurzíva wbr volitelné rozdělení ne všechny HTML prvky <table>, <tbody>, <thead>, <tfoot>
Literatura: 1. Informatika a výpočetní technika 1.díl Pavel Roubal, Computer Press, Brno 2003 2. Učebnice pro střední školy, Informatika a výpočetní technika pro střední školy, Petr Kmoch, Computer Press, Brno 1997 3. Tvorba WWW stránek pro úplné začátečníky, Petr Broža, Computer Press, Praha 2001 4. HTML Tvorba dokonalých www stránek, Podrobný průvodce, Jiří HošekGrada Publishing s.r.o. 1998.
Vytvořeno v MS Office PowerPoint 2010. Materiál je určen pro bezplatné používání pro potřeby výuky a vzdělávání na všech typech škol a školských zařízeních. Jakékoliv další využití podléhá autorskému zákonu. "Škola vlastní licence k software, pomocí kterých byl zpracován tento digitální učební materiál." Pokud není uvedeno jinak, použitý materiál je z vlastních zdrojů autora/autorky.