Základy HTML. Obecná syntaxe HTML. Struktura HTML



Podobné dokumenty
Čtvrtek 11. dubna. Základy HTML. Obecná syntaxe HTML. Struktura HTML

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Základy HTML. Obecná syntaxe HTML. Struktura HTML

Tvorba webových stránek

Tvorba www-stránek. Příkazy jazyka HTML. Budeme pracovat následovně: Základní struktura webové stránky. Příkazy sekce HEAD

Pondělí 5. září. Základy HTML. Obecná syntaxe HTML. Struktura HTML

Úvod do jazyka HTML (Hypertext Markup Language)

Zá klady HTML. Tag HTML <HTML> Párová značka, který definuje webovou stránku. Obsah stránky končí značkou

Tvorba webových stránek

Základy HTML. Autor: Palito

TNPW1 Cvičení aneta.bartuskova@uhk.cz

<html> - párový tag, uzavírá celý dokument <head> - párový, určuje hlavičku dokumentu <body> - párový, uzavírá tělo dokumentu Př. Základní struktura

13. Vytváření webových stránek

HTML Hypertext Markup Language

HTML. ICT_01., 02. konzultace; 2. ročník 1/6

Stránka se dá otevřít dvěma způsoby

Tvorba webových stránek pomocí HTML kódu v příkladech. M. Seménka, 2014

Internet 02 - Tvorba statických www stránek za pomoci HTML tagů

22. Tvorba webových stránek

Základy informatiky. 03 HTML, tvorba webových stránek. Kačmařík/Szturcová/Děrgel/Rapant

Tvorba fotogalerie v HTML str.1

Tvorba internetových stránek

Poznámka v (x)html Všechno, co je v (x)html souboru obaleno značkami <!-- a -->, je považováno za poznámku a nezobrazuje se.

Buňka tabulky; tento tag doporučuju psát opět jako párový. Nyní již máme dostatek informací k tomu, abychom dokázali sestrojit jednoduchou tabulku.

Základy informatiky. 03, HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

IE1 jazyk HTML a kaskádové styly

Úvod do tvorby internetových stránek v jazyce HTML

IE1 jazyk HTML a kaskádové styly

9. Tagy tvorba www stránky pomocí tagů

Formuláře. Aby nám mohli uživatelé něco hezného napsat třeba co si o nás myslí!

HTML XHTML JavaScript PHP ASP.Net Zajímavé odkazy

12. Základy HTML a formuláře v HTML

Základy informatiky. HTML, tvorba WWW stránek. Daniela Szturcová Část převzata z přednášky P. Děrgela

Tvorba stránek v HTML ve Wordu

Název DUM: VY_32_INOVACE_2B_14_ Programovací_jazyk_HTML

HTML. HTML- HyperTextMarkUpLanguage (nadtextový značkový jazyk) TAGY

Výukový materiál KA č.4 Spolupráce se ZŠ

HTML - Úvod. Zpracoval: Petr Lasák

1 Úvod. 2 Tvorba internetových prezentací. 2.1 Nástroje pro tvorbu prezentace. Stránka 1

Návrh a tvorba WWW stránek 1/8. Formuláře

Hlavička dokumentu. mezi <head> a </head> obsahuje informace vztažené k dokumentu metadata <title> - název stránky, povinná párová značka

PODPORA ELEKTRONICKÝCH FOREM VÝUKY

NSWI096 - INTERNET. Úvod do HTML

Webové stránky. 2. Úvod do jazyka HTML. Datum vytvoření: str ánk y. Vytvořil: Petr Lerch.

Internet 1 vývoj, html, css

<link> - definuje vztah k jiným XHTML dokumentům, typicky

Jemný úvod do HTML. Co je HTML značka? Web nezná text formátovaný mezerami a konci řádku! Ale já potřebuji psát více mezer a určovat zalomení řádku!

(X)HTML-TAGY. VOŠ a SŠT Česká Třebová

Co je HTML. 1. Párový tag má začátek a konec: 2. Nepárový tag nemá ukončovací značku:

Tvorba WWW stránek. Mgr. Petr Jakubec. Katedra fyzikální chemie Univerzita Palackého v Olomouci Tř. 17. listopadu

Mgr. Stěpan Stěpanov, 2013

Tabulky. Přehled tagů z oblasti tabulek. Tag Význam Párový Výskyt. tr řádek tabulky nepovinně <table>, <tbody>, <thead>, <tfoot>

Jdeme tvořit webové stránky!

Atribut Význam Hodnoty

Nová struktura souborů a složek

Tvorba webu. Základní HTML tagy. Martin Urza

