Zkratka na hlavní stranu: Alt + Shift + horní 2(ě)
Linkedin FB e-mail Google Plus Twitter

Hledat na tomto webu

 
 

Tipy a rady pro tvorbu webu

 

Motto pro studium

Škola nikomu nic nedá sama. Je jako velký švédský stůl – vezmete si z ní jen to, pro co sami natáhnete ruku.

Tipy a rady

Písma (fonty)

Patková x bezpatková

Patková
konce znaků jsou zakončeny patkami
patky pomáhají vést oči po řádku => hodí se pro delší texty (pro texty článků, apod.), zejména při tiskovém výstupu
příklad: Times, Times New Roman, Courier, Courier New
v definici font-family nezapomeňte na obecnou rodinu písem serif!
Bezpatková
konce znaků nejsou zakončeny patkami
hodí se pro krátká sdělení velkým písmem, „uprostřed prostoru” mimo řádek – nadpisy a loga, příp. obecně pro zobrazení na monitoru
příklad: Arial, Arial CE, Verdana
v definici font-family nezapomeňte na obecnou rodinu písem sans-serif!

Pro strukturovaná sdělení, jako seznamy, tabulky nebo text členěný pomocí častých nadpisů lze v podstatě použít jak patkové, tak i bezpatkové písmo.

Proporciální x neproporciální

Proporciální
jednotlivé znaky mají různé proporce – znak „M” je širší než znak „I”
hodí se pro většinu příležitostí
mohou to být bezpatková i patková písma
příklad: Arial, Arial CE, Verdana, Times, Times New Roman
Neproporciální
všechny znaky mají stejné proporce – znak „M” je stejně široký jako znak „I”
hodí se pro výpis zdrojového kódu, či pro jiné případy, kdy potřebujeme části textu zarovnat pod sebe – v těchto případech lze k zarovnání patřičných znaků pod sebe využít i několik tvrdých mezer („ ”) vedle sebe – mezera je u neproporciálního písma široká stejně, jako každý jiný znak
příklad: Courier, Courier New

Definice font-family v CSS

Na závěr každé definice font-family je nutné uvést patřičnou obecnou rodinu písem (patřičnou = tu, která tam patří). V jedné definici font-family nemíchejte patková a bezpatková písma!
Vy, jako autoři webu, rozhodnete, zda se daný element za daných okolností má zobrazit patkovým nebo bezpatkovým písmem, a počítači dáte na výběr postupně několik fontů (stačí i jeden), zakončených uvedením jejich obecné rodiny. Proto by bylo naprosto neúčelné v jedné definici namísit patkové fonty s bezpatkovými.
Více informací naleznete na webu jakpsatweb.cz.

Psaní znaků „<” a „>” na české klávesnici

  • vždy musí fungovat alt+60, resp. alt+62, podle desítkových ASCII hodnot znaků
  • obvykle funguje pravý alt + patřičná klávesa „<”, resp. „>” jako kdyby byla zvolena klávesnice IBM
  • pro psaní znaku „$” (např. v php) můžete použít pravý alt a „ů”

Ladění a validace stránky

Při problémech s validací stránky použijte u validátoru funkci „Direct input” nebo „File upload”, abyste měli jistotu, že validátor nenačítá starý kód z cache.

Přípony souborů

Pokud trváte na správě souborů pomocí „Tento počítač” a opravdu nechcete využívat Total Commander (nebo třeba Salamander), tak si v Tomto počítači alespoň vypněte skrývání přípony u známých typů souborů.
Protože odkaz na soubor ani vložení obrázku *.jpeg opravdu nebude fungovat, pakliže ve skutečnosti jde o soubor *.jpg (a naopak).

Chybné zobrazení zdrojového kódu ve FF3

V Mozille Firefox (min. ve verzi 3.0.3) po použití volby „Zobrazit zdrojový kód výběru” (z kontextového submenu shift+F10) v zobrazení zdrojového kódu stránky chybí lomítka na konci nepárových tagů (img, input, …)! Při stisku Ctrl+U a zobrazení celého kódu se lomítka zobrazují správně. Dejte si na to pozor při kopírování kódu přes schránku!

