7.CVIČENIE gajdos@ismpo.sk Základy HTML 1. Štruktúra HTML, XHTML dokumentu 2. Niektoré tagy HTML - Hypertext Markup Language XHTML - Extensible Hypertext Markup Language Webový prehliadač začne čítať web stránku od začiatku a hľadá špeciálne reťazce, tzv. tagy, ktoré mu hovoria čo má s daným textom vo vnútri tagu urobiť. Všeobecný formát pre nejaký tag je: <nazov_tagu>nejaký text</nazov_tagu> <h3>nadpis</h3> HTML dokument pozostáva z dvoch základných častí, hlavičky - head a tela - body. Hlavička obsahuje informácie o dokumente, ktoré sa na obrazovke nezobrazujú a telo obsahuje všetko ostatné, čo sa na obrazovke zobrazí. Základná štruktúra web stránky s ktorou budeme na cvičeniach pracovať je takáto: <html> <head> <!-- hlavička obsahujúca extra informácie o tomto dokumente, na stránke sa nezobrazujú --> </head> <body> <!-- všetok HTML kód ktorý sa zobrazí --> </body> </html>
Všetok obsah je vo vnútri tagov <html>...</html>. Vo vnútri je najprv hlavička <head>...</head> a potom telo <body>...</body>. Všimnite si tiež, ako sa píšu komentáre: <!-- bla bla bla -->. Text vo vnútri týchto tagov sa na obrazovke nezobrazuje. Slúžiť môže napríklad na popis alebo lepšiu orientáciu v kóde stránky, keď sa stránka rozrastie a skomplikuje. Úloha č. 1 Vytvorte prvú jednoduchú web stránku. Otvorte si textový editor (notepad) a napíšte nasledovný text. Tento dokument si potom uložte vo svojom priečinku pod názvom index.html a skúste ho otvoriť vo webovom prehliadači. <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <title>moja firma s.r.o.</title> </head> <!-- napísal Janko Mrkvička, 11.4.2007 --> <body> Naša firma sa zaoberá výrobou a repasovaním tonerov pre všetky druhy tlačiarní. Vznikli sme v roku 1454 a do roku 1560 sme sa stali lídrom na trhu s tonermi pre tlačiarenské lisy značky Guttenberg so 74% podielom na trhu. Náš sortiment momentálne zahŕňa: výrobu tonerov pre laserové, atramentové a ihličkové tlačiarne, repasovanie tonerov pre laserové a atramentové tlačiarne, dodávkou spotrebného kancelárskeho materiálu. Naše zásady sú: kvalita, rýchlosť, ochota Nájsť nás môžete na Jahodovej ulici 4 v Prešove. Tel: 055 111 1234 Fax: 055 111 4321 email: mrkva@jezdrava.sk </body> </html> Všimnite si tag <title>...</title>, ktorý sa nachádza v hlavičke dokumentu. Tento tag sa používa na identifikáciu každého dokumentu a text v ňom sa zobrazuje na title bar (lište) okna prehliadača. V dokumente máme taktiež komentár, ktorý nám hovorí, že autorom tejto stránky je Janko Mrkvička a vytvoril ju dňa 11.4.2007. Nadpisy Nadpis vytvoríme tak, že text ktorý chceme aby bol nadpisom, uzavrieme do nadpisových tagov. Formát tagu reprezentujúceho nadpis je nasledovný: <hn>text ktorý má byť nadpisom</hn> kde N je číslo od 1 do 6, ktoré určuje veľkosť nadpisu.
Tu sú nejaké príklady nadpisov: Nadpis Level 1 Nadpis Level 2 Nadpis Level 3 Nadpis Level 4 Nadpis Level 5 Nadpis Level 6 <h1> Nadpis Level 1 </h1> <h2> Nadpis Level 2 </h2> <h3> Nadpis Level 3 </h3> <h4> Nadpis Level 4 </h4> <h5> Nadpis Level 5 </h5> <h6> Nadpis Level 6 </h6> Úloha č. 2 Na svoju web stránku pridajte nasledujúce nadpisy: Nadpis 1. úrovne s textom Moja firma s.r.o. umiestnený úplne na začiatku stránky. Nadpis 2. úrovne s textom Informácie umiestnený pred informácie o firme. Nadpis 2. úrovne s textom Produkty umiestnený pred informácie o sortimente. Nadpis 3. úrovne s textom Kontakt umiestnený pred kontaktné informácie. Niektoré ďalšie tagy Na rozdelenie textu do paragrafov slúži tag <p>...</p> Pred začiatok paragrafu vloží prázdny riadok. Tag <br /> zalomí na danom mieste riadok. Tag <hr /> vloží na danom mieste horizontálnu čiaru, prechádzajúcu cez celú web stránku. Úloha č. 3 Pred nadpis Kontakt vložte horizontálnu čiaru a kontaktné informácie sformátujte tak, aby každý z údajov bol na novom riadku. Kontaktné informácie by mali vyzerať nasledovne: Nájsť nás môžete na Jahodovej ulici 4 v Prešove. Tel: 055 111 1234 Fax: 055 111 4321 email: mrkva@jezdrava.sk
Neočíslovaný zoznam reprezentujú tagy <ul>...</ul>. Jednotlivé položky tohto zoznamu musia byť vo vnútri tagov <li>...</li>. <ul> <li>položka 1</li> <li>položka 2</li> <li>položka 3</li> </ul> Vyprodukuje toto: Položka 1 Položka 2 Položka 3 Očíslovaný zoznam reprezentujú tagy <ol>...</ol>. <ol> <li>položka 1</li> <li>položka 2</li> <li>položka 3</li> </ol> Vyprodukuje toto: 1. Položka 1 2. Položka 2 3. Položka 3 Úloha č. 4 Reprezentujte sortiment firmy pomocou neočíslovaného zoznamu. Reprezentujte zásady firmy pomocou očíslovaného zoznamu. Ukážka: Náš sortiment momentálne zahŕňa: výrobu tonerov pre laserové, atramentové a ihličkové tlačiarne repasovanie tonerov pre laserové a atramentové tlačiarne dodávku spotrebného kancelárskeho materiálu
Naše zásady sú: 1. kvalita 2. rýchlosť 3. ochota Úloha č. 5 Napíšte kód, ktorý vytvorí takýto zoznam: 1. Prvá položka 2. Druhá položka o Prvá podpoložka druhej položky 1. Očíslovaná podpoložka podpoložky 2. Ďalšia podpoložka 3. Už sme sa stratili? o Druhá podpoložka druhej položky o Tretia podpoložka druhej položky 3. Tretia položka