23.8.2014HTML - Zdeněk Jelínek1 HTML HTML řídí konsorcium W3C – www.w3.orgwww.w3.org Historie – verze 3.0 Používá se – verze 4.01 Základy.

23.8.2014HTML - Zdeněk Jelínek1 HTML HTML řídí konsorcium W3C – www.w3.orgwww.w3.org Historie – verze 3.0 Používá se – verze 4.01 Základy

23.8.2014HTML - Zdeněk Jelínek2 HTML Základy

23.8.2014HTML - Zdeněk Jelínek5 HTML Základy http://www.fce.vutbr.cz/studium/mate rialy/0u2/html/

23.8.2014HTML - Zdeněk Jelínek6 HTML Základy Vše založeno na hypertextových odkazech Příklad – začneme s textovým editorem Příklad – začneme s textovým editorem

23.8.2014HTML - Zdeněk Jelínek7 HTML Základy & = pravý Alt + C # = pravý Alt + X @ = pravý Alt + V \ = pravý Alt + Q

23.8.2014HTML - Zdeněk Jelínek8 HTML Základy Základy HTML - hypertextové odkazy Hypertextový odkaz (neboli odkaz, link...) je odkaz, který otvírá jinou stránku serveru. Existuje několik způsobů, jak a kam stránku otevřít. 4 příklady, jak hypertextové odkazy otvírat a kam. Novou stránku otvíráme pomocí atributu target = cíl. Známe taky atribut href = nastavuje, jaká stránka se má po kliknutí na odkaz otevřít. _self - otevře dokument v tomtéž rámu _blank - otevře odkaz do nového okna _top - otevře dokument v celém okně prohlížeče _parent - otevře dokument v nadřazeném rámu Příklad: MaiChL's Pages A vznikne toto: MaiChL's Pages - klikněte, stránka se otevře v novém okněhttp://maichl.wz.cz MaiChL's Pages

23.8.2014HTML - Zdeněk Jelínek9 HTML Základní pravidla :  tagy (štítek, návěští či označení)  odkazy Tag – uzavřený do špičatých závorek < Tag > Všechny příkazy jazyka HTML jsou tagy, vše, co je MIMO špičatých závorek je vlastní obsah stránky Tagy

23.8.2014HTML - Zdeněk Jelínek10 HTML Tagy dělíme na :  párové tagy  nepárové tagy Příklad : Párové tagy jsou ty, které mezi sebe uzavírají obsah a přiřazují mu tak danou hodnotu (tagy jsou voleny pouze pro ilustraci, takhle samozřejmě neexistují) tento text bude červený a tento už zase červený nebude nebo : tento text bude červený a částečně také tučný a tento už zase NE Nepárové tagy umisťují do stránky jediný element, který je už svou podstatou nedělitelný Tagy

23.8.2014HTML - Zdeněk Jelínek11 HTML Ve správné webové stránce by neměly chybět následující sekce : Tagy – Struktura stránky 1................. označení typu dokumentu a verze HTML 2........................ počátek textu ve formátu HTML 3.........................počátek hlavičky 4. Jméno dokumentu........ jméno dokumentu zobrazené nahoře v titulku okna 5........ meta informace – co dokument obsahuje 6...................................konec hlavičky 7.......................................počátek těla vlastního zobrazovaného obsahu stránky 8...................................................... vlastní obsah stránky....................................... 9.................................... konec těla stránky 10.....................................konec formátu HTML

23.8.2014HTML - Zdeněk Jelínek12 HTML Tag HTML Tagy Párový ta HTML ohraničuje počátek a konec vlastních dat tvořících webovou stránku, t.j. vlastních dat ve formátu HTML tento tag je povinný, ale dáse také ignorovat. doporučuje se. Příklad :....................................zde je celý dokument ve formátu HTML......