Práce v Macromedia Homesite nebo v PSPad

  • Zkontrolujte si zaškrtnutí volby syntaxe XHTML
  • Zapněte si zobrazení čísel řádků
    (u statického webu využijete pro hledání chyb podle zpráv validátoru)
  • Tučné písmo, kurzívu a tvrdou mezeru lze vložit jako ve Wordu
    (Ctrl+B, Ctrl+I a Ctrl+Shift+mezera)
  • Odřádkování lze vložit Ctrl+Enter
  • Některé časté elementy lze vložit stiskem Ctrl+Shift+první_písmeno_označení_elementu
    – např. Ctrl+Shift+P pro vložení odstavce
  • Jenom pro PSPad

    • Po stisku Ctrl+mezera se zobrazí seznam elementů, který je možné dále filtrovat postupným zadáním označení elementu
      (někdy je po zvolení elementu k dispozici i malý průvodce pro zadání atributů)
    • Zkratka Ctrl+W zapíná a vypíná zalomení řádků
  • Výhoda Homesitu oproti PSpadu

    • obsahuje přehledné panely nástrojů pro vložení elementů a úpravu jejich atributů
      (oceníte hlavně zpočátku)
  • Výhody PSPadu oproti Homesitu

    • zvýrazňuje začáteční a koncové značky párových tagů, pokud jsou v různých řádcích
      (oceníte hlavně u složitějšího/delšího kódu)
    • Editor PSPad je zdarma
    • je připraven pro editaci kódu v různých dalších jazycích –nejen v (X)HTML
    • je český výrobek, má české menu

Znaková sada – kódování češtiny

Pro kódování češtiny připadá v úvahu středoevropská sada Windows-1250 nebo mezinárodní sada UTF-8. Je vhodné zvolit si jednu sadu a tu držet na celém webu stejnou (resp. alespoň v celé jedné jazykové verzi webu).

Výhody Windows-1250 oproti UTF-8

  • menší datová náročnost (tentýž text ve Win-1250 zabere méně KiB, než v UTF-8)
  • používanější znaková sada, lze ji očekávat u textů z různých zdrojů – které tedy nebudete muset převádět do UTF-8
  • je běžnější, umí ji více editorů (např. MM Homesite nemusí umět UTF-8)
  • pokud máte dynamický web a chcete si prohlížečem prohlédnout vkládanou „stránku” bez záhlaví, může být při použití UTF-8 zobrazena nesmyslně (resp. bude nutné ručně zvolit znakovou sadu v menu prohlížeče)

Výhody UTF-8 oproti Windows-1250

  • naprosto univerzální kódování – zvládá přímo a snadno všechny běžné abecedy, bez složitého kódování můžete běžným způsobem vložit znaky nejen v latince s nejrůznější diakritikou, ale i v cyrilici apod.
  • některé databázové systémy ho mohou natvrdo vyžadovat – zkrátka nemusí jinou znakovou sadu vůbec podporovat
  • můžete ho použít pro celý web bez rozdílu jazykových verzí (při použití Win-1250 je vhodné pro ruskou verzi použít Win-1251 – z toho plynou i komplikace při použití ruských slov v českém textu a naopak)

Tak kterou?

To si rozhodněte sami. Hlavně ale zvolenou znakovou sadu (ve které textový editor fyzicky uloží soubor) uveďte správně v hlavičce dokumentu.

Skok nahoru na: Navigační menu
(klávesová zkratka Alt + Shift + horní „5”)

Zaujala Vás tato stránka?

  • Přidat do záložek (Ctrl+D)
  • Sdílet odkaz (vysílačka)Skok nahoru na:
  • Vytisknout (Ctrl+P)
  • Citovat podle ČSN ISO 690

    Tuto stránku

    ADÁMEK, Martin. Tipy a rady pro tvorbu webu. Martin Adámek [online]. Náchod / Meziměstí [cit. 2024-10-10]. Dostupné z: https://www.adamek.cz/fim/tvorba-webu/tipy-rady

    Celý web

    ADÁMEK, Martin. Martin Adámek [online]. Náchod / Meziměstí [cit. 2024-10-10]. Dostupné z: https://www.adamek.cz

 

 
 

Národní kulturní dědictví

WebArchiv – Stránky archivovány Národní knihovnou ČR Tyto stránky jsou pravidelně archivovány Národní knihovnou ČR pro svou kulturní, vzdělávací, vědeckou, výzkumnou nebo jinou informační hodnotu za účelem dokumentace autentického vzorku českého webu. Jsou součástí kolekce českých webových stránek, které NK ČR hodlá dlouhodobě uchovávat a zpřístupňovat pro budoucí generace. Jejich záznam je součástí České národní bibliografie a katalogu NK ČR.  

 

 
 

Pro rozptýlení

Víte, jak matematik nahání lva do ohrádky? Kruhovou inverzí.

Pro ty, kdož neznají kruhovou inverzi:
Byl jednou jeden farmář a ten potřeboval pro své ovce co největší plochu pastviny ohradit co nejkratším plotem. Zavolal si na pomoc inženýra, fyzika a matematika.
Inženýr postavil kruhovou ohradu a prohlásil, že to je nejúspornější způsob.
Fyzik postavil dlouhou přímou zeď a prohlásil, že můžeme předpokládat, že je nekonečně dlouhá.
Matematik postavil malinkou ohrádku kolem sebe se slovy: „Já jsem venku, a co je za plotem, to je uvnitř ohrady.”

 

Pro zamyšlení

Na dosažení cíle máte jeden život, ne jeden pokus.
[Bill Gates]