Bloky. Tag Význam Párový. p odstavec nepovinně. br řádkový zlom ne. div oddíl ano. center vycentrování ano. h1 nadpis 1.

Internetové technologie, cvičení č. 5

K práci budeme využívat souborového manažeru Unreal Commander alespoň si ho procvičíme

HTML - pokračování. Co už víme?

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

Inovace výuky prostřednictvím šablon pro SŠ

Základy HTML (2. přednáška)

Kaskádové styly základy grafiky

TVORBA WEBOVÝCH STRÁNEK

Výukový materiál vytvořen v rámci projektu EU peníze školám. "Inovace výuky" registrační číslo CZ.1.07/1.5.00/

Dokument ve formátu webové stránky vytvořený pomocí XHTML a CSS

9. Editory www stránek II tvorba pomocí tagů a další technologie.

Vývoj Internetových Aplikací

Přehled základních html tagů

WWW a HTML. Základní pojmy. Ivo Peterka

Mgr. Vlastislav Kučera Struktura stránky, hlavička,

NSWI096 - INTERNET. CSS kaskádové styly. Mgr. Petr Lasák

1. WAP Jazyk WML Webserver Nastavení MIME: Co na tvorbu a prohlížení WAPu pot ebujete? Waptor Nokia Mobile Internet Toolkit

Tvorba webových stránek

v laboratořích CERN ve Švýcarsku byl zahájen projekt WWW (T. Barners-Lee přichází s projektem distribuovaného hypertextového systému)

Tvorba internetových stránek. Jazyk HTML

Inovace a zkvalitnění výuky prostřednictvím ICT Tvorba webových stránek. Ing. Zelinka Pavel Číslo: VY_32_INOVACE_35 17 Anotace:

TVORBY JEDNODUCHÝCH WEB STRÁNEK

VY_32_INOVACE_In 6.,7.10. Tvorba tabulky

Jazyk HTML SOŠ OTROKOVICE, TŘ. T. BATI 1266, OTROKOVICE Pomocný text pro výuku výpočetní techniky. PaedDr. Pavel Kovář

MODERNÍ WEB SNADNO A RYCHLE

PHP. Čtvrtek 8. září. Čtvrtek 15. září. Anonymní test znalostí

Tvorba www v jazyku HTML

XHTML 1. Formuláře. Element form. <form>... </form>

Obsah. Stručná historie World Wide Webu 7

HTML V PRAXI HYPERTEXT MARKUP LANGUAGE V PRAXI. Autor: Petr Kříž

Fiktivní firma. Žáci získají základní informace o přípravě a tvorbě webových stránek. Na konci prezentace je úkol, se kterým žáci samostatně pracují.

Obrázky. Tag Význam Párový Výskyt. img obrázek ne. img video ne. map klikací mapa. area oblast v klikací mapě ne

TNPW1 Cvičení aneta.bartuskova@uhk.cz

Škola: Gymnázium, Brno, Slovanské náměstí 7 III/2 Inovace a zkvalitnění výuky prostřednictvím ICT Název projektu: Inovace výuky na GSN

Word textový editor. Tlačítko Office základní příkazy pro práci se souborem. Karta Domů schránka. písmo. vyjmout. vložit kopírovat.

Základy HTML, URL, HTTP, druhy skriptování, formuláře

Formuláře. neomezený počet formulářových polí v rámci HTML dokumentu může být více formulářů, nelze je ale do sebe vnořovat

Inovace bakalářského studijního oboru Aplikovaná chemie

Programování webových stránek

Manuál pro interní potřebu Základní školy Uhlířské Janovice

Mgr. Vlastislav Kučera přednáška č. 2

Mgr. Vlastislav Kučera lekce č. 2

Transkript:

Základy HTML HyperText Markup Language, označovaný zkratkou HTML, je značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu. HTML soubor je obyčejný text obalený značkami, které se nazývají tagy. tagy určují, jak bude text vypadat, tedy jakou bude mít formu. všechny tagy jsou uzavřeny v <ostrých závorkách>. co není v ostrých závorkách, je text, který se bude zobrazovat. Symbolicky: <tag>text Obecná syntaxe HTML HTML má několik málo zásad, které je dobré zmínit. Nezáleží na velikosti písem, <body> je totéž co <BODY> V adresách a jménech souborů záleží na velikosti písmen, nesmějí tam být mezery a čeština. Struktura HTML <html> <head> Tagy, které prohlížeč nezná, jako by nebyly. Na začátku tagu nesmí být mezera, třeba < br> je špatně. Dvě mezery po sobě (nebo víc) mají stejný význam jako jedna mezera. Konec řádku ve zdroji se chápe jako mezera. Jména atributů je dobré dávat vždy do uvozovek, ale není to úplně nutné, pokud uvnitř nejsou mezery. <title>má první stránka</title> </head> <body> Moje první html stránka. A nějaké další texty. </body> </html>

