HTML a CSS do blogu na lidé.cz

28.11.2006 15:34 - nezařazeno - trvalý odkaz

Blog o využití HTML a CSS při tvorbě a vylepšování blogů na lidé.cz

Účelem tohoto blogu je pomoci vám s využitím možností, které nabízejí HTML a CSS při tvorbě vašeho blogu.

Tento návod se snažím psát stylem srozumitelným i pro začátečníky, kteří zatím s tvorbou blogu a používáním HTML a CSS nemají příliš zkušeností.

Pro větší přehlednost používám pro HTML kódy, které je možno zkopírovat a použít při psaní příspěvků bílé pozadí a pro CSS zápisy pozadí žluté.

komentáře 7

28.11.2006 13:27 - Založení blogu - trvalý odkaz

Založení blogu

Jak založit nový blog? Když se přihlásím na lidé.cz, na horním okraji stránky se nachází menu s odkazy na jednotlivé služby poskytované na tomto serveru. Kliknu na Blogy a otevře se stránka, na které v menu pod barevným logem Lidé kliknu na Nastavení blogu. Otevře se nová stránka, na které vyplním dokument s údaji potřebnýmy k založení blogu Název: a Popis:, tyto dvě kolonky je nutné vyplnit. Kolonky URL loga: a HTML sloupek mohu prozatím nechat nevyplněny. K těmto údajům se mohu kdykoli vrátit, měnit je a doplňovat. Když mám údaje vyplněny, kliknu na žluté tlačítko Založit nový blog s tímto nastavením a blog je úspěšně založen.

komentáře 0

27.11.2006 13:26 - Psaní příspěvku - trvalý odkaz

Psaní příspěvku

Jak napsat do blogu příspěvek? Když se přihlásím na lidé.cz, na horním okraji stránky se nachází menu s odkazy na jednotlivé služby poskytované na tomto serveru. Kliknu na Blogy a otevře se stránka, na které v menu pod barevným logem Lidé kliknu na Nový příspěvek. Otevře se nová stránka, na které je možno vytvořit nový příspěvek. Vyplnit je nutno tyto věci - Publikovat: datum a čas vložení příspěvku Titulek: nadpis příspěvku Kategorie: zde je možno vybrat kategorii, ve které bude příspěvek zařazen, u nově založeného blogu je zde pouze kategorie Nezařazené, jak vytvořit další kategorie vysvětlím v některém z dalších příspěvků.

Všechny ostatní nezbytnosti jsou vyplněny a nyní se s chutí vrhněme do psaní příspěvku. K dispozici máme editor, ve kterém je možno příspěvky psát. Skládá se z okna, ve kterém se píše text, nad levým rohem textového okna jsou dvě tlačítka - Editor a HTML kód. Při otevření stránky je nastaven editor, umožňuje vytvořit několik základních věcí, příspěvek v něm možné napsat je, ale pokud se chcete naučit daleko víc a daleko lépe, klikněte na tlačítko HTML kód a pokračujte ve čtení tohoto blogu.

Nejprve napíšeme tag <p> tento tag znamená začátek odstavce. Za ním následuje text, který chci napsat. A nakonec tag </p>. Se psaním znaků < > je trochu problém, protože na české klávesnici nejsou, proto je třeba přepnout na anglickou klávesnici (vpravo dole na liště kliknout na CS a změnit na EN, nebo stisknout klávesy Alt + Shift), nebo je napsat pomocí Alt + 60, Alt + 62.

Musí být na konci odstavce tag </p>? Ano musí, většina tagů používaných v HTML musí být na místě, na kterém chceme ukončit jejich účinek na text uzavřena. Používá se k tomu stejný tag, ke kterému se přidá zpětné lomítko /.

Výsledný kód vypadá takto: <p> tento tag znamená začátek odstavce. Za ním následuje text, který chci napsat. A nakonec tag </p>.

Pak už stačí jen kliknout na Editovat příspěvek a příspěvek je vložen do blogu. Kliknutím na Můj BLOG v menu po levé straně editoru je poté možno si svůj výtvor prohlédnout.

komentáře 2

27.11.2006 13:25 - Psaní příspěvku - trvalý odkaz

Odřádkování

V minulém příspěvku jsme se naučili psát text uzavřený do odstavců. Na konci odstavce se text automaticky odřádkuje. Pokud bychom chtěli odřádkovat text v odstavci, použijeme k tomu tag <br>, tento tag se sice používá zřídka, ale někdy se může hodit.