23.8.2014HTML - Zdeněk Jelínek13 HTML Tag HEAD A BODY Tagy HEAD - jedná se o hlavičku stránky. Je třeba ho používat. Jedná se o párový tag. BODY – jde o tělo webové stránky Příklad :....................................zde je hlavička webové stránky..........................................................zde je tělo, obsah stránky.......................................................zde je celý dokument ve formátu HTML......

23.8.2014HTML - Zdeněk Jelínek14 HTML Tag TITLE Tagy Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče. Nemusí tam být, ale nevypadá to profesionálně. Příklad :....................................zde je hlavička webové stránky..................... Moje první webová stránka.....................................zde je tělo, obsah stránky.......................................................zde je celý dokument ve formátu HTML......

23.8.2014HTML - Zdeněk Jelínek15 HTML Tag TITLE Tagy

23.8.2014HTML - Zdeněk Jelínek16 HTML Sekce HEAD Tagy Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče. Nemusí tam být, ale nevypadá to profesionálně. Kromě toho další možné tagy v oblasti hlavičky, mající menší význam ISINDEX – je tag obsahující klíčová slova pro vyhledávání BASE – určuje základní adresu URL, od které se pak odvozují relativní adresy uvedené v dokumentu SCRIPT – je vyhrazen pro budoucí verze a práci se skriptovanými jazyky STYLE – je vyhrazen pro budoucí verze a práce se styly META – slouží pro metainformace LINK. Určuje vztahy mezi dalšími dokumenty HTML

23.8.2014HTML - Zdeněk Jelínek17 HTML Tag INSIDEX v sekci HEAD Tagy Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče. Nemusí tam být, ale nevypadá to profesionálně. Kromě toho další možné tagy v oblasti hlavičky, mající menší význam ISINDEX – je tag obsahující klíčová slova pro vyhledávání. Sděluje, že dokument je indexován a že je možné zadávat už v URL adrese vyhledávání dle klíčových slov. Vytlačuje jej tag FORM, který má širší možnosti.. K vyhledávání musí být přizpůsoben i webový server, který reaguje na vyhledávací řetězec stanovený uživatelem- musí na něm běžet program typu cgi-bin.

23.8.2014HTML - Zdeněk Jelínek18 HTML Tag BASE v sekci HEAD Tagy Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče. Nemusí tam být, ale nevypadá to profesionálně. Kromě toho další možné tagy v oblasti hlavičky, mající menší význam BASE – je tag který určuje základní adresářovou cestu, která v dalších odkazech vystupuje jako kořenový adresář. Odkazy pak mohou být jednodušší a kratší http://www.agenturamika.cz/data Pak se múže nastavit Což znamená, že plná adresářová adresa k obrázku je http://www.agenturamika.cz/data/obrazky/cplogo.gif

23.8.2014HTML - Zdeněk Jelínek19 HTML Tag META v sekci HEAD Tagy Sekce HEAD obvykle obsahuje tag TITLE, který přináší titulek jenž se objeví na horní liště okna prohlížeče. Nemusí tam být, ale nevypadá to profesionálně. Kromě toho další možné tagy v oblasti hlavičky, mající menší význam META – jedná se o sběrný tag, který obsahuje nejrůznější parametry, které nejsou přímo definovány v základních elementech jazyka HTML. Informace se přímo nezobrazují.

23.8.2014HTML - Zdeněk Jelínek20 HTML Tag BODY Tagy Tag BODY plní v zásadě dvě funkce : jednak do sebe uzavírá celou vlastní stránku, jednak prostřednictvím parametrů definuje její vlastnosti. Následující příklad definuje implicitní barvy elementů na stránce a vzdálenost pravého a levého okraje stránky Syntaxe backround=“.....” bgcolor=“....” text=“....” link=:”....” vlink=“....” alink =“Teal” LEFTMARGIN=nn TOPMARGING=nnn BGPROPERTIES=“....” zde se nalézá obsah stránky...........

