Jak velký je ve skutečnosti blok na www stránce?

Nejsem Pixy a nechci nikoho učit CSS. Sám mám velké mezery, které se snažím zacelit. Na těchto stránkách chci pouze nabídnout pomocnou ruku začínajícím nadšencům.

Co je blok? Blok je jakýsi čtverec, obdélník, jehož rozměry určuje obsah elementu, vnitřní okraj (padding), rámeček (border) a vnější okraj (margin).

Vždy jsem si myslel, že když zadám nějakému bloku rozměr, například:

div .blok{

width: 400px;

}

bude tento rozměr neměnný, ať už s blokem budu dělat cokoli. Omyl. Rozměr bude neměnný jen potud, pokud nenastavím okraje, rámeček.

Text (když nějaký přidám a blok nebudete mít definovány okraje a rámeček) se bude dotýkat okrajů bloku.

Pokud nastavím padding na třeba 20px, například:

.blok{

width: 400px;

padding-left: 20px;

}

bude šířka bloku 400px, jen se zmenší obsahová část na 380px? Je to přesně naopak, šířka bloku bude 420px.

Příklady:

Pokud dáte rozměr bloku třeba 100px, nastavíte margin 50px, padding 50px a border 5px, bude div vypadat stejně jako v obrázku č. 1.

Pro určení šířky budeme sčítat 100px(velikost bloku) + 50px(levý vnější okraj) + 50px(levý vnitřní okraj) + 5px(levý rámeček) + 50px(pravý vnější okraj) + 50px(pravý vnitřní okraj) + 5px(pravý rámeček).

Jinak řečeno musíte sečíst nastavenou velikost div + vnější okraj + vnitřní okraj + rámeček. Celková výška i šířka bloku tedy bude 310px.

Pokud byste definovali např. jen padding-left, součet bude samozřejmě jiný, protože nebudete přičítat pravý vnitřní okraj.

Pro určení výšky je postup stejný, jen budete sčítat horní vnější okraj + horní rámeček + horní vnitřní okraj + obsah (který si určíte v css)
+ spodní vnitřní okraj + spodní rámeček + spodní vnější okraj. Zase pozor pokud si zadáte jen např. padding-top, součet bude jiný!

Šířka a výška 100px, margin a padding 50px, border 5px.

Pokud dáte rozměr div třeba 100px, nenastavíte margin, padding a border, bude div vypadat stejně jako v obrázku č. 2.

Jinak řečeno to co nastavíte v css je skutečná velikost. Celková výška i šířka bloku tedy bude 100px.

 

Šířka a výška 100px, bez margin a padding a border.

 

IE 5.5 a 6 ctí logiku a při přidání vnitřního okraje smrskne textový obsah prvku. Nelamte si s tím ale hlavu, protože IE 6 musí zemřít!

Vycentrování www stránky pomocí okrajů

Rozlišení monitorů roste (viz tabulka z návštěvnosti těchto www stránek). Chcete vědět jak jednoduše vycentrovat www stránku aby se korektně zobrazovala na každém monitoru?

1 1280 x 1024 pixelů 44,17%
2 1024 x 768 pixelů 19,17%
3 1600 x 1200 pixelů nebo větší 17,50%
4 1400 x 1050 pixelů 6,67%
5 800 x 600 pixelů 5,83%
6 1152 x 864 pixelů 5,00%
7 nezjištěno 1,67%

V css existuje mnoho cest jak dosáhnou stejného cíle. Neexistuje jeden správný způsob řešení. Pokud chcete vycentrovat www stránky, tady je jednoduchý způsob jak to udělat. Tento postup používám já, snad vám pomůže a ušetří hodiny hledání a zkoušení.
Zdrojový kód stránky:
<body>

<div id=“telo“>
<h1>
</h1>
<p>
</p>
</div>

</body>

Hlavní div s id=telo je ten, který chceme vycentrovat. Vycentrování provedeme jednoduše tak, že mu nastavíme libovolnou šířku (doporučuji max 800 px) a okraje nastavíme v horizontálním směru na hodnotu auto.

CSS:
#telo {
width: 780px;
margin: 0 auto;
}

S vycentrováním
Bez vycentrování

Tento postup nefunguje v prohlížečích IE 5.x a 6. Internet explorer má nesprávně implementovanou vlastnost text-align, pomocí které zarovnává nejen řádkové ale i blokové prvky. A protože jsou tyto prohlížeče stále hojně využívány, kód bude vypadat takto:
body {
text-align:center;
}
#telo {
width: 780px;
margin: 0 auto;
text-align: left;
}
Tabulka z návštěvnosti těchto stránek – použití prohlížečů:

1 Mozilla Firefox 3.0.8 23,33%
2 MS Internet Explorer (Win) 6.0 SV1 20,83%
3 Windows Internet Explorer 7.0 19,17%
4 Google Chrome 1.0.x 18,33%
5 Neurčené prohlížeče 4,17%
6 Opera 9.64 5 4,17%
7 MS Internet Explorer (Win) 6.0 2,50%
8 Windows Internet Explorer 8.0 1,67%
9 Google Chrome 2.0.x (vývojová) 0,83%
10 Mozilla Firefox 1.5.0.9 0,83%
11 Mozilla Firefox 2.0.0.20 0,83%
12 Mozilla Firefox 2.0.0.6 0,83%
13 Mozilla Firefox 2.0.0.x (Gecko 1.9) 1 0,83%
14 Opera 9.25 0,83%
15 SeaMonkey 1.1.11 0,83%

Pro Netscape 6 musíme ještě nastavit min-width. Proč? Pokud se totiž zmenší šířka okna tohoto prohlížeče pod hranici šířky našeho vycentrovaného div, nezobrazí se část obrazovky a nezobrazí se ani rolovací lišty. Aby se rolovací lišty zobrazily, kód bude vypadat takto:
Do body přidáme…
body{
text-align: center;
min-width: 780px;
}
Šířka min-width musí být rovna nebo o něco málo větší než prvek div.

Na závěr

Nejsem Pixy a nechci nikoho učit CSS. Sám mám velké mezery, které se snažím zacelit. Na těchto stránkách chci pouze nabídnout pomocnou ruku začínajícím nadšencům.

 

Mino AD napsal:

Aha, to je akoze pre tych co nemaju google, right?
Prespic napsal odpověď Mino AD:
Google je od toho aby našel takovéhle stránky. Tvoje logika postrádá logiku! 😀

 

MareceK napsal:

Mas to zle… tak ako to je je ten div zbytocny… stacy hodit style na body… a este mas strasny font na stranke… a uz sa mi nechce pisat..

 

Jaro napsal:

Ten 1 div zbytocny byt nemusi, ak by chcel napr. dat pozadie pre body. Ale v kazdom pripade je zbytocna cela ta stranka.

 

Ducky napsal:

Ach jo, zamyslím se a asi stránku smažu.

Anežka napsala:

Opovažte se tu stránku mazat, jestli máte nějakej monitoring na vyhledávaný fráze, jistě Vám neujde, kolik lidí tuhle radu hledá.

Prespic napsal:

Rozhodně se zamítá něco mazat 😀
Rozhodně potěší, když zadáte do google \“IE vycentrovat stranku\“ a jako prvni odkaz vam najde přehledný web na kterém je pěkně a jednoduše napsáno řešení.
Přeji hodně zdaru 🙂

 

 

 

Chcete vědět, jestli vás, respektive vaše stránky navštívil vyhledávací robot?

Tento script vymyslel Steve Dawson. Pro české poměry upravil Michal Kubíček. Tento script vložte na svoje stránky a když tuto stránku robot otevře, pošle vám script email. Hodí se spíše pro menší, začínající weby (aby vám nechodily stovky mailů). Odkaz na stránku Michala Kubíčka je tady.
<?PHP

## Googlebot – [Google] – www.google.com
## SeznamBot – [Seznam] – www.seznam.com

############## začátek konfigurace #############
$Email = „@“; ## notifikační mail
$Email = preg_replace(„/[\n\r]+/“, „“, „$Email“);
############## konec konfigurace #############

