Uživatel:Juandev/Problémy/Webdesign/Webdesign s Molly E. Holszchlag

Tak jsem se rozhodl, že budu studovat HTML a webdesign u třech mistrů. Tohle je jeden z nich. Zdrojem je kniha ISBN 80-247-1454-X.

• pokračování tohoto studia

O co jde

Zřejmě v této knize studujeme XHTML 1.0 a CSS 2.1. Je to příjemná kniha, se kterou se dobře pracuje.

Teoretická část

Hodina 1. (XHTML)

V první lekci jsem si osvěžil to jak se vytvoří HTML dokument a DTD deklarace, v tomto případě pro XHTML. Dále:

• zajímavá informace je, že DTD není HTML tag, ale SGML tag
• před DTD se nesmí nic vkládat
• tag title vlastně pojmenovává okno stránky, plus připojuje typ prohlížeče. Je důležité správně pojmenovat stránku. Tag title je povinný!
• do tagu meta se dá vložit hodně informativních věcí, atribut "author" udává autora stránek, tedy web designéra (hlavní část práce)
• tag script může odkazovat JavaScript
• tag style může odkazovat na CSS
• tag link má řadu funkcí, může též odkazovat na ikonku v názvu prohlížeče

Doplňující dotazy

• v jakém jazyce je toto: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ? Očividně se jedná o deklaraci, kterou používám např. validátor z validování dokumentu. Kdo ještě může tuto deklaraci používat?
  • odpověď zní: DTD je nápověda v jazyce SGML pro browsery, jak se značkami nakládat, lépe řečeno, jak vše vykreslovat. Je to doporučení pro vyhledávače. Problém ale je, že browsery to neberou tak jak to leží a běží, ale některé věci si mění, či je ingorují. Problém u IE pak je v tom, že kvůli zpětné kompatabilitě a tradici, není schopen přijít z lepší verzí, která by dodržovala standardy!--Juandev 24. 11. 2009, 13:21 (UTC)
• dozvídám se o HTML5, který bude nástupcem všeho, i snad XHTML. No a taky bude vkládat Ogg Theora a Ogg Vorbis. No a z toho taky vyplývá, že XHTML 2 nebude!
• také si uvědomuji, že kniha pracuje s XHTML 1.0, ale vyšla i specifikace pro XHTML 1.1 - otázka je s jakou podporou ve vyhledávačích.
  • Také se odzvídám, co je to XHTML Basic. Je to vlastně ořezaná verze XHTML pro externí zařízení, ze které se vyvíjí v XHTML Mobile Profile, neboli XHTML-MP.

Ukázka vývoje značkovacích jazyků pro mobilní zařízení

• • Důležité je také zmínit XHTML-Print pro tisk z mobilních zařízení. XHTML 1.2 asi taky nedopadne a XHTML 2.0 taky vypadalo zajímavě, ale vypadá to, že po několika letech práce se realizovat nebude - prostě nastupuje HTML 5.
• DOCTYPE může být PUBLIC, nebo SYSTEM. PUBLIC je veřejný, SYSTEM znamená unikátní verzi XHTML, která byla někým vytvořena.
• velmi důležité je pro mě objevení w:en:Help:HTML in wikitext a w:en:Help:Cascading style sheets a určitě bude i pro w:en:Wikipedia:WikiProject User scripts/Scripts:-) tady je třeba doplnit, že v některých verzích mw funguje i tag poem, podobný tagu pre.
• užitečné bude také navštívit w:en:Help:User style - vypadá to, že styl může být jen uživatelský a celkový, nikoliv pro jednotlivé stránky, nebo jmenné prostory. Což by se snad dalo dohnat nějakým rozšířením, stejně tak i použití XHTML
• co je to jmenný prostor v HTML?
  • je to prostě určitý prostor --Juandev 24. 11. 2009, 13:21 (UTC)
• také se dozvídám, že znaková sada může být buď:
  • ISO = International Standard Setting
  • UTF-8 = 8-bit Unicode Transformation Format, čili UTF je Unicode, tedy další značkovací standard
• také se dozvídám, že je dobrá kódování nastavovat jak pro jmenný prostor XML, tak pomocí atributu meta
• také se dozvídám, že moderní browsery už nejdou pouze po index.html, ale jsou schopny vytvořit seznam stránek a vybrat

Na IRC se dále dozvídám

• že vlastně u IE nejsou problémy s podporou XHTML jako takového, ale spíš s podporou CSS 2.1
• FF dobře renderuje a je bezpečný, ale nejede mu rychle jádro, což IE jede
• FF si uživatel může seřídit, IE se seřizuje z vnitřku
• lidé jsou liní přejít "byď" i k lepšímu vyhledávači
• Safari a Opera se používají na některých mobilních zařízeních
• Netscape je mrtvej

… Zroj: IRC #HTML 2009-11-24

Související

• PSPad/Juandev
• Studuji HTML v MediaWiki (Juandev)

Hodina 2. (XHTML)

Zde šlo o základní formátování textu, seznami, odkazy a mejly.

• nadpisy 1–6 je třeba postupně hierarchicky členit
• odstavce jsou takové jaké jsou, aby se mi víc líbili třeba tím, že vypadají "česky", musím se naučit CSS
• řádky se zalamují pomocí tagu <br />. Pohybujeme se v prostředí XHTML, tudíž musí být tento "otevřený" tag uzavřen (v HTML by stačilo použít <br /> tam, kde je potřeba zalomit). To že je tam mezera mezi tím písmenem a lomítkem je vysvětleno tak, že některé starší prohlížeče to může mást – proto se tam vkládá tato mezera. Stejně to funguje i u ostatních tagů, jako je <hr />. Tag br se dá využít například při tvorbě básní.
• naučil jsem se také dělat seznamy. Položka seznamu se označuje tagem <li></li>, tedy list item. Číslovaný seznam to pak obalí jako <ol><li>text 1</li><li>text 2</li></ol> jako ordered list a nečíslovaný používá tag ul, jako unordered list.
• Samozřejmě, že se tyto seznami mouhou volně kombinovat, resp. jeden se může vnořit do toho druhého a naopak. Styl se dá opět upravit pomocí CSS.
• další věcí byly definiční seznamy, které bych mohl více využívat. Seznam se tvoří tagem "dl", tedy definition list. Termín se do něj vkládá pomocí tagu "dt", tedy definition term a následně se vysvětluje vložením elementu "dd", tedy definition description.
• pak tu byla řeč o odkazech:
  • to se dělá pomocí kotvy a atributu href (tedy hypertext reference) s absolutí cestou (to je vše), nebo s relativní cestou. Absolutní cesta má samozřejmě svoje výhody. Pomocí atributu "#title" se dá zadat název na co je odkazováno, atribut "tabindex" pak udává číslem důležitost, při prohledávání stránky, resp. jejích odkazů, jen pomocí tabulátoru.
  • dále se pomocí kotvy (a = anchor) dá volat applet na odeslání mejlu
  • a také vnitřní odkazy. Odkaz od někud někam v rámci stránky se dělá tak například takhle: <p><a href="zaver">Shruniti mate na konci</a>, ale ted uz nas zajima jiny problem.</p><p>...........</p><h2 name="zaver">Zaver</h2>.
• No a důležitý poznatek na závěr, je si třeba uvědomit, že HTML používám opravdu, jen k formátování dokumentu. Tagy používám pro to, pro co byly nevrženy, ne pro nic jiného. Proto aby se dokument líbil, mě i ostatním se používá CSS. Vlastně tu jde o to, že pomocí tagů HTML tvořím strukturu.

Doplňující dotazy

• prostě a jednoduše, každá stránka má jeden nadpis H1, co se sním udělá - jestli se skreje, nebo využije jako záhlaví přes CSS, to už je jiná
• br se hodí například pro básně
• připomínám si, že u odkazů existují 2 cesty:
  • absolutní - tedy celá; například http://cs.wikiversity.org/wiki/pes
  • relativní - odkazují na soubory spojené se stejným serverem
• u kotvy je kvůli dostupnosti potřeba vyplňovat atribut "title" a atribut "tabindex"
• je třeba si uvědomit, že lidé jsou líní a tak používají Outlook, proto je třeba se zamyslet, jestli necpat e-mail rovnou do HTML s hodnotou "mailto:..."!
  • jo a za tohle co to dělá, může tohle: mw:Manual:$wgUrlProtocols.--Juandev 25. 11. 2009, 16:12 (UTC)