23.8.2014HTML - Zdeněk Jelínek21 HTML Tag BODY – pozadí a text Tagy Barva pozadí a textu. barva pozadí může být souvislou barvou. dále jsou pak možnosti vybarvit základní druhy textů různými barvami BGCOLOR - barva vyplňující pozadí stránky TEXT- základní barva textu (implicitně je nastavena černá) LINK- barva ještě nenavštíveného odkazu (odkaz je zároveň podtržený). Implicitně je to modrá, hex. 0000FF VLINK- barva již navštíveného odkazu, implicitně je to světle fialová, hex. 800080 ALINK- barva aktuálního odkazu, jedná se o zbarvení odkazu v okamžiku, když se na něj klepne myší – implicitně je to červená hex. FF0000

23.8.2014HTML - Zdeněk Jelínek22 HTML Tag BODY – zadávání barev Tagy hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev. TEXT=“White“ nebo TEXT=“#024AC9” pozor na nutnost umístění #

23.8.2014HTML - Zdeněk Jelínek23 HTML Tag BODY – zadávání barev Tagy hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev. Black - černá, #000000 Aqua- světle modrá, #00FFFF Blue- základní modrá #0000FF Fuhcsia- purpurová #FF00FF Gray- šedá (tmavší) #808080 Green- základní zelená #008000 Lime- neónově zelená #00FF00 Navy- tmavá, námořnická modř #808000

23.8.2014HTML - Zdeněk Jelínek24 HTML Tag BODY – zadávání barev Tagy hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev. Olive- olivově zelená #808000 Purple- fialová #800080 Maroon- tmavě červená #800000 Red- základní červená #FF0000 Silver- střábrná (světle šedá) #C0C0C0 Teal- modrozelená #008080 White- bílá #FFFFFF Yellow- základní žlutá XFFFF00

23.8.2014HTML - Zdeněk Jelínek25 HTML Tag BODY – zadávání barev Tagy Barvy – názvy barevBarvy – názvy barev - základní Barvy – názvy barev – další paleta

23.8.2014HTML - Zdeněk Jelínek26 HTML Tag BODY – zadávání barev Tagy hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev. Příklad : Jak se máte. Jdou Vám barvy ?

23.8.2014HTML - Zdeněk Jelínek27 HTML Tag BODY – zadávání barev Tagy hodnoty barev lze zadávat dvěnma způsoby – jednak z palety pojmenovaných barev a jednak je možno použít hexadecimální označení, kterým lze popsat každou z 16,7 mil. barev. Příklad : P1-text.htm

23.8.2014HTML - Zdeněk Jelínek28 HTML Text : Základy HTML - práce s textem Každá stránka obsahuje text (teda doufám!!! ;-)), který je vkládán a formátován. Všechno musí být vloženo do těla dokumentu (tedy mezi a ). Je to úplně jednoduché! Obyčejný text stačit nebude, tak vám zde popíšu, jak text formátovat. Zalomení řádku (br) Pokud ve zdrojovém kódu chcete začít další řádek, nestačí je klávesa Enter. Pomocí nepárového tagu řádek zalomíte, a píšete další řádek. ----------------------------------------------------------------------------------------------- Font (color, size a face) Pokud chcete trochu obohatit web písmem (jak stylem tak i velikostí a barvou), tak můžete zkusit několik možností. Začněme elementem, do kterého budeme vkládat další atributy: face - styl písma size - velikost písma (1-7) color - barva písma ----------------------------------------------------------------------------------------------- Vodorovná čára (hr) Pokud potřebujete něco oddělit, udělejte to čarou, která má element : size - velikost čáry width - šířka čáry height - výška čáry (doporučuji 1) color - barva čáry

23.8.2014HTML - Zdeněk Jelínek29 HTML Tag BODY – odkazy Tagy.Hypertextový odkaz : Rašínova vysoká škola Rašínova vysoká škola byla založena v roce 2002. Rozhodnutím MŠMT byl škole udělen souhlas působit jako soukromá vysoká škola s akreditací bakalářského studijního programu Ekonomika a insolvence a v roce 2008 byla tomuto programu udělena i akreditace magisterského stupně.

