Geek tričko zdarma Python týden
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde
Pouze tento sleva až 80% na kurzy Python

Lekce 5 - Seznamy v HTML a zopakování tabulky

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Tabulky v HTML, jsme si vysvětlili tabulky. Dnes si v HTML tutoriálu přidáme tabulku na svůj web a dále si zmíníme seznamy. Po seznamech se konečně dostaneme k CSS a designu webových stránek.

Podstránka dovednosti

K našemu webu si vytvořte opět novou podstránku, tentokrát ji uložíme jako dovednosti.html. Vyplňte si vše potřebné (doctype, html, head, body) a do těla nové stránky vložme tabulku s našimi dovednostmi. Tabulka bude mít 2 řádky, v prvním bude ikona jazyka, který ovládáme, v druhém popis toho, co umíme. Ikony jsem opět získal pomocí webového nástroje http://www.iconfinder.com. Výsledný kód naší podstránky by mohl vypadat takto:

<!DOCTYPE html>
<html lang="cs-cz">

<head>
        <meta charset="utf-8" />
        <title>Dovednosti</title>
</head>

<body>
        <h1>Dovednosti</h1>

        <table>
                <tr>
                        <td>
                                <img src="obrazky/html.png" alt="HTML" />
                        </td>
                        <td>
                                <img src="obrazky/java.png" alt="Java" />
                        </td>
                        <td>
                                <img src="obrazky/pascal.png" alt="Pascal" />
                        </td>
                </tr>
                <tr>
                        <td>
                                <h2>HTML</h2>
                                <p>S HTML začínám a umím vytvořit jednoduché webové stránky, jako jsou tyto.</p>
                        </td>
                        <td>
                                <h2>Java</h2>
                                <p>Javu se učím z tutoriálů na ITnetwork.cz, dokáži tvořit jednoduché konzolové i okenní aplikace.</p>
                        </td>
                        <td>
                                <h2>Pascal</h2>
                                <p>Pascal nás učí ve škole, ale raději se učím moderní jazyky z ITnetwork.</p>
                        </td>
                </tr>
        </table>

        <p><a href="index.html">Zpět na hlavní stranu</a></p>
</body>

</html>

A náhled v prohlížeči:

HTML tabulka pro výpis dovedností

Stránku si opět nalinkujeme z index.html. Prakticky jsme tedy použili tabulku na našich stránkách.

Seznamy

Seznam používáme vždy, kdy potřebujeme vyjmenovat položky, které se sebou nějak souvisí. Může se jednat např. o seznam použité literatury, o číslované kroky v tutoriálu nebo o navigační menu. Určitě je dobře znáte jako "odrážky" např. z MS Wordu. V HTML máme 3 typy seznamů.

Neuspořádaný seznam

Prvním typem seznamu je <ul> (Unordered List = neuspořádaný seznam). Položky v něm jsou neočíslované (neuspořádané) a standardně se zobrazují pomocí odrážek. Ačkoli je seznam chápán jako neuspořádaný, pořadí prvků v kódu na vykreslené stránce samozřejmě zůstane zachováno. <ul> je tag párový a obaluje položky seznamu.

Položka seznamu

Tag <li> (jako List Item) označuje jednu položku seznamu a nejčastěji tedy obaluje její text. Může však obsahovat i obrázky a další libovolné elementy.

Ukažme si jednoduchý příklad neuspořádaného seznamu:

<h2>Co jsem se dnes naučil</h2>
<ul>
  <li>Vytvářet tabulky</li>
  <li>Slučovat buňky</li>
  <li>Co je to sémantika</li>
  <li>Vytvořit uspořádaný seznam</li>
</ul>

Výstup:

Seznamy v HTML
index.html

Pomocí <ul> se často řeší navigační menu, během seriálu si to ukážeme.

Uspořádaný seznam

Uspořádaný seznam (Ordered List) se liší od neuspořádaného tím, že prvky jsou řazeny dle nějakého klíče. Tím je nejčastěji priorita nebo posloupnost akcí. Zápis je naprosto stejný, jako u neuspořádaného seznamu, opět <ol> obalíme položky seznamu <li>. Místo odrážek nám u položek seznamu prohlížeč v základním stylu zobrazí číslice:

<h2>Můj prioritní jídelníček</h2>
<ol>
  <li>Špagety</li>
  <li>Smetanový sos</li>
  <li>Hamburger</li>
  <li>Cheese burger</li>
  <li>Brokolice</li>
</ol>

A výsledek:

Můj prioritní jídelníček
index.html

Na rozdíl od neuspořádaného seznamu má element <ol> několik atributů:

  • reversed - Pokud je atribut uveden, jsou položky seznamu číslovány opačně, tedy sestupně. Jako hodnota se obvykle uvádí reversed, ale může se uvést i prázdná nebo žádná.
  • start - Hodnota atributu určuje první číslo v seznamu, zadáváme jako číslo.
  • type - Nastavuje typ číslování, můžeme nastavit hodnoty: 1, A, a, I, i pro arabské číslice, latinská písmena a římské číslice.

Elementu <li> můžeme přidat následující atribut:

  • value - U uspořádaného seznamu označuje číslo dané položky. Následující položky se poté automaticky číslují od této hodnoty.

Zkusme si ještě pokročilejší příklad:

<ol reversed="reversed" start="4" type="I">
  <li>Položka</li>
  <li>Položka</li>
  <li>Položka</li>
</ol>

Výsledek:

Pokročilejší příklad HTML seznamů
index.html