Co znamenají jednotlivé tagy: <html> </html> začíná a končí dokument <head> a </head> začíná a končí hlavičku, která se sice nezobrazuje, ale obsahuje některé důležité údaje, například <title> a </title>, vymezující název dokumentu (může se lišit od jména souboru) <body> Co je mezi <body> a </body>, se bude zobrazovat. <body> je tag, kterým začíná vlastní tělo dokumentu, body má atributy barva pozadí (bgcolor), barva písma (text), Výše uvedené tagy by měl obsahovat každý html soubor. Stránku pomocí HTML můžeme psát v jakémkoli textovém editoru, přičemž nejvhodnější je poznámkový blok. Soubor pak musíme uložit s příponou.html, jako typ zvolíme Všechny soubory Editor HTML je vhodný pro začátečníky na vytváření webových stránek, nabízí u každého tagu atributy a barevně zvýrazňuje správnou syntaxi. Další tagy: <br> epárový tag, ukončuje řádek <hr> nepárový tag, vodorovná čára atributy délka (width), tloušťka (size), zarovnání (align), barva (color) a bez stínu (noshade) <font> </font> nastavení barvy (color) velikosti (size) a fontu (face) písma <h1> až <h6> nadpisy (angl. heading), mají jediný atribut align; je rozlišováno šest stupňů nadpisů.

Pátek 7. září Opakování jednoduchých tagů <HTML> <HEAD> <TITLE>html</TITLE> </HEAD> <BODY BGCOLOR="#AEF3A7" TEXT="#6A0000" > <FONT FACE="Aharoni" SIZE=5> <H1 ALIGN="CENTER">Pokračujeme v HTML</H1> na něco jsme si vzpomněli </FONT> </HTML> vzhled stránky Pro výběr správného fontu, který napíše všechna česká písmena použijeme tzv. Pangram (z řeckého pan gramma, každé písmeno ) je věta či úsek textu obsahující všechna písmena abecedy. Pangram pro úplnou sadu znaků české abecedy: Nechť již hříšné saxofony ďáblů rozzvučí síň úděsnými tóny waltzu, tanga a quickstepu Zastoupení všech českých písmen s diakritikou Příliš žluťoučký kůň úpěl ďábelské ódy. Pátek 14. září <img> obrázek (angl. image), nepárový tag; do stránky se vloží obrázek načtený z jiného souboru; artibuty - umístění souboru s obrázkem (src), alternativní popis (alt), šířka (width- délka nebo %), výška (height - délka nebo %). V souboru je umístěna pouze cesta k obrázku. Přemístíme-li html soubor na jiný počítač, na server v internetu apod., cesta se změní a obrázek se nezobrazí. Řešením je umístění do stejné složky s html souborem a do src napsat jen název obrázku. Název by měl být bez diakritiky a jedno slovo.

<a> </a> odkaz vše, co je mezi těmito značkami slouží jako odkaz (text, obrázek), atributy cíl odkazu (href) <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#AEF3A7" TEXT="#6A0000" > <FONT FACE="Tahoma" SIZE=5> <H1 ALIGN="CENTER">Pokračujeme v HTML</H1> <IMG SRC="letadlo.gif" WIDTH=150 HEIGHT=150 ALIGN="right" HSPACE="50%" VSPACE=50> <A HREF="http://cmg.prostejov.cz">Škola</A><BR> na něco jsme si vzpomněli </FONT> </HTML> vzhled stránky Pátek 21. září Seznamy Nečíslovaný seznam: <ul> <li>první položka <li>druhá položka </ul>

Číslovaný seznam: <ol> <li>první položka, čísluje se to automaticky <li>druhá položka </ol> Seznam definic: <dl> <dt>pojem1 <dd>vysvětlení pojmu 1 <dt>pojem2 <dd>vysvětlení pojmu 2 </dl> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR="#AEF3A7" TEXT="#6A0000" > <FONT FACE="Tahoma" SIZE=5> <H1 ALIGN="CENTER">Pokračujeme v HTML</H1> <a href="druhy.html><img SRC="letadlo.gif" WIDTH=150 HEIGHT=150 ALIGN="right" HSPACE="50%" VSPACE=50></a> <A HREF="http://cmg.prostejov.cz">Škola</A><BR> na něco jsme si vzpomněli </FONT> </HTML> vzhled stránky