• jaké hodnoty může nabívat "href" při použití kotvy jako e-mailu?
  • něco je tady: [1], ale je to dosti rozsáhlé--Juandev 25. 11. 2009, 15:31 (UTC)
• XHTML dělá strukturu textu, ne jak bude stránka vypadat!…otřepaný výkřik
  • aneb, když mám čisté a správné HTML, tak se mi s tím dále lépe pracuje při nasazení CSS a JavaScrtiptu
• od mailto: se dostávám k meta:Interwiki map a odtud třeba sem google:pes - není to nádherné!?--Juandev 25. 11. 2009, 16:29 (UTC)

Hodina 3. (XHTML)

V této hodině jsem se seznámil s tím jak vkládám a upravuji obrázky, odkazuji na jiné soubory, či je vkládám do dokumentu. Taky jsem se dozvěděl, že tag object směřuje k tomu, aby jednou nahradil všechny tagy, které vkládají nějaký objetk, dokonce i img, tedy obrázek. Jo skrypty. Ty se dají vložit přímo do řádku, do hlavy, nebo do externího souboru. Já už ale vím, že nejednodušší a nejpřístupnější je vkládat skripty a styly do jiného souboru (v případě js například do souboru popup.js).

• čili obráky vložím pomocí tagu img, tedy image a je třeba zadat cestu, kde se nachází. Čili jediný povinný atribut je pak scr, jako source. Samozřejmě mohu pomocí width a high nastavovat šířku a výšku.
• nejednoduší zjistění původní výšky a šířky obrázku, je otevřít ho přímo v prohlížeci. Pak je to vidět přímo v záhlavní liště.
• z obrázku se dají dělat odkazy, což se dá např. využít k změně desgignu tlačítek. Tohle je ale lepší řešit pomocí CSS!!!
• dají se též dělat klikací obrázky pomocí imagemap
• obrázkům je k unadnění třeba dodávat, alt, tedy alternate text, který se zobrazí, tam, kde se nezobrazí obrázek (třeba když je vypnut)
• do elementu object se vkládají elementy param, které definují parametry vložených nebo odkazovaných souborů. To dává větší svobodu uživatelům. Někdy se proto také vkládají objekty v různých kvalitách tak, aby každý mohl tyto soubory vychutnat ze svého (byť i horšího) počítače.

Doplňující dotazy

• připomínám si, že na webu se nejčastěji setkávám s obrázky ve formátu:
  • GIF (Graphics Interchange Format) - pro obrázky s malým počtem barev - nepodporuje dobře přechody barev; animované obrázky; rastrový formát
  • JPEG (Joint Photographic Experts Group) - pro fotografie a obrázky z více barvami; je to ztrátový formát, což znamená, že při vyšší kompresy se ztratí data a obrázek se stává méně ostrým; přechody jsou rozostřené; také existují bezstrátové JPEGy, ale ty nemají širší podporu

Různá míra komprese u jednoho obrázku ve formátu JPEG

• • PNG (Portable Network Graphics) - pro pérovky. Pozor IE6 ho nepodporuje!; je to bezstrátová bitmapa; byl vyvinut jako náhrada GIFu, když u něj byly majetkové spory
• někdy je lepší mít na stránce méně dekorativních prvků, aby se zkrátila doba načítání, tzn. mít i obrázky odpovídající velikosti
• vhodné formáty pro fotografy jsou TIFF (Tagged Image File Format), RAW (Raw Image Format) - pozor formátů RAWu je ale mnoho! a ztrátový JPEG
• no a SVGéčko se nedá pro IE použít a v XHTML by se muselo vkládat do tagu <object>
• DHTML, neboli Dynamic HTML, je soubor technik kombinujících HTML a např. JavaScript vytvářejících dynamické stránky
• pokud vkládám obrázek, měl bych vždy uvést výšku a šířku, aby to nedělalo v prohlížečích rotyku. Nejednoduší způsob jak zjistit výšku a šířku původního obrázku je otevřít ho v prohlížeči - rozměry obrázku se pak zobrazí v záhlaví okna. - některé prohlížeče to nemusí podporovat, pak následuje grafické editor:-)
• šířka a výška by se měla zadávat taková jaká je obrázku vlastní, pokud obrázek zvětšuji nebo změnšuji, měl bych to dělat v grafickém editoru, nikoliv v HTML
• také by se měl pomocí atributu alt zadávat alternativní text
• zbavení se defaultního rámečku kolem obrázku by se mělo dělat v css atributem border="0"
• do atributu title se zadávají další informace o obrázku
• pak tu máme vkládání zvuků a videí, které se dělá opět pomocí oblíbené kotvy
• u těchto souborů je dobré uživatele co nejvíc informovat o délce, velikosti a dalších věcech, či to nabízet v různé kvalitě pro různě rychlá připojení
• také je dobré vyplnit title
• přímé vložení souboru se používá element object - používá se pro všechny externí objekty včetně obrázků a původně měl ve vyšších specifikacích nahradit kotvu pro obrázky! - uvidíme co HTML 5
• zvukové formáty:
  • MID(I) (Musical Instrument Digital Interface) - soubor not a dalších vlastností přehrávaných počítačem, malé soubory = hodně muziky; podpora v řadě prohlížečů; a samozřejmě i MIDI má několik formátů
  • RealAudio formát (soubory *.ra, *.rm, *.ram) – umožňuje streamovat hudbu, ale i video; nezatěžuje přenos => horší kvalita; je to proprietární formát
  • Au formát - koncovka *.au
  • AIFF a SND formáty podporuje pouze Japko (POZOR: některé au formáty měli také koncovku .snd); WAVy jedou pouze na Vidlích - i když Wikipedie si myslí, že tyto formáty mohou jet na všech velkých platformách!
    • WAV, neboli Waveform je zvuk uložený v nekomprimovaném stavu, často ve formátu PCM (Pulse Code Modulation). Také je třeba dodat, že wav je pouze pro počítače, nikoliv pro cédéčka apod. WAVy pak nahrazují kompresní (ztrátové) formáty jako:
      • MP3 (MPEG-1 Audio Layer 3, čili Moving Picture Experts Group) - je formát i standard pro digitální zvuk. Kódování nemusí být u tohoto formátu stejné - závisí na softwaru. Bit rate (česky přenosová rychlost) mi udává kolik kilobitů se použije na jednu sekundu záznamu. Pokud je bit rate malý, mohou se ve zvuku objevit kompresní artefakty:-( Existuje CBR (Constant Bit Rate) přístup, kdy vše je zkomprimováno při stejném "bit rate" a VBR (Variable Bit Rate), kdy je to všude jinak. Těm co vědí, jak jim to zní dobře si mohou každý soubor jinak zkomprimovat. Také se dozvídám, že obliba empétrojek podvědomě stoupá, což je dáno asi tím, jak je navržena kompresní procedůra. Bit rates (zvírazněné se používají na internetu): 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256 and 320 kbit/s.
      • AAC (Advanced Audio Coding) - s koncovkami mp4, je vylepšením mp3 používaném v jiných zařízeních, než počítačích, ale dokáže ho dekódovat řada PC softwaru (jako RealPlayer, VLC, Winmap, Windows Media Player 12, Nero a další). Čili AAC je lepší než MP3 s nižší přenosovou rychlostí. S vyšší přenosovou rychlostí to tak není - tzn. že acc/mp4 se hodí pro nahrávky, kde nám potřebujeme nižší velikost souboru.
      • Ogg (je to z ňákejch fantasy) - formát, který není zatížen patenty. Může v sobě nést digitální zvuk, video, text (např. titulky) a metadata. Vorbis je pak kodek audio vrstvy, kdežto Thora je pro video vrstvu. No a FLAC kodek je beztrátový kodek pro zvuk. Později došlo k vytvoření různách formátů souborů: a) .oga - pouze audio, b) .ogv - video se zvukem nebo bez, c) .ogx - pro různé aplikace. Čili Ogg je pouze kontajner (proto někdy nejdou nahrávky z Commons přehrávat), pro další kodeky:
        1. audio
           1. ztrátové
              1. Speex - pro hlasové nahrávky o malých přenosových rychlostech (~8-32 kbit/s/channel)
              2. Vorbis - VBA audio (~16-500 kbit/s/channel), na nižších přenosových rychlostech může být lepší AAC (u nižších než 64kbit/s je WMA ve stejné kvalitě), ale na středních a vyšších je lepší Voribis. Při nižších přenosových rychlostech se objevují kompresní artefakty.
           2. bezztrátové
              1. FLAC - ovšem podpora je střední
              2. OggPCM - v experimentální fázi, kapsule pro PCM kompresi
        2. video
           1. ztrátové
              1. Theora - svobodný formát. Stejně jako Vorbis i Theora je jméno jakési filmové postavy. Je to kompresní VBR kodek. Používá se v kontajnerech Ogg, nebo Matroska. Je to spinoff VP3, který byl uvolněn pod svobodnou licenci. No a snad to má být základní video formát v HTML 5. No to jsem teda zvědavej, jestli ho konkurence "nevykřičí" ven. Není na to ale software, vyjma ffmpeg a VLC. Jinak podpora v prohlížečích jako FF, Chrome, SeaMonkey, Opera vyšších verzí.
           2. bezztrátové
              1. OggUVS - draft
        3. text
           1. Writ - pro titulky
           2. Continuous Media Markup Language - metadata, titulky, formátování
           3. a další.
      • WMA (Windows Media Audio) - jedná se o 4 kodeky, z čehož jeden je beztrátový. Tyto kodeky nejsou navzájem kompatabilní a bývají v kapsuly formátu ASF (Advanced Systems Format). Nejrozšířenější je klasické WMA, které je kódováno na základě výsledků psychoakustiky. WMA je propietary. Má zabudováno VBR a ABR (Average Bit Rate). Nicméně bohužel WMA Pro, vylepšená verze WMA; WMA Lossless a WMA Voice nemají širší podporu. Z nezávislých testů vyplívá, že při nižší přenosové rychlosti je WMA spíše horší než ostatní kodeky, taktéž při střední, teprve při supervysoké může být stejné. Potpora klasického WMA je střední.
  • shrnuto a podtrženo w3schools doporučují empétrojky
