---

Jak psát články a příspěvky bez znalosti HTML

Surfujete po internetu a kdekoli narazíte na něco zajímavého, chcete se aktivně zapojit ať už diskusí, komentářem nebo návštěvní knihou? Nebo chcete na svém oblíbeném webu poblikovat své články? A formuláře pro vkládání podporují značkovací jazyk HTML (popř. XHTML)? Pak právě vám by měl být souzen tento článek, který by vás měl naučit jak naformátovat váš text podle vašich představ a pomocí základních prvků (X)HTML.

Tučný text

Pokud do formuláře zapíšete kód zapsaný hned pod tímto textem, dostanete písmo s tučným stylem:

Takto vypadá <b>tučné písmo</b> v textu.

Výsledek: Takto vypadá tučné písmo v textu.

Jak jste si asi sami všimli, tučné písmo je ze stran uzavřeno prvky <b> a </b>. Těmto prvkům se dohromady říká párový tag, který je zajímavý tím že se skládá ze dvou částí a text uzavřen mezi němi je vždy tučný. Důležité je, aby jste vždy nezapomněli zapsat obě dvě části.

Následující dvě ukázky se chovají velmi podobně jako tento párový tag, takže už se u nich nebudeme moc dlouho zdržovat.

Kurzíva

Zápis pomocí HTML:

Takto vypadá <i>kurzíva</i> v textu.

Výsledek: Takto vypadá kurzíva v textu.

Podtržený text

Zápis pomocí HTML:

Takto vypadá <u>podtržený text</u> v textu.

Tak to bychom měli velice stručně probráno formátování textu. Nyní se pustíme do vytváření hypertextových odkazů.

Hypertextové odkazy

Pokud chcete například v knize návštěv vytvořit odkaz na svoji stránku, mohlo by to vypadat takto:

Navštivte moje <a href="http://www.mestranky.cz" title="Odkaz na mé stránky">stránky</a> o počítačových hrách.

Výsledek: Navštivte moje stránky o počítačových hrách.

Zde se jedná znovu o párový tag, akorát nám zde přibyly dva nové atributy href a title . Atribut href obsahuje internetovou adresu stránky a musí vždy začínat na http:// . Atribut title obsahuje text, který by měl stručně charakterizovat kam odkaz návštěvníky zavede.

Odkaz na e-mailovou adresu

Podobně jako hypertextový odkaz funguje i odkaz na e-mailou adresu:

Napište mi na <a href="mailto:muj@email.cz" title="Má e-mailová adresa">muj@email.cz</a> a uvidíme.

Výsledek: Napište mi na muj@email.cz a uvidíme.

Jak vidíte, je to málem to samé jako odkaz na stránku, akorát se do atributu href na začátek píše mailto: , po kterém následuje e-mailová adresa.

Nadpisy

Nadpisy se znovu značí párovým tagem, který objímá text nadpisu:

<h1>Nadpis 1. urovně</h1>
<h2>Nadpis 2. urovně</h2>
<h3>Nadpis 3. urovně</h3>
<h4>Nadpis 4. urovně</h4>
<h5>Nadpis 5. urovně</h5>
<h6>Nadpis 6. urovně</h6>


Jak vidíte, můžeme vytvářet nadpisy různé úrovně, kde h1 se staví nejvýše a h6 nejníže. Měli byjste dodržovat posloupnost textu a s ním i správně používat různé na sobě navazující úrovně nadpisů.

Odstavce

Odstavce se také vytváří pomocí párového tagu:

<p>Text prvního odstavce...</p>
<p>Text následujícího odstavce...</p>

Zde není snad co vysvětlovat, snad jenom to, že pokud používáte odstavce, měl by se v něm nacházet všechen text až na pár vyjímek jako jsou seznamy uvedené níže... Jednoduše žádný text by se neměl nacházet mimo nich.

Nesetříděný (nečíslovaný) seznam

Tento kód už je od předchozích příkladů napohled trošku složitější, ale doopravdy je to lehké:

<ul>
<li>První položka seznamu</li>
<li>Druhá položka seznamu</li>
<li>další položky</li>
</ul>

Výsledek:

• První položka seznamu
• Druhá položka seznamu
• další položky

Seznam by se nikdy neměl vpisovat do odstavců (měl by vždy stát mimo párový tag <p> )

Setříděný (číslovaný) seznam

Je to velmi podobné jako předcházející typ seznamu:

<ol>
<li>První položka seznamu</li>
<li>Druhá položka seznamu</li>
<li>další položky</li>
</ol>

Výsledek:

1. První položka seznamu
2. Druhá položka seznamu
3. další položky

Jak u předchozího seznamu i tento by se neměl vpisovat do odstavce a měl by se nacházet mimo něj.

Shrnutí

To jsou zákládní (X)HTML prvky, které by jste mohli aplikovat na vámi psaný text. Důležité je však vědět, jestli je můžete do formulářů vkládat (většinou u nich bývá upozornění jestli můžete vkládat HTML). Pokud se u nich nic o formátování textu nenachází, zbývá to jenom zkusit nebo je nepoužívat...

20.8.2005