Python týden Geek tričko zdarma
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 3 - Obrázky a odkazy v HTML

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, Základní HTML tagy, jsme se naučili zvýrazňovat text a používat nadpisy. Vytvořili jsme si také první stránku jednoduchého webu, na které budeme v dnešním HTML tutoriálu pokračovat.

Obrázky

Co by to bylo za web bez obrázků? Obrázky vložíme pomocí tagu <img /> (jako image = obrázek). Setkáváme se s prvním tagem, který vyžaduje tzv. atributy. Atribut je doplňující informace k tagu. Zde bude atributem cesta k souboru obrázku - atribut src a popis obrázku alt. Atributy se píší do špičatých závorek za název tagu, následuje rovnítko a obsah atributu je potom v uvozovkách. Dobrou praktikou je mít všechny obrázky k webu v nějaké složce, aby se nemíchaly s dalším obsahem. Vytvoříme si tedy ve složce s webem novou složku, kterou pojmenujeme obrazky. Do ní si vložíme obrázek, který budeme chtít na stránce zobrazit. Můžete si stáhnout a použít tento zkušební obrázek. Uložte si ho do nově vytvořené složky a zkusme si ho vložit do nového odstavce.

Výsledný kód obrázku by mohl vypadat takto:

<p>
        <img src="obrazky/avatar.png" alt="Programátor HoBi" />
</p>

Pozor: Musíme si uvědomit, že až budou stránky na internetu, stažení obrázku bude nějakou dobu trvat. Používejte tedy úsporné formáty, jako jsou JPEG nebo PNG, kde má výsledný obrázek malou velikost díky kompresi. JPEG se zpravidla používá na velké obrázky a fotky, PNG na ikony, nákresy a obrázky, kde jsou jednobarevné plochy. Rozhodně se vyhněte formátu BMP, který je bezkompresní nebo formátu GIF, který poškozuje paletu.

Atribut alt bývá často vynecháván, ale to je chyba. Hraje totiž svou roli např. ve vyhledávačích obrázků (Google Images) nebo v hlasových čtečkách.

Výsledek:

HTML tutoriál – obrázky

Výšku a šířku obrázku je možné nastavit pomocí atributů width a height. Hodnoty můžeme zadat buď číslem (např width="64") a budou označovat velikost v pixelech nebo procenty (např width="50%"). Pokud je zadán jen jeden atribut, další se dopočítá tak, aby zůstal zachován poměr stran. Opět si však musíme uvědomit, že obrázek by měl být na webu v té velikosti, ve které se bude zobrazovat. Měli bychom ho tedy zmenšit např. v GIMPu a ne ho nahrát na web veliký a zmenšit si ho v HTML. Prohlížeč by jinak musel načíst celý velký obrázek, zmenšit ho a až potom ho zobrazit. To by jistě chvíli trvalo.

Odkazy

Posledním a možná nejdůležitější tagem, který si tu zmíníme, je odkaz. Vložíme ho tagem <a> (jako anchor = zakotvit, připoutat). Tag <a> je párový a obaluje text, který má být odkazem. Vyžaduje atribut href, kde je cílová stránka, na kterou odkaz vede. Někdy se hodí, aby se stránka otevřela v nové záložce prohlížeče, v tom případě přidáme atribut target s hodnotou _blank.

Ukázka kódu s odkazem:

<a href="http://www.google.com">odkaz na Google</a>

Nemusíme se odkazovat jen na stránky, ale také na soubory. Kliknutí na odkaz potom vyvolá jejich stažení.

Ukázka kódu pro stažení souboru:

<a href="http://www.mujweb.cz/soubor.zip">Stáhnout soubor.zip</a>

Elementy v HTML se dělí na řádkové a blokové. Rozdíl mezi nimi je ten, že blokové mohou v sobě obsahovat oba druhy, ale řádkové mohou obsahovat jen řádkové. Odkaz je element řádkový, stejně jako všechny elementy, co jsme si zatím zmínili, kromě nadpisů, které jsou blokové. Do odkazu tedy můžeme dát klidně i obrázek, ale ne nadpis.

Když vložíme vše, co jsme se dnes naučili do kódu webu, mohl by vypadat takto:

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

<head>
        <meta charset="utf-8" />
        <title>Moje první webová stránka</title>
</head>

<body>
        <h1>Můj první web</h1>
        <p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.</p>
        <p><img src="obrazky/avatar.png" alt="Programátor HoBi" /></p>

        <h2>O mně</h2>
        <p>Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT.</p>
        <p>Rád čtu a někdy (hlavně v létě) i sportuju.</p>
        <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p>

        <h2>Dovednosti</h2>
        <p>V prváku jsem začal ve škole s programovacím jazykem PASCAL. Hledal jsem na internetu nějaké lepší jazyky a náhodou jsem narazil na itnetwork.cz, kde se nyní učím <strong>HTML</strong> a <strong>Javu</strong>. Základy těchto jazyků ovládám.</p>

        <p>Tato stránka je vytvořena podle HTML tutoriálů na <a href="http://www.itnetwork.cz" target="_blank">itnetwork</a>.</p>
</body>

</html>

A výsledek:

HTML tutoriál – Základní HTML tagy

Po kliknutí na odkaz se ITnetwork otevře v nové stránce.

Navigace

Na závěr si vyzkoušejme ještě jednoduchou navigaci v rámci stránky. Vytvoříme si v PSPadu nový HTML soubor, půjde o kontaktní stránku, na kterou přejdeme ze stránky hlavní (z index.html) a naopak z kontaktní stránky se budeme moci na hlavní stranu vrátit.

Kód nové stránky bude následující:

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

<head>
        <meta charset="utf-8" />
        <title>Kontaktujte mě</title>
</head>

<body>
        <h1>Kontakt</h1>
        <p><img src="obrazky/email.png" alt="email" /></p>
        <p>
        Pokud mi chcete něco sdělit, napište mi email na <strong>hobi (zavináč) hobi (tečka) cz.
        </p>

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

</html>

Stránku uložíme jako kontakt.html do složky s webem. Obrázek (ikonku) emailu jsem stáhl z webu http://www.iconfinder.com, kde máte k dispozici tisíce ikonek pro vaše webové stránky. Ikony jsou zadarmo, u každé je napsaná licence, některé můžete použít libovolně, u některých je třeba uvést odkaz na autora. Takových webů, které nám pomohou v tvorbou grafiky, si během seriálu zmíníme ještě několik.

Zkusme si stránku kontakt.html otevřít v prohlížeči, vypadá asi takto:

HTML tutoriál -Kontaktní stránka

Po kliknutí na odkaz níže se z ní vrátíme zpět na hlavní stránku. Aby byla navigace kompletní, dejme ještě do hlavní stránky odkaz na stránku kontaktní, třeba do odstavce o mě:

<p>Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT. Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce</a>.</p>

Máme hotovou obousměrnou navigaci v rámci našeho webu. V příští lekci, Tabulky v HTML, to bude o tabulkách a seznamech. Dnešní kód je jako vždy ke stažení níže.


 

Stáhnout