• pak tu také máme videoformáty:
  • AVI (Audio Video Interleave) – kontejner pro video i audio. No a vypadá, to, že to jede jen pod Vidlema a není to obecně dobrej kontyš.
  • WMV (Windows Media Video) - mikrosofťáckej kompresní formát. Často bývá v kapsuly ASF (Advanced Systems Format). Zároveň je to též kodek. Zvládá i high-definition video. Podporuje VBR, ABR a CBR (constant bit rate). Další dva kodeky, které se pod to zahrnují jsou WMV Screen (pro video návody z obrazovky) WMV Image (pro slajdy – pozor vyžaduje výkoné počítače!). Jede na Vidlích a Linuxu (FFmpeg), nejede na Japkách. Neobsahuje DRM, ale kapsule ASF ano. Verze jsou vzájemě nekompatabilní.
  • MPEG (Moving Pictures Expert Group) – jede na všech platformách. Obsahuje několik standardů:
    • MPEG-1 (1993) se dnes používá již jen u videí nízké kvality na DVD.
    • MPEG-2 (1995) požívá se u DVD Video Blue ray (Blue ray disc - vysoké kvality). MPEG-3 není standard, protože bylo sloučeno do MPEG-2.
    • MPEG-4 (1998) bylo navrženo speciálně pro počítače. Obsahuje nástroje pro DRM a Intellectual Property Management and Protection (IPMP). Obsahuje MPEG-4 AVC, používané na Blue ray discích.
    • MPEG-21 (2001) standard pro autorská práva.
  • QuickTime (koncovka .mov) je formát vyvinutý Japkem, pro Vidle snad nejnovější verze.
  • RealVideo (.rm, .ram) – jede na všech platformách a je dobré na televizní internetový streaming. Je propietary. Kodek je postavenej na H.263 (je z toho také odvozeno Flash video). Nejde přehrávat na ostatních přehrávačích, protože poslední kodek je ten propitary, tak se dostupnost zmenšuje na to, že si každý musí nainstalovat RealPlayer:-( A to je shit jak vím.
    • H.263 je standard pro videokodek, který byl vypracován pro nízkou přenosovou rychlost konferencí. Flash Video jako YouTube ho používá a byl na něm postaven i RealVideo. Dále ho používají MMSky (Multimedia Messaging Service). MPEG-1, 2 a 4 byly také postaveny na standardech H.26x série. Dokonce i AVC používá standard H.26X série a dnes se používají hlavně verze H.261, H.263 a H.264.
  • Shockwave (formát .swf) - to už snad pane bože ani neexistuje, ale měli to v sobě Netscape a IE. Neb je to dnes Adobe Flash. Hodně se rozšiřuje ale nemá stoprocentní pokrytí.
  • Ogg Theora - viz výše.
• a jak se to dá vše přehrávat:
  • hudba může být tzv. inline, to je zvuk, který se přehraje při otevření stránky. Řadu uživatelů, ale takové zvuky otravují a řada z nich má zvuk obecně vypnutý. Doporučuje se tedy dávat zvuk, tam kde te uživatel očekává.
  • s použitím elementu <object> a <embed> se dá volat externí aplikace, která ten zvuk přehraje. To má své výhody. <embed> už je ale zvrhnutý tag!
  • řada vyhledávačů otvírá zvuk automaticky v externí aplikaci, pokud je na zvuk odkazováno přes kotvu a href
  • stejné je to u videí
• elementem "object" se dá zobrazit skoro cokoliv: video, zvuk, obrázek, jiná webová stránka atd. Problém, je ale s funkčností v různých prohlížečích. Flash a obrázek se ukázali, jako že jdou u jiných byly problémy.
• další informace k object se pak najdou zde: [2] - dostudovat to a rozepsat to sem!--Juandev 15. 1. 2010, 11:19 (UTC)

• no tak to byl malý exkurz jinam a co tu máme dál:
  • no a tady to říkají, že s elementem object je napříč prohlížeči problém. Že třeba v XHTML 2.0 se měl object stát univerzálním a img zrušit. Tak uvidíme co přinese HTML 5 a jestli někdy XHTML v budoucnu přeci jen neoživí. Často se pro obživení takových medií používá nevalidní element embed, který řada prohlížečů prostě má. Například že ho vnořím do elementu object.
  • pak tu máme skripty, které mohou být inline, tedy v elementech (to dělá ale pěknej bordel v kódu), či vložené pomocí elementu script do záhlaví (to ale napříč browsery a značkovacími jazyky, dělá taky rotiku), čili nejlepší je používat skripty připojené z jiného dokumentu.
  • a opět se dozvídám, že bych si měl udělat pořádek na webu a vše zařadit do správných adresářů, dále zjednodušti svá CSS a i napsat v CSS jasné poznámky a popisky.--Juandev 15. 1. 2010, 11:19 (UTC)

Hodina 4. (XHTML)

Tahle hodina byla pouze o tabulkách. Takže:

• tabulka se vkládá pomocí elementu <table>content</table>
• její šířka se vytváří buď pomocí px, které jsou hodnotou atributu width (zde bez značky px, pouze číslo), nebo pomocí procenta (zde je to lepší, neb procento se přizpůsobuje velikosti prohlížeče).
• analogicky jde nastavit i výška tabulky pomocí atributu heigh--Juandev 13. 8. 2010, 16:39 (UTC)
• to co dělá tabulku tabulkou je vytvoření rámečku a odsazení. Jednotlivé buňky odsazujeme pomocí attributu cellspacing, místo mezi rámem a textem pak pomocí atributu cellpadding. Atribut border nám udává tloušťku ohraničení celé skupiny buněk. A jak se tedy vkládají řádky do tabulky? Takhle:
• řádky se vkládají jeden za druhým jak položky seznamu pomocí elementu "tr", tedy table row - každý řádek může obsahovat několik buněk: "td", tedy table data cell, které ve výsledku tvoří sloupce
• sloupce a řádky lze libovolně kombinovat
• tag "th", table header mi pak vkládá záhlaví tabulky. To je text, který je v tabulce tučně. Záhlavní tabulky mohu vkládat do sloupců = vertikální tabulka, nebo do řádek = horizontální tabulka, anebo tam i tam (= kombinovaná tabulka)
• Taky je dobrý popisek tabulky, jak jsme se učili v hodinách Techniky administrativy. Ten se vkládá pomocí elementu "caption"
• a pak tu také máme veselé splývání buněk. Tedy splývání řádků, nebo sloupců. Zde je důležitá přesnost a vždy ubrat data, tam, kde něco splynulo. To by pak mohlo blbnout, nebo dělat rotiku. Řádky se splývají pomocí atributu "rowspan". Hodnotou je číslo, které udá počet řádků, které splývají. Tento atribut se dá vložit buď přímo do záhlavní, tedy tagu <th> (table header), nebo do řádku <tr> (table row). Analogicky se dají splývat i sloupce, zde pomocí atributu "colspan". Opět se obě možnost, tedy splývání tak či onak dá volně kombinovat.
• nesmíme také zapomínat na popis tabulky pro slepé prostřednictvím atributu summary v tagu table
• při zjednodušování (dostupnost, dlouhé tabulky) též existují pro seskupování tagy col a colgroup, ty ale neberou všechny prohlížeče. Tedy jsou určeny jen pro cílenou smetánku.
• no a pak taky se dají celkem podporovanými tagy "thead", "tfoot" a "tbody" seskupovat záhlaví, zápatí a samotná tabulka.
  • to sjednocování moc nechápu. A taky nechápu co nastavovat v html a co v css.--Juandev 13. 8. 2010, 16:39 (UTC)
• No a na závěr důležitá věc, pokud se nám nelíbí grafika tabulky, je to naše staré dobré známé CSS. Jo a tabulky jsou na tvorbu tabulek, nikoliv na rozvržení stránky, od toho tu je naše staré dobré CSS.

Hodina 5. (XHTML)

Zde šlo o formuláře. Tedy konkrétně o to jak se vloží základní formulář a jak se popíše, jak se zadávají zaškrtávací pole a jak se dělají přednastavené možnosti, jak se tvoří seznamy a dá vytvořit input okno, jak se vylepšuje jejich dostupnost a jak se seskupují.

• no formuláře jsou jistě také strukturálně důležité pro HTML
• formulář se vkládá elementem form, s atributy method a action, kde hodnotami atributu method jsou get a post a hodnotou pro atribut action bývá většinou URL odkazující na místo, kam se formulář odesílá
• u webového providera je nutno, zjistit, jaké zpracování formulářů vlastně nabízí, nebo si ho na svém serveru napsat
• vstupní textové pole se pak zadává otevřeným elementem input s atributem type a hodnotou text
• také je třeba pamatovat na atributy name a id
• dále pro element input máme atribut size, který udá šířku pole, kam se dá vepsat informace (v px) a atribut maxlength, který udá počet znaků
• standardně je tedy minimum toto: <input type="text" />, pro heslo vystupuje v úvahu zápis: <input type="password" /> - zde místo znaku budou zobrazovány hvězdičky
• pro atribut type tedy máme hodnotu "text", což je pro zadání obyčejného textu do fochu, hodnotu "password", kdy je očekáváno heslo, ale také hodnotu "checkbox", která mi vyrobí čtverčkový rámeček připravený k zaškrtnutí
• pokud chci aby bylo možno zaškrtnout jen jednu volbu, používám atribut value a hodnotu pro type radio
• přednastavená možnost se pak nastaví atributem checked s hodnotou "checked"
• pak tu máme seznamy, respektive rozerírací seznamy. Ty se nastaví tak, že se použije tag select a do něho se vloží jednotlivé položky seznamu, jako elementy option, s hodnotou value. V praxi to pak může vypadat následovně: <form method="get" action="URL"><select><option value="Juan">Juan</option><option value="Kychot">Kychot</option><option value="Bey">Bey</option></select></form>:-)
  • přednastavená volba se pak do seznamu přidává pomocí atributu selected a hodnoty "selected"
  • je též možné umožnit vícenásobný výběr tak, že se do elementu select zadá atribut size s počtem možností a atribut multiple se označí jako "multiple", logicky atribut value se pak neudává
