1 / 124

HTML

Základy. HTML. HTML řídí konsorcium W3C – www.w3.org Historie – verze 3.0 Používá se – verze 4.01. Základy. HTML. Základy. HTML. Základy. HTML. Základy. HTML. http://www.fce.vutbr.cz/studium/materialy/0u2/html/. Základy. HTML. Vše založeno na hypertextových odkazech

avi
Download Presentation

HTML

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. Základy HTML HTML řídí konsorcium W3C – www.w3.org Historie – verze 3.0 Používá se – verze 4.01 HTML - Zdeněk Jelínek

  2. Základy HTML HTML - Zdeněk Jelínek

  3. Základy HTML HTML - Zdeněk Jelínek

  4. Základy HTML HTML - Zdeněk Jelínek

  5. Základy HTML http://www.fce.vutbr.cz/studium/materialy/0u2/html/ HTML - Zdeněk Jelínek

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

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

  8. Základy HTML Základy HTML - hypertextové odkazyHypertextový 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ámuPříklad:<a href="http://maichl.wz.cz" target="_blank">MaiChL's Pages</a>A vznikne toto:MaiChL's Pages - klikněte, stránka se otevře v novém okně HTML - Zdeněk Jelínek

  9. Tagy 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 HTML - Zdeněk Jelínek

  10. Tagy 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í) <CERVENY-TEXT>tento text bude červený</CERVENY-TEXT> a tento už zase červený nebude nebo : <CERVENY-TEXT>tento text bude<TUCNY-TEXT> červený</CERVENY-TEXT>a částečně také tučný</TUCNY-TEXT> a tento už zase NE Nepárové tagy umisťují do stránky jediný element, který je už svou podstatou nedělitelný <IMG SRC= “obrazek.gif“> HTML - Zdeněk Jelínek

  11. Tagy – Struktura stránky HTML • <!DOCTYPE HTML PUBLIC“.//W3C/DTD HTML 4.01//EN“> • ................ označení typu dokumentu a verze HTML • <HTML> ....................... počátek textu ve formátu HTML • <HEAD> ........................počátek hlavičky • <TITLE >Jméno dokumentu</TITLE> ........ jméno dokumentu zobrazené nahoře v titulku okna • <META NAME= “POPIS“ CONTENT= “Co dokument obsahuje“> ....... meta informace – co dokument obsahuje • </HEAD> ........................... .......konec hlavičky • <BODY> ......................................počátek těla vlastního zobrazovaného obsahu stránky • ..................................................... vlastní obsah stránky....................................... • </BODY> ................................... konec těla stránky • </HTML> ....................................konec formátu HTML Ve správné webové stránce by neměly chybět následující sekce : HTML - Zdeněk Jelínek

  12. Tagy HTML 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 : <HTML> ....................................zde je celý dokument ve formátu HTML ...... </HTML> Tag HTML HTML - Zdeněk Jelínek

  13. Tagy HTML 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 : <HTML> <HEAD> ....................................zde je hlavička webové stránky..................... </HEAD> <BODY> .....................................zde je tělo, obsah stránky................... </BODY> ....................................zde je celý dokument ve formátu HTML ...... </HTML> Tag HEAD A BODY HTML - Zdeněk Jelínek

  14. Tagy HTML 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 : <HTML> <HEAD> ....................................zde je hlavička webové stránky..................... <TITLE> Moje první webová stránka</TITLE> </HEAD> <BODY> .....................................zde je tělo, obsah stránky................... </BODY> ....................................zde je celý dokument ve formátu HTML ...... </HTML> Tag TITLE HTML - Zdeněk Jelínek

  15. Tagy HTML Tag TITLE HTML - Zdeněk Jelínek

  16. Tagy HTML 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 Sekce HEAD HTML - Zdeněk Jelínek

  17. Tagy HTML 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. Tag INSIDEX v sekci HEAD HTML - Zdeněk Jelínek

  18. Tagy HTML 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ší <BASE href=http://www.agenturamika.cz/data> Pak se múže nastavit <IMG SRC=“obrazky/cplogo.gif”> Což znamená, že plná adresářová adresa k obrázku je http://www.agenturamika.cz/data/obrazky/cplogo.gif Tag BASE v sekci HEAD HTML - Zdeněk Jelínek

  19. Tagy HTML 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í. Tag META v sekci HEAD HTML - Zdeněk Jelínek

  20. Tagy HTML 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 <BODY> backround=“.....” bgcolor=“....” text=“....” link=:”....” vlink=“....” alink =“Teal” LEFTMARGIN=nn TOPMARGING=nnn BGPROPERTIES=“....” zde se nalézá obsah stránky........... </BODY> Tag BODY HTML - Zdeněk Jelínek

  21. Tagy HTML 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 Tag BODY – pozadí a text HTML - Zdeněk Jelínek

  22. Tagy HTML 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í # Tag BODY – zadávání barev HTML - Zdeněk Jelínek

  23. Tagy HTML 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 Tag BODY – zadávání barev HTML - Zdeněk Jelínek

  24. Tagy HTML 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 Tag BODY – zadávání barev HTML - Zdeněk Jelínek

  25. Tagy HTML Barvy – názvy barev - základní Tag BODY – zadávání barev Barvy – názvy barev – další paleta HTML - Zdeněk Jelínek

  26. Tagy HTML 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 : <HTML> <BODY TEXT=“#00FFFF”> <p>Jak se máte. Jdou Vám barvy ? </p> </BODY> </HTML> Tag BODY – zadávání barev HTML - Zdeněk Jelínek

  27. Tagy HTML 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 : Tag BODY – zadávání barev P1-text.htm HTML - Zdeněk Jelínek

  28. Text HTML Základy HTML - práce s textemKaž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 <body> a </body>). Jeto úplně jednoduché! Obyčejný text stačit nebude, tak vám zde popíšu, jak textformá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 <br>řá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), takmůžete zkusit několik možností. Začněme elementem <font>, do kterého budemevkládat další atributy:face - styl písmasize - 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 <hr>:size - velikost čárywidth - šířka čáryheight - výška čáry (doporučuji 1)color - barva čáry : HTML - Zdeněk Jelínek

  29. Tagy HTML .Hypertextový odkaz <HTML> <BODY TEXT="#FFFF00" bgcolor="FF0000"> <p><b><a href=http://ravys.cz>Rašínova vysoká škola </b></p> <br> <hr> <p>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ě.</p> </BODY> </HTLM> : Tag BODY – odkazy HTML - Zdeněk Jelínek

  30. 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. • Napište další odstavec s krátkým představením školy HTML - Zdeněk Jelínek

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

  32. Tabulky HTML 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 Vytváření tabulek HTML - Zdeněk Jelínek

  33. Tabulky HTML HTML - Zdeněk Jelínek

  34. Tabulky HTML HTML - Zdeněk Jelínek

  35. Tabulky HTML HTML - Zdeněk Jelínek

  36. Tabulky HTML HTML - Zdeněk Jelínek

  37. Tabulky HTML HTML - Zdeněk Jelínek

  38. Tabulky HTML HTML - Zdeněk Jelínek

  39. Tabulky HTML <TABLE cols="4" border="2" bgcolor="#eaeaff" width="200"><COLGROUP align="center"><COL valign="middle" bgcolor="yellow"><COLGROUP span="3" valign="top"> <THEAD bgcolor="red"><TR> <TD colspan="4">Záhlaví tabulky<TR> <TD colspan="2">Levé <TD colspan="2" align="center">Pravé</THEAD><TFOOT bgcolor="blue"><TR> <TD colspan="4">Pata tabulky</TFOOT><TBODY><TR> <TD rowspan="3">1 <TD>A<TD>B<TD>C<TR> <TD>E<TD>F<TD>G<TR> <TD>H<TD>I<TD>J</TBODY ><TBODY align="right"><TR> <TD rowspan="4">2 <TD>AA<TD>BB<TD>CC<TR> <TD>DD<TD>EE<TD>FF<TR> <TD> <TD> <TD> <TR> <TD> <TD> <TD> </TBODY></TABLE> HTML - Zdeněk Jelínek

  40. Tabulky HTML Schopnosti HTML v oblasti tabulek daleko přesahují to, co si představujeme pod běžnou tabulkou. www.ibstructure.com¨ <table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="right" valign="top" > <div align="center"> <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"> <PARAM NAME=movie VALUE="my_intro.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=wmode VALUE=opaque> <PARAM NAME=scale VALUE=exactfit> <EMBED src="my_intro.swf" quality=high wmode=opaque width="800" height="581" scale=exactfit PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer/"> </EMBED></OBJECT> </div></td> </tr></table> Vytváření tabulek HTML - Zdeněk Jelínek

  41. Tabulky HTML HTML - Zdeněk Jelínek

  42. Tabulky HTML HTML - Zdeněk Jelínek

  43. Tabulky HTML <html><head> <title>TABULKA</title> </head><body> <table border="1" style="border-collapse: collapse" bordercolor="#111111" width="100%" height="266"> <tr> <td width="50%" height="19">&nbsp;</td> <td width="50%" height="19">&nbsp;</td> </tr> <tr> <td width="50%" height="242">&nbsp;</td> <td width="50%" height="242">&nbsp;</td> </tr> </table></body></html> HTML - Zdeněk Jelínek

  44. Tabulky HTML HTML - Zdeněk Jelínek

  45. Tabulky HTML HTML - Zdeněk Jelínek

  46. Tabulky HTML HTML - Zdeněk Jelínek

  47. Tabulky HTML HTML - Zdeněk Jelínek

  48. Tabulky HTML HTML - Zdeněk Jelínek

  49. Tabulky HTML HTML - Zdeněk Jelínek

  50. Tabulky HTML HTML - Zdeněk Jelínek

More Related