Slovníček pojmů

Posledním typem seznamu je slovníček pojmů (Definition List). Narozdíl od prvních dvou obsahuje 2 typy položek, a to:

Pojem

Vysvětlovaný pojem vkládáme to tagu <dt> (jako Definition Term).

Definice

Pojem vysvětlíme v tagu <dd> (jako Definition Definition).

Pojďme si udělat ukázku:

<h2>Slovníček pojmů k článku</h2>
<dl>
        <dt>Tutoriál</dt>
                <dd>Názorný návod k použití, většinou krok za krokem</dd>
        <dt>ITnetwork</dt>
                <dd>Programátorská sociální síť a materiálová základna</dd>
        <dt>Seznam</dt>
                <dd>Množina položek, které spolu nějakým způsobem souvisí</dd>
</dl>

A výsledek:

Slovníček pojmů k článku
index.html

A víte co nás čeká v příští lekci, Úvod do CSS (kaskádových stylů)? Úvod do stylování! Těšte se, protože zanedlouho bude náš web vypadat opravdu k světu :)


 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
76 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Předchozí článek
Tabulky v HTML
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Cvičení k 4.-5. lekci HTML a CSS
Aktivity (6)

 

 

Komentáře

Avatar
Daniel Vítek
Tým ITnetwork
Avatar
Daniel Vítek:21.5.2013 15:08

jak má ten chrom ta lišta pokaždý jinou barvu :D

Odpovědět  +1 21.5.2013 15:08
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
Tom
Neregistrovaný
Avatar
Tom:30.5.2013 15:07

Ahoj, zdá se mi,že u toho číslovaného seznamu jsou položky tříděny podle abecedy "A", ale ve výsledku jsou římské číslice.

 
Odpovědět 30.5.2013 15:07
Avatar
Odpovídá na Tom
Neaktivní uživatel:31.5.2013 18:04

Takýchto "easter eggov" je v tomto článku viac :) Rímske čísla v zozname, Islandsoft namiesto devbooku v slovníčku pojmov a taktiež zabudnutá príloha. :)

Odpovědět 31.5.2013 18:04
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Michal Žůrek - misaz:31.5.2013 18:28

Devbook se kdisi jmenoval Islandsoft. S přílohou se stane. Římská čísla si myslím jsou dobře.

 
Odpovědět  +1 31.5.2013 18:28
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Neaktivní uživatel
David Čápka:7.6.2013 15:08

Díky, římské číslice jsem opravil, Islandsoft je ještě na několika místech v manuálu, až se k tomu dostanu, tak to přescreenuji, ale zatím to nevidím jako důležité. Přílohu již bohužel nemám, budu ji muset udělat znovu :)

Odpovědět  +1 7.6.2013 15:08
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
kickboxer
Člen
Avatar
kickboxer:9.8.2013 14:25

Ahoj, mám menší problém, jako pokus jsem si udělal podobnou tabulku, jako je tady tabulka "Dovednosti". To jsem zvládl v pohodě, jenže když něco potřebuji napsat, tak chci, aby to bylo pod tabulkou, ale ukáže se mi to nad tabulkou a nevím, co s tím. Nemohl by jste mi s tím někdo pomoct?

 
Odpovědět 9.8.2013 14:25
Avatar
Odpovídá na kickboxer
Libor Šimo (libcosenior):13.8.2013 13:43

Daj sem kód. Inakšie ti ťažko poradiť.

Odpovědět 13.8.2013 13:43
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
kickboxer
Člen
Avatar
kickboxer:13.8.2013 20:00

Promiň, ale jelikož jsem amatér, tak nemám tušení, o to ten kód je :)

 
Odpovědět  -1 13.8.2013 20:00
Avatar
Odpovídá na Daniel Vítek
Michael Nový:26.9.2013 16:45

Sem si ani nevšim :DDDDD

 
Odpovědět 26.9.2013 16:45
Avatar
Matěj
Neregistrovaný
Avatar
Matěj:9.10.2013 23:29

Ahoj, udělal jsem stejnou tabulku, jako je dovednosti, dokonce jsem zkusil překopírovat kód i z tabulky dovedností. Nicméně text se mi píše v lajně, nikoliv jak je v náhledu zobrazeno (NA 2-3 řádky). Čím to je?

 
Odpovědět 9.10.2013 23:29
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na Matěj
Jan Vargovský:9.10.2013 23:55

Nevidím tam zatím CSS. Takže tipuju, že se koukáš na dost velkém rozlišení, aby se to nemuselo zalamovat, když si ten prohlížeč zúžíš tak by jsi měl dosáhnout stejného výsledku.

 
Odpovědět  +2 9.10.2013 23:55
Avatar
Rosemary
Člen
Avatar
Rosemary:1.3.2014 9:56

Skvělý návody ;)

 
Odpovědět 1.3.2014 9:56
Avatar
Sei
Člen
Avatar
Sei:9.3.2014 19:29

Nechápem aké využtie má usporiadaný zoznam, dalo by sa to predsa spraviť cez <p> 1. Špagety </p> atď...

Odpovědět 9.3.2014 19:29
Aim high, kid. But don't aim for the impossible. - Rainbow Dash
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na Sei
Jan Vargovský:9.3.2014 19:35

Máš třeba 30 hodnot. Řekneš si, že smažeš tu první a pak co, budeš přepisovat těch zbylých 29 o 1 dolů ? :)

 
Odpovědět  +1 9.3.2014 19:35
Avatar
Sei
Člen
Avatar
Sei:9.3.2014 19:43