• také je možné připravit zadávací inputové pole. to se dělá pomocí tagu textarea, kde se velikost zadává atributy rows (hodnotou je šílo), pro řádky a atributem cols (hodnotou je šíslo pro sloupce. Tedy např. <textarea rows="5" cols="6"></textarea>
• obsahem v elementu texterea je možné zadat text, který zde bude již obsažen, po klepnutí do rámečku se tento text odstraní
• dalšími šikovnými hodnotami atributu type elementu input jsou "submit" a "reset". "Submit" odešle obsah ke spracování a "reset" vše vrátí (tedy vymaže, pokud není nastaveno jinak).
• a stejně jak u odkazů a jejich pořadí, tak i zde se to dá nevidomím zjednodušit s použitím elementu label a atributu for, kdy hodnotou je nějaký název inputu
• a také můžeme opět vesele seskupovat. K tomu je tu jednak element fieldset pro celé formuláře, jednak element optgroup pro položky formulářů

Hodina 6. (XHTML)

Do této hodiny jsem se probojoval s vypětím sil, ale nakonec vypadala jednodušeji než předešlá hodino o formulářích. Tato hodina se věnuje rámům, rámům, které se používají už jen velmi málo a postupně se od nich ustupuje, díky náročnosti, jak na prsty a mozek codera, tak také na prostředky. Prý se s nimi dají dělat i nekalosti. Takže cože jsem se to tedy dozvěděl:

• že i když je to pomalu zavržená technika, tak je dobré jí znát, protože mohou nastat situace, kdy se mi něco z tého oblasti hodí
• že takový dokument obsahující rámy vůbec nemá tělo (<body></body>), ale pouze hlavu a zbytek se zařazuje do elementu <framset></framset>, kde se definují jednotlivé rámy tagem frame
• no a z těch tagů frame se pak už jednoduše odkazuje na soubory html, které už tělo mají a obsahují kód pro ten či onen frame
• framset pak udává jak bude rám vypadat. například atribut cols udává sloupce. stačí jen zadat hodnotu, respektive hodnoty podle počtu zamýšlených sloupců. Ty se udávají jednak v px, dále v procentech a v neposlední řadě dynamická šířka označovaná takto: *
  • zámpis pak vypadá </head><frameset col="100, 50, *, 20%"><frame src="prvniframe.htm" /><frame src="druhzframe.htm" /><frame src="tretiframe.htm" /><frame src="ctvrtyframe.htm" /></frameset>. Znamenáto, že zde budou 4 sloupcové rámy. První o velikosti 100 px, druhý 50 px, třetí dynamický a čtvrtý 20 %. Struktura jednotlivých rámů pak bude udána html dokoumenty, na které je odkazováno. Je jasné, že počet elementů frame musí být stejný, jako počet rámů.
• obnobně, pokud chci tvořit rámi v řádcích, tak přiřazuji elementu frameset atribut rows. Pochopitelně se dají sloupce a řádky kombinovat a to tak, že napřed tvořím jedno a v tom teprve tvořím druhé.
• dále tu pak máme různé atributy k tagu frame, které zadávají různé vlastnosti:
  • např. atributy marginheight a marginwidth stojí za výškou a šířkou okrajů rámu, atribut noresize naopak nastavuje neměnnou velikost rámu = nedají se posouvat jeho hrany a atribut scrolling přiřadí posuvník. Je to tak že tento atribut vyvstává ve třech hodnotách "yes" = posuvník je vždy zobrazen, "no" = posuvník není nikdy zobrazen a "auto", posuvník se objeví v momentu, kdy je to potřeba.
• také je možné zadávat rámy bez okrajů. To je ale v různých prohlížečích jinak funkční a jinak se to řeší. Vypadá to jako pozicování stránky - k tomu by ale html nemělo sloužit. Od pozicování je tu CSS!!!
• taky jsem se dozvěděl o vložených rámech, které se dají vkládat přímo do těla dokumentu pomocí elementu iframe
• a taky něco o skrývání před starými prohlížeči s použitím tagu noframes - čemuž ale moc nerozumím

Odpočinková hodina

Tady rekapitulace a prohlídka referenční příručky XHTML 1.0. Tak, tak, přesně tak.

• Vskutku jsem pochopil, že tagy se mají používat jen a jen pro to, na co byly navržené a že HTML, mi tvoří základní strukturu dokumentu, vylepšení se pak realizuje přes CSS
• našel jsem opravdu dobrou knihu, ve které i když není vše, tak je opravdu dobře metodicky zpracována a k její XHTML části se budu, ještě dlouho vracet.
• stále jsem ale nepronikl do sklrývání javascriptu a rámů
• nejsou mi též jasné, některé elementy, jako (tučně objasněné):
  • base - určuje výchozí adresu, pro všechny následné adresy. Tyto adresy musí vycházet z té která je v podobě URL v elementu base. Nemusím pak všude používat "dlouhou" absolutní cestu, ale stačí zkrácená relativní.
  • button - tohle na rozdíl od všech ostatních možností dělá tlačítko ve folmuláři složením dvou vrstev = obrázek + text. Předchozí možnost s tagem input, která se dá také nahradit CSS, vkládá pouze grafiku, ale žádný text.
  • cite, q, blockquote - na to je třeba dávat pozor
  • code - kus kodu, na rozdil od okolniho textu v prirozenem jazyce

• HTLM je o významu a jak říká Milda "v podstate kazda znacka, ktera nema semantiku, ale je ciste formatovaci (font, b, i, u) by mela byt nahrazena odpovidajici semantickou znackou nebo pomocnou znackou span a vzhled nadefinovan pomoci css"

Tak nakonec přibyly ještě nějaké tagy kterým zcela nedominuji, ale to si myslím spraví budoucnost a praxe. Jinak co se týče toho sjednocování, tak jsem si odzkoušel vzorové příklady a nakonec jsem to pochopil.--Juandev 2. 3. 2009, 12:20 (UTC)

Hodina 7. (CSS)

De facto jsem se zde seznámil s tím co to je CSS (Cascading Style Sheet).

• CSS zápis je tvořen ze selektorů, ke kterým se přiřazují jednotlivé deklarace s hodnotami. Selektor vždy odpovídá jednotlivým tagům, nebo se k nim dá připojit
• CSS je několika typů
  • prohlížeče - ?
  • uživatelské - například ve wiki user:xy/monobook.css
  • individuální - ty se vnořují přímo do tagů v html, čili ke každému zvlášť - to je z mnoha důvodů nevýhodné
  • vložené - vkládají se do hlavy. Taky nevýhodné, využití to má při návrhu stránek. Když je návrh hotov, stačí styl překopírovat do přiloženého CSS dokumentu.
  • připojené - samostatný soubor, například styly.css. Takový dokument se volá z hlavičky pomocí tagu link, kde atribut rel má hodnotu stylesheet, atribut type text/css, atribut href URL a atribut media může nabývat hodnot handled pro počítač do ruky, print, pro tiskárnu, screen pro obrazovku či hodnota "all" pro všechno:-) - těch atributů je ale mnohem víc jak uvádí Meyer.--Juandev 15. 10. 2009, 19:37 (UTC)
  • importované - viz w:Direktiva @import - pozor, nefachá u IE, viz Meyer.--Juandev 15. 10. 2009, 19:37 (UTC)