Výsledný kód: <p>V minulém příspěvku jsme se naučili psát text uzavřený do odstavců. Na konci odstavce se text automaticky odřádkuje. Pokud bychom chtěli odřádkovat text v odstavci, použijeme k tomu tag <br>, tento tag se sice používá zřídka, ale někdy se může hodit.</p>

Tag <br> je jedním z nemnoha tagů používaných v HTML, který nemusí být uzavřen.

komentáře 1

26.11.2006 13:24 - Obrázky - trvalý odkaz

Vložení obrázku do příspěvku

V předchozích příspěvcích jsem nakousnul téma práce s textem. Informace obsažené v textu jsou obsahovým základem blogu. Je důležité, aby návštěvník, který na blog přijde nalezl zajímavý odsah, neméně důležitá je i vzhledová podoba blogu. Proto nyní trochu odbočím ke tvorbě grafické podoby blogu.

Důležitou součástí grafické podoby blogu jsou obrázky vkládané do příspěvků. Do příspěvku se nevkládá celý obrázek, ale vloží se do něj odkaz na adresu obrázku, který je uložen na nějakém místě na internetu a prohlížeč jej odtud stáhne a zobrazí na místě, které mu určíme.

Formáty obrázků použitelných v blogu jsou *.jpg, *.gif, dále je možné použít i formát *.bmp, ale obrázek ve formátu *.bmp je příliš velký a prodlužuje dobu načítání stránky, takže moje rada zní, s vyjímkou opravdu malých obrázků o rozměrech max. několika pixelů nepoužívat. Když najedeme na obrázek uložený v počítači myší, otevře se takovéto okénko:
Rozměry: 120 x 240
Typ: Soubor JPG
Velikost: 8,92 kB
Tento obrázek je ve formátu jpg. Výše jmenované formáty jsou nejpoužívanější, proto většinou nebude s jejich vložením do příspěvku problém.

Připravený obrázek je nyní třeba umístit na internet, odkud si ho prohlížeč může stáhnout. Jedna možnost je nahrát obrázek do svého profilu na lidé.cz, druhá nahrát ho na některý ze serverů, které poskytují zdarma hosting obrázků.

komentáře 0

26.11.2006 13:22 - Obrázky - trvalý odkaz

Vložení obrázku do příspěvku 2

Máme připravený hosting obrázku a nyní jak tento obrázek dostat do blogu. Při psaní příspěvku klikneme na modrý nápis HTML kód a na místo v příspěvku, na které chceme obrázek umístit napíšeme tento HTML kód: Úplně nejjednodušší varianta je
<img src="zde napsat adresu obrázku">
zobrazí se nám obrázek, ale co když obrázek chceme umístit na přesné místo do textu, doplníme tedy zápis o parametr align
<img src="zde napsat adresu obrázku" align="left">
nyní se obrázek přesunul na levou stranu řádky. "left" je možno zaměnit za "right", potom se obrázek přesune na pravou stranu. Pokud máte pomalejší připojení na net, jistě jste si všimli, že u těchto variant se nejprve objeví malý čtvereček a když se obrázek načte, text nacházející se za ním nehezky poskakuje. Trochu tedy zápis doplníme
<img src="zde napsat adresu obrázku" align="left" height="zde napsat výšku obrázku" width="zde napsat šířku obrázku">
Výšku a šířku obrázku v profilu zjistíme tak, že na něj klikneme pravým myšítkem a zvolíme Vlastnosti. Některý návštěvník našeho blogu s pomalým příïpojením může mít zobrazování obrázků vypnuto, takže se mu zobrazí jen nehezký prázdný obdélník. Takže mu tam napíšeme alespoň text, který si může přečíst.
<img src="zde napsat adresu obrázku" alt="zde napsat text" align="left" height="výška obrázku" width="šířka obrázku">
Když se na tento obrázek podíváme pozorně, zjistíme, že text je ošklivě nalepený na okraj obrázku, takže ještě jedno drobné vylepšení
<img src="zde napsat adresu obrázku" alt="zde napsat text" style="margin: 10px" align="left" height="výška obrázku" width="šířka obrázku">
Takto zapsaný kód nám udělá kolem celého obrázku mezeru. Velikost mezery je 10 px, tedy deset pixelů, tuto hodnotu je možno měnit podle potřeby. Je možné udělat mezeru jen na jedné straně, zápis v tom případě bude vypadat takto:
<img src="zde napsat adresu obrázku" alt="zde napsat text" style="margin-right: 10px" align="left" height="výška obrázku" width="šířka obrázku">
Mezera je jen na pravé straně. Další možnosti zápisu jsou: style="margin-left: 10px", style="margin-top: 10px", style="margin-bottom: 10px" Je možné udělat mezeru i na více stranách současně např.:
<img src="zde napsat adresu obrázku" alt="zde napsat text" style="margin-top: 5px; margin-right: 10px; margin-bottom: 5px" align="left" height="výška obrázku" width="šířka obrázku">.
Tento kód je možné ještě zkrátit a napsat ho takto:
<img src="zde napsat adresu obrázku" alt="zde napsat text" style="margin: 5px 10px 5px 0" align="left" height="výška obrázku" width="šířka obrázku">
postupně je zde třeba napsat požadovanou šířku nahoře, vpravo, dole, vlevo, musí být uvedeny všechny čtyři strany, pokud na některé straně nechceme vytvořit mezeru pomocí marginu, napíšeme 0. Pokud chceme mezeru na všech stranách stejně širokou, stačí napsat style="margin: 5px"