To asi nie :D ale autor tam nespomenul (alebo som si toho nevšimol) že sa to čísluje automaticky pri použití usporiadaného zoznamu

Odpovědět 9.3.2014 19:43
Aim high, kid. But don't aim for the impossible. - Rainbow Dash
Avatar
Jan Vargovský
Redaktor
Avatar
Odpovídá na Sei
Jan Vargovský:9.3.2014 19:46

Vždyť ten odstavec tam má dalších 20 řádků, stačilo je dočíst.

 
Odpovědět 9.3.2014 19:46
Avatar
Sei
Člen
Avatar
Sei:9.3.2014 19:51

To bude asi tým, že 90% vecí robím narýchlo.

Odpovědět 9.3.2014 19:51
Aim high, kid. But don't aim for the impossible. - Rainbow Dash
Avatar
Ľubomír Prokopovič:26.8.2014 19:42

co sa tyka usporiadaneho zoznamu mam ten isty kod a pocita mi to:
III.
II.
I.

a nie ako v ukazke:
IV.
III.
II.

nechapem o_O

Odpovědět 26.8.2014 19:42
"Počítače jsou jako Bůh ve Starém zákoně - hodně příkazů a žádné slitování." Joseph Campbell
Avatar
big
Člen
Avatar
big:27.9.2014 21:59

Užasný tutoriál už jsem podle něj začal dělat svůj web

Odpovědět 27.9.2014 21:59
Se stářím prý přichází rozum, někdy přijde stáří samo...
Avatar
matyx
Člen
Avatar
matyx:5.1.2015 21:28

Taky mi to v uspořádaném seznamu počítá jak mendaxovi, ale pro změnu
I.
II.
III.
tzn. ignoruje to ten reversed a start... nevíte čím to je? Nová verze PsPadu?

 
Odpovědět 5.1.2015 21:28
Avatar
Odpovídá na matyx
Michal Šmahel:5.1.2015 21:47

Do start napiš pořadové číslo a půjde to. Příklad (toto opravené):

<ol reversed="reversed" start="4" type="I">
  <li>Položka</li>
  <li>Položka</li>
  <li>Položka</li>
</ol>
Odpovědět 5.1.2015 21:47
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
matyx
Člen
Avatar
Odpovídá na Michal Šmahel
matyx:5.1.2015 22:10

Jo, to už jsem zkoušel. Vypíše mi to
IV.
V.
VI.
Pořád ignoruje reverse.
Btw to D mi tam bylo divné, ale řekl jsem si, že tím je myšleno 4. písmeno abecedy, proto to začíná číslem 4 :)

 
Odpovědět 5.1.2015 22:10
Avatar
Odpovídá na matyx
Michal Šmahel:5.1.2015 22:14

Bude to tím, že ti to nepodporuje prohlížeč, mně to normálně funguje.

Odpovědět 5.1.2015 22:14
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
matyx
Člen
Avatar
Odpovídá na Michal Šmahel
matyx:5.1.2015 22:17

Jo, bylo to tím. Otevřel jsem to v Chromu místo v Exploreru a už to zobrazuje správně. Díky :)

 
Odpovědět 5.1.2015 22:17
Avatar
Odpovídá na matyx
Michal Šmahel:5.1.2015 22:37

Je to novější atribut, zkus si i zaktualizovat IE.

Odpovědět 5.1.2015 22:37
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
marian.smarik:15.1.2015 19:49

Díky Dosť si my pomohol :)

 
Odpovědět 15.1.2015 19:49
Avatar
ninadovych
Člen
Avatar
ninadovych:17.1.2015 13:53

Zdravím, chtěl bych se zeptat kde se dá stáhnout tento díl. Jen pro kontrolu. Díky :)

 
Odpovědět 17.1.2015 13:53
Avatar
Odpovídá na ninadovych
Michal Šmahel:17.1.2015 15:39

Odkaz tu není, nejspíš to nepůjde. A ani to není potřeba, můžeš si to zkopírovat, stažení dílu se používá u větších projektů.

Odpovědět 17.1.2015 15:39
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
ninadovych
Člen
Avatar
Odpovídá na Michal Šmahel
ninadovych:17.1.2015 17:08

Díky, takhle mi to jde :)

 
Odpovědět 17.1.2015 17:08
Avatar
ninadovych
Člen
Avatar
 
Odpovědět 17.1.2015 17:10
Avatar
Tomáš Brůna
Redaktor
Avatar
Tomáš Brůna:9.3.2015 13:35

Ahoj dá se html nějak udělat třeba nejaky maly e-shop nebo socialni sit?

Odpovědět 9.3.2015 13:35
Lepší být šprt než blbec :)
Avatar
sahlepik
Člen
Avatar
Odpovídá na Tomáš Brůna
sahlepik:9.3.2015 14:12

Pokud potřebuješ získat data od uživatelů a dále s nimi pracovat (výstup na obrazovku dle vstupních parametrů, ukládání do databáze, vyhledávání, registrace, přihlašování, atd.), potřebuješ navíc ještě nějaký skriptovací jazyk (např. PHP) a databázový systém (např. MySQL)

 
Odpovědět 9.3.2015 14:12
Avatar
N-tuke
Člen
Avatar
N-tuke:31.3.2015 11:36

Nazdar,
chtěl bych se zeptat, jak se vkládá vlastní odrážka. Např. u <ol><li> se to čísluje římsky, ale já bych tam chtěl třeba čtvereček. Díky za odpověď