• přečetl jsem si o pojmech kaskáda, že tedy jsou styly hierarchizované a také dědičné, tzn. vnořené tagy přejímají stejnou vlastnost (například při použití pozadí pro tělo "body"
• pak jsem se dozvěděl jak se v CSS vkládá komentář, tedy /* text */ a že je dobré ho používat jako nadpis stylu
• taky jsem čuchnul ke struktuře css, která je taky příjemná
• a pobavila mě věta o složitosti css
• každá hodnota musí být zakončena středníkem

Hodina 8. (CSS)

Tato lekce byla hlavně o obrázcích, a barvách, jejich umísťování na pozadí a zápisu do kódu. Jak se dá obrázek opakovat a jak se dá uchytit k jednotlivým elementům. Taky o vlastnostech těchto obrázků. Čili:

• barvy je možno vkládat buď přes názvy, těch ale moc není, nebo přes hexadecimání čísla či RGB procentní zápis
  • hexadecimální hodnoty se dají nejlépe určit zde: [3], nebo vybrat z nějakého seznamu - na internetu jich existuje mnoho
  • zkrácené hexadecimální hodnoty se dá dělat jen tehdy, pokud je daný zápis stejnocený, takže například #888888 nebo #FF8800 zkrátím na #888 resp. #F80
  • co se týče procentního RGB zápisu, zde se zapisují pouze procenta jednotlivých barev. Tedy red = červená, green = zelená a blue = modrá
  • no a pak tu máme 17 anglických názvů barev pro CSS 2.1
• v zápisu je možno tyto zápisy libovolně kombinovat
• pozadí se dá nastavit jak tělu, tak i jiným elementům. Jelikož je to ale kaskáda, chci-li vložit elementu jiné pozadí, než je v celém dokumentu, vkládá se toto, jako další vrstva na pozadí těla dokumentu
• pokud je na pozadí obrázek, je dobré tam mít i barvu - ta se totiž vždy rychleji načte a pak se může donačíst samotnou borázek
• zápis pro pozadí těla dokumentu je pak například

  body {background-color: #fff;}

  a pro pozadi elementu muze byt

  h1 {background-color: #ccc;}

• také jsem se dozvěděl co je to selektor třídy. Je to prostě nastavení určitého stylu, který je s tagem v html propojen hodnotou typu class
• selektory se dají seskupovat tak, že se píší za sebe
• obrázek pozadí se dá opakovat tak, že se k deklaraci "background-repeat" přidá hodnota repat-x; nebo hodnota repeat-y;
• deklarace "background-position" pak umisťuje obrázek. Hodnotami jsou procenta, pixely, nebo názvy. Pozor, zde narozdíl od HTML je px nutno uvádět!
• další deklarací je "background-attachment". Hodnota "scroll;" znamená, že se obrázek posouvá společně s rolováním textu, fixed; je naopak tvrdé uchycení vůči rolujícímu textu.
• hodnota transparent?
• no a taky jsem se dozvěděl o zkkráceným zápisu, kdy se uvede jen první deklare a ostaní již ne)

Hodina 9. (CSS)

V této lekci jsem se seznámil s tím jak měnit styl textu. Čili šlo o:

• dejme tomu, že je několik obecných rodin písma, ale pře webdesignu je třeba dávat pozor na to jaký operační systém užívá, pak podle jedné typografické stránky existuje jen velmi malý počet řezů písma, které lze ve webdesignu použít
• čili zpět k obecným rodinám, knížka uvádí písma:
  • serifová (např. Times, Georga) - jsou patková písma, protože mají takovou patičku, ta se hodí hlavně do tištěných publikací a časopisů
  • bezserifová, neboli sans-serif, čili bezpatková (např. Arial, Verdana) - ta se hodí právě pro web, nemají patku
  • monospace - jsou to písma neproporcionální, neproporcionální de facto znamená, že všechna písmena mají stejnou délku. Hodí se k zápisu kódu něčeho. Patří sem například Courier
  • fantasy - to mají být dekorativní písma
  • cursive - to mají být písma dekorativní psaná kurzivou
  • také vím, že jednotlivé řezy písma, tedy fontfaces, či fontfamilies se mohou řadit do více obecných rodin písma
• nauka o písmech, tedy typografii je důležitá proto ji budu studovat odděleně zde: Typografie/Juandev
• důležité je také říct, že písma je třeba používat, podle toho k čemu byla navžena ne jinak - naprosto nevhodně se pak využívá řez Comic, který byl navržen pro komiksi
• také není dobré na jedněch stránkách kombinovat více druhů písem více jak dvě už může být problém, je dobré se držet jednoho písma nejčastěji bezpatkového - více o písmech ve výše zmíněném kurzu nebo v příkaldu OL.cz
• pokud aplikuju jedno písmo, je třeba ukončit aplikací obecné rodiny písem. funguje to totiž tak, že pokud dané písmo není na prohlížeči naistalováno, použije se písmo z danné rodiny které tam je. Mohu tedy nadefinovat posloupnost písem které se mají zobrazit pokud ten či onen počítač nemá to či ono. Obecně se doporučuje použít písma typycká pro jednotlivé operační systémy a ukončit vše obecnou rodinou písem
• zde je třeba uvést, že stačí opravdu zapsat "font-family: a pak jednotlivá písma oddělená čárkou s tím, že za obecnou rodinou, která jde vždy nakonec je středník". Jinak řezy, v jejichž názvu je více slov se musí strčit do uvozovek (např. Arial, kdežto "Comic Sans MS")
  • zkratka MS něco udává, ale to už sem opravdu nepatří
• pak je tu velikost písem. ta se může definovat buď klíčovými slovy: xx-small, x-small, small, medium, large, x-large, xx-large, nebo v jednotkách:
  • relativní em, ex a px
  • absolutní pt, pc, in, nm, cm
  • nejčastěji se používají em, nebo px s jinými mohou být problémy - co jsou tyto jednotky?
  • také je možno uvádět hodnoty v procentech
• vlastnost pro velikost písma je font-size
• dále je tu šířka a styl písma - a jak se píše v knize, šířka písma je o tučnosti, kdežto styl písma je o řezech, které mohou v dané rodině existovat
  • pro šířku, tedy tučnost písma je to vlastnost "font-wight", která se uvdává buď šíselně, nebo slovy normal (= 400), bold (=100), bolder či lighter
  • styl písma se pak udává jako "font-style" a může nabívat hodnot normal, italic či oblique
    • normal je defaultní hodnota. své využití najde třeba v textu, který je celý kurzivou a najednou tam chci mít něco normálně, třeba jedno slovo
    • no a oblique je skolněný řez (vhodný pro web), kdežto italic je obyčejná kurzíva - no a pokud písmu chybí řez oblique, písmo se zobrazuje jako kurzíva
• pak je tu barva textu, to se udává obyčejně vlastností "color" buď slovem, nebo rgb a nebo procenty
• další věcí je zarovnání textu, tedy "text-aling" to může být "left", "center", "right" či "justify", já už ale vím, že nejlépe je zarovnávat na webu doleva což je přirozené a čtenáře to nijak neotravuje - jinak mohou vznikat v textu trhliny, tzv. řeky
• další věcí je dekorace textu, což je "text-decoration", text může být normální - ha, ha s hodnotou normal, nebo podrtržený "underline", nadtržený:-) "overline", přešrktnutý "line-through" či blikající "blink" - toto to chce využívat s mírou a obezřetně
• pro Čechy a nejen pro nás je důležité odsazení prvního řádku odstavce, v HTML to nejde proto v CSS používám vlastnost "text-indent" a za ní hodnotu míry odsazení. např. 3em je takový standardní odstavec - myslím, že české oko je na to zvyklé
• další dvě vlastnosti mění písmo mezi malým a velkým, tedy kapitálkami a tím malým - je to text-transform a font-variant
  • text-transform má hodnoty capitalize - kapitálka, uppercase - horní index, lowercase - dolní index a none, což je defaultní hodnota
  • co se týče font-variant tak u toho je to small-caps či normal
  • tedy jedna vlastnost je pro kapitálky a tak, druhá pro malé písmo
• také je užitečné umět nastavit výšku řádku - na to použijeme vlastnost "line-height" a číslo např. v procentech
• a nejenom řádky a meziřádkový prostor, ale i mezipísemný (letter-spacing) a mezislovní (word-spacing) se dá nastaovat. Prohlížeč se tak dá tlačit, aby byl spacing stejný, nebo aby se používala ta či ona správná velikost mezer - vice již v kurzu typografie
• no a zdaleka nejsme na konci - je toho víc. také jde měnit první písmena či první řádky - od toho jsou tu selektory pseudoelementů :first-line, :first-letter - a napadá mě, nešlo by zkusit i second a third?
• co dál co dál?
• samozřejmě existuje souhrné nastavení pro písmo, to znamená, že do deklarace selektoru nemusím vypisovat všechny vlastnosti, ale pokud seřadím hodnoty do určité sekvence tak to bude fungovat také. Ta sekvence hodnot deklarace písma je následující: font-style, font-variant, font-weight, font-size/line-height, font-family
• pak se také dozvídám o specifikacích, které nejsou browsery podporovány. Takže např. "font-size-adjust" mi přizpůsobí velikost písem. Mohu tak např. používat na stejné stránce různá písma a srovnat si je do stejné velikosti jako, aby se to čtenáři netrhalo
• dále "font-strech" zhušťuje písmo
• "text-shadow" by umožnovalo efekt stínu

Hodina 10. (CSS)

Tato lekce se věnuje seznamům a navigacím, včetně odkazů. Tak tedy:

• a setkávám se tu s dalšími novatami. Jsou pseudotřídy to :link - standardní stav odkazu, :visited - navštívený link, :hover - stav ve kterém je odkaz pokud nad ním držím myš, :active - stav po aktivaci klepnutím
• pak je to ještě :focus - který se používá u jakýchsi aktivací přímo z klávesníce - hmmmm?
• a pozor na to, že u těhle pseudotříd se vlastnost nedědí z a, proto to musím zopakovat
• sakra nějak to motám, pokračování zítra--Juandev 17. 10. 2009, 19:43 (UTC)

Hodina 11. (CSS)

Tato hodina se věnuje vnějším a vnitřním okrajům, včetně rámečků a vysvětluje co jsou to blokové a vložené elementy. Úzce souvisí s následujícími dvěma kapitolami a tak je důležité ji dobře ovládnout! Tak tedy:

• každý element v HTML tvoří obdélník, který je buď blokový, nebo vložený
  • blokové jsou, ty co zabírají celou šířku řádku, jako odstavec či seznamová položka
  • vložené pak ty co se vkládají do toku textu. Například různá zvíraznění, nebo vložené elementy div.
  • každý element je tak obalen myšleným rámečkem. V CSS jde nastavit vlastnosti toho rámečku pro každou stranu zvášť a zároveň lze nastavit vzdálenost obsahu elementu od tohoto rámečku uvnitř a vzdálenost samotného rámečku od okolí. Tato poslední věc souvisí hodně s následjící kapitolou a pozicováním.
• máme tedy několik myšlených vrstev, které můžeme pomocí CSS zvýraznit a různě s nimi pracovat. V pořadí zevnitř ven je to obsah --> vnitřní okraj (padding) --> rámeček (border) --> vnější okraj (margin)
• čili co se týče rámečku, můžeme nastavovat 3 vlastnosti:
  • šířku díky border-width (respektive border-top-width, border-right-width, border-bottom-width a border-left-width)
  • styl díky border-style (respektive border-top-style, border-right-style, border-bottom-style a border-left-style) s atributy: dotted, dashed, solid, double, groove, ridge, inset, outset, hidden a none.
  • barva díky vlastnosti border-color (respektive border-top-color, border-right-color atd.)
• no a i zde existuje souhrnná vlastnost:
  • souhrnou vlastnost lze jednak zadat zvlášť pro stranu, šířku, styl, nebo barvu:

    • p { border-top: 10px double yellow; border-left: 5px solid red; }
      

    • p { border-width: 3px 6px; border-style: solid double; border-color: red yellow; }
      

      – horní --> dolní, levá --> pravá

    • p { border-width: 3px 6px 14px; border-style: solid double dotted; border-color: red yellow blue; }
      

      – horní, levá --> pravá, spodní

    • p { border-width: 3px; border-style: solid double dotted dashed; border-color: red yellow blue green; }
      

      – horní, pravá, spodní, levá
  • či využít souhrnou vlastnost border:

    • p { border: thick ridge yellow; }
      

      – všechny strany
• pak je tu prostor mezi textem, respektive elementem a rámečkem, který označujeme jako padding:

  • p { border: thick ridge yellow; padding-left: 25px; }
    

    – odsadí text zprava od rámečku o 25px
  • očividně padding nemůže mít záporné hodnoty!
• jelikož se padding zadává pouze pro strany, je souhrnou vlastnostní padding, které se dá zadávat opět v kombinacích. Základní pořadí je horní, pravý, spodní a levý.
• samozřejmě se hodí pro udělání prostoru, pokud používáme vlastnost border pro vložený i blokový element navzájem. Pokud se tedy nejedná o účel (viz příklad 3).
• no a pak je tu vlastnost margin, tedy od okraje rámečku k okraji okolních elementů. Margin se udává pro jednotlivé strany, nebo souhrně. A jelikož je kořenovým elementem <html>data</html> tak můžeme margin nastavit i elementu <body>data</body>.
• margin se dá tedy využít pro nastavení vzdálenosti mezi jednotlivými elementy
• při práci s margin, je vždy dobré si zvýraznit daný element barvou s použitím vlastnosti border a používat jiné barvy, např. border: 1px solid black;, nebo je odlišovat stylem ohraničení (příklad 4).
• je také třeba dodat, že tu jsou určité defaultní vlastnosti. A to je například výška řádku, či již níže zmiňovaná pozice textu. Výška řádku, jinak udávaná jako line-align (bývá 2-3 px), mi zapříčiňuje právě ten jev, kdy nastavím li margin sousedního elementu v režimu margin-bottom: 0;, tak se mi následující element k sobě nepřitiskne. Musím tedy nastavit například:

  h1 { margin-bottom: 0; border: 1px dotted black; } h2 { margin-top: 0;border: 2px solid aqua; }
  

  , nebo se dá taková vlastnost vynulovat pro celý dokument následovně:

  * { margin: 0; }
  

  .
• jinak jsem nalezl dobrý nástroj pro testy: http://www.webdevout.net/test - mohu to uložit a ono mi to nabídne URL pro ukazování. Po čase se to samo vymaže.
• záporné hodnoty margin se mohou využít pro rozvržení blokových elementů - nefungují ale ve všech prohlížečích konzistentně, proto je lepší rozvržení popsané v následující kapitole.--Juandev 4. 5. 2010, 17:15 (UTC)

Příklady

1) vzorové jádro se kterým si v této kapitole pracuji:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Edgar Allen Poe: The Black Cat</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 />
<meta name="keywords" content="Poe, black cat, Plute, tests" />
<meta name="description" content="Page with the abstract of Poe's Black cat used to test CSS styles" />
<meta name="author" content="Juandev" />
<style type="text/css">

