Základy HTML. PDF created with FinePrint pdffactory trial version

Transcription

1 Základy HTML Takže najprv na úvod nejké vysvetlivky ako budem značiť text: Čierny text - všetky návody, teória Tučný čierny text - Tagy HTML, nemôžu sa meniť Červený text - Číselné a slovné údaje ktoré si môžete zmeniť Modrý text - URL adresy súborov Zelený krivý text - Text ktorý môžete ľubovoľne meniť A ešte pár rád a upozornení: 1. Názvy súborov musia byť bez medzier a nemôžu obsahovať diakritiku. Ideálne je aby boli písané malími písmenami(a číslicami). Namiesto medzery môžete použiť _. Takže: ZLE -> Hlavný Súbor 2.html DOBRE -> hlavny_subor_2.html 2. Pozor na lomítko, v URL adresách (názvoch súborov a strániek) sa používa / a nie \. Takže vždy len / 3. Snažte sa písať kód HTML prehľadne, uľahčí vám to prácu! 4. Docela dobré je vypnúť si zalomovanie textu v textovom editore. 5. Nezľaknite sa HTML, ani tohoto dokumentu!!! :-) 1. Čo je to HTML Celú históriu HTML si nepamätám takže napíšem len toľko že HTML znamená HyperText Markup Language.Je to skrátka jednoduchý(veľmi jednoduchý) programovací jazyk pre webové stránky. Pár vysvetliviek: PREHLIADAČ - program v ktorom je možné prezerať si webové stránky. Napríklad Internet Explorer (IE), Oprea, Mozzila... TAG - je to príkaz ktorý niečo prikazuje prehliadaču. Napríklad vypísať text, zobraziť obrázok atď. Každý tag je ohraničený < a > WWW - World Wide Web, čo ja viem? žeby Celosvetová sieť? neviem URL - Uniform Resource Locator, jednotné označenie zdroja, presný názov súboru 2. Úplné základy HTML Takže ideme na to. V tejto časti napíšem niečo o základoch HTML, ako to funguje, ako písať atď. HTML obsahuje TAGy (príkazy), podľa ktorých prehliadač vie čo má vykonať. Ak napíšeme zlý tag, prehliadač ho bude ignorovať, čo môže spôsobyť chyby na stránke. Poznáme dva druhy tagov, jedny sú párové, lebo sa píšu vždy dva(<p> </p>) a tie druhé, tie sa píšu iba po jednom (<hr>). Každý tag je ohraničený zalomenými zátvorkami < a >. Medzi týmito zátvorkami je príkaz. V HTML by sa nemalo prehadzovať poradie tagov. správny zápis: <p><b></b></p> nesprávny zápis: <p><b></p></b> Ale novším prehliadačom to už nevadí, ale pokúste sa to písať správne. Doporučuje sa písať tagy veľkámi písmenami (<P> </P>) ale len preto aby ste ich lepšie našli, keď ich budete chcieť opraviť. Prehliadačom je to úplne jedno! Mne sa tieto "veľké" tagy nepáčia tak používam normálne malé písmená. Je to na vás ako vám to vyhovuje. Každý HTML dokument sa delí na dve časti - hlavičku a telo dokumentu. A v HTML dokumente ich musíme oddeliť. Hlavička (head) obsahuje rôzne informácie o dokumente(titulok stránky, autora, kódovanie, verziu HTML...). Tieto informácie sa na stránke nezobrazia(okrem titulku stránky). Všetko čo sa má na stránke zobraziť sa píše to tela(body) dokumentu. Prázdny HTML dokument by mal vyzerať takto: <head> <title></title> </head> <body>