komentáře 1

25.11.2006 13:08 - Obrázky - trvalý odkaz

Rámeček kolem obrázku pomocí HTML a CSS

Goči Goči Když umístíme výše zmíněným způsobem obrázek do příspěvku, nemá kolem sebe žádný rámeček (obrázek vlevo). Pro vytvoření rámečku stačí přidat k zápisu style="border: 1px solid black" (obrázek vpravo). Celý zápis bude vypadat takto: <img src="zde napsat adresu obrázku" alt="zde napsat text" style="border: 1px solid black; margin: 0 0 5px 5px" align="right" height="výška obrázku" width="šířka obrázku"> Slovo style určuje připojení CSS stylu, border znamená rámeček, 1px určuje šířku rámečku, v tomto případě 1 pixel, je možno změnit dle potřeby, solid určuje typ rámečku, black určuje barvu rámečku.

komentáře 5

25.11.2006 13:07 - Obrázky - trvalý odkaz

Vycentrování obrázku na střed příspěvku

V příspěvku může být prezentován pouze obrázek bez doprovodného textu. Pokud vložím do příspěvku obrázek, zobrazí se ošklivě nalepený k levému okraji. Na lide.cz je spousta blogů, ve kterých jsou obrázky od okraje oddáleny vytvořením potřebného počtu mezer opakovaným použitím mezerníku, pokud můžu radit, nedělejte to, je to lamerství (zkuste si zmenšit velikost okna prohlížeče, přijdete jistě sami na to, proč). Trochu lepší řešení je oddálit obrázek od okraje nastylováním vlastnosti margin. Používat margin pro vycentrování obrázku by však nebylo ideální řešení, protože návštěvníci blogu mohou používat monitory s různým rozlišením, takže je nemožné takovým způsobem umístit obrázek tak, aby se zobrazil všem stejně.

Obrázek je možno vycentrovat použitím tohoto HTML kódu: <div style="text-align: center;"><img src="zde napsat adresu obrázku" alt="zde napsat text" height="výška obrázku" width="šířka obrázku"></div>

HTML kód tohoto obrázku: <div style="text-align: center;"><img src="http://i3.tinypic.com/wjb1w7.gif" alt="Fontána" height="79" width="61"></div>

Vyzkoušejte si, že když zmenšíte okno prohlížeče, obrázek fontány zůstene při jakékoli jeho šířce vycentrován.

komentáře 2

24.11.2006 13:05 - Psaní příspěvku - trvalý odkaz

Tučný text

Důležitý text, který chceme zvýraznit je možno nechat v příspěvku zobrazit tučně.

Zvýraznění důležitého textu tučným písmem docílíme použitím HTML tagu <strong>. Výsledný HTML kód bude vypadat takto: <strong>Zde je zobrazen důležitý text, který chceme odlišit od okolního méně důležitého textu</strong>

Další možností je použití HTML tagu <b>, který též zobrazí text tučně. Výsledný HTML kód bude vypadat takto: <b>Tento text zobrazí prohlížeč tučně</b>

komentáře 0