</style>
</head>
<body>
<h1>The Black Cat</h1>
<h2>Edgar Allen Poe</h2>
<p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreedable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>
<p>This later was a remarkably large and beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent allusion or the ancient popular notion, which regarded all black cats as witches in disguise.</p>
<p>Pluto - this was the cat's name - was my favourite pet and playmate. I alone fed nim, and he attended me wherever I went about the house It was even with difficulty that I could prevent him from following me through the streets.</p>
</body>
</html>

2) s využitím vlastností pro rámeček:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Edgar Allen Poe: The Black Cat</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 />
<meta name="keywords" content="Poe, black cat, Plute, tests" />
<meta name="description" content="Page with the abstract of Poe's Black cat used to test CSS styles" />
<meta name="author" content="Juandev" />
<style type="text/css">
p {
border-width: 5px;
border-top-style: dotted;
border-right-style: dashed;
border-bottom-style: solid;
border-left-style: double;
border-top-color: yellow;
border-bottom-color: red;
}
</style>
</head>
<body>
<h1>The Black Cat</h1>
<h2>Edgar Allen Poe</h2>
<p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreedable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>
<p>This later was a remarkably large and beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent allusion ot hte ancient popular notion, which regarded all black cats as witches in disguise.</p>
<p>Pluto - this was the cat's name - was my favourite pet and playmate. I alone fed nim, and he attended me wherever I went about the house It was even with difficulty that I could prevent him from following me through the streets.</p>
</body>
</html>