Staženo 1610x (45.27 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
96 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
Základní HTML tagy
Všechny články v sekci
Webové stránky krok za krokem
Miniatura
Následující článek
Cvičení k 1.-3. lekci HTML a CSS
Aktivity (4)

 

 

Komentáře

Avatar
Nepojmenovaný
Neregistrovaný
Avatar
Nepojmenovaný:20.5.2013 19:31

Zdravím
mám dotaz dal jsem tam obrázek v jpeg a tem mi nefunguje ale když tam dám obrázek s png tak mi to jde.prosím poradte a předem děkuji za odpověd.

 
Odpovědět 20.5.2013 19:31
Avatar
Odpovídá na Nepojmenovaný
Michal Žůrek - misaz:20.5.2013 19:38

Máš správně příponu?

<img src="mujObrazek.png" alt="Obr 1." />
<img src="mujObrazek.jpg" alt="Obr 2." />
 
Odpovědět 20.5.2013 19:38
Avatar
Nepojmenovaný
Neregistrovaný
Avatar
Odpovídá na Michal Žůrek - misaz
Nepojmenovaný:20.5.2013 19:57

Zdravim,
Aha děkuji ja tam měl jpeg místo jpg funguje děkuji.

 
Odpovědět 20.5.2013 19:57
Avatar
Kit
Redaktor
Avatar
Odpovídá na Nepojmenovaný
Kit:20.5.2013 20:12

Další oběť skrývání přípon souborů známých typů.

Odpovědět  +5 20.5.2013 20:12
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Vojtěch Jelínek (Slepice1):24.5.2013 22:44

hobi (zavináč) hobi (tečka) cz Takhle je to napsané kvůli spamu?

 
Odpovědět 24.5.2013 22:44
Avatar
Odpovídá na Vojtěch Jelínek (Slepice1)
Neaktivní uživatel:24.5.2013 23:17

ano, když napíšeš email ve tvaru něco@něco.cz tak si koleduješ o to, že si to přečte pár botů a bude ti chodit pravidelná směska spamu. Šéfuje se to buďto jak je uvedeno tady, a nebo se (celá adresa/zavináč) vloží jako obrázek ;) možná existují další způsoby, ale to už já nevím.

Odpovědět  +1 24.5.2013 23:17
Neaktivní uživatelský účet
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:24.5.2013 23:19

Funebrak se šprtal !! :) :DD

Editováno 24.5.2013 23:19
Odpovědět 24.5.2013 23:19
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:24.5.2013 23:21

ale kulový, první způsob vidím tady a ten druhý jsem okoukal jinde a párkrát i použil ;)

Editováno 24.5.2013 23:21
Odpovědět  +1 24.5.2013 23:21
Neaktivní uživatelský účet
Avatar
k.ats
Neregistrovaný
Avatar
k.ats:28.5.2013 9:26

Ahoj, v tom kódu pro kontakl.html chybí u mailové adresy ukončovací znak . Já jen tak pro pořádek. Jinak pěkný web. Už dřív jsem něco dělal podle jiné konkureční stránky, ale ta už je celkem zastaralá. Tahle je aktuální a pěkná. Díky :-)

 
Odpovědět 28.5.2013 9:26
Avatar
k.ats
Neregistrovaný
Avatar
Odpovídá na k.ats
k.ats:28.5.2013 9:29

Omlouvam se, ukoncovaci znak

</strong>

jsem zapomel dat do (/code).

 
Odpovědět 28.5.2013 9:29
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na k.ats
David Čápka:28.5.2013 11:29

Nojo, díky, opravím :)

Odpovědět 28.5.2013 11:29
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
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Zdeněk Pavlátka:28.5.2013 19:52

Dá se obrázek přesunout doprostřed stránky?

Odpovědět 28.5.2013 19:52
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Zdeněk Pavlátka
David Čápka:28.5.2013 19:54

Řeší se to dále ;-)

Odpovědět 28.5.2013 19:54
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
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Zdeněk Pavlátka:28.5.2013 19:58

Kde přesně? Asi jsem to přehlédl. :D

Odpovědět 28.5.2013 19:58
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Zdeněk Pavlátka
David Čápka:28.5.2013 20:32

Tak asi až v tom dalším, zkrátka bys k tomu dospěl. 8| Vážně má smysl ptát se v seriálu co je v dalším dílu? Prostě si ho přečti.

Odpovědět 28.5.2013 20:32
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
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Zdeněk Pavlátka:29.5.2013 16:04

Seriál jsem čet celej... :[

Odpovědět 29.5.2013 16:04
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na David Čápka
Zdeněk Pavlátka:30.5.2013 7:46

Už jsem to našel v jednom kódu z článku. Popsaný jsem to ale nikde neviděl.

Odpovědět 30.5.2013 7:46
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Vojta Pšenák
Redaktor
Avatar
Vojta Pšenák:27.6.2013 20:52

HoBi, kde si vzal tohohle avatara ?

 
Odpovědět 27.6.2013 20:52
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Vojta Pšenák
Honza Bittner:27.6.2013 21:02

Proč se ptáš tady jaj ? :P Takové of-topic :D

... přidělil mi ho sdraco ... :D

Odpovědět 27.6.2013 21:02
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Vojta Pšenák
Redaktor
Avatar
Odpovídá na Honza Bittner
Vojta Pšenák:27.6.2013 21:19

Ptal jsem se tady, protože je použit v článku...

 
Odpovědět 27.6.2013 21:19
Avatar
Vetoa
Člen
Avatar
Vetoa:12.11.2013 13:33

Ahoj, zkoušel jsem tu navigaci, udělal jsem všechno jak si napsal, ale když kliknu na-"Zpět na hlavní stránku" tak mi to napíše, že tu stránku nenalezl.. Nevíš co s tím?

 
Odpovědět 12.11.2013 13:33
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Vetoa
David Čápka:19.11.2013 12:14

Pod každým článkem je zdrojový kód, stáhni si ho a najdi si chybu.

Odpovědět 19.11.2013 12:14
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
hleofpf
Člen
Avatar
hleofpf:27.1.2014 17:09

Tak jsem sjel první 3 díly seriálu. A jsem mile překvapen s tím jak je to po lopatě vysvětleno a precizně provedeno. Poklona! :)

 
Odpovědět  +3 27.1.2014 17:09
Avatar
Michal Kučera:10.3.2014 15:59

Je chyba když udělám místo tohoto:
<a href = "http://www.dev­book.cz">Devbo­ok
toto
<a href = "www.devbook.cz">Dev­book
?

Editováno 10.3.2014 15:59
Odpovědět 10.3.2014 15:59
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Avatar
Odpovídá na Michal Kučera
Neaktivní uživatel:14.3.2014 20:35

Ne, není ale musíš ten tag <a> zakončit.
tzn. <a href = "http://www.dev­book.cz">Devbo­ok

Editováno 14.3.2014 20:36
Odpovědět 14.3.2014 20:35
Neaktivní uživatelský účet
Avatar
vanek_jiri
Člen
Avatar
vanek_jiri:15.7.2014 9:18