Odpovědět 31.3.2015 11:36
Se zbytečnými věcmi nemám trpělivost.
Avatar
Peas
Člen
Avatar
Odpovídá na N-tuke
Peas:31.3.2015 12:07

Vyskusal si sa pozriet najprv na vsetky typy stylov pre zoznam cez CSS? Napriklad spominane stvorceky by mohli byt definovane ako list-style-type: square;. Ak list-style-type nebude obsahovat pozadovane tvary az vtedy by som pristupil na custom riesenie (napr. cez :before) :).

Editováno 31.3.2015 12:10
 
Odpovědět 31.3.2015 12:07
Avatar
Odpovídá na Peas
cervin.marcel:14.6.2015 6:36

Ahoj
jak prosím zmenším mezeru, když chci vkládat vnořený seznam?
Myslím tím mezeru, která vznikne mezi odkazem světadíly a Evropou.
<ul>
<li>Světadíly</li>
</li>
</ul>
<ul>
<li>Vnořený odkaz - Evropa</li>
<li>Vnořený odkaz - Afrika</li>
</ul>
<ul>
<li>Krmení</li>
</ul>

Děkuji

Editováno 14.6.2015 6:39
 
Odpovědět 14.6.2015 6:36
Avatar
Odpovídá na cervin.marcel
Michal Šmahel:14.6.2015 11:50

HTML:

<ul>
    <li>Světadíly
        <ul>
            <li>Vnořený odkaz - Evropa</li>
            <li>Vnořený odkaz - Afrika</li>
        </ul>
    </li>
    <li>Krmení</li>
</ul>

CSS:

ul li ul {
    padding-left: 10px;
}

Vysvětlení:
Máme neuspořádaný seznam, v něm se nachází jednotlivé položky. Pokud chceš udělat subseznam, napíšeš ho do nějaké položky. Vzdálenost položek od kraje určuješ pomocí levého paddingu u daného seznamu.

Odpovědět 14.6.2015 11:50
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Malý Daněk
Člen
Avatar
Malý Daněk:7.10.2015 15:28

Zkopiroval jsem část kodu:

<ol reversed="reversed" start="D" type="I">
  <li>Položka</li>
  <li>Položka</li>
  <li>Položka</li>
</ol>

ale ukazuje mi to:

I.Položka
II.Položka
III.Položka

Ukazuje mi to jinak než v tutorialu.

 
Odpovědět 7.10.2015 15:28
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na Malý Daněk
Tonda Kozák:7.10.2015 20:46

Atribut reversed není ještě všude podporovaný. Asi kvůli tomu ti to nefakčilo.

Jinak netuším moc, co znamená to "D" jako hodnota atributu start.

(Je zajímavé, co udělá Mozilla - jinde jsem to nezkoušel - pokud použijete reversed, římská čísla a nízké číslo v atributu start.)

 
Odpovědět 7.10.2015 20:46
Avatar
Vít Cigánek:26.11.2015 22:36

Jenom doplním, že

<ol reversed="reversed" start="7" type="I">
  <li>Položka</li>
  <li value="30">Položka</li>
  <li>Položka</li>
</ol>

Ve startu musí být vždycky číslo. Nikoliv D.

Výsledek je takový.

VII.položka
XXX.položka
XXIX.položka

 
Odpovědět 26.11.2015 22:36
Avatar
Michal Durik
Člen
Avatar
Michal Durik:4.12.2015 15:06

Ďakujem za článok.

 
Odpovědět 4.12.2015 15:06
Avatar
Majki Rak
Člen
Avatar
Majki Rak:4.12.2015 16:32

Je to super,mnohel lepší účivo než ve škole :-)

 
Odpovědět  +1 4.12.2015 16:32
Avatar
Martin Halada:14.12.2015 18:05

Zajímavé je, že kód s reversed funguje ve všech prohlížečích, kromě nového Microsoft Edge.

Odpovědět 14.12.2015 18:05
Počítač je zařízení sloužící k řešení problémů, které by bez něj vůbec nevznikly.
Avatar
Erik Palenčík:5.1.2016 11:36

Ako to že vam to v tej podstranke dovednost entruje automaticky? mne to predlžuje bunku tabulky,...

 
Odpovědět 5.1.2016 11:36
Avatar
krepsy3
Redaktor
Avatar
krepsy3:13.2.2016 22:23

Chtěl bych se zeptat; existuje podobně jako <tr> i <tc>, se kterým bych obdobně vyplňoval sloupce za pomoci <td>?

Odpovědět 13.2.2016 22:23
Programátor je stroj k převodu kávy na kód.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na krepsy3
Tomáš123:14.2.2016 19:38

Nie. Vypĺňaš bunky v riadku. Nápomocný by ti mohol byť tento článok: http://jecas.cz/html-tabulky#col.

Odpovědět 14.2.2016 19:38
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Vít Rázek
Člen
Avatar
Vít Rázek:16.3.2016 17:19

Ahoj, vím že tady už ta otázka padla, ale co znamená :start="D"
a k čemu vlastně atribut slouží :D

 
Odpovědět 16.3.2016 17:19
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Vít Rázek
Tomáš123:16.3.2016 18:43

Padla tu aj odpoveď. Niekto nastavil zoznamu číslovať rímskymi číslicami a ako atribút start (od akého čísla sa začne počítať) uviedol D – 500. V atribúte start ale musí byť vždy arabská hodnota čísla.