3) I nechtěným překrytím, mohou vzniknout zajímavosti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Edgar Allen Poe: The Black Cat</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 />
<meta name="keywords" content="Poe, black cat, Plute, tests" />
<meta name="description" content="Page with the abstract of Poe's Black cat used to test CSS styles" />
<meta name="author" content="Juandev" />
<style type="text/css">
p {
border: thick ridge yellow;
 }
em { 
border-width: 2px 5px;
border-style: solid double;
border-color: red yellow;
 }
strong { 
border: 55px ridge orange;
padding: 5px;
 }
</style>
</head>
<body>
<h1>The Black Cat</h1>
<h2>Edgar Allen Poe</h2>
<p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for 

domestic pets, she lost no opportunity of procuring those of the most agreedable kind. We had birds, gold fish, a fine dog, 

rabbits, a small monkey, and <em>a cat</em>.</p>
<p>This later was a remarkably large and beautiful animal, <strong>entirely black</strong>, and sagacious to an astonishing 

degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent 

allusion ot hte ancient popular notion, which regarded all black cats as witches in disguise.</p>
<p>Pluto - this was the cat's name - was my favourite pet and playmate. I alone fed nim, and he attended me wherever I went 

about the house It was even with difficulty that I could prevent him from following me through the streets.</p>
</body>
</html>

4) Označení všech elementů vlastností border:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Edgar Allen Poe: The Black Cat</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 />
<meta name="keywords" content="Poe, black cat, Plute, tests" />
<meta name="description" content="Page with the abstract of Poe's Black cat used to test CSS styles" />
<meta name="author" content="Juandev" />
<style type="text/css">
body {
border: 1px solid black;
 }
h1 {
border: 1px dotted black;
 }
h2 {
border: 1px solid navy;
 }

p {
border: thick ridge yellow;
 }
em { 
border-width: 2px 5px;
border-style: solid double;
border-color: red yellow;
 }
strong { 
border: thick ridge yellow;
 }
</style>
</head>
<body>
<h1>The Black Cat</h1>
<h2>Edgar Allen Poe</h2>
<p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for 

domestic pets, she lost no opportunity of procuring those of the most agreedable kind. We had birds, gold fish, a fine dog, 

rabbits, a small monkey, and <em>a cat</em>.</p>
<p>This later was a remarkably large and beautiful animal, <strong>entirely black</strong>, and sagacious to an astonishing 

degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent 

allusion to the ancient popular notion, which regarded all black cats as witches in disguise.</p>
<p>Pluto - this was the cat's name - was my favourite pet and playmate. I alone fed nim, and he attended me wherever I went 

about the house It was even with difficulty that I could prevent him from following me through the streets.</p>
</body>
</html>

5) Příklad ukazuje, že blokový element zabírá celou šířku řádku. Pozici textu zde však nelze do jisté míry nastavit pomocí vlastnosti padding. K tomu se používají vlastnosti zarovnání textu (viz Pluto). Je ale možné celý blokový element posunout doprava (viz h2).

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Edgar Allen Poe: The Black Cat</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 />
<meta name="keywords" content="Poe, black cat, Plute, tests" />
<meta name="description" content="Page with the abstract of Poe's Black cat used to test CSS styles" />
<meta name="author" content="Juandev" />
<style type="text/css">
body {
margin-top: 0;
margin-left: 0;
border: 1px solid black;
 }
h1 {
border: 1px dotted black;
padding-right: 2px;
 }
h2 {
margin-right: 1000px;
margin-left: 25px;
border: 2px solid aqua;
 }
h3 {
margin-right: 1000px;
border: 2px dotted aqua;
text-align: right;
 }
p {
border: thick ridge yellow;
 }
em { 
border-width: 2px 5px;
border-style: solid double;
border-color: red yellow;
 }
strong { 
border: thick ridge yellow;
 }
</style>
</head>
<body>
<h1>The Black Cat</h1>
<h2>Edgar Allen Poe</h2>
<p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for 

domestic pets, she lost no opportunity of procuring those of the most agreedable kind. We had birds, gold fish, a fine dog, 

rabbits, a small monkey, and <em>a cat</em>.</p>
<p>This later was a remarkably large and beautiful animal, <strong>entirely black</strong>, and sagacious to an astonishing 

degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent 

allusion to the ancient popular notion, which regarded all black cats as witches in disguise.</p>
<h3>Pluto</h3>
<p>Pluto - this was the cat's name - was my favourite pet and playmate. I alone fed nim, and he attended me wherever I went 

about the house It was even with difficulty that I could prevent him from following me through the streets.</p>
</body>
</html>

6) Příklad vysvětlující margin. Totiž je třeba (jak už bylo uvedeno) dávat pozor na to, že za zvýrazněným elementem border bývají ještě tak 2-3px místa k hranici elementu. To je dáno ve stylech prohlížeče. Čili v následujícím příkladu jsem nastavil levý okraj na 300px. To ale neznamená, že se ten element posunul! Hranice elementu je 300px doprava od rámečku --> tudíž se nepusunul ani element, které je vůči němu pozicován. Musel bych pozicovat i element body, jak je uvedeno v následujícím příkladu (to se ale kvůli problémům s prohlížeči normálně nedoporučuje). Je to ale správná úvaha?--Juandev 5. 5. 2010, 09:53 (UTC)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Edgar Allen Poe: The Black Cat</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 />
<meta name="keywords" content="Poe, black cat, Plute, tests" />
<meta name="description" content="Page with the abstract of Poe's Black cat used to test CSS styles" />
<meta name="author" content="Juandev" />
<style type="text/css">
html {
border: 1px solid black;
 }
body {
border: 1px solid yellow;
margin-left: 300px;
 }
#content {
top: 0;
position: absolute;
right: 200px;
border: 2px solid black;
padding: 2px;
 }
</style>
</head>
<body>
<div id="content">
<h1>The Black Cat</h1>
<h2>Edgar Allen Poe</h2>
<p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the most agreedable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and <em>a cat</em>.</p>
</div>
<p>This later was a remarkably large and beautiful animal, <strong>entirely black</strong>, and sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent allusion to the ancient popular notion, which regarded all black cats as witches in disguise.</p>
<h3>Pluto</h3>
<p>Pluto - this was the cat's name - was my favourite pet and playmate. I alone fed nim, and he attended me wherever I went about the house It was even with difficulty that I could prevent him from following me through the streets.</p>
</body>
</html>

7) Ukazuje, že skutečně se element div pozicuje vůči elementu body. Zleva je pozice elementu body 300px a blok tedy začíná - nedaří se vyrobit.--Juandev 5. 5. 2010, 09:53 (UTC)

