HTML a CSS perličky
Pro pochopení perliček se předpokládá alespoň částečná znalost HTML a CSS.
Kódy zde uváděné jako perličky byly skutečně nalezeny na CB internetových stránkách,
některé hrůzy zde uvedené již byly naštěstí odstraněny.
Je milým faktem, že mnohá díla nadšených autorů CB stránek jsou lepší, než stránky některých státních institucí, například
ČSSZ
jsou svou na nízké úrovni, přitom nejhorší na tom je,
že tato „práce“ je náležitě zaplacena z našich daní.
Nelze tady vystavit celé stránky, nebo psát „najdete to na stránce neco.nekde.cz/soubor html,
na nn řádku, od xx po mm řádek, xy znak“. Tak jsem kód jen zkopíroval, někdy upravil.
Při úpravách jsou pozměněny jména souborů, míry, barvy, při zkrácení je vypuštěn kód,
který je pro ukázku nadbytečný a text je též zaměněn, pokud původní text není pro ukázku nutný.
Složitější konstrukce tabulkového designu, jako „tabulka v tabulce tabulky“ tady nejsou,
přestože by si zasloužily tři hvězdičky „za jakost“.
A pro ty, co mi to chtějí oplatit, připomínám rčení: „Kovářova kobyla chodí bosa“!
Subjektivní hodnocení „jakosti“ perly je od jedné do pěti hvězdiček.
Malé perličky jsou ohodnoceny jednou hvězdičkou, největší pravé perly pěti hvězdičkami.
Do dvou hvězdiček jde o téměř neškodné záležitosti, které spíše pobaví.
Tři a více hvězdiček je hodnocení za významné zbytečné zvětšení objemu stahovaných dat,
hrubé porušení HTML syntaxe a též „za jakost“. „Jakostí“ mám na mysli HTML kód,
který je zcela vyjímečný a originální.
Důrazně nedoporučuji použití takových kódů, které mají tři a více hvězdiček,
ale i ty méně bodované raději nepoužívejte.
Pokud bude mezi čtenáři o toto téma zájem,
můžu článek doplnit například o výklad nebo zdůvodnění ohodnocení.!
radekhrabuvka@volny.cz
HTML perličky
- Centrované vystředíme **
- <CENTER>
…text, text…
<center>
…text, text…
</center>
…text, text…
</CENTER>
- Odkaz do „Not Found“ *
- <a href=&#8221; http://cb.penguin.cz/view.php?cisloclanku=2004030201&#8221;>Text</a>
- Odkaz pouze pro Ohnivou lišku, ale panda „target:=“ nežere ***
- <a href:="http://beta.mapy.cz/" target:="_blank">http://beta.mapy.cz/</a>
- Propašováno do HTML **
- <BR />
- Správné kódování je důležité ****
- <meta content="text/html; charset=iso-8859-2" http-equiv="content-type">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
- Font pro kočku *
- <FONT face="MS Serif" size=2></FONT>
- Hezký nadpis ***
- <font face="BATAVIA" size="5">SHŠ</font>
- Drobná poznámka *
- <font size="-1"><!--msthemelist--></font>
- Na vodorovnou čáru Arial *
- <FONT face=Arial color=#000000 size=2><HR color=#ff0000 SIZE=20>
- Miluji Arial, Arial, Arial… *
- <font face="Arial, Arial, Helvetica">
- Tučná mezera *
- <B> </B>
- Tučné odřádkování *
- <B><BR></B>
- Velká mezera **
-
- Centrovaná tvrdá mezera **
- <p align="center"> </p>
- Odstavec nabitý informacemi *
- <p></p>
- Odstavce uprostřed nabité informacemi **
- <P align=center></P>
<P align=center></P>
<P align=center></P>
- Řádek nabitý informacemi *
- <BR><br>
- Obrázek následovaný barevnou mezerou (upraveno, zkráceno)*
- <font color="#99CC33" face="MS Serif"
size="2"><IMG SRC="soubor.gif" width="64"
height="32"> </font>
- Skoro náhledový obrázek (upraveno) ***
- <a href="soubor.jpg"><img border=0 height=32
width=64 src="soubor,jpg"></a>
- Výška a „šeířka“ (upraveno, zkráceno) ***
- <img src="soubor.gif" height=32 weidth=16 align=absmiddle alt="obrázek">
- Po vertikále vodorovně **
- <TD vAlign=center>
- Po horizontále svisle **
- <TD align=middle width=120>
- Pro jistotu 2× ukončený řádek tabulky **
- </tr></tr>
- Barevné orámování tabulky nulové tloušťky (upraveno) *
- <table border="0" cellpadding="0"
cellspacing="0" bordercolor="#FFFF00">
- </BODY> a </HTML> nemusí být koncové tagy *****
- </BODY></HTML></span><br><br><table border="0"><tr><td>td… (HTML kód pokračuje)
- Překřížené tagy ***
- <i><b>…text…text…</i></b>
- Interfernet Errornet (zkráceno) ***
- <p>Optimazizováno pro: MS Internet Explorer, 1024 x 768</p>
<hr>
<BLINK>Chce ODYSSUES chatu? NAPIŠTE MI!</BLINK>
<hr>
- Odkazy otevírané v témže okně (upraveno, zkráceno) ***
- <a href="http://www.odkaz1.com" target=blank>Odkaz 1</a>
<a href="http://www.odkaz2.com" target=blank>Odkaz 2</a>
<a href="http://www.odkaz3.com" target=blank>Odkaz 3</a>
CSS perličky
- Nulový bílý rámeček
- img {border-color : #fff; border : 0;}
- Obtékání uprostřed
- .banner,.bannerpod {float:center;}
- Zajímavé, zajímavé
- text-underline: none
- Uvozovky to jistí
- body {font-family: "verdana","arial"}
HTML+CSS perličky
- Zbytečné třídy místo kontextové deklarace (upraveno a zkráceno) ***
- <h1 class="cla-nadpis"><a href="http://cb.micurin.cz/kuk.php?id=200502301" class="clanek">Junior to má.</a></h1>
- Nepodtržené podtržení ***
- <SPAN style="TEXT-DECORATION: none; text-underline: none"><B><I><U>
- Nepodtržené nic **
- <SPAN style="TEXT-DECORATION: none; text-underline: none"></SPAN>
- Tenké orámování tabulky nulové tloušťky (upraveno) *
- <table BORDER=0 CELLSPACING=0 CELLPADDING=0 style="BORDER-COLLAPSE:collapse">
- V obrázku zarovnáno (upraveno a zkráceno) ***
- <IMG border=0 height=32 width=64 src="soubor.gif" style="TEXT-ALIGN: justify">
- Obtékaná absolutní pozice (upraveno a zkráceno) ***
- <img border=0 height=32 width=64 src="soubor.jpg" style="POSITION: absolute; LEFT: 446px; TOP: 27px; FLOAT: left">
- Atribut style ukončený tagem style (upraveno) ***
- <p align="justify"><B><font color=#00FF00 style="font-size: 13px"></style>
MS Word ****
- Důvěrné publikováno (Upraveno)
- [if gte mso 9]><xml>
<o:DocumentProperties>
<o:Author>Jméno Příjmení</o:Author>
<o:Template>Normal</o:Template>
<o:LastAuthor>Příjmení Jméno</o:LastAuthor>
<o:Revision>9</o:Revision>
<o:TotalTime>111</o:TotalTime>
<o:Created>2003-03-13T20:32:00Z</o:Created>
<o:LastSaved>2003-10-20T13:51:00Z</o:LastSaved>
<o:Pages>2</o:Pages>
<o:Words>987</o:Words>
<o:Characters>6543</o:Characters>
<o:Company>Europytel l.t.d.</o:Company>
<o:Lines>51</o:Lines>
<o:Paragraphs>13</o:Paragraphs>
<o:CharactersWithSpaces>6226</o:CharactersWithSpaces>
<o:Version>9.371</o:Version>
</o:DocumentProperties>
</xml><![endif]-->
Kalné vody internetu