Odpovědět 16.3.2016 18:43
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
vsk soft
Člen
Avatar
Odpovídá na Erik Palenčík
vsk soft:8.4.2016 10:03

To: Erik Palencik.
Ked si zmensis sirku prehliadaca tak sa ti automaticky zmensia (ako na obrazku), takze to nie je enterovanim. Alebo si to daj do tabulky ako bolo popisane v predchadzajucom clanku.

Editováno 8.4.2016 10:05
 
Odpovědět 8.4.2016 10:03
Avatar
Vladimír Maliniak:9.4.2016 14:54

Musím říct, že kam se hrabe způsob výuky ve škole, kde na to prostě není čas a jen to na člověka vychrlí. Děkuju

Odpovědět 9.4.2016 14:54
Čas je jen individuální pojetí světa, veškeré výmluvy typu:"Nemám na to čas" jsou tedy bezpředmětné, vždy j...
Avatar
Dominik Fiala:1.6.2016 19:09

Chci se zeptat prosím proč mam místo háčků otazníky ve výsledné podobě:( ??
Děkuji za odpověd:)

 
Odpovědět 1.6.2016 19:09
Avatar
Neaktivní uživatel:10.6.2016 13:06

Ahoj všem, proč je ve Slovníčku pojmů- Islandsoft ? Neměl by tam být devbook? Co jsem tedy přehledla? Díky Jana

Odpovědět 10.6.2016 13:06
Neaktivní uživatelský účet
Avatar
Adam Ježek
Tým ITnetwork
Avatar
Odpovídá na Neaktivní uživatel
Adam Ježek:10.6.2016 13:11

Jak síť procházela vývojem (Nejdřív Islandsoft, potom DevBook, teď ITnetwork), tak se přepisovaly tutoriály, ale screenshoty většinou zůstaly, takže je tam jenom starší fotka.

Odpovědět 10.6.2016 13:11
Počkej chvíli, poradím se s křišťálovou koulí.
Avatar
Adam Dolejš
Člen
Avatar
Odpovídá na Dominik Fiala
Adam Dolejš:2.10.2016 18:22

Nemáš nastavenou češtinu jako jazyk ;)

Odpovědět 2.10.2016 18:22
Neznám slovo "nejde"
Avatar
Patrik Panek
Člen
Avatar
Patrik Panek:3.10.2016 13:26

Zdravim kdyz nastavim reversed do tagu tak mi to nikdy nejde sestupne vzdycky vzestupne muze mi nekdo poradit proc? Zkopiroval jsem to schvalne tady z tutorial uplne stejne zadani ale ukazuje mi to vzestupne a mu sestupne nechapu to. Diky

Editováno 3.10.2016 13:27
 
Odpovědět 3.10.2016 13:26
Avatar
jakubho
Člen
Avatar
Odpovídá na Patrik Panek
jakubho:3.10.2016 13:29

Můžeš sem dát kód, kdy ti to nejde? Takhle těžko poradit...

Odpovědět 3.10.2016 13:29
Chyba-Jediná jistota v životě programátora.
Avatar
Patrik Panek
Člen
Avatar
Odpovídá na jakubho
Patrik Panek:3.10.2016 13:40

Vlozil jsem tam tenhle kod a dela mi to jenom vzestupne a v tutorial to ma sestupne nevim proc

<ol reversed="reversed" start="4" type="I">
<li>Položka</li>
<li>Položka</li>
<li>Položka</li>
</ol>

 
Odpovědět 3.10.2016 13:40
Avatar
jakubho
Člen
Avatar
Odpovídá na Patrik Panek
jakubho:3.10.2016 16:55

To je hodně divné, protože mě kód funguje bez problémů. Jediné, co mne napadá, je, že používáš zastaralý prohlížeč, nebo IE/Edge. Tady máš seznam, které verze prohlížečů atribut reversed podporují ;-)

Odpovědět 3.10.2016 16:55
Chyba-Jediná jistota v životě programátora.
Avatar
Patrik Panek
Člen
Avatar
Odpovídá na jakubho
Patrik Panek:3.10.2016 23:52

Jakube diky bylo to prohlizecem jedinej internet expoler to nepodporuje ten reversed ostatni prohlizece jedou v pohode diky

 
Odpovědět  +1 3.10.2016 23:52
Avatar
Ghor
Člen
Avatar
Ghor:29.11.2016 20:14

Dokáže mi někdo poradit, proč se mi nezobrazují české znaky?
Mám dva HTML soubory, které jsou naprosto identické (použil jsem metodu ctrl+c ctrl+v). Oba jsem vytvořil ve stejné verzi PSPadu, jeden soubor na PC s Win7 a druhý s Win10. Soubor z Win7 mi CZ znaky normálně zobrazuje a to i po tom co ve Win10 udělám nějaké změny, ale soubor vytvořený ve Win10 ne.
Pravděpodobně bude problém v PSPadu ve Win10, ale co a jak mám opravit a kde je v tom HTML souboru uložená informace o tom, že se mají (nebo nemají) zobrazit české znaky?

PS: Jen pro úplnost... Oba systemy mám samozřejmě legálně a plně aktualizované...