Zdárek. Mám dotaz. Na jednom starším webu s html návodem psali, že je dobré u <img> udávat v atributech i velikost elementu, ve kterém bude obrázek zobrazen. Je to v HTML5 nutné?

 
Odpovědět 15.7.2014 9:18
Avatar
Ori
Člen
Avatar
Odpovídá na vanek_jiri
Ori:15.7.2014 9:21

nieje, ale keď chceš mať istotu, že ti ten obrázok nebude presahovať rôzne elementy nastavuj mu to, ALE v CSS. Čisto kvôli prehľadnosti

 
Odpovědět 15.7.2014 9:21
Avatar
vanek_jiri
Člen
Avatar
Odpovídá na Ori
vanek_jiri:15.7.2014 9:39

Super, dík za rychlou odpověď, pod vlivem starého návodu jsem to chtěl cpát do HTML :)

 
Odpovědět 15.7.2014 9:39
Avatar
Sub zero z mortal combat :3.8.2014 17:10

zdravím mám google chrome
přidal jsem si do zdrojáku celou předdefinovou hlavičku atd., a v body se mi začali v textu místo diakritiky objevovat značky otazníčků
zkoušel jsem oddělat řádek <meta charset="utf-8" />
v offline modu se v chrome vráti všechno do normálu ale když takto odmazaný zdrojak šoupnu na server zůstává vše s otazníčkama tak tomu moc nerozumím.
V čem je problém a jak jej vyřešit? můžu hodit link ale asi bych se červenal :D teprv s tím začínám :D

<!DOCTYPE html>
<html lang="cs-cz">
  <head>
    <meta charset="utf-8" />
    <title>main</title>
  </head>

  <body>
Editováno 3.8.2014 17:12
 
Odpovědět 3.8.2014 17:10
Avatar
Odpovídá na Sub zero z mortal combat
Sub zero z mortal combat :3.8.2014 18:10

nevím proč tomu tak bylo.....zkopíroval jsem kompletní obsah do prázdného html souboru, přejmenoval jej na stejný název jako původní a tím jej i následně přepsal a vše je najednou vpořádku. Jestli byla chyba někde v paměti nevím ....proč ale pozitivně reagoval na odmazání onoho řádku a přitom na internetu se opět objevila chyba nechápu, no jsem rád že se to spravilo i když mě děsí že nevím vůbec proč...:D

 
Odpovědět 3.8.2014 18:10
Avatar
Sub zero z mortal combat :6.8.2014 17:13

Zdravím , mám dotaz jak udělat aby se mi do určité části stránky načetl obsah jiné stránky automaticky, tedy aniž by uživatel musel na cokoliv klikat.
něco na tendle způsob ale target je pro tabulky což tu nejde.

 
Odpovědět 6.8.2014 17:13
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na Sub zero z mortal combat
Jan Lupčík:6.8.2014 17:37

Pokud je to tvoje práce, tak ručně nakopírovat nebo použít toto:
<?php include "soubor.html" ?>
Ale musí to být ve stejné složce a také se načte celý obsah. :)
Pokud to není tvoje práce, tak podle mě ručně (s kopírováním z jiné stránky jsem nikdy nedělal).

Odpovědět  +1 6.8.2014 17:37
Cokoliv a kdokoliv může jednou uspět.
Avatar
Odpovídá na Jan Lupčík
Sub zero z mortal combat :6.8.2014 17:50

aha, dík za odpověd tak s tím sem se ještě nesetkal, já zatím došel jen do css a tohle hááádáám hhááddáám bude z php oblasti :D
Přišlo mi to jako banální věc a furt sem nad tím přemýšlel jak to že to neumím a furt jsem nějak modifikoval
<a> :D
tak já to nechám zatím hold delší a prsknu tam ty data napřímo, chtěl sem to mít v externím aby ten soubor nebyl tak zapráskaný ale co už :D

 
Odpovědět 6.8.2014 17:50
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na Sub zero z mortal combat
Jan Lupčík:6.8.2014 17:55

Já se teprve PHP učím, ale to include jsem se naučil. Sám jsem teď dělal webovky a furt jsem upravoval patičku. Vem si, že takhle bych musel přepsat 20 souborů. Místo toho tam mám:
<?php include "footer.html" ?>
a je po starostech. A ano, je to PHP. :)

Odpovědět 6.8.2014 17:55
Cokoliv a kdokoliv může jednou uspět.
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na vanek_jiri
Tonda Kozák:6.8.2014 22:31

Velikost se u obrázku nenastavuje jen kvůli přehlednosti. Je to proto, že jak se postupně nahrává stránka, tak když zadáš velikost obrázku (který není v té chvíli ještě stažený), tak se pro něho tam vyhradí místo.
Pokud bys rozměry neudával, mohla by stránka „poskakovat“ jak by se postupně ty obrázky načítaly.

 
Odpovědět  +1 6.8.2014 22:31
Avatar
Odpovídá na Sub zero z mortal combat
Neaktivní uživatel:21.9.2014 21:35

A co takhle použít tag iframe?
Použití:

<iframe href="www.stranka.cz/stranka.html"> </iframe>
Odpovědět 21.9.2014 21:35
Neaktivní uživatelský účet
Avatar
gcx11
Redaktor
Avatar
gcx11:26.10.2014 11:18

Ahoj,
co znamená, že poškozuje paletu?

 
Odpovědět 26.10.2014 11:18
Avatar
Odpovídá na gcx11
Neaktivní uživatel:26.10.2014 11:23

Nejspíš se tím snaží říct, že příjdeš o část barevné palety. Prostě málo barev :)

Odpovědět  +1 26.10.2014 11:23
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel:26.10.2014 11:25

img a další nepárové elementy v html nemusí mít na konci lomítko (nevím od jaké verze, ale myslím si, že odjakživa a že je to jen zvyk z xhtml).

Editováno 26.10.2014 11:25
Odpovědět 26.10.2014 11:25
Neaktivní uživatelský účet
Avatar
marian.smarik:13.1.2015 20:52

čaute obrázok sa dá nahrať aj takto:<img src="http://u­pload.wikimedi­a.org/wikipedi­a/commons/6/61/HTML5­_logo_and_wor­dmark.svg" width="100" height "100">

 
Odpovědět 13.1.2015 20:52
Avatar
Tomáš Brůna
Redaktor
Avatar
Tomáš Brůna:23.3.2015 10:17

Ahoj jak se da nahrat na stranky video?

Odpovědět 23.3.2015 10:17
Lepší být šprt než blbec :)
Avatar
Aleš Lulák
Člen
Avatar
Odpovědět  +1 23.3.2015 11:12
"I disapprove of what you say, but I will defend to the death your right to say it" - Evelyn Beatrice Hall
Avatar
Tomáš Brůna
Redaktor
Avatar
Odpovědět 23.3.2015 15:30
Lepší být šprt než blbec :)
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Tomáš Brůna
Tomáš123:23.3.2015 20:04

HTML5 má na takéto veci nové prvky. Hľadaj prvok <video>. V starších prehliadačoch nefunguje, tam sa myslím používali nejaké flash prvky, nie som si istý.