$datum = date(„d. M. Y v G:I“);
$hlavicka = „—————————————————————————–
Prave tvoje stranky navstivil vyhledavaci robot
—————————————————————————–„;
##  GOOGLE
if(eregi(„Googlebot“,$HTTP_USER_AGENT)) {
global $hlavicka;
global $datum;
if ($QUERY_STRING != „“)  {$GoogleLink = „https://“.$SERVER_NAME.$PHP_SELF.‘?‘.$QUERY_STRING;}
else  {$GoogleLink = „https://“.$SERVER_NAME.$PHP_SELF;}

$GoogleEmail = “
„.$hlavicka.“
Prave tvou stranku https://$SERVER_NAME navstivil robot vyhledavace Google.
Konkretne prochazel strankou „.$GoogleLink.“
Cas navstevy – „.$datum.“
„;
@mail(„$Email“, „Navsteva Googlebota“, $GoogleEmail, „Od: <Google Robot>$Email“);
}

##  Seznam
if(eregi(„SeznamBot“,$HTTP_USER_AGENT)) {
global $hlavicka;
global $datum;
if ($QUERY_STRING != „“)  {$SeznamLink = „https://“.$SERVER_NAME.$PHP_SELF.‘?‘.$QUERY_STRING;}
else  {$SeznamLink = „https://“.$SERVER_NAME.$PHP_SELF;}

$SeznamEmail = “
„.$hlavicka.“
Prave tvou stranku https://$SERVER_NAME navstivil robot vyhledavace Seznam.
Konkretne prochazel strankou „.$SeznamLink.“
Cas navstevy – „.$datum.“
„;
@mail(„$Email“, „Navsteva Seznambota“, $SeznamEmail, „Od: <Seznam Robot>$Email“);
}

?>

SEO – optimalizace nalezitelnosti www stránek

Jak optimalizovat www stránky? SEO pro úplné zelenáče.

V roce 2006 jsem se začal zabývat HTML a webdesignem. Neživím se tím (asi bych umřel hlady), je to můj koníček, který mě baví a naplňuje.

Tento článek píši pro zelenáče, jako jsem já. Třeba si navzájem pomůžeme, obohatíme svoje znalosti.

Chcete vědět, jak se  zalíbit GOOGLEBOTOVI ? Chcete se o své zkušenosti, nejen se mnou, podělit? Pak čtěte dál. Pokud ne, tak děkuji za návštěvu.

Zkušený SEO – optimalista mně spoustu věcí vytkne, možná se i pořádně zasměje, ale to nevadí. Žádný učený z nebe nespadl a chybami se člověk (nejlépe?) učí.

Začnu obecnými podmínkami úspěšné optimalizace.

Prvotní orientace: každá stránka musí návštěvníkovi jasně a zřetelně říci co na ní najde a musí mít srozumitelnou navigaci. Bez ní se na webu ztratí.

Text musí být přehledně strukturovaný (nadpisy, odstavce…), srozumitelný a čitelný. Číst dlouhé bloky je nudné a proto je mi jasné, že k tomuto odstavci se nikdo neprokousal. Také se na svých stránkách vyhněte přehnanému vychloubání, jako -Můj super nejlepší blog apod.

Dalším aspektem je grafika, která by měla být decentní. Spousta blikajících objektů návštěvníka spíš odradí.

Posledním aspektem, o kterém se zmíním, je nutnost, aby uživatel ovládal web a nikoli naopak. Pokud na svém blogu (osobních stránkách…) používáte např. na pozadí hrající hudbu, dejte návštěvníkovi šanci ji vypnout.

Vybíráme název domény

Dle mého názoru je to velmi relevantní. Pokud máte web o hudbě a vaše doména bude www.hudba.cz, máte velkou šanci na úspěch. Doména ale samozřejmě není vše.

Klíčová slova v URL

Určitě používejte. Platí to co pro doménu. Pokud je vaší oblíbenou skupinou ABBA a chcete mít stránky právě o ní, pak www.hudba.cz/abba.html nebo www.hudba.cz/skupina-abba.html je určitě lepší než www.abc.cz/xyz.html.

Vybíráme klíčová slova

Pro stránky o hudbě, kde budeme psát i o našich oblíbených skupinách, vybereme klíčová slova např. hudba, music a určitě i názvy oblíbených skupin. Výběr klíčových slov je velmi důležitý. Zjistěte si také (na Seznamu ve fulltextu je úplně dole odkaz  -statistika dotazu), jak je dané klíčové slovo konkurenční. Čím větší číslo vyhledávanosti, tím je pravděpodobnější, že je o slovo zájem a stránky umístěné na předních pozicích budou právě na toto slovo optimalizované.

Zkuste si udělat analýzu těch nejlepších stránek, které jsou na špici. Můžou vám pomoci tyto odkazy: www.seo-servis.cz (dle mého názoru výborná stránka i když algoritmus hodnocení je samozřejmě jiný než používají vyhledávače), www.nastroje-seo.eu.

Jen pozor , některé stránky jsou první na nějaké klíčové slovo, ale v textu ho téměř nenajdete, ale o tom až později.

Pokud bude vaše stránka na prvním místě, je téměř jisté, že když někdo do vyhledávače zadá to vaše magické klíčové slovo, máte jistého návštěvníka. Pokud budete třeba na páté pozici, už to bude jen asi šest návštěvníků z deseti. Takže být první je fajn.

Meta tagy description a keywords

Někdo tyto meta tagy nevyplňuje vůbec. Myslím, že tím nic nepokazíme. Google a zřejmě i Seznam je údajně ignorují, ale v některých vyhledávačích jsem viděl meta tag description zobrazený jako popis stránky. Stejně tak bych vyplnil i meta tag keywords – klíčová slova. O dalších, jako meta tag pro kódování stránky, se tady zmiňovat nebudu, protože ty vyplněné být samozřejmě musí.

Titulek stránky

Nesmírně důležitý faktor pro optimalizaci. Správně vyplněný může stránku dostat hodně dopředu, nevhodný může stránce velmi uškodit. Pro každou stránku na svém webu používejte samostatný titulek.

Klíčová slova v textu stránky

Pro mě to byl velký problém. Našel jsem na internetu spoustu stránek, které byly první na nějaké klíčové slovo, ale v textu jsem ho hledal marně. Pokud tam vůbec bylo, tak  ve velmi malém množství(výrazně pod 1%). Nechápal jsem to. Je to podvod? Mají firmy první místa koupené? Pomohl mi Google. Zadal jsem do vyhledávače link: a adresu inkriminované stránky. Google vám zobrazí všechny odkazy. Když jsem je procházel……pochopil jsem. Aspoň si to myslím. Jsem zelenáč a jistý si nejsem ničím, ale asi na tom něco bude. Zkuste si to sami a třeba mě vyvedete z omylu.

Pro robota indexující stránky jsou důležité odkazy. Odkaz v patičce stránky má jinou relevanci než odkaz v textu. A pokud je odkaz v textu nějak dobře „zabalen“  – paráda. Uvedu jednoduchý příklad. Klíčové slovo je např. dřevo.  Doména např. drevo.xy.  Odkaz s textem může vypadat takto:

Naše firma staví domy ze dřeva, využíváme přírodních materiálů – především <strong><a title=“dřevo“ href=“https://www.drevo.xy/“>dřevo</a></strong>.  Pokud takových odkazů půjde na váš web třeba 100, asi na slovo dřevo budete hodně vysoko. (Naše firma staví domy ze dřeva, využíváme přírodních materiálů – především dřevo)

Jestli neseženete tolik kvalitních zpětných odkazů, pak si dejte záležet na kvalitním textu. Klíčových slov tak cca 6-8%, maximálně 10%, ale to už je možná moc. Dnes jsou vyhledávače o hodně sofistikovanější než dříve a ve svém algoritmu zohledňují také celkový mix použitých slov a frází. Ach jo….

Pokud si budete s někým vyměňovat odkaz, nedělejte to tak stupidně jako já a dejte si na kódu záležet.

Klíčová slova v nadpisech h1 – h6

Já používám jen h1 – h3. Údajně už to není tak relevantní jako dříve, ale rozhodně je používejte. Jen nemějte naprosto stejný titulek a nadpisy.

Zvýraznění klíčových slov pomocí <b><strong>

Většinou používám jen strong a to co chci návštěvníkovi zdůraznit. Třeba i celé souvětí. Nevím jestli to má nějakou zásadní váhu.

Odkazy

(Viz klíčová slova v textu stránky). Dejte si do pořádku odkazy uvnitř vlastního webu, i tím si můžete výrazně pomoci. Požádejte tematicky podobné weby o výměnu. Pozor na výměnu s pornoweby apod.

Sitemap (mapa webu)

 

Přestože máte malý web, sitemap si vytvořte. Budete mít jistotu, že vyhledávače zaindexují všechny vaše stránky. Pokud nevíte jak na to, tato stránka to udělá za vás: https://www.xml-sitemaps.com/. Zadáte jen adresu svých stránek a kliknete na start.

Validita www stránek

Vyhledávače ani vaše návštěvníky to nezajímá. Důležitější je kvalitní obsah.

Na závěr

 

To co chce uživatel internetu, to chce i vyhledávač.  Vyhledávač se vždy bude snažit myslet jako uživatel, protože uživatele internetu potřebuje ke svému přežití.

 

Pokud máte komerční web a mermomocí chcete být vidět na nějaké silně konkurenční klíčové slovo, zkuste PPC. Optimky na taková  slova dělají týmy odborníků z velmi úspěšných firem (H1…) a na ty prostě nemáme.

 

Děkuji. Ducky.