Hodina 12. (CSS)

Tato kapitola hlavně vysvětluje princip obalujících bloků. S využitím této znalosti je pak možno, jednotlivé bloky absolutně (nový vůči předchozím) či relativně (nový vůči kořenovému) pozicovat. Představuje také pevné pozicování, se kterým má ale IE problémy. Další částí kapitoly je obtékání a v poslední řadě též pořadí bloků v ose z (tedy těch co jsou poskládány přes sebe). Tak tedy:

• co se týče pozicování, existují 4 druhy: absolutní, relativní, pevné a statické. Pro jeho pochopení, je ale potřeba zmínit následující:
  • normální obtékání = běžné chování prohlížeče bez použití pozicování přes CSS nebo tabulky
  • obalující blok = je ten, který obaluje nějaké elementy. Jedná se o:
    • , který obalí řadu vložených i blokových elementů
    • každý vložený element, má samozřejmě obalující element (např. či <a></a> v
      )
    • každý blokový element má svůj obalující element. Je jím body a pro body je obalujícím elementem html.
• no a pak je tu absolutní pozicování, které pozicuje bloky proti nejbližšímu obalujícímu bloku (není jisté - jak je to s pozicováním bloku div? Pozicuje se vůči html, nebo vůči body?)--Juandev 5. 5. 2010, 11:05 (UTC)
  • Ale možná je to nejasné proto, že když body nastavím pozicování absolute, tak zmizí normální tok textu a html se s tím neumí poprat.--Juandev 5. 5. 2010, 11:05 (UTC)
• na druhou stranu relativní pozicování, pozicuje bloky proti normálnímu toku textu
  • pokud by se při relativním pozicování měl porušit tok textu, je lepší použít absolutní pozicování
• dobrou zprávou je, že lze nastavovat u pozicování záporné pozice
• pevné pozicování, umístí blok na pevno. Je to pozicování vůči plátnu stránky. De facto zbytek toku stránky mi pak při scrollování jezdí za tím (vyjímkou je IE 6 a nižší). Nicméně s tím jsou také problémy.--Juandev 5. 5. 2010, 11:05 (UTC)
• statické pozicování je default
• a teď něco o obtékání (je třeba dodat, že obtékání není pozicování):
  • normální obtékání - tak jak teče text v okně prohlížeče - styly jsou nastaveny prohlížečem jako default
  • obtékání elementů - prostě nastavím float na right, left, none (defaultní hodnota do běžného toku dokumentu) a inherit (hodnota děděná od nadřazeného elementu) a nastaví se padding, margin apod.
  • a pak je tu možnost zrušení obtékání, která se nastaví přes vlastnost clear a hodnoty right, left nebo both. Jde o to, že clear ukončí obtékání ze strany, která je nastavena. Jedná se o obtékání následujícím elementem. - z nějakýho důvodu mi to nefunguje.--Juandev 6. 5. 2010, 12:56 (UTC)
  • no a jelikož mi to nefunguje, tak jsem dostal tento link k nastudování: [4], další příklady: [5], [6], [7]
• no a poslední věcí je pořadí v ose z. z-index se používá pokud se pozicované elementy překrývají. Čím větší číslo z-indexu, tím je element výše, tedy blíže ke čtenáři

Příklady

1) příklad toho jak funguje absolute:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Edgar Allen Poe: The Black Cat</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 />
<meta name="keywords" content="Poe, black cat, Plute, tests" />
<meta name="description" content="Page with the abstract of Poe's Black cat used to test CSS styles" />
<meta name="author" content="Juandev" />
<style type="text/css">
* { 
margin: 0;
 }
html {
border: 2px solid red;
 }
body {
border: 1px solid aqua;
 }
#content {
position: absolute;
left: 150px;
width: 300px;
border: 2px solid black;
padding: 2px;
 }
</style>
</head>
<body>
<div id="content">
<h1>The Black Cat</h1>
<h2>Edgar Allen Poe</h2>
<p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for 

domestic pets, she lost no opportunity of procuring those of the most agreedable kind. We had birds, gold fish, a fine dog, 

rabbits, a small monkey, and <em>a cat</em>.</p>
</div>
<p>This later was a remarkably large and beautiful animal, <strong>entirely black</strong>, and sagacious to an astonishing 

degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent 

allusion to the ancient popular notion, which regarded all black cats as witches in disguise.</p>
<h3>Pluto</h3>
<p>Pluto - this was the cat's name - was my favourite pet and playmate. I alone fed nim, and he attended me wherever I went 

about the house It was even with difficulty that I could prevent him from following me through the streets.</p>
</body>
</html>

2) hezký příklad jak relative funguje:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Edgar Allen Poe: The Black Cat</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8 />
<meta name="keywords" content="Poe, black cat, Plute, tests" />
<meta name="description" content="Page with the abstract of Poe's Black cat used to test CSS styles" />
<meta name="author" content="Juandev" />
<style type="text/css">
* {
margin: 0;
 }
#content {
position: relative;
left: 45px;
top: 10px;
width: 400px;
border: 1px solid red;
 }
</style>
</head>
<body>
<h1>The Black Cat</h1>
<h2>Edgar Allen Poe</h2>
<p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for 

domestic pets, she lost no opportunity of procuring those of the most agreedable kind. We had birds, gold fish, a fine dog, 

rabbits, a small monkey, and <em>a cat</em>.</p>
<div id="content">
<p>This later was a remarkably large and beautiful animal, <strong>entirely black</strong>, and sagacious to an astonishing 

degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent 

allusion to the ancient popular notion, which regarded all black cats as witches in disguise.</p></div>
<h3>Pluto</h3>
<p>Pluto - this was the cat's name - was my favourite pet and playmate. I alone fed nim, and he attended me wherever I went 

about the house It was even with difficulty that I could prevent him from following me through the streets.</p>
</body>
</html>

Po odmlce

Tak jsem se chvíli odmlčel kvůli diplomce a dokčovačce vysoké, ale teď se k tomu zase vracím. Knihu jsem celou nastudoval teoreticky a tak se teď vracím k praxi. Bohužel jsem dost unavenej z práce. No uvidíme.--Juandev 6. 7. 2009, 19:24 (UTC) Safra, že bych to zejtra tady dodělal?--Juandev 12. 7. 2009, 20:04 (UTC)

Praktická část

• příprava
• OL.cz
• pribylcar.eu
• Praktické problémy

Cvičení první

Tak dneska nic, jen jsem si stáhnul nějaká cvičení. Pokračování zítra.--Juandev 16. 10. 2009, 15:38 (UTC)

Zpětná vazba

• dobře se s tím pracuje, i když jedu tramvají tak se mohu učit
• chybí tomu anglické názvy tagů
• opravdu dobrý kurz, nevím co bych dodal. Teď jsem si prošel první část XHTML a jsem spokojenej. Kdybych měl více času a mohl si hrát s příklady, tak by to bylo jistě ještě lepší. Na druhou stranu je ale výhoda, že si to člověk může číst, když někam jede a pak si to doma odzkouší, nebo se zeptá na kanále #html na to čemu nerozuměl.--Juandev 2. 3. 2009, 12:22 (UTC)
• taky je dobré, že mám své vlastní tempo, někdy se snažím dělat jednu lekci za den, jindy hodně načtu a pak si s tím podle časových možností hraju
• už se mi 2x stalo, že jsem na delší čas ze studia vypadnul. Není to vůbec na škodu. Jak je člověk v intezivním zápřahu tak se unaví. Když pak má šanci si odpočinout, projít vše co se už naučil a pokračovat, tak je to jedině ku prospěchu
• prohlížím si i linky v knize - nic moc. Lepší je kanál #html, i když je to IRC, proto někdy používám i #wikipedia-cs, dokud někdo nezačne nadávat, že proto kanál není určen.--Juandev 16. 3. 2009, 09:27 (UTC)
• opět se k této k nize vracím, lépe řečeno - už dávno jsem si ji nastudoval, ale jak jsem si slíbil, tak zde chci dopsat své poznámky. Taky si chci knihu ještě jednou projít a udělat si prakticky všechna cvičení.--Juandev 16. 10. 2009, 15:14 (UTC)
• myslím si, že dokud se do webdesignu nedostanu, tak se budu ke knize stále vracet
• teď jí doprobrat a docvičit a vrhnu se na pouze HTML a nižší verze HTML--Juandev 16. 10. 2009, 15:14 (UTC)