HOME    SKRIPTY
3. díl seriálu o HTML - Práce s textem
Alpin | 31. května 2007

V minulých 2 dílech jsme se zabývali úplnými základy, jako je zařízení web hostingu, vytvořili jsme si mini webovou stránku a také jak má vypadat kostra HTML souboru.

V tomto díle si něco řekneme o členění textů a výběru fontu.
 
Doporučené nástroje pro tvorbu webu budou tyto:

Notepad  - psaní zdrojáků
Explorer - prohlížeč
Total Commander - FTP připojení

Nástroje typu Front Page a jim podobné nebudeme používat!

3.1 Členění textů


3.1.1 Odstavce

<P> První odstavec <P> Druhý odstavec <P> Třetí odstavec </P>
K zobrazení odstavců se používá tag <P>.

3.1.2 Lámaní řádků

Dalším důležitým tagem je <BR>, který zajišťuje lámaní řádků, neboť psaný text:

První řádek.
Druhý řádek.
Třetí řádek.

Napsaný ve zdrojáků se zobrazí do jednoho řádků, tedy:
První řádek. Druhý řádek. Třetí řádek.
Takže vždy na konci řádku musíme přidat <BR>.

První řádek. <BR>
Druhý řádek.<BR>
Třetí řádek.<BR>

3.1.3 Nadpisy

Pro psaní nadpisu máme tag <Hx>, přičemž x= {1,2,3,4,5,6}. Největší nadpisem je H1 a nejmenší je H6. 

<H1>Největší nadpis</H1>
<H6>Nejmenší nadpis</H6>

3.1.4 Názorný příklad

Zdrojový kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <HEAD>
      <TITLE> MOJE PRVNI STRANKA</TITLE>
   </HEAD>
<BODY>
<P> První odstavec <P> Druhý odstavec <P> Třetí odstavec </P>
První řádek. <BR>
Druhý řádek.<BR>
Třetí řádek.<BR>
<H1>Největší nadpis</H1>
<H6>Nejmenší nadpis</H6>
</BODY>
</HTML>

Výsledek:

HTML


Na tomto obrázku vidíme, jak vypadají odstavce, lámaní řádků a různé velikosti nadpisu.

3.2 Typy písma

3.2.1 Operace s texty


Standardně jsou nastavené fonty TIMES NEW ROMAN o velikosti 12, ale pokud se nám nelibí tyto parametry, pak můžeme v našem webu udělat mini pořádek, kde nastavíme vlastní fonty atd..

<FONT SIZE=" 7 " COLOR="BLACK" FACE="Arial">MUJ TEXT</FONT>

COLOR- udává barvu písma.
FACE- udává font, v tomto případě jde o ARIAL, ale můžeme to samozřejmě změnit třeba na Comic Sans MS atd….
SIZE- udává velikost písma v pixelech

Pokud chceme mít tučné, kurzivou nebo podtržené texty, tak použijeme tyto tagy:

<B>text </B> - tučný text
<i> text </i> - kurzíva
<u>text </u> - podtržený text

V kombinaci s fontem Arial:

<FONT SIZE=" 7 " COLOR="BLACK" FACE="Arial"> <B>MUJ TEXT </B></FONT>

<FONT SIZE=" 7 " COLOR="BLACK" FACE="Arial"> <i>MUJ TEXT</i> </FONT>

<FONT SIZE=" 7 " COLOR="BLACK" FACE="Arial"> <u>MUJ TEXT </u></FONT>

3.2.2 Mini fígl s textem

Pokud jste líní psát text a po každé ho upravovat různými <BR> a nastavovat správné fonty, pak je tady mini fígl, tedy přesněji tag, který vám usnadní práci.

Příklad:


Takto psaný text v NOTEPADu způsobí, že celý text nebude mít žádné úpravy a bude to strašlivý humbuk. Proto je tady tag <PRE>…</PRE>, který vám ušetří mnoho práce s psaní <BR> na konci každého řádků a samozřejmě automatický nastaví příslušné fonty (v tomto případě to bude Lucida Console o velikosti 10 pixel, která je defaultně nastavena v NOTEPADu), stačí napsat text jak chcete a máte to
<PRE>
1. Mars City
Hra začíná v hangáru, odtud se dejte po schodech nahoru a běžte ke dveřím. Nejdříve musíte projí bioscanem, takže se postavte na červený čtverec na podlaze a čekejte pokynu. Po skončení kontroly pokračujte dveřmi, pak běžte na recepci, kde dostanete PDA. Odtud pokračujte dále, nelze se tady ztratit, většina dveří je zamčená, takže první vaši zástavkou bude Marine Command HQ, při cestě si poslechnete rozhovor, až dorazíte na velitelství, tak dostanete úkol od Kellyho.

Vašim úkolem je najít ztraceného vědce, Dr. Ishii, ihned se aktivuje pavoučí robot, ten vás zavede poblíž určeného místa, pak vstupte neprozkoumanými dveřmi dovnitř. </PRE>

4. Závěr

Tak tolik tedy k operaci s textem, jejich samozřejmě více, ale tady jsem popsal úplné základy, které je nutné znát.

A nyní už jen finální ukázka:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
   <HEAD>
      <TITLE> MOJE PRVNI STRANKA</TITLE>
   </HEAD>
<BODY>
<PRE>
Autor textu : Anh Hai Le "Dark Angel" (haianh@seznam.cz)

Napsáno exkluzivně pro www.cheater.cz - všechna práva vyhrazena.
K uveřejnění potřebujete náš souhlas - pište na scorpions@seznam.cz. </PRE>

<H3>DOOM 3</H3>

<H4>1. Mars City</H4>
Hra začíná v hangáru, odtud se dejte po schodech nahoru a běžte ke dveřím. Nejdříve musíte projí bioscanem, takže se postavte na červený čtverec na podlaze a čekejte pokynu. Po skončení kontroly pokračujte dveřmi, pak běžte na recepci, kde dostanete PDA. Odtud pokračujte dále, nelze se tady tratit, většina dveří je uzamčená, takže první vaši zástavkou bude Marine Command HQ, při cestě si poslechnete rozhovor, až dorazíte na velitelství, tak dostanete úkol od Kellyho.<BR>
<BR>
Vašim úkolem je najít ztraceného vědce, Dr. Ishii, ihned se aktivuje pavoučí robot, ten vás zavede poblíž určeného místa, pak vstupte neprozkoumanými dveřmi dovnitř.

<H4>2. Mars City Undergrounds</H4>

Uvnitř vám řekne voják za sklem, abyste si vzali vybavení, dostanete pistoli a brnění. Pak se dejte k zamčeným dveřím, čekejte dokud vám ho neotevře.

<P>Odtud pak po schodech dolů, přes dveře Convergence chamber -1 a Convergence chamber -2, tam najdete cizí PDA obsahující kód 531 k muniční skříní. Pokračujte dále, dokud nedorazíte ke dveřím s panelem, tam klikněte na Cycle airlock a otevře se vám dveře, uvnitř je opět další panel a opět klikněte na Cycle airlock, čímž se otevře dveře a dostanete se na povrch Marsu.

</BODY>
</HTML>

Výsledek:


Špatný výsledek:

A v případě, že byste neprováděli formátovaní textu, tedy nepoužívali tagy <BR>, <P> atd…, pak odměnou pro vás bude toto:

HTML


A to doufám určitě nechcete :o).