2 </body> </html> Vysvetlenie: </html> - tagy ktoré ohraničujú celý HTML dokument. <head></head> - hlavička dokumentu <body></body> - telo dokumentu <title></title> - titulok stránky Hlavičkou dokumentu sa zaoberať už viac nebudem, lebo to v základoch neni potrebné. Uź len toľko že titulok stránky vyzerá takto: <title>moja prvá stránka</title> 3. Ako začať Toto je asi tonajdôležitejšie - ako vlastne ten HTML dokument vytvoriť. Otvorte si hocijaký jednoduchý textový editor, úplne postačí Poznámkový blok vo Windows. Ale dobré sú aj editory HTML ktoré farebne rozlíšia tagy od textu. Ja som zostal pri poznámkovom bloku. Takže otvorte si textový editor a napíšte do neho príklad čo som uviedol vyššie v druhej časti.... </html> A uložte dokument ako html súbor - zadajte názov súboru a dopíšte koncovku.html, napríklad: index.html tento súbor si teraz môžete skúsiť otvoriť v prehliadači, ale zobrazí sa vám čistá biela stránka. Vždy keď budete tento html dokument chcieť upraviť, len si ho znova otvorte v textovom editore. 4.Telo dokumentu Tagy <body> </body> môžu obsahovať ďaľšie príkazy. Sú to napríklad farba pozadia, farba textu... Takže ako na to? Do tagu <body> ale aj do iných tagov sa ďaľšie definície píšu takto: <tag definicia=""> takže v tomto prípade: <body bgcolor="blue"> </body> - bgcolor je farba pozadia, píše sa v úvodzovkách. Môže sa písať slovom(anglicky) alebo šestnástkovou(hexadecimálnou) sústavov. Každá farba je zadaná dvojciferným číslom alebo písmenami(01,02,03...fd,fe,ff). Každé udáva množstvo farby(00 - nič, ff - veľa). Farby sú v poradú RGB (red, green, blue - červená, zelená, modrá). Takže farbu môžeme napísať aj pomocou šiestich čísliel alebo písmen alebo ich kombináciou. Pred toto číslo musíme napísať #. Farby sa miešajú ako svetlo. čierna - #000000, biela - #ffffff. Farby sa môžu okrem týchto dvoch spôsobov zadávať aj inak ale o tom už inokedy, lebo to do základov už neni treba. V dodatku na konci tohoto dokumentu nájdete viac týchto(aj anglických) farieb. No a teraz už sem napíšem nejaké základné príkazi pre tag <body> </body> : bgcolor="" - farba pozadia, to som vysvelil vyššie. background="" - obrázok v pozadí. Mezdi úvodzovky napíšeme URL obrázku, ktorý sa na pozadí stránky vydlaždicuje. Napríklad: pozadie.gif text="" - farba textu. Medzi úvodzovky zadajte farbu ako aj v bgcolor="". link="" - farba hypertextových odkazov(linkov) - sú to texty na ktoré sa dá kliknúť, vysvetlím nižšie. medzi úvodzovky sa zadáva zasa tak isto farba alink="" - farba aktívnych hypertextových odkazov, zadajte tam farbu vlink="" - farba hypertextových odkazov na koré už bolo kliknuté. Medzi úvodzovky zasa len farba <body bgcolor="#0000ff" text="#ffff00" link="#ffffff"></body>

3 je to isté ako: <body bgcolor="blue" text="yellow" link="white"></body> Takže stránka bude mať modré pozadie, text bude žltý a hypertextové odkazy budú biele. Však je to jednoduché? :-D A ešte jeden príklad: <body background="obrazok.gif" text="blue" link="#00ff00" vlink="yellow"></body> Takže v pozadí bude obrázok(nachádza sa v tom istom priečinku ako aj HTML dokument), farba textu bude madrá, odkazy budú zelené a tie na ktoré už bolo kliknuté budú žlté. Ak by ste mali HTML dokument napríklad v C:\stranka\index.html a aj obrázok(alebo aj hocijaký iný súbor) by bol v C:\stranka\ a mal by meno obrazok.gif (C:\stranka\obrazok.gif), tak do background zadajte iba obrazok.gif. Aky by bol obrazok napriklad v C:\stranka\obrazky\ tak zadate obrazky/obrazok.gif. <body background="obrazky/obrazok.gif"></body> Tak to má byť! 5. Písmo Tak a teraz to začne :-) V tejto časti popíšem nejaké základy písania textu na stránke. Pre vypísanie textu na obrazovku použijeme jednoduchý tag <p> </p> - paragraph (odstavec). <p>tento text sa zobrazý na stránke.</p> a na stránke sa vypíše: Tento text sa zobrazý na stránke. Text však nemusí byť len obyčajný čierny. Dá sa meniť jeho farba, veľkosť aj štýl. Takže najprv štýl textu: <b></b> - bold - tučný text <i> </i> - italic - kurzíva, krivý text <u> </u> - underline - podčiarknutý text <strike> </strike> - strikeout - prečiarknutý text <sub> <sub> - dolný index <sup> <sup> - horný index <p>tu je <b>tučný</b> text, <i>krivý</i> text a ešte je tu aj <strike>prečiarknutý</strike> text aj <u>podčiarknutý</u> text. A ešte <sup>horný</sup> a aj <sub>dolný</sub> index. Tagy môžeme aj kombinovať, <b><i>krivý tučný</i></b> text, <strike><u><sub>prečiarknutý podčiarknutý dolný</sub></u></strike> index.</p> Trošku zložité? Ale nie ja som to tam len dosť rozpísal. Keď si to pozriete pozornejšie, tak zistíte že je to jednoduché. A na stránke by sa podľa všetkého malo zobraziť: Tu je tučný text, krivý text a ešte je tu aj prečiarknutý text aj podčiarknutý text. A ešte horný a aj dolný index. Tagy môžeme aj kombinovať, krivý tučný text, prečiarknutý podčiarknutý dolný index. Ten horný a dolný index sa tu dobre nezobrazuje ale v HTML to je ok, skúste. Tak isto ako sa dá meniť aj farba pozadia, dá sa menieť aj farba a veľkosť textu - pomocou tagu <font>. Je to tiež párový tag takže vyzerá takto: <font></font>. Takto sám asi nevykoná nič ale keď dopíšeme color="" alebo size="". Tak sa text už aj zmení. color="" - zmena farby text. Farba sa zadáva tak isto ako aj pri zmene farby pozadia.