23.8.2014HTML - Zdeněk Jelínek30 Cvičení  Na barevném pozadí napište text „Rašínova vysoká škola“ a přiřaďte tomuto nápisu odkaz na www.ravys.cz.www.ravys.cz  Napište další odstavec s krátkým představením školy

23.8.2014HTML - Zdeněk Jelínek31 HTML Vytváření tabulek Tabulky Schopnosti HTML v oblasti tabulek daleko přesahují to, co si představujeme pod běžnou tabulkou.

23.8.2014HTML - Zdeněk Jelínek32 HTML Vytváření tabulek Tabulky Schopnosti HTML v oblasti tabulek daleko přesahují to, co si představujeme pod běžnou tabulkou. www.brno.cz www.seznam.cz www.inbrno.cz

23.8.2014HTML - Zdeněk Jelínek33 HTML Tabulky

23.8.2014HTML - Zdeněk Jelínek39 HTML Tabulky Záhlaví tabulky Levé Pravé Pata tabulky 1 A B C E F G H I J 2 AA BB CC DD EE FF

23.8.2014HTML - Zdeněk Jelínek40 HTML Vytváření tabulek Tabulky Schopnosti HTML v oblasti tabulek daleko přesahují to, co si představujeme pod běžnou tabulkou. www.ibstructure.comwww.ibstructure.com¨ <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="581"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"> <EMBED src="my_intro.swf" quality=high wmode=opaque width="800" height="581" scale=exactfit PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer/">

23.8.2014HTML - Zdeněk Jelínek43 HTML Tabulky TABULKA

23.8.2014HTML - Zdeněk Jelínek51 HTML Tabulky Tabulka Pozn. & = pravýAlt + C # - pravý Alt + X

23.8.2014HTML - Zdeněk Jelínek53 HTML Tabulky Tabulka

23.8.2014HTML - Zdeněk Jelínek61 HTML Tabulky Tabulka Tabulka Modrá

23.8.2014HTML - Zdeněk Jelínek62 HTML Rámy Základy HTML - rámy Rámy se už moc nepoužívají……., frameset - skupina rámů frame - rám iframe - vložený rám cols - sloupcové rozdělení rows - řádkové rozdělení name - jméno rámu bordercolor - barva rámečku okolo rámu Příklad:

23.8.2014HTML - Zdeněk Jelínek63 HTML Rámce

23.8.2014HTML - Zdeněk Jelínek64 HTML Rámce www.pulsar.cz

23.8.2014HTML - Zdeněk Jelínek65 HTML Rámce Nová stránka 1

23.8.2014HTML - Zdeněk Jelínek68 HTML Rámce Odkaz na jiný soubor – obsah rámce ramec.htm

23.8.2014HTML - Zdeněk Jelínek70 HTML Rámce ramec1.htm

23.8.2014HTML - Zdeněk Jelínek74 HTML Rámce ramec1.htm Obsah rámce

23.8.2014HTML - Zdeněk Jelínek75 HTML Rámce index.htm

23.8.2014HTML - Zdeněk Jelínek76 HTML Formuláře Formuláře slouží k získání informací od uživatele nebo k předání zpracovaných informací uživateli. Jsou buďto odeslány ke zpracování na server nebo zpracovány skripty přímo ve stránce.

23.8.2014HTML - Zdeněk Jelínek77 HTML Formuláře «definice prvků formuláře»

23.8.2014HTML - Zdeněk Jelínek78 HTML Formuláře - prvky webu INPUT type TEXT krátký text (implicitní volba) PASSWORD heslo CHECKBOX „zaškrtávací“ tlačítko (vypínač) RADIO přepínač SUBMIT tlačítko odeslání formuláře RESET tlačítko vymazání formuláře BUTTON obecné tlačítko, pomocí události lze spojit se skriptem SELECT umožňuje výběr z několika položek TEXTAREA víceřádkový text

23.8.2014HTML - Zdeněk Jelínek79 HTML Formuláře