Odpovědět 23.3.2015 20:04
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
opiceg
Člen
Avatar
opiceg:22.4.2015 16:01

Ahoj když překlikávám z jedné stránky na druhou pomocí menu hlavní fotka se zobrazí jen někdy jinak to musím několikrát aktualizovat.
Je to normální?

 
Odpovědět 22.4.2015 16:01
Avatar
vojtanosek
Člen
Avatar
vojtanosek:11.5.2015 17:51

Chcu se zeptat jak dát fotku na web. Nejde mě to jde to jen když mám index.html na disku. Bohužel. Prosím radu.

 
Odpovědět 11.5.2015 17:51
Avatar
Odpovídá na vojtanosek
Michal Šmahel:11.5.2015 18:45

Na window se jiný typ "lomítek". Na disku používáš

cesta\k\souboru\soubor.jpg

a na serveru (linuxu)

cesta/k/souboru/soubor.jpg

Musíš si ty "lomítka" přehodit.

Odpovědět  +1 11.5.2015 18:45
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
vojtanosek
Člen
Avatar
vojtanosek:12.5.2015 16:32

Díky.Chtěl jsem se zeptat jak dát třeba obrázek na web. Když jsem na hostingu 000webhost. Jestli se dá ten obrázek dostat do kódu.

 
Odpovědět 12.5.2015 16:32
Avatar
Odpovídá na vojtanosek
Michal Šmahel:12.5.2015 18:49

Jak myslíš do kódu?? Obrázek umístíš na ten hosting stejně jako HTML/PHP soubor. Nebo na nějaké úložiště (cloud - DropBox) a dáš na něj odkaz.

<img src="odkaz/na/daný/soubor" alt="Popis obrázku" />
Odpovědět 12.5.2015 18:49
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
vojtanosek
Člen
Avatar
vojtanosek:12.5.2015 21:50

Aha, díky!

 
Odpovědět 12.5.2015 21:50
Avatar
Ondřej Rejmont:4.8.2015 10:19

Ahoj,
chci se vás zeptat, jestli nevíte co mám dělat. Vždy když tam dám obrázek, tak mi tam vyskočí toto

 
Odpovědět 4.8.2015 10:19
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na Ondřej Rejmont
Jan Lupčík:4.8.2015 10:23

A máš tu složku s obrázky ve stejné složce jako máš index? A máš v těch obrázcích vůbec obrázek HoBiho? :)

Odpovědět  +1 4.8.2015 10:23
Cokoliv a kdokoliv může jednou uspět.
Avatar
 
Odpovědět 4.8.2015 10:24
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na Ondřej Rejmont
Jan Lupčík:4.8.2015 10:26

A jmenuje se to avatar.png? Já když si ty zdrojáky stáhnu, funguje mi to bez problému. :)

Odpovědět 4.8.2015 10:26
Cokoliv a kdokoliv může jednou uspět.
Avatar
Ondřej Rejmont:4.8.2015 10:28

Jmenuje a stejně mi to nejde. Už nevím co mám dělat. :-(

 
Odpovědět 4.8.2015 10:28
Avatar
Ondřej Rejmont:4.8.2015 10:34

No nic ale stejně díky.

 
Odpovědět 4.8.2015 10:34
Avatar
Odpovídá na Ondřej Rejmont
Roman Štěpánek :15.8.2015 15:57

Ahoj, také mi to dělá to samé, už se Ti podařilo to vyřešit? Díky, Roman

 
Odpovědět 15.8.2015 15:57
Avatar
Odpovídá na Ondřej Rejmont
Roman Štěpánek :15.8.2015 16:19

Ahoj, tak už jsem na to přišel. Cesta je obrazky, ale já to měl v obrázky :-) s dlouhým á :-) už to funguje

 
Odpovědět 15.8.2015 16:19
Avatar
Odpovídá na Ondřej Rejmont
Neaktivní uživatel:13.10.2015 19:24

Pokud se ti zobrazuje tohle, zvolil si špatnou cestu.

Odpovědět 13.10.2015 19:24
Neaktivní uživatelský účet
Avatar
Martin Škrobák:28.11.2015 17:06

čau chlapi, poradí mi někdo, proč se mi nezobrazuje obrázek?

 
Odpovědět 28.11.2015 17:06
Avatar
Odpovídá na Martin Škrobák
Dominik Gavrecký:28.11.2015 17:07

Máš správnu cestu k obrázku ?

Odpovědět 28.11.2015 17:07
Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.
Avatar
vosa53
Člen
Avatar
Odpovídá na Martin Škrobák
vosa53:28.11.2015 17:09

Dej kód a napiš kde máš index a kde ten obrázek. Nezobrazil se ti proto, že nebyl nalezen.

 
Odpovědět 28.11.2015 17:09
Avatar
Odpovídá na vosa53
Martin Škrobák:28.11.2015 17:13

dal jsem ho do složky obrázky jak je v popisu a zadal obrázky/avatar ...to si to samo nenajde?

 
Odpovědět 28.11.2015 17:13
Avatar
vosa53
Člen
Avatar
Odpovídá na Martin Škrobák
vosa53:28.11.2015 17:23

Máš u toho příponu? Problémy může dělat také diakritika u toho obrÁzky. Musíš ten soubor uložit v UTF-8, protože kódování souboru index se musí shodovat s kódováním v hlavičce html dokumentu, např windows notepad ukládá default v ansi a nebo diakritiku nepoužívat, v takovýhlech věcech se diakritika nepoužívá.

Editováno 28.11.2015 17:24
 
Odpovědět  +1 28.11.2015 17:23
Avatar
tomasmanhal
Člen
Avatar
tomasmanhal:28.11.2015 17:38

Občas, když děláš na localhostu, tak je třeba zadávat úplnou cestu k souboru. Už se mi i stalo, že webhosting rozlišoval *.jpg a *.JPG :-D

Odpovědět 28.11.2015 17:38
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Martin Škrobák:28.11.2015 17:49

nevím, nevím...furt ten stejnej problém :-(

 
Odpovědět 28.11.2015 17:49
Avatar
vosa53
Člen
Avatar
Odpovídá na Martin Škrobák
vosa53:28.11.2015 17:56

Tak to celý (ten html soubor a složku s tím obrázkem) hoď do zipu a uploadni třeba na ulož to a dej nám odkaz. :)

 
Odpovědět 28.11.2015 17:56
Avatar
Martin Škrobák:28.11.2015 18:00

já mám programátora na dovolený a potřebuji na svou doménu jen vložit jeden obrázek, protože je zatím prázdná a chodí mi tam lidi. zipovat a posílat to tímto způsobem bude pro mě asi stejný problém jako toto :-) nejde poslat třeba na mail ten obrázek, který tam potřebuji dostat a dostat zpět hotovou stránku k nahrání na web? přivezu láhev kamkoliv až to budu mít cestou :-) jsem fakt marnej .-)

 
Odpovědět 28.11.2015 18:00
Avatar
vosa53
Člen
Avatar
Odpovídá na Martin Škrobák
vosa53:28.11.2015 18:18