<HTML> <HEAD> <TITLE>druha</TITLE> </HEAD> <BODY BGCOLOR="#FF8000" TEXT="#000000" ALINK="#FFFF00" VLINK="#004040"> <H2 ALIGN="CENTER">Druhá stránka</h2> <A HREF="opakovani4b.html">Na první</a> <UL TYPE="SQUARE"> <LI>Matika <LI>Tělocvik <LI>Občanka </UL> <OL START=10> <LI>prima <LI>sekunda <LI>tercie <LI>kvarta </OL> <DL> <DT>Počítač<DD>je jen stroj </DL> </HTML> vzhled stránky Pátek 2. listopadu Tabulka <table > <tr> <th>hlavička</th> <th>hlavička</th> </tr> <tr> <td>obsah buňky</td> <td>další buňka</td> </tr> <tr> <td>levá spodní</td> <td>pravá spodní</td> </tr> </table> Co znamenají jednotlivé tagy:

<table> Párový tag, který začíná tabulku. <tr> Párový tag, který začíná a končí řádek tabulky. (TR znamená table row, čili řádek). <th> Tag hlavičky tabulky, je vytvořená tučným písmem uloženým na střed. <td> Tag buňky tabulky. Tabulka <table border=1 cellspacing=10 bgcolor="#ff9664" cellpadding=10> <caption>rozvrh hodin</caption> <tr><th> </th><th>1</th><th>2</th><th>3</th></tr> <tr><th>pondělí</th><td>literatura</td><td>chemie</td><td>matematika</td></ tr> <tr><th>úterý</th><td>dějepis</td><td colspan=2 aling="center" BGCOLOR="#408080"> Tělocvik</td></tr> </table> border šířka rámečku cellspacing - vnější okraj buněk cellpadding - vnitřní okraj buněk colspan = 3 sloučení buněk přes 3 sloupce rowspan = 2 - sloučení buněk přes 2 řádky

Tabulky lze použít také na uspořádání objektů na stránce. V tomto případě dáme border = 0 <table border=0 width="95%" cellspadding=15 align="center"> <tr> <th><img src="letadlo.gif" width=288 height=228></th> <td>monako, starověké knížectví s bohatou a barvitou historií, leží pod Přímořskými Alpami na Azurovém pobřeží při břehu Ligurského moře. Jeho státním zřízením je konstituční monarchie</td> <td><img src="zviratka.jpg" width=171 height=228></td></tr> </table> Pátek 9. listopadu Formuláře Formulář se naučíme pouze sestavit, abychom ho mohli vyhodnotit, musíme znát jazyk PHP. Při použití metody GET se data z formuláře zobrazí v řádku adresy: file:///w:/ivt/ivtv%c3%bduka/www/html/kvarta1/zpracuj.php?jmeno=jana&prijmeni =B%EDl%E1&trida=tercie&krouzek=keramika&doba=druha&heslo=1234 <BODY BGCOLOR="#408080" TEXT="#FFFF00" > <H2>Přihláška do kroužku</h2> <FORM ACTION="zpracuj.php" METHOD="GET"> Napiš svoje jméno:<br> <INPUT TYPE="TEXT" NAME="jmeno" MAXLENGTH=20 SIZE=20 ><BR> Napiš příjmení:<br> <INPUT TYPE="TEXT" NAME="prijmeni" MAXLENGTH=50 SIZE=50 ><BR> Vyber třídu:<br> <INPUT TYPE="RADIO" NAME="trida" VALUE="prima" >Prima<BR> <INPUT TYPE="RADIO" NAME="trida" VALUE="sekunda" >Sekunda<BR> <INPUT TYPE="RADIO" NAME="trida" VALUE="tercie" >Tercie<BR> <INPUT TYPE="RADIO" NAME="trida" VALUE="kvarta" >Prima<BR>

Vyber kroužek<br> <INPUT TYPE="CHECKBOX" NAME="krouzek1" VALUE="programovani" >Programování<BR> <INPUT TYPE="CHECKBOX" NAME="krouzek2" VALUE="keramika" >Keramika<BR> <INPUT TYPE="CHECKBOX" NAME="krouzek3" VALUE="basketbal" >Basketbal<BR> <INPUT TYPE="CHECKBOX" NAME="krouzek4" VALUE="divadlo" >Divadlo<BR> Vyhovuje mi tato doba<br> <SELECT NAME="doba"> <OPTION VALUE="prvni">od 15 do 16 hodin <OPTION VALUE="druha">od 16 do 17 hodin <OPTION VALUE="treti">od 17 do 18 hodin </SELECT><BR><BR> Zvol si heslo<br> <INPUT TYPE="PASSWORD" NAME="heslo"> <INPUT TYPE="SUBMIT" VALUE="Odeslat"> <INPUT TYPE="RESET" VALUE="Vymaž"> </FORM>