HTML

Malá pomůcka pro ty, kteří chtějí ve svém příspěvku použít Blok „Vlastní HTML“ Někdy není vyhnutí a je nutné vytvořit vlastní blok pomocí HTML, protože to zkrátka v nabídce bloků nebo zkrácených kódů neexistuje.

Tvořit HTML pokud se necvičíme téměř denně, není věc jednoduchá. Pro začínajícího a mírně pokročilého doporučuji použít některý z generátorů kódu HTML typu WYSIWYG neboli „Co vidíte 👀, to dostanete 🎁“ . Mně se osvědčil starý dobrý FrontPage od MS. Je to už dědeček starý. Narodil se v roce 2003, ale je v některých záležitostech nepřekonaný. Možná, že Vám bude milejší Expression Web rovně od MS. Je to novější podoba FrontPage. Mám to sice nainstalované, ale jsem věrný dědečkovi. Oba programy pracují spolehlivě na Windows 10, s „jedenáctkami“ jsem to zatím nezkoušel. Komu se do instalace z nějakých důvodů nechce nebo nepoužívá operační systém Windows může pracovat s online editory Mě se líbí editor https://wysiwyghtml.com/.

Určitě jste si všimli, že editory FrontPage a Expression Web jsou k dispozici ke stažení ze stránek JAKPSATVEB. Tam naleznete mnoho užitečného a hlavně HTML příručku.

Tady je nabídka toho nejzákladnějšího pro práci s textem a několik drobných pomůcek, které se mi osvědčily:

Úvodní blok s textem a iniciálou – kapitálkou – příklad

oto je ukázka použití bloku s iniciálou vytvořeného pomocí HTML. Iniciálu s obtékaným textem jsem se pokoušel udělat různými způsoby, ale jen tento umí zobrazit iniciály i na mobilu.

<p>
<img border="0" src="URL obrázku" width="94" height="116" align="left">vložte text odstavce
</p>

Několik tagů pro úpravu textu

Tučné písmo v libovolném textu

<b> Tučné písmo </b>

Kurziva – šikmé písmo v libovolném textu

<i> Kurziva - šikmé písmo </i>

Barevné písmo tady modré a ještě tučné tady žluté a kurziva a tady červené obyč

<font color="blue"><b> tady modré a tučné</b></font>

<font color="yellow"><i> žluté a kurziva</i></font>

<font color="red">červené obyč</font>

Atribut barvy: white, yellow, fuchsia, aqua, red, lime, blue, black, green, maroon, olive, purple, gray, navy, teal, silver

Velikost písma

zvětšit písmo tady to je velikost 5 a také tučné a modré

<font size="5"color="blue"><b>tady to je velikost 5 a také tučné a modré</b> </font>

Javascriptová událost, která se spouští při kliknutí levým tlačítkem myši na určitý element.

Když kliknete na tu šipčičku na konci komentáře, otevře se vám okno v levém rohu, kde můžete mít např. fotku k danému textu, webovou stránku, dokument pdf apod. Doplníte v místě textu URL CO CHCETE ZOBRAZIT dvakrát adresu toho, co chcete zobrazit a zadáte rozměr okna ve kterém se to zobrazí. Např. jako v našem příkladu : width=813,height=573:

Hokejisté na Libočáku v roce 1933. Foto od pana Jana Císaře. Na fotce je jeho otec s přáteli. Nepoznáváte někoho?

<a onclick="window.open('URL CO CHCETE ZOBRAZIT','_blank','width=813,height=573,scrollbars=yes,top=0,left=0'); return false" href="URL CO CHCETE ZOBRAZIT"><IMG border=0 
src="https://www.periferieprahy.cz/blog/wp-content/uploads/2025/01/zobraz_blue.png" 
width=16 height=11></a>

To samé zobrazení v novém okně s definovaným umístěním a rozměry lze vyvolat obvyklým odkazem:

Hokejisté na Libočáku v roce 1933. Foto od pana Jana Císaře. Na fotce je jeho otec s přáteli. Nepoznáváte někoho?

<a onclick="window.open('URL CO CHCETE ZOBRAZIT','_blank','width=813,height=573,scrollbars=yes,top=0,left=0'); return false" URL CO CHCETE ZOBRAZIT">UVEĎTE TEXT HYPERTEXTOVÉHO ODKAZU</a>

Skrytý text

někdy potřebujete, aby text byl na stránce neviditelný, ale aby ho vyhledávače ve výsledku vyhledání mohly prohledat i zobrazit. Tady použijte:

Máme nějaký text<span style="visibility: hidden"><font size="1">TADY TENTO TEXT NEBUDE NA STRÁNCE VIDITELNÝ, ALE VYHLEDÁVAČE HO VE VYHLEDÁNÍ MOHOU ZOBRAZIT </font></span>..viditelný text pokračuje.

A takhle to vypadá v bloku HTML. Je to jako když text vygumujete – zůstává po něm mezera:

Máme nějaký textTADY TENTO TEXT NEBUDE NA STRÁNCE VIDITELNÝ, ALE VYHLEDÁVAČE HO VE VYHLEDÁNÍ MOHOU ZOBRAZIT ..viditelný text pokračuje.

Pokud chcete, aby text plynule navazoval použijte style=“display: none“:

Máme nějaký text<span style="display: none"><font size="1">TADY TENTO TEXT NEBUDE NA STRÁNCE VIDITELNÝ, ALE VYHLEDÁVAČE HO VE VYHLEDÁNÍ MOHOU ZOBRAZIT </font></span>..viditelný text pokračuje.

Výsledek pomocí bloku HTML:

Máme nějaký text..viditelný text pokračuje.