23.8.2014HTML - Zdeněk Jelínek80 HTML Formuláře Jméno: Příjmení: Rodné číslo: PSČ: Heslo: INPUT – definice vstupního prvku, TYPE – druh vstupního pole, NAME – jméno pro zpracování skripty, SIZE – rozměr pole ve znacích, TEXT – jednořádkové textové pole, MAXLENGTH – maximální počet znaků,

23.8.2014HTML - Zdeněk Jelínek82 HTML Formuláře Který měsíc vám vyhovuje? červen červenec srpen září th-buňka záhlaví tabulky, border-šířka rámečku, width-šířka, colspan-počet sloučených sloupců, input-definice vstupního resp. výstupního prvku, checkbox-zaškrtávací políčko, checked – implicitní zašktnutí, name – jméno potřebné pro zpracování skripty

23.8.2014HTML - Zdeněk Jelínek84 HTML Formuláře pohlaví Barva očí muž žena modré hnědé zelené jiné barvy table –vymezení tabulky, cols – počet sloupců, border – šířka rámečku, align – vodorovné zarovnání, valign – svislé zarovnání, width – šířka buňky, radio – přepínač, name – jméno potřebné pro zpracování, value – hodnota, input – vstup resp. Výstup, br – nový řádek

23.8.2014HTML - Zdeněk Jelínek86 HTML Formuláře Co nám chcete sdělit pěkného? Dobrý den.

23.8.2014HTML - Zdeněk Jelínek88 HTML Formuláře Vyber si zvířátko: Kočička Pejsek Králíček Morče Vyber si ještě jedno zvířátko: Myš Šnek Zajíc Ještěrka Co bude jíst? (i několik) mrkev salát maso mléko voda rohlík

23.8.2014HTML - Zdeněk Jelínek89 HTML Přehled tagů

23.8.2014HTML - Zdeněk Jelínek90 HTML Tabulky Vlastnosti použitelné v definicích stylů

23.8.2014HTML - Zdeněk Jelínek91 HTML Formátování textů

23.8.2014HTML - Zdeněk Jelínek92 HTML Formátování textů

23.8.2014HTML - Zdeněk Jelínek93 HTML Obrázek

23.8.2014HTML - Zdeněk Jelínek94 HTML Obrázek

23.8.2014HTML - Zdeněk Jelínek101 HTML Tabulky Záhlaví tabulky Levé Pravé Pata tabulky 1 A B C E F G H I J 2 AA BB CC DD EE FF

23.8.2014HTML - Zdeněk Jelínek102 HTML Odkazy

23.8.2014HTML - Zdeněk Jelínek103 HTML Matematika Opakování vzorců Rovnice kružnice se středem S[x0, y0] a poloměrem r v kartézských souřadnicích je (x – x0)2 + (y – y0)2 = r2. Opakování vzorců Rovnice kružnice se středem S [ x 0, y 0 ] a poloměrem r v kartézských souřadnicích je ( x – x 0 ) 2 + ( y – y 0 ) 2 = r 2.

23.8.2014HTML - Zdeněk Jelínek117 HTML Ukázky

23.8.2014HTML - Zdeněk Jelínek118 HTML Ukázky Závislost na internetu Seznam příznaků závislosti na Internetu líbáte domácí stránku své dívky odmítáte odjet na dovolenou tam, kde není elektřina a telefon v noci se vám zdají sny v HTML při psaní čehokoliv píšete za každou větou.com při vypínání modemu máte podobný pocit, jako byste dostával kopačky všichni vaši přátelé mají ve jménu @ nevíte, jakého pohlaví jsou vaši přátelé, mají neutrální přezdívky a vás nikdy nenapadlo se jich zeptat na stěnách veřejných záchodků hledáte webové adresy nikdy nemáte problémy s obsazenou linkou, protože se vůbec neodhlašujete vaše virtuální děvče si najde nového hocha s tlustším kabelem dívka, kterou jste naposledy sbalil, byla jenom JPEG Zpět na úvodní stránku.

