Keď príde reč o formatovaní textu,vybaví sa vám pravdepodobne typ nejakého písma,veľkosť a farba. V textovom editore je to jednoduché,ale v HTML je to zložitejšie.
V tejto kapitole sa naučíte:
- Vytvárať nadpisy
- Používať tučné písmo a kurzivu
- Použivať horní a dolní index
- Formátovanie citácie
Tvorba webových stránok neni len o písani v textovom procesore ako napr. World. Je dôležité, aby ste si to zapametali a dodržovali ich standardy,keď sa v naších kapitolách budeme učiť HTML.
Keď príde reč o formatovaní textu,vybaví sa vám pravdepodobne typ nejakého písma,veľkosť a farba. V textovom editore je to jednoduché,ale v HTML je to zložitejšie. Staršia vezia HTML použivala pre určenie písma.veľkosti a farby značku <font>. Táto značka je už v HTML i v XHTML kvoli STYLOM zastavená. Prehliadače túto značku ešte dokažu rozpoznať,ale už je naozaj málo od toho aby bola uplne zastavená. Preto sa radšej typ,farbu,veľkosť naučte definovať kaskadovymi stylami-kapitola 6. Aj keď je to oveľa lepšie použiť kaskadove styly,je to aj viac náročnejšie ale to až neskôr,keďže sme ešte len začiatočnini a prv sa chceme naučit HTML. Samozrejme bude podrbný tutoriál prípadne len poznatky aj k grafike a stylom.
Táto kapitola vám predstaví niekoľko dôležitých značiek pre formatovanie textu podľa spôsobu ich použitia. V kapitole 2 sme spoznali značku <p> pre normalne odstavce,ale existuje ešte veľa ďalších značiek použivaných pre nadpisi,zdrojový kod,citáciu… Vätšina značiek ktoré sa v tejto kapitole naučime sú POPISNÉ ZNAČKY,zvané aj LOGICKÉ ZNAČKY: Popisujú skor význam textu než príkazy pre jeho formatovanie. Taká značka <h1> (parova) určuje že text obalený touto značkou bude formatovaný ako hlavný nadpis,no nevraví už nić viac o jeho význame.
Odlišnosti formatovania pomocou popisních značiek majú niekoľko dôvodov:
- Webový prehliadač použitý pre zobrazenie stránky. Každý webový prehliadač má určené hodnoty pre standardne značky HTML
V Internet Explorer (aj ostané prehliadače) je <h1> zarovná v ľavo a použiva typ písma Times New Roman. Vätšina prehliadačov používa rovnaké hodnoty,ale napr mobily,či zariadenia PDA zobrazuju text veľmi odlišne. - Individualne nastavenie uživateľa. Každý uživateľ si môže svoj webový prehliadač prispôsobiť tak aby vyhovoval jeho požiadavkam. Preto môžu nastať odlišnosti medzi stránkou zo základnimi hodnotami a hodnotami zmenené uživateľom
- Styly. Je možne použiť vlastné fonty,teda zobrazenie textov. Môžte vybrať rodinu pisma,ktorú prehliadač použije pre zobrazenie obsahu určitých značiek.
Nezabúdajte že v každom prehliadači sa formatovanie môže,no nemusí zobraziť rovnako. Preto nezabúdajte svoj prehliadač vždy keď je možné aktualizovať pomocou určeného UPDATU
Vytváranie nadpisov
Pri rozdelení textu na časti sa na webových stránkach používajú rovnako ako u dokumentov nadpisy. HTML definuje šesť úrovni nadpisov. Značky nadpisov definujeme značkami:
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>
Kde <h1> je najvätší nadpis a <h6> je najmänší.
U značiek nadpisov neexistuje žiadna presna hondota veľkosti. Ich vzhľad sa líši v zavislosti na prehliadači a jeho nastavení.
Prehliadač:
http://www.pocitacovyexpert.6f.sk/ukazky/nadpisy.html
Možno ste si všimli že úrovne 5 a 6 sú dokonca menšie než text tela dokumentu. Z toho dôvodu veľa webových designérov značky h5 a h6 nepoúživajú. Nezabúdajte však že vy si zobrazenie takýchto nadpisov môžte upraviť podľa svojho uváženia. Najmänšie nadpisy však ôžte používať ako slogany,alebo motta.
Úloha
1. Otvoríme si náš index.html ( ak nemáte tak si ho stiahnite TU)
2. Hneď pod značku <body> napíšte nasledujúce:
<h1>New York - Brána do Nového sveta</h1>
3. Uložte a aktualizujte okno prehliadača. (F5)
Použitie tučného písma a kurzivy
Tučne písmo a kurziva su dve spôsoby zvýraznenia textu. Použiť ich môžte kdekoľvek,na označenie dôležitejšieho textu atď.
Pre tučne písmo použivame párovu značku
<b>
Pre kurzivu použivame párovu značku
<i>
Príklad:
<p>Na párty som sa <i>výborne</i> bavil.</p> <p>Z párty som <b>odišiel</b> pred polnocou.</p>
Výsledok:
Na párty som sa výborne bavil.
Z párty som odišiel pred polnocou.
Je možne použiť tučne+kurziva naraz,ale musíte to napísať správne. Značky sa nemôžu tzv. krížiť.
Príklad:
Správne
Už čoskoro navštivim krásne veľkomesto <b><i>New York City</i></b>
Výsledok:
Už čoskoro navštivim krásne veľkomesto New York City
Nesprávne
Už čoskoro navštivim krásne veľkomesto <b><i>New York City</b></i>
Prehliadač to môže akceptovať,ale takto sa to nemá používať. V XHTML to ale je nepríspustné.
Úloha:
1. Otvoríme si náš index.html
2. Nájdeme si
<p>Vítajte na FAN stránke o meste New York. Dúfame že sa vám naša stránka bude páčiť.</p>
(unas to je na 12 riadku) a upravime ho do tučneho písma tak,že pred odseky <p> a </p> pridáme <b> a </b>:
<p><b>Vítajte na FAN stránke o meste New York. Dúfame že sa vám naša stránka bude páčiť.</b></p>
3. Nájdeme si
<p>Základné údaje<br />
a zmeníme ho na tučné písmi a kurzivu tak,že pred <p> pridáme značky <b> a <i> a pred <br /> to uzavrieme značkamy </i> a </b> takto:
<p><b><i>Základné údaje</i></b><br />
4.Uložíme a výsledok:
Dbajte na to aby sa vaše znaćky nekrižovali. To znamená,že ak sa kod začína značkou <b> a pred nim bude <i> tak uzatvorime to najprv </i> a až potom </b> a taktiež naopak. Ak bude prvá značka <i> a pred nim <b> tak ukončíme to </b> a potom </i>
Horný a dolný index
Párove značky
Horný index znamená že sa text zmenší a posunie ho NAD tzv, základnu linku. Ak vám to nič nevravý,tak tento horní index sa používa často pri rovniciach v matematike,napr. 2x+1
Dolný index znamená že text sa zmenší a posunie ho POD základnu linku. Využíva sa napr. pri chemických vzorcoch napr. C3H6O čo inak znamená Acetón.
Dolný a horný index v našej stránke používať nebudeme,uvidiem len značky a príklad.
Značka pre horný index je:
<sub> </sub>
Značka pre dolný index je
<sup> </sup>
Príklad:
1. Vytvoríme si prázdny html dokument napr. z názvom hdindex.html a vložíme don toto:
Horny index <br /> 1l = 1dm<sup>3</sup> <br /> <br /> Dolny index <br /> Kyselina sirova - H<sub>2</sub>SO<sub>4</sub>
2. Uložíme a prezrieme si výsledok
http://www.pocitacovyexpert.6f.sk/ukazky/hdindex.html
Formátovanie citácie
Na webových stránkach ale aj v časopisov je pri citacii textu z iného zdroja zvykom odlišiť bloky od hlavnej časti textu. Presne toto dokáže značka
<blockquote>
Môžme ju použiť nelen pri citacii textu,ale aj pre akýkoľvek iný text ktorý chceme odlišiť.
Značka <blockquote> obsahuje parameter
cite="URL"
,ale vätšina prehliadačov snim nepracuje. Pokiaľ ale budete poznať URL citovaneho zdroja,je dobrým zvykom vložiť ho do tejto značky pre prípad,že by nejaký prehliadač mohol tento parameter podporovať a pre pomoc,keby niekto v buducnosti chcel váš KOD upravovať.
Ukážeme si príklad na architektúre mesta New York:
1. Vytvoríme si html dokument pod názvom architekturany.html
Štruktura dokumentu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> </body> </html>
2. Nájdeme si nejaký text na Wikipedia.sk o architektúre NY
http://sk.wikipedia.org/wiki/New_York_(mesto)#Architekt.C3.BAra
3. Pod <body> vložíme nasledovne:
Text Architektúra NY z Wikipedia.sk uzavrieme do značky <h4>
<h4>Architektúra NY z Wikipedia.sk</h4>
4. Pod vložíme nejaký text ktorý skopírujeme z Wikipedia a uzavrieme ho do značky <p>
<p>Charakteristickým znakom New Yorku je nesmierne množstvo mrakodrapov, predovšetkým na Manhattane. V New Yorku sa nachádza asi 5 600 mrakodrapov a 48 z nich má viac ako 200 m, čo je najviac na svete. Najvyšší počet mrakodrapov na svete, či už kancelárskych alebo obytných, je daný predovšetkým vysokou hustotou zaľudnenia, obmedzenou rozlohou dostupných pozemkov a teda ich vysokou cenou. V New Yorku sa nachádzajú výrazné budovy mnohých architektonických štýlov. Woolworth Building (1913) postavená v novogotickom štýle s masívnymi prvkami gotickej architektúry, ktoré sú rozpoznateľné z ulice, ktorá je o desiatky metrov nižšie. Zákon z roku 1916 obmedzil výšku mrakodrapov v závislosti na veľkosti stavebnej parcely, aby slnečný svit dosiahol na ulice. Typickým zástupcom štýlu Art Deco je Chrysler Building (1930) so svojou charakteristickou zužujúcou sa špičkou. Mnohí architekti a historici považujú Chrysler Building za architektonicky najhodnotnejší mrakodrap v meste. Medzinárodný štýl reprezentuje Seagram Building (1957). Condé Nast Building (2000) je zástupcom energeticky efektívnych budov. Pre obytné oblasti sú typické honosné radové domy postavené z hnedého pieskovca, ale aj omšelé bytové domy postavené v období najväčšieho rozvoja mesta medzi rokmi 1870 a 1930. Najpoužívanejšími stavebnými materiálmi sú od veľkého požiaru v roku 1835 kameň a tehly. Stavebné materiály neboli, ako v prípade Paríža, ťažené priamo z podložia mesta, ale boli dovážané z rôznych vzdialených kameňolomov a teda majú odlišné odtiene.. Špecifikom New Yorku je veľké množstvo drevených vodných nádrží umiestnených na strechách. Ich inštalácia bola vyžadovaná u budov majúcich viac ako šesť poschodí, aby mohol byť obmedzený tlak vody vo vodovodoch, ktoré by vysokým tlakom mohli byť poškodené. V 20. rokoch sa do módy dostalo bývanie v domoch v odľahlých oblastiach mesta vybudovaných na základe ideí hnutia Garden city movement, napríklad na Jackson Heights v Queense, ktoré sa stali dostupnými vďaka výstavbe metra.</p>
5. Teraz prichádza čas na pridanie značky <blockquote> s parametrom. Takže pridáme to tam tak,že pred <p> pridáme:
<blockquote cite="http://sk.wikipedia.org/wiki/New_York_(mesto)#Architekt.C3.BAra">
6. Ukončime to značkou </blockquote> ktorú vložíme na koniec za značku </p>
7. Uložíme a uvidíme výsledok
http://www.pocitacovyexpert.6f.sk/ukazky/architekturany.html
Sme na konci našej už 3 kapitoly. Dúfam že ste sa niečo naučili. V 4 kapitole sa naučíme:
- Vytvárať usporiadané a neusporiadané zoznamy
- Vytvárať definične výčty
- Vkládať špecialne znaky
- Vkladať vodorovné čiary
- Vytvarať pozadie pomocou vybranej farby
- Vytvárať pozadie za pomoci obrázka