Jestli chceš jen stranku s jednim obrazkem tak tady to je: http://uloz.to/…obrazkem-zip Ten soubor obrazek v ty slozce nahrad svym obrazkem a změň titulek stránky (to co je v nadpisu karty v prohlizeci).

 
Odpovědět 28.11.2015 18:18
Avatar
 
Odpovědět 28.11.2015 18:20
Avatar
vosa53
Člen
Avatar
Odpovídá na Martin Škrobák
vosa53:28.11.2015 18:31

Neni zač ;)

 
Odpovědět 28.11.2015 18:31
Avatar
Daniel Rodr
Člen
Avatar
Daniel Rodr:17.12.2015 16:19

Já jsem teda asi úplnej jantar, ale když se v textu píše, že si mám obrázek uložit do složky, kde mám HTML soubor, tak se pořád bavíme o lokálním disku? Nebo už musím obrázek nahrát někam na web? Mě se totiž z celého obrázku zobrazí pouze alt popis a samotný obrázek ne...

 
Odpovědět 17.12.2015 16:19
Avatar
Odpovídá na Daniel Rodr
Dominik Gavrecký:17.12.2015 16:24

Ak sa ti zobrazí ALT teda alternatívny text znamená to, že prehliadač nevie nájsť ten obrázok, takže si zle nastavil cestu. A ak robíš na locale tak samozrejme že to vložíš do rovnakého priečinka ako máš index.html prípadne si vytvoríš ďalší priečinok napríklad images.

Odpovědět 17.12.2015 16:24
Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.
Avatar
Daniel Rodr
Člen
Avatar
Odpovídá na Dominik Gavrecký
Daniel Rodr:17.12.2015 16:34

Aha, takže do toho tagu src nelze vložit delší cestu než ten folder, ve kterém se nachází obrázek... Příklad:
správně: "obrazky\avatar­.jpg"
špatně: "mujprvniweb\HTML\o­brazky\avatar­.jpg"

To je dobré vědět, děkuji.

 
Odpovědět 17.12.2015 16:34
Avatar
Odpovídá na Daniel Rodr
Dominik Gavrecký:17.12.2015 16:41

Vložiť môžeš aj celu cestu napr. http://www.tvijweb.com/…ovinky/1.png

Odpovědět 17.12.2015 16:41
Hlupák nie je ten kto niečo nevie, hlupákom sa stávaš v momente keď sa na to bojíš opýtať.
Avatar
Odpovídá na Kit
David Müller:17.12.2015 22:25

hned jsem si změnil pro jistotu odkrývání přípon známých souborů :-)

 
Odpovědět 17.12.2015 22:25
Avatar
mkub
Redaktor
Avatar
Odpovídá na Daniel Rodr
mkub:18.12.2015 4:48

do src mozes davat 2 typy ciest:

len treba davat pozor pri absolutnych cestach, ze tam musi vzdy byt http a takisto, ked nahravas web z localhostu na web, treba tiez zmenit vo vsetkych suboroch cesty vz lokalu na hosting (dost pracne a nepohodlne), preto je lepsia relativna cesta, kde nie je treba nic menit, iba davat pozor na to, aby prvky webu boli v tych zlozkach, v ktorych by mali byt

 
Odpovědět  +1 18.12.2015 4:48
Avatar
Erik Palenčík:3.1.2016 22:14

Použivam NetBeans, a ak si lamete hlavu nadtym ako to tam pridat tak pretiahnite obrazok zo zložky surovo do textu a vam to samo vygeneruje cestu. A ak vam ho aj tak nechce zobratiť skúste iný prehliadač :)

 
Odpovědět 3.1.2016 22:14
Avatar
Odpovídá na Erik Palenčík
Erik Palenčík:3.1.2016 22:18

Ale otvoriť súbor priamo u zdroja, nie vo vyvojovom prostredí :)

 
Odpovědět 3.1.2016 22:18
Avatar
krepsy3
Redaktor
Avatar
krepsy3:13.2.2016 22:06

Já nevim, jestli jenom blbnu, ale to mám jako když chci otevřít novej panel udělat něco jako

<a href="http://google.cz/" target="_blank">Odkaz na vyhledávač google</a>

Nebo to podtržítko je chyba? Já moc nevim, protože jsem dělal akorát s xhtml, kde se tagy malinko liší. A ve zdrojácích to bohužel ukázané není. Děkuji za odpověď

Odpovědět 13.2.2016 22:06
Programátor je stroj k převodu kávy na kód.
Avatar
krepsy3
Redaktor
Avatar
krepsy3:13.2.2016 22:09

Aha, tak sorráč, já se překouk ;)

Odpovědět 13.2.2016 22:09
Programátor je stroj k převodu kávy na kód.
Avatar
atsip
Člen
Avatar
atsip:22.2.2016 9:50
Pmôťe mi prosím ušla mi pointa ako sa dostanem z indexu na kontakt?
 
Odpovědět 22.2.2016 9:50
Avatar
Vít Rázek
Člen
Avatar
Vít Rázek:8.3.2016 20:53

Ahoj chtěl sem se zeptat kam umístit tag: <width="50%">,
nebo kde dělám chybu?

 
Odpovědět 8.3.2016 20:53
Avatar
Odpovídá na Vít Rázek
Michal Štěpánek:9.3.2016 7:49

Pokud chceš nastavovat šířku nějakého elementu, tak to musíš dát do "toho" elementu
např:

<img src="obrazky/avatar.png" alt="Programátor HoBi" width="50%" />
Odpovědět 9.3.2016 7:49
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Petr Bárta
Člen
Avatar
Petr Bárta:17.7.2016 13:33

Obrázek, který jsem se chystal vložit na stránku jsem stáhnul z iconfinder ve formátu png.
Když pak ale napíšu kód pro vložení obrázku a za názvem obrázku ".png", po otevření stránky se mi zobrazí jako přetrhlý papír. V čem je chyba?

 
Odpovědět 17.7.2016 13:33
Avatar
Odpovídá na Petr Bárta
Libor Šimo (libcosenior):17.7.2016 13:45

Daj sem kod a screen stranky. Aj odkaz odkial si stiahol obrazok.

Editováno 17.7.2016 13:46
Odpovědět 17.7.2016 13:45
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Odpovídá na Petr Bárta
Libor Šimo (libcosenior):17.7.2016 14:45

Tebe sa daju otvorit odkazy na obrazky?

Odpovědět 17.7.2016 14:45
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Odpovídá na Petr Bárta
Libor Šimo (libcosenior):17.7.2016 14:47

Ak ano, mas ich ulozene pri subore.html v zlozke iconfinder?

Odpovědět 17.7.2016 14:47
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Petr Bárta
Člen
Avatar
Odpovídá na Libor Šimo (libcosenior)
Petr Bárta:17.7.2016 15:00

Ano, mám je uložené ve složce iconfinder.
Dřív mi šly obrázky normálně vkládat a zobrazily se mi na výsledném webu. Teď ale když otevřu moje starší html dokumenty, tak si mi v nich všechny obrázky zobrazí takto.

Editováno 17.7.2016 15:01
 
