Psst. EU dotace 85 % pro OSVČ a firmy lze nyní čerpat i na e-learning. Více informací
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij halloweenské akce 80% výuky zdarma!
Python týden

Lekce 3 - Obrázky a odkazy v HTML

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.

Dnes si ukážeme přidání obrázků a odkazů na naší vytvořenou webovou stránku.

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

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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. Dnešní kód je jako vždy ke stažení níže.

V následujícím cvičení, Řešené úlohy k 1.-3. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.


 

Stáhnout

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

 

Předchozí článek
Základní HTML tagy
Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
114 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 university Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (5)

 

 

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
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
24.5.2013 23:17
Neaktivní uživatelský účet
Avatar
Honza Bittner
Redaktor
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
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
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
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: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
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
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
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
Redaktor
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
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
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
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 I
Člen
Avatar
Odpovídá na vanek_jiri
Ori I: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 I
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
Super redaktor
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
6.8.2014 17:37
TruckersMP vývojář
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
Super redaktor
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
TruckersMP vývojář
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
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
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
Vi veri universum vivus vici
Avatar
Aleš Lulák
Člen
Avatar
Odpovědět
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
Vi veri universum vivus vici
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
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
Super redaktor
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
4.8.2015 10:23
TruckersMP vývojář
Avatar
 
Odpovědět
4.8.2015 10:24
Avatar
Jan Lupčík
Super redaktor
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
TruckersMP vývojář
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
28.11.2015 17:23
Avatar
Tomáš Maňhal: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
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
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.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
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
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
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
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
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
Super redaktor
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
20.12.2017 6:51
TruckersMP vývojář
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

Člen
Avatar
: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

Člen
Avatar
Odpovídá na
: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
Reaktivní uživatel:19.7.2018 20:20

Četl sis ten článek?

Odpovědět
19.7.2018 20:20
Kdo je připraven, toho zaskočí něco jiného
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
Reaktivní uživatel: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
Kdo je připraven, toho zaskočí něco jiného
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
Reaktivní uživatel:19.7.2018 22:15

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

Odpovědět
19.7.2018 22:15
Kdo je připraven, toho zaskočí něco jiného
Avatar
Odpovídá na Reaktivní uživatel
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
Reaktivní uživatel: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
Kdo je připraven, toho zaskočí něco jiného
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
21.11.2018 22:12
Hľadám si prácu, tak mi smelo napíš mail.
Avatar
Jaroslav Strmiska:19.1.2019 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.1.2019 22:05
Avatar
Odpovídá na Jaroslav Strmiska
Michal Šmahel:21.1.2019 14:22

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

Odpovědět
21.1.2019 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.1.2019 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.1.2019 11:44
Avatar
Odpovídá na Jaroslav Strmiska
Michal Šmahel:22.1.2019 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.1.2019 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.1.2019 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.1.2019 16:03
Avatar
dalcek
Člen
Avatar
dalcek:15.2.2019 19:56

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

 
Odpovědět
15.2.2019 19:56
Avatar
Dominik Němeček:28.5.2019 12:23

Nefunguje mi vložení obrázku, mám to úplně stejně jako v tutoriálu, ale když načtu stránku, tak obrázek se nenačte. Co s tím?

 
Odpovědět
28.5.2019 12:23
Avatar
Odpovídá na Dominik Němeček
Reaktivní uživatel:28.5.2019 19:02

Kód? Struktura složky?

Odpovědět
28.5.2019 19:02
Kdo je připraven, toho zaskočí něco jiného
Avatar
MiroslavP
Člen
Avatar
MiroslavP:19.7.2019 14:21

Diky, baví mne to:-)

 
Odpovědět
19.7.2019 14:21
Avatar
Odpovídá na dalcek
Rico ThreeDmax:19.8.2019 16:13

Obrazek do odstavce proto aby sel na novy radek. Aby odradkoval

 
Odpovědět
19.8.2019 16:13
Avatar
0
Člen
Avatar
0:30.8.2019 21:02

Když tam napíšu něco s diakritikou tak to na webu napíše kosočtverec s otazníkem co mám dělat ?

 
Odpovědět
30.8.2019 21:02
Avatar
Teurom
Člen
Avatar
Teurom:12.11.2019 16:10

ahojte preco sa mi nezobrazi obrazok ? skontroloval som to asi 10 krat a mam tam vsetko

 
Odpovědět
12.11.2019 16:10
Avatar
Odpovídá na Teurom
Reaktivní uživatel:12.11.2019 17:13

Nezobrazí se ti, protože děláš něco špatně.

Znáš tu historku „Nejede mi auto, co mám dělat?“?

Odpovědět
12.11.2019 17:13
Kdo je připraven, toho zaskočí něco jiného
Avatar
Teurom
Člen
Avatar
Odpovídá na Reaktivní uživatel
Teurom:13.11.2019 15:10

potom som to urobil nvm preco ale ja to mam v zlozke a ked som to dal do dalsej v tej istej zlozke tak mi to uz neslo ale ked som to nehlal len v tej jednej tak to slo :D

 
Odpovědět
13.11.2019 15:10
Avatar
Odpovídá na 0
Jan Jedlička:13.11.2019 15:58

Ahoj nastav si kodovani UTF-8

 
Odpovědět
13.11.2019 15:58
Avatar
Jiří Volf
Člen
Avatar
Jiří Volf:13.11.2019 21:15

Ahoj, prosím o radu. Ať skouším co chci nejde mi nahrát ten avatar do prohlížeče, dopracoval sem se akorát k tomu :

mojePrvniWebov­ka.html:1 Not allowed to load local resource:
file:///C:/fot­ky/fotky%20pro%20w­eby/avatar.png