24.11.2006 12:57 - Psaní příspěvku - trvalý odkaz

Text zobrazený kurzívou

Další možností, jak zvýraznit text je použití kurzívy.

Pokud chceme zvýraznit důležitou část textu a nehodí se k tomu tučný text, nebo již je v příspěvku tučný text použit pro důležitější část a nyní chceme zdůraznit část také důležitou, ale ne až tak důležitou, aby byla psaná tučně, můžeme použít kurzívu.

Zdůraznit důležitý text pomocí kurzívy je možno použitím HTML tagu<em>. Výsledný HTML kód bude vypadat takto: <em>Zde je zobrazen důležitý text, který chceme odlišit od okolního méně důležitého textu pomocí kurzívy</em>.

Další možností je použití HTML tagu <i>, který též zobrazí text kurzívou. Výsledný HTML kód bude vypadat takto:<i>Tento text zobrazí prohlížeč kurzívou</i>.

komentáře 0

23.11.2006 12:55 - Odkazy - trvalý odkaz

Odkazy

K vytvoření odkazu na jinou stránku je určen HTML tag <a>.

Nejjednodušší fungující podoba HTML kódu pro odkaz je <a href="zde napsat url adresu stránky, na kterou bude odkazováno">zde napsat text, na který se bude klikat</a> Výsledný HTML kód se zobrazí a bude fungovat takto: Stránka.

Url adresa se zadává v takovémto tvaru: http://blog.lide.cz

Takto napsaný odkaz zobrazí stránku ve stejném okně, ve kterém byla zobrazena stránka, ze které bylo odkazováno. Když do HTML kódu doplníme parametr target="_blank", zobrazí se stránka na kterou odkazujeme v novém okně <a href="zde napsat url adresu stránky, na kterou bude odkazováno" target="_blank">zde napsat text, na který se bude klikat</a> Výsledný HTML kód se zobrazí a bude fungovat takto: Sacred blog.

Obvykle se parametr target="_blank" používá, když odkaz vede na cizí stránku mimo blog a u odkazů uvnitř blogu se nepoužívá.

Když doplníme zápis o parametr title, zobrazí se při najetí myší na odkaz okénko s textem <a href="zde napsat url adresu stránky, na kterou bude odkazováno" title="zde napsat text zobrazovaný v okénku" target="_blank">zde napsat text, na který se bude klikat</a> Výsledný HTML kód se zobrazí a bude fungovat takto: Vtipy.

Podobně, jako my ve svém blogu používáme odkazy na jiné blogy a ostatní www stránky i ostatní mohou odkazovat na náš blog. Jak zjistím, odkud je na můj blog odkazováno?

komentáře 0

23.11.2006 12:53 - Odkazy - trvalý odkaz

Odkaz pomocí obrázku

Obrázek je možné použít také jako odkaz. Pokud obrázek umístíme mezi HTML tagy<a>, bude obrázek fungovat jako odkaz, jehož nakliknutím se dostane návštěvník blogu na jinou stránku. HTML kód vypadá takto: <a href="zde napsat url adresu stránky, na kterou bude odkazováno" title="zde napsat text zobrazovaný v okénku" target="_blank"><img src="zde napsat url adresu obrázku" alt="zde napsat text" style="border: 1px solid black" height="výška obrázku" width="šířka obrázku"></a> . Výsledný HTML kód se zobrazí a bude fungovat takto:

komentáře 0

22.11.2006 12:50 - Obrázky - trvalý odkaz

Zmenšený obrázek jako odkaz na obrázek v normální velikosti

Je-li obrázek, který chceme prezentovat v blogu příliš veliký a je žádoucí ho zobrazit v nezmenšené velikosti, můžeme použít jako odkaz jeho zmenšenou verzi. Důvodem pro použití tohoto způsobu vložení obrázku do blogu může být jednak stav, kdy obrázek je příliš veliký a přesahoval by hlavní sloupeček, případně snaha o zkrácení doby načítání stránky, kterou by vložení několika rozměrných obrázků znatelně prodloužilo.

Nejprve je potřeba vytvořit zmenšeninu obrázku. Programů pro práci s obrázky je spousta, já používám FastStone Image Viewer nebo GIMP 2.