23.8.2014HTML - Zdeněk Jelínek120 HTML Ukázky Vítejte na mé webové stránce Zprávy z domova Policie zadržela v Praze–Ruzyni dvě neznámé ženy podezřelé z přípravy teroristického útoku v odletové hale na letišti. Několik cestujících ohlásilo podezřelé chování dvou žen, které potřísnily podlahu v odletové hale neznámou tekutinou. Policejní ozbrojenci neprodyšně uzavřeli letiště a okolí. Několik expertiz vzorku látky nezávisle na sobě prokázalo, že se jedná o vodu se saponátem. Policie oběma ženám vrátila kýbly, smetáky i hadry, jež předtím zajistila, a propustila je na svobodu. Opakování vzorců Rovnice kružnice se středem S[x0, y0] a poloměrem r v kartézských souřadnicích je (x – x0)2 + (y – y0)2 = r2.

23.8.2014HTML - Zdeněk Jelínek121 HTML Ukázky Úvodní stránka Vítejte na mé webové stránce Zprávy z domova Policie zadržela v Praze–Ruzyni dvě neznámé ženy podezřelé z přípravy teroristického útoku v odletové hale na letišti. Několik cestujících ohlásilo podezřelé chování dvou žen, které potřísnily podlahu v odletové hale neznámou tekutinou. Policejní ozbrojenci neprodyšně uzavřeli letiště a okolí. Několik expertiz vzorku látky nezávisle na sobě prokázalo, že se jedná o vodu se saponátem. Policie oběma ženám vrátila kýbly, smetáky i hadry, jež předtím zajistila, a propustila je na svobodu. Opakování vzorců Rovnice kružnice se středem S [ x 0, y 0 ] a poloměrem r v kartézských souřadnicích je ( x – x 0 ) 2 + ( y – y 0 ) 2 = r 2. Zajímavé odkazy Počasí v České republice Seznam příznaků závislosti na Internetu FAST VUT v Brně

23.8.2014HTML - Zdeněk Jelínek123 HTML Ukázky pocasi.htm Počasí Počasí v České Republice <IMG src="http://banners.wunderground.com/banner/bigwx_metric_cond/language/czech/global/stations/11518.gif" alt="Předpověď počasí pro Prahu" border="0" height="60" width="468"> <IMG src="http://banners.wunderground.com/banner/bigwx_metric_cond/language/czech/global/stations/11723.gif" alt="Předpověď počasí pro Prahu" border="0" height="60" width="468"> <IMG src="http://banners.wunderground.com/banner/bigwx_metric_cond/language/czech/global/stations/11782.gif" alt="Předpověď počasí pro Prahu" border="0" height="60" width="468"> Další informace o počasí získáte na serveru Weather Underground. Zpět na úvodní stránku.

23.8.2014HTML - Zdeněk Jelínek124 HTML Ukázky Odkazy z : http://czech.wunderground.com/

23.8.2014HTML - Zdeněk Jelínek1 HTML HTML řídí konsorcium W3C – www.w3.orgwww.w3.org Historie – verze 3.0 Používá se – verze 4.01 Základy.

Podobné prezentace

Prezentace na téma: "23.8.2014HTML - Zdeněk Jelínek1 HTML HTML řídí konsorcium W3C – www.w3.orgwww.w3.org Historie – verze 3.0 Používá se – verze 4.01 Základy."— Transkript prezentace:

Podobné prezentace

O projektu

Kontaktní formulář

Přihlásit se

Přihlásit se přes sociální síť:

23.8.2014HTML - Zdeněk Jelínek1 HTML HTML řídí konsorcium W3C – www.w3.orgwww.w3.org Historie – verze 3.0 Používá se – verze 4.01 Základy.

Podobné prezentace

Prezentace na téma: "23.8.2014HTML - Zdeněk Jelínek1 HTML HTML řídí konsorcium W3C – www.w3.orgwww.w3.org Historie – verze 3.0 Používá se – verze 4.01 Základy."— Transkript prezentace:

Podobné prezentace

O projektu

Kontaktní formulář