Odpovědět 17.7.2016 15:00
Avatar
Odpovídá na Petr Bárta
Libor Šimo (libcosenior):17.7.2016 15:40

Ak máš obrázky v PC v správnej zložke a klikom si ch zobrazíš normálne, musia ísť aj na stránke.
Roztrhnutý papier ukáže vtedy, ak cesta k obrázku nie je správna.

Odpovědět 17.7.2016 15:40
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Petr Bárta
Člen
Avatar
Odpovídá na Libor Šimo (libcosenior)
Petr Bárta:17.7.2016 18:27

Tady mám uložené obrázky, které bych chtěl použít na mém webu. V čem by ještě mohla být chyba?

 
Odpovědět 17.7.2016 18:27
Avatar
Libor Šimo (libcosenior):17.7.2016 20:59

Zmen si nastavenia v zlozke. Daj si zobrazovat pripony suborov. Takto nevidim, ake maju pripony: png, PNG, bmp ...

Odpovědět 17.7.2016 20:59
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):17.7.2016 21:11

Zasada je nasledovna:
Vzdy mas zlozku na projekt (stranku). V tej zlozke mas subor.html, dalej zlozku img, js a css.
Ak ti to nic nehovori, prestuduj si miestny tutorial html, css, js.

Odpovědět 17.7.2016 21:11
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Petr Bárta
Člen
Avatar
Petr Bárta:18.7.2016 9:44

Aha tak to je ono. Měl jsem v té složce s obrázky další složky s obrázky pro jiné weby.
Nevěděl jsem, že to je zásada, myslel jsem, že to je jen pro přehlednost. Už to jde. Díky moc.

Editováno 18.7.2016 9:44
 
Odpovědět 18.7.2016 9:44
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Petr Bárta
Tomáš123:18.7.2016 10:13

Je to zásada pre prehľadnosť. Nie je problémom ak napríklad nenačítavaš všetky obrázky umiestnené v zložke. Ja si často do priečinku obrázkov vytváram adresár ikôn.

Zrejme si mal nejakú chybu v ceste.

Cesty na starších projektoch často nefungujú kvôli zmene adresárovej štruktúry v kombinácii s používaním absolútnych adries.

Odpovědět  +1 18.7.2016 10:13
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Andrew
Člen
Avatar
Andrew:8.8.2016 17:31

Ahoj, jen chtěl upozornit že v kontakt.html není ukončený strong.

Odpovědět 8.8.2016 17:31
Scientia est potentia - Latinské přísloví
Avatar
Gbert
Člen
Avatar
Gbert:18.2.2017 16:59

Ahoj ve cvičení o kontaku jsem umístil obrázek do složky "obrazky" je to na C - čku.
Když jsem do htm napsal tento řádek:
<p><img src="obrazky/e­mail.png" alt="email"/></p>

tak se zobrazil text tak jak se má zobrazovat, ale obrázek ani náhodou...
hrál jsem si a zkoušel a hledal svojí chybu, ale pak mě napadlo dát do html odkaz rovnou z "c-čka" - tedy jaky celou cestu od C..
upravil jsem odkaz na tento:
<p><img src="file:///C:/o­brazky/email.png" alt="email"/></p>
..no a teď to vše běhá jak má...mám z toho radost ...chápu i proč to chodí, ale proč to nechodilo když jsem to psal podle návodu..
prosím help me...
díky
gbert

 
Odpovědět 18.2.2017 16:59
Avatar
Daniel Šup
Člen
Avatar
Daniel Šup:17.7.2017 14:11

Zdravím,
v článku je uvedeno, že do odkazu nemůžeme dát nadpis. Tato HTML stránka s nadpisem uvnitř odkazu, jejíž kód uvádím zde, je dle Total validatoru i validátoru w3c validní.

<!DOCTYPE html>

<html lang="cs-cz">
<head>
    <meta charset="utf-8" />
    <title>Moje druhá webová stránka</title>
</head>

<body>
<h1>Nadpis</h1>
<p>Vítejte v České republice. Za hodinu internetu nyní na cestách zaplatíte
    <s>10 Kč</s> 200 Kč.</p>
<p>Během roku se návštěvnost sociální sítě devbook.cz <mark>zvýšila o 300%</mark>.</p>
<a href="http://www.google.com"><h1>Nadpis v odkazu</h1>odkaz na Google<img src="Lighthouse.jpg" alt="lighthouse" /></a>
</body>
</html>

Zajímalo by mě, proč není vhodné vložit nadpis do odkazu. Případně by mě zajímalo, jaké jiné validátory HTML jsou schopné odhalit, že nadpis do odkazu nepatří. Za odpověď předem děkuji.

Editováno 17.7.2017 14:12
 
Odpovědět 17.7.2017 14:11
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Daniel Šup
David Čápka:17.7.2017 14:33

Jelikož element a je řádkový a element h1 je blokový, nedává smysl dávat nadpis do odkazu, ale odkaz do nadpisu. Řádkové elementy v sobě dle původního návrhu a i logicky nemají obsahovat elementy blokové. Mám dojem, že od HTML 5 není toto nařízení striktní a lze jej porušovat, což je asi důvod, proč validátor s HTML 5 hlavičkou nezařve. Můžeš tam zkusit dát hlavičku HTML 4. Každopádně, to že to jde neznamená, že to tak máme dělat :)

Odpovědět 17.7.2017 14: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
Daniel Šup
Člen
Avatar
Odpovídá na David Čápka
Daniel Šup:17.7.2017 15:04

Děkuji ti za odpověď s odůvodněním, proč není vhodné vložit nadpis do odkazu. Nyní jsem zkusil místo původní hlavičky

<!DOCTYPE html>

vložit hlavičku

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

a validátor w3c již bude hlásit chyby.

 
Odpovědět 17.7.2017 15:04
Avatar
Martin Szmek
Člen
Avatar
Martin Szmek:9.11.2017 16:31

Ahoj, nevte někdo proč mi nejdou zobrazit obrázky ve firefoxu? Myslím, že je mám povoleny v prohlížeči . Děkuji za odpověd.

 
Odpovědět 9.11.2017 16:31
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Martin Szmek
David Čápka:9.11.2017 16:46

Protože jsi je vložil špatně. Zkontroluj si kód a zda se obrázky nacházejí v daném umístění.

Editováno 9.11.2017 16:46
Odpovědět 9.11.2017 16:46
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
Martin Szmek
Člen
Avatar
Martin Szmek:9.11.2017 16:51

To mám vše správně , stáhnul jsem si test abych věděl kde mám chybu, ale když jsem to otevřel tak se mi obrazek nechce zobrazit.

 
Odpovědět 9.11.2017 16:51
Avatar
David Jančík
Tým ITnetwork
Avatar
Odpovídá na Martin Szmek
David Jančík:9.11.2017 16:56

A rozbalil jsi stáhnutý zip? Nelze načíst další soubory, pokud otevřeš html soubor přímo ze zipu (on se rozbalí systémem do dočasné složky, ale bez ostatních souborů).
Když stiskneš F12 a zvolíš si záložku "Konzole" měl bys vidět absolutní cestu k souboru, který se snaží načíst a důvod, proč se nenačetl.
Pokud nepomůže, je možné, že ti to blokuje prohlížeč. Zkus vypnout všechna rozšíření, případně resetovat prohlížeč do defaultního nastavení.