<!DOCTYPE HTML>
<html lang="cs-cz">

  <head>
  <meta charset="utf-8">
  <title>Dovednosti</title>
  </head>

  <body>
    <p>ěščřžýáíé</p> <!-- test -->
    <h1>Dovednosti</h1>

    <table border="1">
      <tr>
        <td><img src="obr/java.png" alt="Java" /></td>
        <td><img src="obr/html.png" alt="HTML" /></td>
        <td><img src="obr/php.png" alt="PHP" /></td>
      </tr>
      <tr>
        <td>
          <h2>Java</h2>
          <p>Povídání o Javě...</p>
        </td>
        <td>
          <h2>HTML</h2>
          <p>Povídání o HTML</p>
        </td>
        <td>
          <h2>PHP</h2>
          <p>Povídání o PHP</p>
        </td>
      </tr>
    </table>
  </body>
</html>
 
Odpovědět 29.11.2016 20:14
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na Ghor
Jan Lupčík:29.11.2016 21:58

A co znaková sada souborů?

Odpovědět  +1 29.11.2016 21:58
Cokoliv a kdokoliv může jednou uspět.
Avatar
Odpovídá na Ghor
Neaktivní uživatel:30.11.2016 0:05

a kde je v tom HTML souboru uložená informace o tom, že se mají (nebo nemají) zobrazit české znaky?

<meta charset="utf-8">

Více o kódování: https://www.jakpsatweb.cz/cestina.html

Odpovědět 30.11.2016 0:05
Neaktivní uživatelský účet
Avatar
Ghor
Člen
Avatar
Odpovídá na Neaktivní uživatel
Ghor:30.11.2016 7:35

To jsem si původně myslel taky, ale jak říkám ctrl+c ctrl+v včetně hlavičky. Tedy i

<meta charset="utf-8">

Když oba soubory otevřu v poznámkovém bloku, tak jsou úplně stejné jen se každý chová jinak :(
...kdyby šlo jen o tento soubor, tak ho prostě smažu a udělám znova, ale podobně se mi chovají všechny HTML soubory, které vytvořím v těch desítkách. Jediné co funguje je zkopírovat starý funkční soubor který byl vytvořený ve Win7 a potom kompletně přepsat jeho "vnitřek"... Proto ta otázka kde ještě jsou v HTML uloženy informace o znakové sadě (z pohledu systému?). Jestli že je charset jediné místo, tak proč to potom dělá co to dělá a co s tím???

 
Odpovědět 30.11.2016 7:35
Avatar
Ghor
Člen
Avatar
Odpovídá na Ghor
Ghor:30.11.2016 22:03

Tak to vypadá, že je problém v kombinaci Win10 + PSPad... Když napíšu kód v poznámkovém bloku, tak je vše OK. Reinstal PSPadu nepomáhá...
Zkusím se zeptat ještě takhle:

  1. Má někdo pozitivní zkušenosti s PSPadem pod Win10?
  2. Docela by mi zajímalo, jak je možné, že dva soubory, které jsou po otevření naprosto stejné, se chovají každý jinak... Ale to asi není otázka na HTML...
 
Odpovědět 30.11.2016 22:03
Avatar
Odpovídá na Ghor
Neaktivní uživatel:1.12.2016 1:22

PSPad je problém v kombinaci s čímkoliv, je tu rok 2016 a máme lepší editory a IDE.

Odpovědět 1.12.2016 1:22
Neaktivní uživatelský účet
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Neaktivní uživatel
David Čápka:1.12.2016 8:20

PSPad je z roku 2016 ;-)

Odpovědět 1.12.2016 8:20
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Mego
Člen
Avatar
Odpovídá na David Čápka
Mego:1.12.2016 12:07

Ale úrovňou je v roku 2002 :D Dneska aj tak všetci robia všetko na storme

Odpovědět 1.12.2016 12:07
Radšej 15 minút skôr, ako 15 sekúnd neskoro...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Mego
David Čápka:1.12.2016 12:17

Pleteš si pojmy editor a IDE a pojmy programovací jazyk a značkovací jazyk. Komentuješ pod úvod do HTML, PSPad je tu naprosto v pořádku a jako editor nabízí také rozumnou funkcionalitu.

Odpovědět  +1 1.12.2016 12:17
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Mego
Člen
Avatar
Odpovídá na David Čápka
Mego:1.12.2016 12:30

Nepletem... ale kto by dneska robil v editore, keď može robiť v IDE? HTML neni programovací jazyk, to dobre viem. Ale Storm sa na neho upotrebiť dá ;) A čo ti je lepšie, vedieť poriadne jedno IDE a používať ho na všetko, alebo na html používať PSpad, na CSS používať sublime, na SQL workbench, na PHP storm, na javascript Netbeans?

Odpovědět 1.12.2016 12:30
Radšej 15 minút skôr, ako 15 sekúnd neskoro...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Mego
David Čápka:1.12.2016 13:55

HTML není vázané na PHP, proto nemá žádný smysl doporučovat PHPstorm v tomto kurzu. Ten člověk může začít dělat v ASP.NET ve Visual Studio nebo v NetBeans v Javě. PHPStorm je navíc placený a na HTML zbytečný a nevhodný. Kdybys měl praktické lektorské zkušenosti, věděl bys také co za lidi v HTML začíná a jaké problémy jim dělá používat cokoli, co generuje projekty a podobně.

Odpovědět  +4 1.12.2016 13:55
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Odpovídá na David Čápka
Neaktivní uživatel:1.12.2016 16:14

PSPad je z pravěku. To že je nejnovější verze někdy z roku 2016 neznamená, že jde o jakkoliv moderní software.

Odpovědět 1.12.2016 16:14
Neaktivní uživatelský účet
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Neaktivní uživatel
David Čápka:1.12.2016 16:15

PSpad je úplně normální editor. To je jako bys říkal cyklistovi, že kolo je z pravěku a že teď máme auta :)