Je to vlastně varianta předchozího odkazu, pouze odkazujeme na obrázek. HTML kód: <a href="zde napsat url adresu obrázku, na který bude odkazováno" title="zde napsat text zobrazovaný v okénku" target="_blank"><img src="zde napsat url adresu zmenšeného obrázku" alt="zde napsat text" style="border: 1px solid black; margin: 0 5px 5px 0" height="výška obrázku" width="šířka obrázku"></a>

komentáře 0

22.11.2006 12:49 - CSS - trvalý odkaz

CSS v blogu

Kaskádové styly CSS umožňují jednoduchým způsobem ovlivňovat vzhled a funkčnost blogu. Použití CSS při tvorbě blogu umožní pročištění HTML kódu od nadbytečných HTML tagů, které lze nahradit nastylováním, tím se jednak zmenší velikost výsledného HTML kódu - zrychlí se načítání stránky a protože velikost vkládaného přípěvku je omezena, umožňuje také napsat delší příspěvek, jednak se celý HTML kód zpřehlední. Dále lze využitím CSS použít efektů, které by pouze v HTML nebylo možné dosáhnout.

CSS nastylování je možné k blogu připojit dvěma způsoby, zápisem přímo do prvku, jehož vlastnosti jsou upravovány (řádkový styl) a zápisem do externího stylového souboru.

Připojení CSS pomocí řádkového stylu jsem již použil v minulých příspěvcích, není to tedy nic složitého. Vkládá se přímo do HTML tagu prvku, jehož vlastnosti budou změněny pomocí atributu style="". Potřebuji například změnit barvu písma v celém odstavci na modrou, ostyluji tedy prvek <p> takto: <p style="color: blue">Zde je text odstavce, který bude zobrazen modrou barvou.</p>

Zde je text odstavce, který bude zobrazen modrou barvou.

Při připojení CSS do blogu pomocí externího stylového souboru je CSS nastylování uloženo v souboru mimo HTML stránku blogu. Na lide.cz je přístup k tomuto souboru umožněn jednoduchým způsobem: kliknout na Blogy nahoře na liště, kliknout na Design (CSS) v menu po pravé straně, otevře se stránka s formulářem, do kterého je možné zadávat CSS nastylování.

Výhoda tohoto způsobu spočívá v možnosti nastylovat jedním zápisem vlastnosti pro daný prvek v celém blogu. V tomto blogu je takto mimo jiné například prvku <p> nastylováno odsazení na začátku každého odstavce. U takto nastylovaného blogu je možné od základu změnit design během malé chvíle přepsáním několika řádek v externím stylovém souboru.

V jednom zápisu můžeme měnit několik vlastností najednou, jednotlivé definice, kterými je měníme musí být od sebe odděleny středníkem(na konci středník být může, ale nemusí). Změním vlastnosti odstavce tak, aby ho prohlížeč vypsal červenou barvou, tučným písmem a text podtrhl. Zápis bude vypadat takto: <p style="color: red; font-weight: bold; text-decoration: underline;">Tento text bude zobrazen červenou barvou, tučným písmem a text bude podtržen.</p>

komentáře 0

21.11.2006 12:48 - CSS - trvalý odkaz

Prvek span

V předchozím příspěvku jsme si ukázali nastylování textu v odstavci, jak však nastylovat pouze část odstavce? K tomuto účelu nám poslouží HTML tag <span>, který nastylujeme a uzavřeme do něj část textu. HTML kód bude vypadat takto: <p>Zde je text odstavce, ze kterého pořebujeme <span style="color: green">tuto část napsat zeleně</span> a tuto opět normálně.<p>

komentáře 0

21.11.2006 12:47 - CSS - trvalý odkaz

Prvek div

Dalším prvkem, který je spjat s používáním CSS stylování je prvek <div> Pomocí prvků div je tvořena struktura blogu na lide.cz, například sloupek, v němž je umístěn tento příspěvek je vytvořen pomocí prvku div, sloupek po pravé straně je také div. Prvky div je možné do sebe zanořovat, to znamená, že mateřský div může obsahovat další div. Takto je vytvořen sloupek po pravé straně, celý je tvořen divem a který obsahuje několik dalších prvků div.

Narozdíl od předchozího prvku <span>, který slouží k nastylování textu (prvek řádkový) slouží prvek <div> k nastylování určité části stránky, může v sobě obsahovat další prvky - obrázky, odstavce textu, další vnořené divy, tabulky, seznamy a další, proto je nazýván prvkem blokovým.