Odpovědět  +1 9.11.2017 16:56
Zapomeň, že je to nemožné a udělej to ;)
Avatar
Vít Klíma
Člen
Avatar
Vít Klíma:17.11.2017 20:37

Chybka, v kódu není uzavřený jeden tag v poslední ukázce kódu (navigace).
Pokud mi chcete něco sdělit, napište mi email na hobi (zavináč) hobi (tečka) cz.

 
Odpovědět 17.11.2017 20:37
Avatar
wartkor
Člen
Avatar
wartkor:26.11.2017 19:10

Kdemám vzít ten obrázek musím ho mít v počítači nebo co ? prosím pomoc !

Odpovědět 26.11.2017 19:10
Káždý jednou začal a neuspěl hned na poprvé
Avatar
Odpovídá na wartkor
Štěpán Halíř:26.11.2017 19:35

Ahoj,
oba obrázky (avatar.png, email.png) jsou v souboru, který je ke stažení na konci lekce. Je v něm složka obrazky, ve který jsou. Ikonu emailu vzal David ze stránky http://www.iconfinder.com. Příště to prosím pořádně pročti, každý krok je v textu uvedený.

Odpovědět 26.11.2017 19:35
Per aspera ad astras
Avatar
wartkor
Člen
Avatar
Odpovídá na Štěpán Halíř
wartkor:26.11.2017 19:43

Ani jsi mi nepomohl ale pochopil jsme že to musím mít v PC :)

Odpovědět  -2 26.11.2017 19:43
Káždý jednou začal a neuspěl hned na poprvé
Avatar
Odpovídá na wartkor
Štěpán Halíř:26.11.2017 19:54

A co víc si chtěl slyšet, když ti moje odpověď nestačila? V článku je obrázek načítán z určitýho místa na disku. Není podmínkou, že to musí být lokálně uložený. Do src="" by šlo uvést url odkaz na obrázek, např. <img src="https://­www.itnetwork­.cz/images/5/html/a­vatar.png" alt="Avatar" /> by ti obrázek avatara načetl také.

Odpovědět 26.11.2017 19:54
Per aspera ad astras
Avatar
wartkor
Člen
Avatar
wartkor:3.12.2017 12:10

A kde tu složku Obrázky mám mít umístěnou ?

Odpovědět 3.12.2017 12:10
Káždý jednou začal a neuspěl hned na poprvé
Avatar
Odpovídá na wartkor
Neaktivní uživatel:3.12.2017 13:52

Stejně jako v lekci, ve stejné složce jako html soubor.

Odpovědět 3.12.2017 13:52
Neaktivní uživatelský účet
Avatar
wartkor
Člen
Avatar
Odpovídá na Neaktivní uživatel
wartkor:3.12.2017 16:16

Takže stejná složká kde mám ty uložený HTML a kde mám PSPad ?

Odpovědět 3.12.2017 16:16
Káždý jednou začal a neuspěl hned na poprvé
Avatar
Peter Sciranka
Redaktor
Avatar
Odpovídá na wartkor
Peter Sciranka:3.12.2017 16:52

Ahoj, no predpokladám, že doteraz máš dva súbory:

  • kontakt.html
  • index.html

Tieto súbory máš (mal by si mať) v nejakej samostatnej zložke, napr. "moja web stranka" (na názve nezáleží, je to na tebe).

A teraz do tejto zložky pridáš novú zložku, kde budú umiestnené obrázky, takže by to mohlo vyzerať takto:

Hlavná zložka:
        - index.html
        - kontakt.html
        obrazky (zložka s obrázkami)
                - email.png
                - avatar.png
Odpovědět 3.12.2017 16:52
Act as if it was Impossible to Fail
Avatar
Odpovídá na wartkor
Neaktivní uživatel:3.12.2017 17:09

Kde máš PSPad je úplně jedno :)

Odpovědět  +1 3.12.2017 17:09
Neaktivní uživatelský účet
Avatar
Ondřej Roztomilý:14.12.2017 21:51

Dobrý den kdyš chci přidat obrázky tak dam dám tohle <img src="obrazky/a­vatar.png" alt="Programátor HoBi" /> ale stejně mi to na webovích stránkách píše Programátor HoBi

 
Odpovědět 14.12.2017 21:51
Avatar
Peter Butora
Člen
Avatar
Peter Butora:15.12.2017 22:21

Ahoj, od vás se to dá tak pochopit :-D :-) jsem happy

Odpovědět 15.12.2017 22:21
Péťa
Avatar
wartkor
Člen
Avatar
wartkor:19.12.2017 18:14

Ahoj dal by se do obrázku skrýt Odkaz ? jako žebych kliknul na obrázek a přesměrovalo mě to na te odkaz ktrý by byl v obrázku

Odpovědět 19.12.2017 18:14
Káždý jednou začal a neuspěl hned na poprvé
Avatar
Jan Lupčík
Šéfredaktor
Avatar
Odpovídá na wartkor
Jan Lupčík:20.12.2017 6:51

Myslíš takhle?

<a href="http://itnetwork.cz"><img src="obrazek.png" alt="Obrázek" /></a>
Odpovědět  +1 20.12.2017 6:51
Cokoliv a kdokoliv může jednou uspět.
Avatar
wartkor
Člen
Avatar
Odpovídá na Jan Lupčík
wartkor:21.12.2017 13:49

Ano děkuji ti :)

Odpovědět 21.12.2017 13:49
Káždý jednou začal a neuspěl hned na poprvé
Avatar
Odpovídá na Ondřej Roztomilý
Rico ThreeDmax:1.1.2018 15:15

bych řekl že ten obrázek musí být na stejném místě(složce) jako soubor index.html. popřípadě zadat správnou cestu k obrázku.

 
Odpovědět 1.1.2018 15:15
Avatar
Jiří Peřina:30.1.2018 21:09

zatím se mně to všechno velmi líbí a doufám,že to s pomocí těchto stránek zvládnu.

Odpovědět 30.1.2018 21:09
Na učení není nikdy pozdě.
Avatar
Jiří Peřina:30.1.2018 21:11

stále je to super.

Odpovědět 30.1.2018 21:11
Na učení není nikdy pozdě.
Avatar
David Kapitančik:13.2.2018 20:44

Vypracoval jsem si stránku podle pokynů a stáhnul jsem si i hotovou stránku a odkaz z indexu na kontakty funguje ale když kliknu "zpět na hlavní stránku" tak odkaz na kontakty vždy zmizí. Co mám udělat?

 
Odpovědět 13.2.2018 20:44
Avatar
Odpovídá na David Kapitančik
David Kapitančik:13.2.2018 20:51

Už jsem to vyřešil, měl jsem špatně uložený soubor :)

 
Odpovědět 13.2.2018 20:51
Avatar
Michalis Zoikas:20.2.2018 20:21