Nebo tomu:

avatar.PNG:1 Failed to load resource: the server responded with a status of 403 (Forbidden)

Tak něak tuším v čem je problém ale nevím jak povolit nahrání obrázku do prohlížeče.
Předem děkuji za rady.

Editováno 13.11.2019 21:17
 
Odpovědět
13.11.2019 21:15
Avatar
Jiří Volf
Člen
Avatar
Jiří Volf:13.11.2019 22:18

Ahoj nevím jestli to je záměr ale v řádku je neukončený ... .....

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

Editováno 13.11.2019 22:19
 
Odpovědět
13.11.2019 22:18
Avatar
Jiří Volf
Člen
Avatar
Jiří Volf:13.11.2019 22:21
 
Odpovědět
13.11.2019 22:21
Avatar
Tomáš Majer:29.11.2019 21:41

Môžem sa spýtať? To <p> musí byť na každom riadku alebo to môžem mať celé v tom <p>

 
Odpovědět
29.11.2019 21:41
Avatar
Odpovídá na Tomáš Majer
Jakub Podskalský:30.11.2019 9:28

Můžeš to mít samozřejmě v jednom, ale to bys pak měl vše vedle sebe. P tag je blokový, to znamená, že zabírá celou šířku. Takže další elementy jsou na novém řádku + nějaké odsazení, které tvoří padding a margin (ty jsou defaultně nastavené ke každému tagu jinak prohlížečem, ty je můžeš přepsat)

 
Odpovědět
30.11.2019 9:28
Avatar
Blanka
Člen
Avatar
Odpovídá na 0
Blanka:19.12.2019 13:55

Použij kódování UTF-8.

 
Odpovědět
19.12.2019 13:55
Avatar
Odpovídá na Teurom
Lukáš Kouřil:6. ledna 12:46

zkus se kouknout na formát obrázku

 
Odpovědět
6. ledna 12:46
Avatar
Marek Kočí
Redaktor
Avatar
Marek Kočí:7. ledna 12:57

použij relativni odkaz pokud mas nekde stranku třeba index. html a obrazek ve stejnem adresáři pak takto <img src="obr.jpg" /> pokud je obráyek v podadresáři obrazky tak <img src="obrazky/o­br.jpg" /> dále není dobré u webových adresářů používat mezery ;)

 
Odpovědět
7. ledna 12:57
Avatar
kuba
Člen
Avatar
kuba:26. ledna 17:15

Neví někdo jak udělat text na který když kliknu tak se mi stáhne soubor?

 
Odpovědět
26. ledna 17:15
Avatar
Milan Turyna
Redaktor
Avatar
Odpovídá na kuba
Milan Turyna:26. ledna 19:05
<a href="odkaz_na_soubor" download>
blabla
</a>
 
Odpovědět
26. ledna 19:05
Avatar
kuba
Člen
Avatar
 
Odpovědět
26. ledna 19:48
Avatar
Ladislav Guldan:22. března 14:10

Ahoj,neviem prejsť zo stránky na stránku.Odkaz mám dobrý,tlačidlo vrátiť sa späť je funkčné,otvorí novú kartu ale vypíše : Súbor sa nenašiel prehliadač nedokáže nájsť súbor....

 
Odpovědět
22. března 14:10
Avatar
Odpovídá na Ladislav Guldan
Ladislav Guldan:22. března 14:52

Už je to ok (názov súboru.html)

 
Odpovědět
22. března 14:52
Avatar
Milan Písecký:18. května 15:38

Lze vložit obrázek, který není uložen v pracovním adresáři HTML, ale v nějakém jiném. Nebo třeba i na jiném disku v tom samém počítači, aby ho nebylo nutné přetahovat do pracovního HTML? Mám samostatný disk, kde dělám foto.
Díky

 
Odpovědět
18. května 15:38
Avatar
Samuel Hél
Tým ITnetwork
Avatar
Odpovídá na Milan Písecký
Samuel Hél:7. června 17:00

Ano, jen do atributu src zadej celou cestu i s jednotkou ale přidej tam i file. Např. disk D:

<img src="file://D:/foto/fotka1.jpg" alt="Fotka s přírodou" />
Editováno 7. června 17:03
 
Odpovědět
7. června 17:00
Avatar
Michael Last
Člen
Avatar
Michael Last:28. července 11:18

Nevím co se mi stalo ale mezery mezi řádky pod sebou mám velké a text pak vypadá prapodivně .Nemohl by mi někdo napsat jak to spravit ?Děkuji všem.

Odpovědět
28. července 11:18
"Každý máme svůj svět,mnoho lidí mnoho světů.Fascinující přiroda i dobří přátelé.Užasné je to když přijdete domu...
Avatar
Lukáš Navrátil:30. července 3:51

Děkuji :)

 
Odpovědět
30. července 3:51
Avatar
Kateřina Vonkomerová:3. srpna 17:02

Já tam ten obrázek prostě nenahraju :D

 
Odpovědět
3. srpna 17:02
Avatar
Tomáš Gregorovič:7. srpna 10:06

Chtěl bych k článku doplnit, že také záleží na názvu obrázku.
Název obrázku by měl odpovídat tomu, co se daném obrázku nachází. Například: macbook-pro-2020.jpg
Většina webů má pojmenované obrázky nějak takto "imgpdgh45548.jpg", což je špatně, protože je to nepřehledné, jak pro provozovatele webu, tak i vyhledávače. Vyhledávačům to může pomoct v lepším rozpoznání obrázku.

Pokud by někoho zajímalo, jak optimalizovat obrázky pro vyhledávače, tak doporučuji si přečíst tento článek

 
Odpovědět
7. srpna 10:06
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 177 zpráv z 177.