Odpovědět  +1 1.12.2016 16:15
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Odpovídá na David Čápka
Neaktivní uživatel:1.12.2016 16:20

Ne, to je jako bys říkal cyklistovi, že mezi kolem z kamene a bambusu a mezi karbonovo-hliníkovým kolem v podstatě není rozdíl. Jsou tu vzhlednější, kompaktnější, pohodlnější a svižnější editory a IDE, než PSPad

Editováno 1.12.2016 16:20
Odpovědět 1.12.2016 16:20
Neaktivní uživatelský účet
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Neaktivní uživatel
David Čápka:1.12.2016 16:20

Bohužel jsi mě nepochopil, nevadí :) Ať se daří.

Odpovědět 1.12.2016 16:20
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Odpovědět 1.12.2016 16:22
Neaktivní uživatelský účet
Avatar
Michal Martinec:2.12.2016 21:51

Pozrite, mne osobne ako cloveku, ktory s tymto vsetkym len zacina a uci sa z roznych zdrojov (itnetwork.cz je len jednym z nich), mi uplne PSPad vyhovuje a to z viacerych dovodov. Vsade inde na zaciatok odporucaju prave Storm. Bol som na ich stranke a ked som si vsimol ze je to len trial verzia na 30 dni a nasledne si za to treba platit, hned som to vypol. Nevidim totiz dovod platit za Storm, ked sa len ucim popri robote a boh vie kolko sa este len ucit budem. Storm sa mi oplati po tom, co sa vsetko naucim a budem sa chciet posunut niekam dalej.

Odpovědět  +3 2.12.2016 21:51
Neporovnavaj sa s ostatnymi. Porovnavaj sa sam so sebou.
Avatar
Robert
Člen
Avatar
Odpovídá na Mego
Robert:30.12.2016 14:38

Ďalší mudrlant :D

 
Odpovědět 30.12.2016 14:38
Avatar
Marian Benčat
Redaktor
Avatar
Marian Benčat:30.12.2016 14:45

Jestli můžu přidat svůj názor, tak i na nejjednodušší věci jako zacatky s html a css bych zcela bez váhání sahnul spíše po něčem jako je Visual Studio Code. Taky to nepotřebuje žádný projekty ani nic podobneho a narozdil od pspadu má spoustu věcí co nováčkovi dokáží perfektně pomocí a usnadnit mu uceni. At uz jde o intellisense, syntax hajlajt, linting, nebo třeba browser sync.. Ná druhou stranu plně souhlasim, že bych novackovi nedoporučil žádné IDE typu webstorm, php storm, nebo nedejbože netbeans.

Editováno 30.12.2016 14:46
Odpovědět 30.12.2016 14:45
Totalitní admini..
Avatar
Marian Benčat
Redaktor
Avatar
Odpovídá na Michal Martinec
Marian Benčat:30.12.2016 14:46

Michale koukni na visual studio code. Neprohloupis.

Odpovědět  +1 30.12.2016 14:46
Totalitní admini..
Avatar
Jan Veselý
Člen
Avatar
Jan Veselý:22.1.2017 18:09

Ahoj.
Jsem úplný začátečník v HTML. Zkouším první pokusy v PsPadu, ale když dám náhled přes něj, tak se některé znaky nezobrazí. Zatím jde o <mark>a <reversed>. Čím to může být?
Verze PsPadu 4.6.1 (2730)

 
Odpovědět 22.1.2017 18:09
Avatar
Jan Veselý
Člen
Avatar
Odpovídá na Jan Veselý
Jan Veselý:22.1.2017 18:13

.....špatně jsem se vyjádřil. Nezobrazí se to co ten znak vlastně říká, aby prohlížeč zobrazil. Poradíte mi někdo? Děkuji

 
Odpovědět 22.1.2017 18:13
Avatar
Odpovídá na Jan Veselý
Marek Chalupa:22.1.2017 18:35

Řešení je jednoduché, nepoužívej náhled v PsPadu, není to ideální :) Uloženou stránku prostě jednou otevři v klasickém webovém prohlížeči (Mozilla, Chrome) a nechej si ji otevřenou. Až uděláš změny v kódu, stačí kliknout refresh nebo F5. Jednoduché.

 
Odpovědět 22.1.2017 18:35
Avatar
Peter Butora
Člen
Avatar
Peter Butora:17.12.2017 13:15

Paráda! S vašími články se mi dobře učí těším se na příští lekci (úvod k CSS)

Odpovědět 17.12.2017 13:15
Péťa
Avatar
Michal Fišer:28.12.2017 23:53

Super napsáno! Dosud nemám s ničím problém(ani PsPad versus Win10) a spoustu věcí se naučím i z komentářů pod jednotlivými lekcemi. Doufám, že to tak půjde dál. Díky.

 
Odpovědět 28.12.2017 23:53
Avatar
Ján Dorínsky:31.1.2018 21:31

Super návody. Pekne pomaličky krok za krokom a ide to celkom fajn, len si nechať v hlave všetky tie predošlé znalosti :-)

 
Odpovědět 31.1.2018 21:31
Avatar
Odpovídá na Ján Dorínsky
Rico ThreeDmax:10.7.2018 22:48

Tolze jedine opakovanim a praxi

 
Odpovědět 10.7.2018 22:48
Avatar
Andy Scheuchzer:27.7.2018 12:20

Nevím, jestli to patří zrovna sem, ale tak jde o seznamy:
původní kód:

<h3>Nadpis</h3>
<ul>
        <li>položka</li>
        <!-- atd. -->
</ul>

po uložení v LibreOffice:

<h3 class="western">Nadpis</h3>
<ul>
        <li/>
<p style="margin-bottom: 0cm">položka</p>
        <!-- atd. -->
</ul>

Čekal jsem, že to ten kód nechá tak a bude to upravovat jenom obsah…

No, nakonec jsem musel použít verzování od Win, takže jsem ztratil 3 hodiny práce… ;-(

OPRAVDU NIKDY NEZKOUŠEJTE TAKOVOU HLOUPOST!!!

Odpovědět 27.7.2018 12:20
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
fischer.p
Člen
Avatar
fischer.p:19.8.2018 20:52

Něco se mi nezdá - u uspořádaného seznamu s atributem reversed nejsou položky sestupně, ani tady ve vaší ukázce ani když to zkouším doma.

 
Odpovědět 19.8.2018 20:52
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na fischer.p
David Čápka:19.8.2018 21:33

Zkus to v jiném prohlížeči, mě to funguje korektně.

Odpovědět 19.8.2018 21:33
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Lukáš Otáhal:29.8.2018 20:37

Nefungují mi "speciální" znaky, tím myslím háčky, čárky a tak. Zkoušel jsem otevřít v jiném prohlížeči Chrome/Edge ( normálně mi tam všechno funguje, v obou dvou ) ale u téhle lekce ne, dokonce jsem pro ověření zkusil kompletně celý kód stránky "dovednosti" co je napsán zde vložit do pspadu a stejně mi to háže místo háčků a čárek otazníky.
Někdo nějaká rada? :)

 
Odpovědět 29.8.2018 20:37
Avatar
Odpovídá na Lukáš Otáhal
Lukáš Otáhal:29.8.2018 20:50

tak chyba zjištěna, podařilo se mi udělat chybu v utef-8 a jak na potvoru se ji podařilo udělat i vám zde :D po asi 8 přečtení celého kódu a kontrolou s kódy z minulých lekcí jsem to našel. Tak bych vás na ni rád upozornil že v "Podstránce dovednosti" máte v kódu chybičku v zápisu utef-8, je tam pouze utf-8, tak aby to nezmátlo ještě někoho :D

 
Odpovědět 29.8.2018 20:50
Avatar
Odpovídá na Lukáš Otáhal
Andy Scheuchzer:29.8.2018 21:24

A co je podle tebe na UTF-8 (teda utf-8, abych to napsal stejně) špatně? Zkoušel jsem "utef-8" hledat, výsledky pouze utf-8, takže to asi nebude vůbec nic, natož kódování.

Odpovědět 29.8.2018 21:24
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
Odpovídá na Andy Scheuchzer
Lukáš Otáhal:30.8.2018 7:01

No tak v tom případě nevím. V mém případě, mi nefungovali háčky ani čárky, měl jsem na pozicích s háčkem místo písmene otazník... A když jsem změnil utf-8 na utef-8 tak se mi zobrazili normálně. Našel jsem utef-8 v kódu z minulé lekce ( u sebe ), zkusil a fungovalo, ale pokud teda utef-8 opravdu nic neznamená tak nechápu proč s utf to nefunguje s utef ano.

Editováno 30.8.2018 7:02
 
Odpovědět 30.8.2018 7:01
Avatar
Odpovídá na Lukáš Otáhal
Lukáš Otáhal:30.8.2018 7:10

Tím pádem se omlouvám za upozornění na chybu která neni chybou, ale potřeboval bych objasnit proč mi UTF-8 nefunguje ( ani v případě, že jsem celý kód zde zveřejněný zkopíroval a vložil do pspadu ) a zápis UTEF-8 ( který opravdu neexistuje jak mě upozornil Andy a sám jsem si to googlil ) mi funguje a diakritika se zobrazí.

 
Odpovědět 30.8.2018 7:10
Avatar
Odpovídá na Lukáš Otáhal
Andy Scheuchzer:30.8.2018 7:28

S jakým kódováním to ukládáš? V některé lekci tady jsme to řešili, zkus si pročíst komentáře.

Odpovědět 30.8.2018 7:28
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
Odpovídá na fischer.p
Jan Jurníček:20.11.2018 9:32

MS Internet Explorer, no. :-(

 
Odpovědět 20.11.2018 9:32
Avatar
Petra Krátká:16. ledna 13:59

Všechno běží jak má - skvěle vysvětlené! :)

 
Odpovědět 16. ledna 13:59
Avatar
Lenka Mackova:28. února 19:42

Bezvadne. Dik moc. A krasne funguje i na Ubuntu a v Ghostwriter.

 
Odpovědět 28. února 19:42
Avatar
Rábel David
Člen
Avatar
Rábel David:12. března 13:43

Jen takové Info co by bylo fajn doplnit do článku reversed atribut v Internet Explorer/Microsoft Edge nebude fungovat a nezobrazí se . Někoho by to mohlo překvapit stejně jako mě .

 
Odpovědět 12. března 13:43
Avatar
Ondřej Matýs:25. dubna 12:02

utef-8 - dobrá připomínka, prohlížeč mám Internet Explorer a místo písmena s diakritikou mi to zobrazovalo čtverečky. Dík

 
Odpovědět 25. dubna 12:02
Avatar
Jakub Ondrák:28. dubna 20:54

jen taková prkotina, <dd> znamená definition description ;-)

 
Odpovědět 28. dubna 20:54
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 100 zpráv z 100.