4 size="" - veľkosť textu, vačšinou sa zadáva číslom od 1 do 7. <p><font color="#0000ff" size="4">text</font><font color="#00ff00" size="3">text</font> <font color="#ff0000" size="2">text</font><font size="1">text</font></p> V prehliadači bude: TextTextTextText A ešte sa dajú použiť už preddefinované formáty(veľkosť, štýl) textu. Používajú sa väčšinou pre nadpisi. Sú to tagy: <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> <h7></h7> <h2>vitjate</h2> A v prehliadači: Vitajte Viac k písmu a textu teraz písať nebudem. 6. Zarovnanie Na stránke nemusí byť text(obrázky, linky...) zarovnaný na ľavú stranu. Môže byť tiež zarovnaný na pravú stranu alebo aj na stred. Tag ktorým sa to dá dosiahnuť je: <div align=""> </div> align="" - je zarovnanie. Sem je treba doplniť jednu s týchoto možností: left, right alebo center. Takže: <div align="left"></div> - Zarovnanie na ľavú stranu <div align="right"></div> - Zarovnanie na ľavú stranu <div align="center"></div> - Zarovnanie na ľavú stranu Namiesto <div align="center"></div> sa dá použiť aj skrátené <center> </center>. <div align="center"><p> Vitajte </p></div> je to isté ako <center><p> Vitajte </p></center> A na stránke bude: Vitajte 7. Obrázky Na vačšine stránok sa určite nachádza aspoň jeden obrázok. Obrázky by mali byť vo formáte *.JPG alebo *.GIF alebo *.PNG

5 Pokúste sa obrázky upraviť tak aby zaberali čo najmenej miesta. Rýchlejšie sa načítajú! Niekedy sa to však nevyplatí - napríklad keď dávate na stránku fotky(určite je lepšia fotka čo zaberá 400Kb ako fotka v slabej kvalite ktorá zaberá 50Kb). Tak, teraz k vkladaniu obrázkov. Pre obrázky sa používa tag(ktorý nieje párový!): <img> Ako inak, musí obsahovať aj ďaľšie definície: src="" - URL obrázku, ktorý sa má zobraziť width="" - šírka obrázku v pixeloch height="" - výška obrázku v pixeloch alt="" - alternatývny text(text ktorý sa zobrazí po nájdení myšou na obrázok) Takže príklad pre obrázok test.jpg ktorý je v priečinku C:\www\obrazky\ a html dokument je v priečinku C:\www\: <img scr="obrazky/test.jpg" width="50" height="25" alt="ahoj"> Zobrazý sa obrázok s veľkosťou 50x25 pixelov a po nájdení naň myšou sa vypíše text: Ahoj. 8. Hypertextové odkazy (linky) Stránka by bola dosť neprehladná a malá keby sa skladala len z jedného dokumentu. Preto sí tu hypertextové odkazy. Sú to miesta na stránke na ktoré sa dá kliknúť myšou a prepoja vás na ďaľšiu stránku, súbor, ovú adresu atď. Ako hypertextový odkaz sa dá použiť dosť prvkov HTML, najpoužívanejšie sú texty a obrázky. Hypertextový odkaz má tiež svoj vlastný tag: <a> </a>. Medzi týmito dvoma tagmy je to, na čo sa bude dať kliknúť(text, obrázok, nadpis...). Ale zasa musí mať tag <a> aj bližšiu definíciu aby prehliadač vedel čo má po kliknutí spraviť. Takže tu je to: href="" - URL stránky, súboru, obrázku ktorý sa má po kliknutí otvoriť. title="" - alternatívny text, ale veľmi sa nepoužíva (funguje len v prehliadači Internet Explorer). <a href="stranka2.html">kliknite sem</a> Na stránke bude: Kliknite sem A po kliknutí, sa otvorý súbor stranka2.html Príklad 2: <a href=" sem</a> Na stránke bude: Kliknite sem A po kliknutí, sa otvorý webová stránka Príklad 3: <a href="obrazky/velky.jpg"><img src="obrazky/maly.jpg" width="120" height="90"></a> Na stránke bude obrázok, a keď naň kliknete, otvorý sa druhý obrázok. Príklad 4: <a href="program.exe">kliknite sem</a> Na stránke bude:

6 Kliknite sem A po kliknutí, sa začne sťahovať súbor program.exe Tu vám to samozrejme fungovať nebude :-) ale v prehliadači áno!!! Príklad pre odosielanie u, medzi zátvorky (href="") napíšete mailto: a ovú adresu: <a href="mailto:[email protected]">kliknite sem</a> Na stránke bude: Kliknite sem A po kliknutí, sa otvorý ový klient (program na odosielanie ov) s adresou [email protected]. 9. Tabuľky Tabuľky sa používaju na stránkach veľmi často. Niektorý ich používajú na vytvorenie nejakej tabuľky(je to prehľadnejšie ako obyčajný text, a rýchlejšie ako obrázok) a niektorý(skúsenejší) ich používají na design(gafické spracovanie) stránky. Na začiatku musí byť tag <table> a na konci </table>. Medzi týmito dvoma tagmi sa píšu ďaľšie tagy - na vytváranie riadkov a stĺpcov. Ešte sa trochu zdržím pri tagu <table> lebo sa v ňom dá nastavovať vzhľad tabuľky. border="" - hrúbka čiar tabuľky v pixeloch, 0 = bez čiar width="" - šírka tabuľky. Udáva sa v pixeloch (napr.: 250), alebo v percentách (napr.: 50%). Percentá sa počítajú podľa šírky stránky height="" - výška tabuľky, tiež sa udáva v pixeloch alebo percentách bordercolor="" - farba čiar tabuľky bgcolor="" - farba pozadia tabuľky Pripomínam že tieto definície sú neni pri žiadnom tagu potrebné, čiže stačí napísať iba tag, alebo iba definície ktoré potrebujete! Teraz k tým riadkom a stĺpcom: Vždy sa píše riadok, a potom sa delý na stĺpce. Pre riadok sa používajú tagy <tr> - začiatok riadku a </tr> - koniec riadku. Medzi ne sa píšu tagy pre stĺpce: <td></td>. A medzi <td> a </td> sa už píše to čo sa má v políčku zobraziť. Napíšem sem aj príklad, pre lepšie pochopenie(farebne som odlíšil tagy tabuľky(čierne) a ostatné tagy(sivé)): <table border="1"> <tr> <td><p>a</p></td> <td><p><b>b</b></p></td> <td><p><i>c</i></p></td> </tr> <tr> <td><a href="strana2.html">1</a></td> <td><h3>2</h3></td> <td><p><font color="navy">3</font></p></td> </tr> </table> Zobrazý sa približne:

7 9.Frámy Nedokončené 10. i-frámy - Floating Frames; frámy - Frames Veľmi obľúbená vec pri webových stránkach sú ifrámy. Používajú sa väčšinou pre design stránky, rýchlejšie načítanie stránky a pre lepšiu prehľadnosť. Sú trošku podobné ako frámy. Frámy rozdelia celú stránku na niekoľko častí a v každej časti sa zobrazuje určitý dokument. Ifrámy tiež zobrazujú určité dokumenty ale môžete ich vkladať do stránky ako normálny text alebo obrázok. Skrátka ifám si môžete vložiť hocikde na stránku a okolo neho môže byť hocičo iné(text, obrázok, ďaľší ifrám...). Takže tu je tag pre ifrám: <iframe> </iframe> Tentokrát sa medzi tieto dva tagy písať nebude nič. Zadá sa iba URL súboru ktorý sa má v ifráme zobraziť. name="" - meno ifrámu, viac nižšie src="" - URL súboru ktorý sa má v ifráme zobraziť. width="" - šírka, v pixeloch, alebo percentách height="" - výška, v pixeloch alebo percentách frameborder="" - hrúbka okraju ifrámu v pixeloch, 0 = bez okraju NAME - Meno ifrámu Predstavte si že chcete stránku rozdeliť na dve časti pomocou dvoch ifrámov. Jeden bude zobrazovať súbor menu.html a druhý hlavna.html. A teraz chcete aby, keď kliknete na hypertextový odkaz v menu.html, aby sa zobrazil v tom druhom ifráme. Na to sa zadávajú ifrámom aj frámom mená. Takže tu je príklad: Vytvoríme si prázdny HTML dokument a dáme mu nejaké meno(napr.: test.html). Do tohoto dokumentu napíšeme HTML kód na vloženie dvoch ifrámov vedľa seba. <head></head> <body> <iframe name="menu" src="menu.html" width="200" height="400"></iframe> <iframe name="main" src="hlavna.html" width="400" height="400"></iframe> </body> </html> A uložíme. Vysvetlenie: V prvom ifráme sa zobrazý súbor menu.html, tomuto ifrámu sme dali meno menu a jeho rozmery sú 200 x 400px(pixelov). V druhom ifráme sa zobrazý súbor hlavna.html, má meno main, a rozmery 400 x 400px. Teraz si musíte vytvoriť aj súbory menu.html a main.html ktoré sa tam budú zobrazovať(musia byť uložené v tom istom priečinku, ale to je hádam už jasné). Pre príklad vytvoríme úplne jednoduché súbory: menu.html bude: <head></head> <body> <a href="2.html" target="main">klikni sem</a> </body>

8 </html> Vysvetlenie: Aj keď by ste to už mali chápať, ale pre istotu sem napíšem, že to je jeden hypertextový odkaz ktorý otvorý dokument 2.html, ale s pojmom target="" ste sa ešte v tomto návode nestretli. Udáva meno ifrámu v ktorom sa má daný dokument(v tomto prípade 2.html) otvoriť. A už iba main.html: <head></head> <body> <p>kliknite na link v menu na ľavej strane.</p> </body> </html> To hádam chápete :-) No a teraz keď už máte vytvorené a uložené súbory main.html, menu.html a test.html, otvorte si ten test.html a tam sa vám zobrazia v ifrámoch súbory main.html a menu.html. Po kliknutí na odkaz v menu.html sa v main.html otvorý súbor 2.html(ale ten ste nevytvorlili, takže ak si to chcete skúsiť vytvorte si nejaký prázdny súbor 2.html). A musí to fungovať! Toto bola asi najblbšia časť, aspoň pre mňa na vysvetlovanie... :-D Frámom sa teraz venovať nebudem, lebo sa už skoro nepoužívajú a ani ma veľmi nezaujímajú, možno o nich napíšem najbližšie alebo ak chcete napíšte mi (moju ovú adresu nájdete úplne dole). A ešte nejaký dodatok: Dodatok: Tu sú zápisi niekoľkých farieb:

9 Ak ste to vydržali až sem, tak vám blahoželám a myslím že podľa týchto 10 lekcií by ste sa mali naučiť tvoriť aspoň nejaké jednoduché webové stránky. Ak vám neni niečo z tohto článku jasné, potrebujete poradiť alebo ste tu našli nejaké chyby (ale nemyslím gramatické - fuuuj slovika!!!) tak mi prosím napíšte na . Ak vám tento článok nestačí, pripravujem aj ďaľšie pokračovanie k tomuto článku. Bude v ňom popísaných niekoľko nových tagov a funkcií HTML. Ak takéto niečo, niekedy napišem, nájdete to na webovej stránke: - tento a aj ďaľšie návody na HTML, ktoré sa chystám napísať. Tento návod som napísal, lebo ma o to požiadali traja moji kamoši a napísal som ho v priebehu 3 dní, takže aj ďaľšie návody by mali byť napísané čoskoro. Ak máte nejaké návrhy, vylepšenia alebo pripomienky. Píšte! 2004 Milan Molda [email protected]