Pecka ! :)

 
Odpovědět 20.2.2018 20:21
Avatar
Michal Žamboch:2.4.2018 21:55

Pěkný tutoriál.

 
Odpovědět 2.4.2018 21:55
Avatar
Filip Polesný:2.6.2018 16:23

Zdravím.
Mám dotaz, jestli je nutné dávat do paragrafů i odkazy? Zde to vidím prvně. Mám na mysli např: <p><img src="obr"></p>.
Jinak tutoriály jsou pěkně udělané.

 
Odpovědět 2.6.2018 16:23
Avatar
Odpovídá na Filip Polesný
Rico ThreeDmax:10.7.2018 22:15

Podle me nemusis.

 
Odpovědět 10.7.2018 22:15
Avatar
Filip Vondricka:19.7.2018 20:18

zdravím, vubec nemam ponětí jak vložit obrazek, muzete nekdo poradit podrobny navod ,diky

 
Odpovědět 19.7.2018 20:18
Avatar
Odpovídá na Filip Vondricka
Andy Scheuchzer:19.7.2018 20:20

Četl sis ten článek?

Odpovědět 19.7.2018 20:20
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
Filip Vondricka:19.7.2018 21:09

ano cetl, lekce 3 cast html

 
Odpovědět 19.7.2018 21:09
Avatar
Odpovídá na Filip Vondricka
Andy Scheuchzer:19.7.2018 22:04

Takže prostě nechápeš, že obrázek si uložíš na disk (nejlépe do složky s html) a v html prostě napíšeš

<img src="cesta_k_obrazku" alt="Obrázek"/>

?

Odpovědět 19.7.2018 22:04
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
Filip Vondricka:19.7.2018 22:14

proste se me neotevre, delam v pspasu, tak jestli to neni tim

 
Odpovědět 19.7.2018 22:14
Avatar
Odpovídá na Filip Vondricka
Andy Scheuchzer:19.7.2018 22:15

Co chceš otevírat? To uvidíš až v prohlížeči.

Odpovědět 19.7.2018 22:15
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
Odpovídá na Andy Scheuchzer
Filip Vondricka:19.7.2018 22:53

V prohlížeči to vypadá takhle,obrázek prostě se nenacte,já už nevim

 
Odpovědět 19.7.2018 22:53
Avatar
Odpovídá na Filip Vondricka
Andy Scheuchzer:20.7.2018 9:33

Tak zkontroluj, jestli odkazuješ na správnou složku, správný obrázek a se správnou příponou.

Odpovědět 20.7.2018 9:33
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
Odpovídá na Filip Vondricka
Jaroslav Patrný:23.7.2018 19:57

Ahoj, podívej se, jestli máš správně kód s obrázkem.

 
Odpovědět 23.7.2018 19:57
Avatar
Jan Barák
Člen
Avatar
Jan Barák:3.10.2018 9:57

Ahoj znějakého záhadného duvodu me to dole píše tučným písmem procházým všemožné možnosti ale pořad na to ne a ne přijít . Je to u te Navigace prejit na kontaktní email. Díky za rady

 
Odpovědět 3.10.2018 9:57
Avatar
Jan Barák
Člen
Avatar
Odpovídá na Jan Barák
Jan Barák:3.10.2018 10:11

Tak už sem na to došel (= jen sem zapoměl dat lomitko za nadpis jsem napsal <h2>kontakt<h2> misto </h2> ani nevite jak velkou mam radost že sem si stím poradil =D

 
Odpovědět 3.10.2018 10:11
Avatar
Niesomtu Hraskova:21.11.2018 22:12

nieje ukonceny strong tag

 
Odpovědět  -1 21.11.2018 22:12
Avatar
Jaroslav Strmiska:19. ledna 22:05

Nevím jak zařídit, aby se mi soubor stáhl a ne otevřel, chci-li stáhnou např. obrázek *.png nebo dokument *.doc, *.xls. Uvedené odkazy pro stažení souboru nebo otevření stránky jsou stejné.

 
Odpovědět 19. ledna 22:05
Avatar
Odpovídá na Jaroslav Strmiska
Michal Šmahel:21. ledna 14:22

Ahoj, mělo by stačit přidat atribut download tagu a (viz w3schools).

Odpovědět 21. ledna 14:22
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Michal Šmahel
Jaroslav Strmiska:22. ledna 11:44

Díky za radu Michale, ale i po doporučené úpravě se obrázek nestáhne, pouze se zobrazí. Slovo download jakoby pspad neznal, není barevně odlišeno. Zde můj odkaz:
stáhnout Joela
Používám Firefox verzi 64.0.2

 
Odpovědět 22. ledna 11:44
Avatar
Odpovídá na Jaroslav Strmiska
Michal Šmahel:22. ledna 12:58

Aha, dobře. Původně jsem ti chtěl napsat rovnou tento postup, ale je složitější, tak mě napadlo prosté přidání atributu do HTML.

Jistě účinnější metodou je využití konfiguračního souboru webového serveru (postup bude pro Apache). Můžeš totiž vynutit stahování souborů. Více rozepsané to mají na CSS Tricks.

Postup je tento:

  • V hlavním adresáři (složce) si vytvoříš soubor .htaccess (v případě Windows se musí jmenovat .htaccess.). Jde o klasický textový soubor vytvořený např. přes zabudovaný Notepad.
  • Do souboru se vloží v potřebném množství toto pravidlo:
AddType application/octet-stream .pripona

Ve tvém případě to bude vypadat nějak takto:

# .htaccess
AddType application/octet-stream .jpg
AddType application/octet-stream .png
# ...

Pokud existuje lepší řešení, budu rád za doplnění.

Odpovědět 22. ledna 12:58
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Michal Šmahel
Jaroslav Strmiska:22. ledna 16:03

Tak toto je pro mne tak trochu jak se říká "vyšší dívčí". Sice jsem v oblasti programování něco stvořil, ale to byly většinou databázové aplikace (Access, VB, C#). O tvorbě webových stránek doposud nevím zhola nic. Konfigurovat webový server Apache je poněkud předčasné i když mým cílem je zvládnout v přijatelné úrovni PHP. Napřed se ale musím prokousat HTML, proto jsem tady. Takže řešení stahování souborů se prozatím odkládá.
Ale nějaké "lepší řešení" jsem přece jenom našel i když je prakticky nanic. Všiml jsem si, že soubory *.zip se stáhnout dají. Přejmenoval jsem tedy soubor Joel.jpg na Joel.jpx a stažení proběhlo. Takže prozatím Michale děkuji za snahu.
P.S.
Soubor Joel.jpg jsem musel ze serveru odstranit. Kdyby se kolega Joel dověděl, že jeho foto pendluje po internetu, tak mě zabije. Náhradou jsem umístil na server toho vašeho Avatara, přejmenovaného na Joel.jpx.

 
Odpovědět 22. ledna 16:03
Avatar
dalcek
Člen
Avatar
dalcek:15. února 19:56

proč se dáva obrázek do odstavce <p> ... </p>

 
Odpovědět 15. února 19:56
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 148 zpráv z 148.