Photoshop tutorial: Ako vytvoriť odlesk na tlačítko [video]
mar 3, 2012
Návod ako vytvoriť pútavú prezentáciu [video]
mar 13, 2012
V prvej časti sme sa oboznámili s možnosťami vytvorenia vlastnej webovej stránky. Rozhodli sme sa samozrejme pre písanie kódu úplne od základov. Vieme, ako musí vyzerať dokument, ako má byť uložený, tak po krátkom zhrnutí prejdeme na zadávanie samotného textu a jeho prvé jednoduché úpravy. Na konci článku je video, kde zhrniem všetko, čo sa dnes naučíme.
Zhrnutie 1 časti
Vieme, že ukladáme prvú stránku dokumentu ako index.html. Rovnako je nám jasné, že každý dokument musí mať začiatok a koniec označený <html></html>.Medzi nimi je hlavička <head></head>, do nej sa píšu veci, ktoré nebudú zobrazené priamo na stránke a to napríklad: názov stránky, meno autora, popis stránky s kľúčovými slovami alebo rôzne príkazy pre prehliadače. K tomuto všetkému sa dostaneme neskôr. Použili sme zatiaľ len názov stránky <title></title>. To nám stačí a môžeme prejsť do časti telo <body></body>. Do neho sme si už zapísali úplne jednoduchý text. Čo ale ak chceme napísať niečo a veľkosťou to odlíšiť.
Najjednoduchšie zadávanie názvu je cez párový tag <h1> až <h6>. Ich veľkosť je predformátovaná, takže ju nemusíme manuálne nastavovať (aj keď prispôsobenie je možné – ukážeme neskôr v css).
Zápis:
<h1>Nadpis 1. úrovne</h1> <h2>Nadpis 2. úrovne</h2> <h3>Nadpis 3. úrovne</h3> <h4>Nadpis 4. úrovne</h4> <h5>Nadpis 5. úrovne</h5> <h6>Nadpis 6. úrovne</h6>
Výsledok:
Nadpis 1. úrovne
Nadpis 2. úrovne
Nadpis 3. úrovne
Nadpis 4. úrovne
Nadpis 5. úrovne
Nadpis 6. úrovne
Máme nadpis, potrebujeme ďalej zadávať text. Aby sme v tom nemali neporiadok, text sa zadáva do značiek <span>Váš ľubovoľný text</span>. Ide o párový tag, ktorý nijako neformátuje text. Takže keď ho zadáte, zobrazenie textu sa nijako nezmení. Článok by však mal nejako vyzerať. Pekný vzhľad a hlavne lepšiu čitateľnosť dosiahneme, keď text rozdelíme do odstavcov.
Odstavec zapisujeme párovým tagom <p>. Medzi dvoma odstavcami je medzera jedného riadka, takže to plní funkciu ako enter vo worde.
Zápis:
<p>Píšem môj prvý odstavec na vlastnej webovej stránke</p> <p>Toto je môj druhý odstavec, pekne odsadený od prvého</p> <p>Pokojne píšte ďalej a viac, nech vidíte ako sa text správa</p>
Ak chcete pokračovať v texte v novom riadku, použite nepárový tag <br>. Je možné ich použiť aj viackrát za sebou. Každý tag <br> vám odsadí nasledujúci text o riadok nižšie, takže pre odsek jedného riadka použijete <br> dvakrát, pre odsek až o dva riadky použiť <br> trikrát. Avšak takýto spôsob sa neodporúča, pretože je lepšie použiť predchádzajúci párový tag <p>.
Zápis:
Pokračovanie v novom riadku<br> a pritom kód bude v jednom
Výsledok:
Pokračovanie v novom riadku
a pritom kód bude v jednom
Tučné a kurzíva
Ak je niektoré slovo v odstavci dôležité a chcete ho zviditeľnisť napíšte ho tučným, alebo kurzívou, alebo to kombinujte.
Zápis:
<b>Tučné písmo</b><br> <i>Kurzíva</i><br> <b><i>Tučné a naklonené</i><b>
Výsledok:
Tučné písmo
Kurzíva
Tučné a naklonené
Prečiarknuté a podčiarknuté
Zápis:
<u>Podčiarknuté</u><br> <s>Prečiarknuté</s><br> <strike>Prečiarknuté môžete zapísať aj ako strike</strike>
Výsledok:
Podčiarknuté
Prečiarknuté
Prečiarknuté môžete zapísať aj ako strike
Jednoduchá zmena veľkosti
Ak chceme v texte zvýrazniť niektoré písmo veľkými alebo malými písmenami urobíme tak cez tieto dva párové tagy. Použiť sa dajú aj priamo v jednom riadnu. Takže jedno písmeno môže byť veľké, druhé malé. Nijako to neovplyvní veľkosť riadku, akurát sa prispôsobí, tomu najväčšiemu písmu.
Zápis:
<small>Malý text</small><br> <big>Veľký text</big>
Výsledok:
Malý text
Veľký text
Veľkosť písma však môžete definovať aj svoju vlastnú a to tak, že do párového kódu <font> napíšete veľkosť v rozmedzí od 1 – 7 pričom 1 je najmenšia hodnota. Zapisovanie veľkosti je možné vo viacerých jednotkách alebo slovom. My zatiaľ ostaneme pri tomto zápise. (ukážku ako to funguje v % či pixeloch si ukážeme neskôr v CSS)
Zápis:
<font size="1">Tento text bude napísaný veľkosťou 1.</font><br> <font size="5">Tento text bude napísaný veľkosťou 3.</font><br> <font size="6">Tento text bude napísaný veľkosťou 5.</font><br> <font size="7">Tento text bude napísaný veľkosťou 7.</font>
Výsledok:
Tento text bude napísaný veľkosťou 1.
Tento text bude napísaný veľkosťou 3.
Tento text bude napísaný veľkosťou 5.
Tento text bude napísaný veľkosťou 7.
Farba písma
Do párového kódu <font> sa zapisujú aj ďalšie informácie a to farba a typ písma. Farba sa vkladá rovnako ako veľkosť do začiatočnej značky. Farba sa najčastejšie zapisuje buď slovíčkom po anglicky: red, green, blue… alebo šestnástkovým zápisom #FF0000, kde má každá farba svoj špecifický kód.
Zápis:
<font color="red">Tento text bude červený</font> a tento zas normálny.<br> Modrá farba sa dá zapísať <font color="#0000FF">aj takto.</font>
Výsledok:
Tento text bude červený a tento zas normálny.
Modrá farba sa dá zapísať aj takto.
Typ písma
Typ písma vyberajte z podporovaných fontov, pretože sa inak môže stať, že nastane pri zobrazení problém. Hlavných 12 základných písmen, ktoré rozozná každý počítač je: arial, arial black, comic sans ms, courier, courier new, georgia, helvetica, impact, palatino, times new roman, trebuchet ms, verdana. Nezabúdajte, že môžete veci v tagu <font> kombinovať. V jednom kóde, môžu byť všetky tri veci: veľkosť, farba aj typ.
Zápis:
<font size="5" color="red" face="impact">Skuska textu IMPACT červený</font><br> <font size="5" color="blue" face="arial black">Skuska textu ARIAL BLACK v modrej</font> <font size="5" color="#008000" face="verdana">Skuska textu Verdana zelená</font>
Výsledok:
Skuska textu IMPACT červený
Skuska textu ARIAL BLACK v modrej
Skuska textu Verdana zelená
Video zhrnutie:
Tak dúfam, že ste sa naučili niečo nové. Precvičíme si to spolu vo videu a nabudúce si ukážeme niečo ďalšie. Ak chcete pozrieť ako vyzerá vždy aktuálna html ukážka k poslednému článku, sledujte html.endy.sk.
