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

Rozměr: px

Začít zobrazení ze stránky:

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

Markéta Němcová
před 7 lety
Počet zobrazení:

1 Pondělí 5. září 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. 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. Struktura HTML <html> <head> <title>má první stránka</title> </head> <body> Moje první html stránka. A nějaké další texty. </body> </html>

2 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 Pondělí 12. září 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> nepá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ů.

3 Lorem ipsum označení pro standardní pseudolatinský text užívaný v grafickém designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických návrhů. Klasický text lorem ipsum Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 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 <img> Příliš žluťoučký kůň úpěl ďábelské ódy. 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. <img src="fotbal.jpg"> Zdrojový kód <HTML> <HEAD> <TITLE>další stránka</title> </HEAD> <BODY BGCOLOR="#CDA0E0"> <FONT SIZE=5 COLOR="#400080" FACE="Comic Sans MS"> <H1 ALIGN="CENTER">Teď už nám to půjde lehce</h1> Příliš žluťoučký kůň úpěl ďábelské ódy.<br> <HR COLOR="#FFFF00" SIZE=10 WIDTH=200 ALIGN="CENTER"> <P ALIGN="CENTER"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc tincidunt ante vitae massa. Pellentesque ipsum. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Pellentesque arcu. Proin mattis lacinia justo. <IMG SRC="HRAD.JPG" WIDTH=800 HEIGHT=600 ALIGN="absbottom" VSPACE=100 HSPACE=100> </FONT> </BODY> </HTML>

4 Pondělí 19. září Odkazy <a> </a> odkaz vše, co je mezi těmito značkami slouží jako odkaz (text, obrázek), atributy cíl odkazu (href) <a href=" seznam</a> Otevři seznam - odkaz na internetovou stránku <a href="objednavka.doc">objednávka</a> Objednávka odkaz na soubor <a href= ryby.html ><img src= rybka.jpg ></a> Obrázek jako odkaz Zdrojový kód <HTML> <HEAD> <TITLE>odkazy</TITLE> </HEAD> <BODY BGCOLOR="#FF8000" TEXT="#6A0000" LINK="#800000" ALINK="#400040" VLINK="#008000" > <FONT FACE="Comic Sans MS" SIZE=5> <H1 ALIGN="CENTER">Odkazy v HTML</H1> <A HREF="duha.html">První stránka</a><br> <A href=" <A HREF="ryby.html"><IMG SRC="ryba.jpg" WIDTH=100 HEIGHT=75> </A> </FONT> </BODY> </HTML>

5 Barva ještě nenavštíveného odkazu Barva odkazu, který právě otevíráme Barva odkazu, který byl již navštíven Pondělí 26. září Seznamy a definice Nečíslovaný seznam: <ul> <li>první položka</li> <li>druhá položka</li> </ul> <UL> <LI>zelená <LI>modrá <LI>červená </UL>

Číslovaný seznam: <ol> <li>první položka, čísluje se to automaticky</li> <li>druhá položka</li> </ol> Moje nejoblíbenější předměty: <OL START=1> <LI>IT <LI>TV <LI>matematika </OL> Seznam definic:

6 Číslovaný seznam: <ol> <li>první položka, čísluje se to automaticky</li> <li>druhá položka</li> </ol> Moje nejoblíbenější předměty: <OL START=1> <LI>IT <LI>TV <LI>matematika </OL> Seznam definic: <dl> <dt>pojem1<dd>vysvětlení pojmu 1 <dt>pojem2<dd>vysvětlení pojmu 2 </dl> <DL>Hardware <DT><DD>je všechno do čeho můžeme kopnout <DT><DD>říkáme mu železo </DL> 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> </table> Co znamenají jednotlivé tagy: <td>pravá spodní</td> </tr> <table> </table> - párový tag, který začíná a ukončuje tabulku Atributy tagu <table> border =1 šířka okraje, align= center umístění tabulky na střed width="50%" tabulka zabírá 50% šířky stránky

7 <tr> </tr> - párový tag, který začíná a končí řádek tabulky. (TR znamená table row, čili řádek) <th> </th> - tag hlavičky tabulky, je vytvořená tučným písmem uloženým na střed <td> </td> - tag buňky tabulky Atribut tagů <tr>, <th>,<td> - bgcolor = "#FF8000" barva pozadí řádku, buňky Atribut tagů <th>,<td> - colspan=2 - spojí daný počet sloupců do jedné buňky - rowspan=2 - spojí daný počet řádků do jedné buňky Má-li zůstat buňka v tabulce prázdná, dává se do ní mezera - <TABLE BORDER=3 ALIGN="CENTER" WIDTH="50%" > <TR><TH BGCOLOR="#FF8000">Pondělí</TH><TH>Úterý</TH><TH>Středa</TH></TR> <TR><TD>Matematika</TD><TD>Zeměpis</TD><TD ROWSPAN=2>Zeměpis</TD></TR> <TR><TD COLSPAN=2>Tělocvik</TD></TR> Pondělí 3. října Prověrka vytvoření stránky podle předlohy Pondělí 10. října Hodnocení prověrky hlavní chybou byly špatně napsané odkazy na obrázky nejprve je potřeba uložit do složky s webovou stránkou obrázek a potom dát do odkazu pouze jméno obrázku Referát HTML 5

8 Pondělí 24. října Formulář 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 <html> <head> <title>formuláře</title> </head> <body bgcolor="#aeaeff"> <h2>dotazník</h2> <form method="get"> Napiš svoje jméno:<br> <input type="text" name="jmeno" ><br> Napiš svoje příjmení:<br> <input type="text" name="prijmeni" ><br> Jsi muž?<input type="radio" name="pohlavi" value="muž">ano <input type="radio" name="pohlavi" value="žena">ne<br> Vyber svoji třídu:<br> <select name="trida"> <option value="prima" >Prima <option value="sekunda" >Sekunda <option value="tercie" >Tercie <option value="kvarta" >Kvarta </select><br> Zaškrtni, co máš rád na snídani:<br> <input type="checkbox" name="jidlo1" value="maso">maso<br> <input type="checkbox" name="jidlo2" value="vejce">vejce<br> <input type="checkbox" name="jidlo3" value="sýr">sýr<br> <input type="checkbox" name="jidlo4" value="műsli">műsli<br> <input type="submit" value="odeslat"> </form> </body> </html>

Podobné dokumenty

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

Základy HTML. Obecná syntaxe HTML. Struktura HTML 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ů