komentáře 0

05.11.2006 22:17 - nezařazeno - trvalý odkaz

Katalogy 18

Vyhledávání na internetu, katalogy.

komentáře 0

31.10.2006 12:46 - CSS design blogu - trvalý odkaz

Změny prvků blogu pomocí CSS

V tomto a následujících příspěvcích budu hovořit o css nastylování blogu pomocí zápisu do externího stylového souboru.

Na lide.cz je přístup k tomuto souboru umožněn jednoduchým způsobem: kliknout na Blogy nahoře na liště, kliknout na Design (CSS) v menu po pravé straně, otevře se stránka s formulářem, do kterého je možno zadávat CSS nastylování.

Zde zapsané nastylování mění vlastnosti daného prvku v celém blogu.

Jednotlivé zápisy je možno psát v libovolném pořadí, vedle sebe do řádky, nebo pod sebe, prohlížeči na formě zápisu nezáleží. Přesto je však dobré zachovávat určitý řád pro naši vlastní orientaci v zápisu. Já zapisuji nastylování pro jednotlivé prvky pod sebe a pro zachování přehlednosti je řadím dle toho, jakou část blogu ovlivňují a v tomto pořadí je zde budu také popisovat.

Zápis se zapisuje v takovémto tvaru p { color: black; font-size: 1.2em; }

Pokud uložíte změny provedené v CSS nastylování, otevřete blog a změny se neprojevují, stačí stisknout klávesu F5 a stránka se znovu načte i s provedenými změnami.

komentáře 0

31.10.2006 12:45 - CSS design blogu - trvalý odkaz

Body - pozadí a barva písma v blogu

CSS nastylováním prvku body je možno ovlivnit spoustu vlastností, které se projeví v designu celého blogu.

Barvu pozadí blogu změní zápis v takovémto tvaru: body { background-color: blue; } Barvu je možno zapsat názvem tabulka názvů barev, nebo pomocí šestimístného kódu barvy.

Jako pozadí blogu je možno použít také obrázek, zápis: body { background-image: url("zde napsat adresu obrázku"); background-color: blue; } Barva pozadí je zadána proto, protože obrázek se někdy nemusí načíst, nebo návštěvník blogu může mít zobrazování obrázků vypnuto. Proto by měla být barva pozadí nastavena jako nouzové řešení pro tento případ. Pokud použijeme jako pozadí blogu obrázek uložený v profilu, zobrazí se zmenšený a opakující se, obrázek uložený na freehostingu se zobrazí ve své normální velikosti.

Dále je možno změnit barvu písma v celém blogu: body { background-color: black; color: white; } Je vhodné zvolit barvu pozadí a písma tak, aby byl text čitelný.

komentáře 1

31.10.2006 12:44 - CSS design blogu - trvalý odkaz

Body - písmo v blogu

V minulém příspěvku jsem zmínil změnu barvy písma. Písmu v blogu je možné pomocí CSS nastylování změnit spoustu dalších vlastností.

Velikost písma mění vlastnost font-size, zápis: body { font-size: 150%; } Tento zápis změní velikost písma v blogu na 150% původní velikosti. Další možnost je zápis s použitím jednotek em: body { font-size: 1.5em; } Tento zápis změní velikost písma též na 150% původní velikosti.

Sílu písma mění vlastnost font-weight, doplníme tedy zápis tak, aby bylo použito tučné písmo: body { font-size: 1.5em; font-weight: bold; }. Možné hodnoty jsou normal, bold.

Druh písma určuje vlastnost font-family. Je možné zadat název rodiny písma: body { font-family: serif; } (rodiny písem: serif, sans-serif, monospace, fantasy, cursive), nebo konkretního druhu písma: body { font-family: Verdana, sans-serif; } Uvedený druh písma bude použit pouze v případě, že návštěvník blogu má ve svém počítači nainstalovaný font pro toto písmo. Je možné určit více druhů písma: body { font-family: Verdana, Tahoma, Arial, sans-serif; } Jednotlivé názvy písem musí být odděleny čárkou. Na konci zápisu je vhodné uvést rodinu písem. Písma, která by se měla zobrazit v každém prohlížeči:

Písmo	Rodina písem	Náhled
Arial	sans-serif	Arial
Helvetica	sans-serif	Helvetica
Tahoma	sans-serif	Tahoma
Verdana	sans-serif	Verdana
Impact	sans-serif	Impact
Trebuchet MS	sans-serif	Trebuchet MS
Comic Sans MS	fantasy	Comic Sans MS
Georgia	serif	Georgia
Times New Roman,Times	serif	Times New Roman,Times
Courier New,Courier	monospace	Courier New,Courier
Lucida Console	monospace	Lucida Console

Toto CSS nastylování bude použito pro písmo v celém blogu, pokud chceme použít v některé jeho části písmo s jinými vlastnostmi, je nejlepší volbou nastylovat tyto vlastnosti pro daný prvek (příspěvek, odstavec), nebo nastylovat třídu a přiřadit ji k danému odstavci, nebo prvku span. Pokud chceme nastylovat text, který je použit pouze jednou v celém blogu a ani v budoucnu nehodláme toto nastylování použít jinde, většina výhod CSS nastylování pomocí zápisu do externího souboru se vytrácí a můžeme použít nastylování pomocí řádkového stylu.

komentáře 0

30.10.2006 12:43 - CSS design blogu - trvalý odkaz

Nadpisy

V blogu je možno použít nadpisy. K dispozici máme pět úrovní nadpisů tvořených pomocí HTML tagů <h2> <h3> <h4> <h5> <h6>, který z nich použijeme je určeno důležitostí nadpisu, nejdůležitější je<h1> a nejméně důležitý <h6>.

Nadpis <h1> by měl být v blogu použit pro nadpis celého blogu, místo něj je použit div: <DIV class="nazevblogu"> u tohoto blogu je to "nadpis" v červeném pruhu: HTML pro blogy na lide.cz .

Nadpisy <h2> jsou použity pro nadpisy příspěvků a při psaní příspěvku je název nadpisu <h2> možno zadat v kolonce Titulek:.

Nadpisy <h3> <h4> <h5> <h6> je možno použít v příspěvku. Při jejich použití by mělo být zachováno pořadí podle důležitosti nadpisu.

komentáře 0

30.10.2006 12:42 - CSS design blogu - trvalý odkaz

Vycentrování nadpisů

Ve výchozím nastavení jsou nadpisy, stejně jako všechen text v blogu zarovnány k levému okraji. Není to příliš hezké, pomocí CSS nastylování je možno zarovnat nadpisy na střed: h1, h2, h3, h4, h5, h6 { text-align: center; }. Pokud je pro CSS nastylování použito více selektorů, musí být od sebe jednotlivé selektory odděleny čárkou.

Je možno též vycentrovat pouze nadpis celého blogu h1: h1 { text-align: center; } nadpisy příspěvků: h2 { text-align: center; } nebo nadpis blogu a nadpisy příspěvků: h1, h2 { text-align: center; }

komentáře 2

29.10.2006 12:40 - CSS design blogu - trvalý odkaz

CSS nastylování dalších vlastností nadpisů

Pomocí CSS nastylování je možno změnit kromě vycentrování další vlastnosti nadpisů.

Zápis: h1 { color: blue; } změní barvu písma nadpisu na modrou.

Zápis doplním o změnu barvy pozadí nadpisu: h1 { color: blue; background-color: black; } modrý nadpis na černém pozadí.

Jako pozadí nadpisu je možno použít obrázek: h1 { color: blue; background-image: url("http://img294.imageshack.us/img294/7554/cernexm1.gif"); background-color: black; }

U předešlých variant se text nadpisu nehezky lepil na spodní okraj, proto zápis nastylování upravím: h1 { color: blue; background-image: url("http://img294.imageshack.us/img294/7554/cernexm1.gif"); background-color: black; padding-bottom: 2px; }

U nadpisu je možno změnit nastylováním vlastnosti font-family druh písma: h1 { font-family: Georgia,serif; } tabulka s druhy písma.

Pomocí vlastnosti font-variant je možné změnit písmo nadpisu na kapitálky: h1 { font-variant: small-caps; }

komentáře 0

29.10.2006 11:35 - Psaní příspěvku - trvalý odkaz

HTML -  

Znak  , neboli pevná mezera.

komentáře 0

29.10.2006 11:30 - Seznam blogů - trvalý odkaz

Seznam blogů

Vytvořil jsem seznam blogů, do něhož budu postupně zařazovat všechny zajímavé blogy. Blogy zařazené do seznamu jsem uspořádal podle témat jednotlivých blogů.