HTML - Historie editací

Spravce: /* Související stránky */ Dodány související stránky.

2017-03-29T10:31:31Z

Související stránky: Dodány související stránky.

← Starší verze		Verze z 29. 3. 2017, 10:31
Řádka 159:		Řádka 159:

	== Související stránky ==		== Související stránky ==
−	* [[CSS]]	+	* [[CSS]], [[Testování webových stránek]], [[Publikování stránky]]
−		+

	== Podrobnější zdroje ==		== Podrobnější zdroje ==
	* GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <[http://www.tvorba-webu.cz http://www.tvorba-webu.cz]>.		* GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <[http://www.tvorba-webu.cz http://www.tvorba-webu.cz]>.

Spravce: Zrušena kategorie Category:Internet.

2017-01-30T10:29:35Z

Zrušena kategorie Category:Internet.

← Starší verze		Verze z 30. 1. 2017, 10:29
Řádka 1:		Řádka 1:
−	[[Category:VSE]][[Category:Informatika~~]][[Category:Internet~~]][[Category:CRI]][[Category:HTML]]	+	[[Category:VSE]][[Category:Informatika]][[Category:CRI]][[Category:HTML]]

	== Co je to HTML? ==		== Co je to HTML? ==

Spravce: Přidány související stránky

2015-01-29T07:30:52Z

Přidány související stránky

← Starší verze		Verze z 29. 1. 2015, 07:30
Řádka 156:		Řádka 156:
	# [[Cvičení HTML 4]]		# [[Cvičení HTML 4]]
	# [[Cvičení HTML 5]]		# [[Cvičení HTML 5]]
		+
		+
		+	== Související stránky ==
		+	* [[CSS]]
		+

	== Podrobnější zdroje ==		== Podrobnější zdroje ==
	* GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <[http://www.tvorba-webu.cz http://www.tvorba-webu.cz]>.		* GRIMMICH, Šimon. Tvorba webu [online]. c2003, c2008 [cit. 2010-10-06]. Dostupné z WWW: <[http://www.tvorba-webu.cz http://www.tvorba-webu.cz]>.

Spravce: Osamostatněny kaskádové styly CSS

2015-01-07T11:36:00Z

Osamostatněny kaskádové styly CSS

← Starší verze		Verze z 7. 1. 2015, 11:36
Řádka 131:		Řádka 131:
	</div>		</div>

−	== ~~Kaskádové styly (CSS)~~ ==	+	== Vzhled dokumentu ==
		+	Všimněte si, že stále popisujeme jen strukturu dokumentu (co je nadpis, co je tabulka, odkaz,...), nikoli vzhled (jak má nadpis vypadat?).

−	~~Podrobnější materiály: http://www.tvorba-webu.cz/css/~~	+	Grafický vzhled popisujeme pomocí [[CSS\| kaskádových stylů]]!

−	~~=== Soubor se styly ===~~
−
−	~~Do hlavičky HTML souboru (element <code><head></code>) musíme doplnit odkaz na soubor se styly:~~
−
−	~~<code><link rel="stylesheet" type="text/css" href="''nazev_souboru''.css" /></code>~~
−
−	~~=== Základny formátování ===~~
−	~~Stylu můžeme nastavovat různé vlastnosti. Jejich výčet najdete na webu, nejběžnější uvádíme:~~
−	* <code>color</code>: barva textu
−	* <code>background-color</code>: barva pozadí
−	* <code>margin</code>, <code>padding</code>: vlastnosti okrajů odstavce, obrázku atd.
−	* <code>font-weight</code>: tučné písmo
−	* <code>font-style</code>: kurzíva
−	* <code>text-align</code>: zarovnání textu (na střed, do bloku, vlevo, vpravo)
−	* <code>text-indent</code>: odsazení prvního řádku odstavce
−
−	~~<div class="Priklad">~~
−	~~Příklad:~~
−	~~h2 {~~
−	~~color: blue;~~
−	~~background-color: lightblue;~~
−	~~border: solid 2px blue;~~
−	~~text-align: center;~~
−	}
−	~~</div>~~
−
−	~~=== Vlastní styly ===~~
−	~~Pomocí kaskádových stylů můžeme přiřadit vzhled existujícímu elementu HTML (třeba všem nadpisům), ale můžeme také vytvořit vlastní styl a ten použít kdekoli ve stránce.~~
−	~~; Vytvoření vlastního stylu (v CSS)~~
−	* Stejně jako přiřazení vzhledu existujícímu elementu, ale místo názvu elementu uvedeme název stylu.
−	* Název vlastního stylu uvozujeme tečkou.
−	* Název nemůže obsahovat mezeru!
−
−	~~<div class="Priklad">~~
−	~~Soubor se styly: styly.css~~
−	~~h1 {~~
−	~~color: blue;~~
−	}
−	~~'''.'''OdbornyTermin {~~
−	~~font-style: italic;~~
−	~~color: blue;~~
−	}
−	~~</div>~~
−
−	~~; Použití stylu na vybraný text (v HTML)~~
−	* Text ohraničíme značkami <code>span</code> nebo <code>div</code>:
−	** <code>div</code> vytvoří samostatný odstavec z označeného textu
−	** <code>span</code> pouze aplikuje styl na označený text.
−	* V otvírací značce doplníme atribut <code>class</code> s název stylu jako hodnotou.
−
−	~~<div class="Priklad">~~
−	~~HTML soubor: <tt>index.html</tt>~~
−	~~<h1>Obyčejný nadpis</h1>~~
−	~~<p>~~
−	~~Text, ve kterém je <span class="OdbornyTermin">odborný~~
−	~~termín</span>.~~
−	~~A druhý <span class="OdbornyTermin">pojem</span> je také~~
−	~~odborný termín.~~
−	~~</p>~~
−	~~</div>~~
−
−	~~; Výsledek:~~
−	~~<div class="Priklad">~~
−	~~Výsledek (v prohlížeči):~~
−	~~<div style="color:blue; text-size: bigger; font-weight: bold">Obyčejný nadpis</div>~~
−	~~Text, ve kterém je <span style="font-style: italic; color: blue">odborný termín</span>. A druhý <span style="font-style: italic; color: blue">pojem</span> je také odborný termín.~~
−
−	~~</div>~~
−
−	~~=== Snazší popis více stylů ===~~
−	~~Pokud je více stylů podobných, můžeme jejich popis kombinovat.~~
−	~~; Vnoření elementů~~
−	* Můžeme říci, že se vlastnosti uplatní pouze pokud je element vnořen v jiném elementu.
−	* Zapíšeme to tak, že napíšeme nejprve název „obalujícího“ elementu a pak název vnořeného elementu. Styl se uplatní na vnořený element.
−	~~<div class="Priklad">~~
−	~~V následujícím případě se velikost písma uplatní na nadpis pouze pokud je v buňce tabulky:~~
−	~~td h1 {~~
−	~~font-size: bigger;~~
−	}
−	~~</div>~~
−	~~; Společný vzhled~~
−	* Můžeme nastavit vlastnosti více stylům zároveň.
−	* Zapíšeme to tak, že názvy stylů oddělíme čárkou.
−	~~<div class="Priklad">~~
−	~~V následujícím případě se ohraničení uplatní na vlastní styl <tt>.Poznamka</tt> i na elementy <tt>table</tt>:~~
−	~~.Poznamka, table {~~
−	~~border: 1px blue;~~
−	}
−	~~</div>~~
−	* Následně můžeme ještě popis stylů doplňovat.
−	~~<div class="Priklad">~~
−	~~V následujícím případě se barva nastaví nadpisům úrovně 1 i 2, ale velikost textu jen na nadpisy úrovně 1:~~
−	~~h1, h2 {~~
−	~~color: indigo;~~
−	}
−	~~h1 {~~
−	~~font-size: bigger;~~
−	}
−	~~</div>~~
−
−
−	~~=== Další zdroje ===~~
−	~~; Seznam vlastností CSS:~~
−	* [http://www.jakpsatweb.cz/css/vlastnosti.html Jak psát web.cz → Seznam CSS vlastností]
−	~~; Učebnice:~~
−	* [http://www.tvorba-webu.cz/css/ Tvorba-webu.cz > CSS]
−	* [http://www.w3schools.com/css/default.asp W3Schools.com > CSS]
−	~~; Webové pomůcky — Somacon.com:~~
−	* [http://www.somacon.com/p142.php Barvy na Internetu]
−	* [http://www.somacon.com/p141.php Průvodce styly tabulek]
−
−	~~== Rozdělení stránky na oddíly ==~~
−
−	~~Vlastnosti v kaskádových stylech~~
−	* <code>float</code>: plovoucí objekt: vlevo, vpravo, na středu
−	* <code>width</code>: šířka bloku
−	* <code>height</code>: výška bloku
−
−	~~Vlastnosti přiřazujeme speciálním stylům, uvozeným znakem <code>#</code>.~~
−
−	~~Na tyto styly se odkazujeme pomocí atributu <code>id</code>.~~
−
−	~~<div class="Priklad">~~
−	~~HTML soubor: <tt>index.html</tt>~~
−	~~<div id="Menu">~~
−	~~Položka 1<br />~~
−	~~Položka 2~~
−	~~</div>~~
−	~~<p>Text text text...</p>~~
−	~~CSS soubor: <tt>styl.css</tt>~~
−	~~#Menu {~~
−	~~float: left;~~
−	~~width: 100px;~~
−	~~background-color: yellow;~~
−	}
−	~~Výsledek (v prohlížeči):~~
−
−	~~<div style="float: left; width: 100px; background-color: yellow;">Položka 1<br />Položka 2</div>Text text text...<br /><br /><br />~~
−
−	~~</div>~~

	== Testování a publikování stránek ==		== Testování a publikování stránek ==

Spravce: /* Další zdroje */ Přidána kombinace více stylů

2015-01-06T14:33:12Z

Další zdroje: Přidána kombinace více stylů

← Starší verze		Verze z 6. 1. 2015, 14:33
Řádka 203:		Řádka 203:

	</div>		</div>
		+
		+	=== Snazší popis více stylů ===
		+	Pokud je více stylů podobných, můžeme jejich popis kombinovat.
		+	; Vnoření elementů
		+	* Můžeme říci, že se vlastnosti uplatní pouze pokud je element vnořen v jiném elementu.
		+	* Zapíšeme to tak, že napíšeme nejprve název „obalujícího“ elementu a pak název vnořeného elementu. Styl se uplatní na vnořený element.
		+	<div class="Priklad">
		+	V následujícím případě se velikost písma uplatní na nadpis pouze pokud je v buňce tabulky:
		+	td h1 {
		+	font-size: bigger;
		+	}
		+	</div>
		+	; Společný vzhled
		+	* Můžeme nastavit vlastnosti více stylům zároveň.
		+	* Zapíšeme to tak, že názvy stylů oddělíme čárkou.
		+	<div class="Priklad">
		+	V následujícím případě se ohraničení uplatní na vlastní styl <tt>.Poznamka</tt> i na elementy <tt>table</tt>:
		+	.Poznamka, table {
		+	border: 1px blue;
		+	}
		+	</div>
		+	* Následně můžeme ještě popis stylů doplňovat.
		+	<div class="Priklad">
		+	V následujícím případě se barva nastaví nadpisům úrovně 1 i 2, ale velikost textu jen na nadpisy úrovně 1:
		+	h1, h2 {
		+	color: indigo;
		+	}
		+	h1 {
		+	font-size: bigger;
		+	}
		+	</div>
		+

	=== Další zdroje ===		=== Další zdroje ===

Spravce: /* Publikování a testování stránek */ Oprava pořadí, podrobnější vysvětlení.

2015-01-06T14:17:04Z

Publikování a testování stránek: Oprava pořadí, podrobnější vysvětlení.

← Starší verze		Verze z 6. 1. 2015, 14:17
Řádka 244:		Řádka 244:
	</div>		</div>

−	== ~~Publikování~~ a ~~testování~~ stránek ==	+	== Testování a publikování stránek ==
−	* [[~~Publikování stránky~~]]	+	* [[Testování webových stránek]] (při vývoji stránky)
−	* [[~~Testování webových stránek~~]]	+	* [[Publikování stránky\| Publikování hotové stránky]]

	== Praktické ==		== Praktické ==

Spravce: /* Vlastní styly */ Opravy

2015-01-06T13:47:22Z

Vlastní styly: Opravy

← Starší verze		Verze z 6. 1. 2015, 13:47
Řádka 175:		Řádka 175:
	'''.'''OdbornyTermin {		'''.'''OdbornyTermin {
	font-style: italic;		font-style: italic;
−	color: ~~lime~~;	+	color: blue;
	}		}
	</div>		</div>
Řádka 199:		Řádka 199:
	<div class="Priklad">		<div class="Priklad">
	Výsledek (v prohlížeči):		Výsledek (v prohlížeči):
−		+	<div style="color:blue; text-size: bigger; font-weight: bold">Obyčejný nadpis</div>
	Text, ve kterém je <span style="font-style: italic; color: blue">odborný termín</span>. A druhý <span style="font-style: italic; color: blue">pojem</span> je také odborný termín.		Text, ve kterém je <span style="font-style: italic; color: blue">odborný termín</span>. A druhý <span style="font-style: italic; color: blue">pojem</span> je také odborný termín.

Spravce: /* Vlastní styly */ Přidána informace, že v názvu stylu nemůže být mezera.

2015-01-06T13:43:01Z

Vlastní styly: Přidána informace, že v názvu stylu nemůže být mezera.

← Starší verze		Verze z 6. 1. 2015, 13:43
Řádka 165:		Řádka 165:
	; Vytvoření vlastního stylu (v CSS)		; Vytvoření vlastního stylu (v CSS)
	* Stejně jako přiřazení vzhledu existujícímu elementu, ale místo názvu elementu uvedeme název stylu.		* Stejně jako přiřazení vzhledu existujícímu elementu, ale místo názvu elementu uvedeme název stylu.
−	* Název vlastního ~~styl~~ uvozujeme tečkou.	+	* Název vlastního stylu uvozujeme tečkou.
		+	* Název nemůže obsahovat mezeru!

	<div class="Priklad">		<div class="Priklad">
	Soubor se styly: styly.css		Soubor se styly: styly.css
		+	h1 {
		+	color: blue;
		+	}
	'''.'''OdbornyTermin {		'''.'''OdbornyTermin {
	font-style: italic;		font-style: italic;
Řádka 183:		Řádka 187:
	<div class="Priklad">		<div class="Priklad">
	HTML soubor: <tt>index.html</tt>		HTML soubor: <tt>index.html</tt>
		+	<h1>Obyčejný nadpis</h1>
	<p>		<p>
	Text, ve kterém je <span class="OdbornyTermin">odborný		Text, ve kterém je <span class="OdbornyTermin">odborný

Spravce: /* Vlastní styly */ Oprava chybějícího lomítka

2015-01-06T13:34:47Z

Vlastní styly: Oprava chybějícího lomítka

← Starší verze		Verze z 6. 1. 2015, 13:34
Řádka 184:		Řádka 184:
	HTML soubor: <tt>index.html</tt>		HTML soubor: <tt>index.html</tt>
	<p>		<p>
−	Text, ve kterém je <span class="OdbornyTermin">odborný termín<span>.	+	Text, ve kterém je <span class="OdbornyTermin">odborný
−	A druhý <span class="OdbornyTermin">pojem</span> je také odborný termín.	+	termín</span>.
		+	A druhý <span class="OdbornyTermin">pojem</span> je také
		+	odborný termín.
	</p>		</p>
	</div>		</div>

Spravce: /* Vlastní styly */ Zpřehlednění.

2015-01-06T13:25:32Z

Vlastní styly: Zpřehlednění.

← Starší verze		Verze z 6. 1. 2015, 13:25
Řádka 162:		Řádka 162:

	=== Vlastní styly ===		=== Vlastní styly ===
−	; ~~Označení textu~~, ~~na který se aplikuje~~ styl (v HTML)	+	Pomocí kaskádových stylů můžeme přiřadit vzhled existujícímu elementu HTML (třeba všem nadpisům), ale můžeme také vytvořit vlastní styl a ten použít kdekoli ve stránce.
−	* ~~Elementy:~~ <code>span</code> a <code>div</code>	+	; Vytvoření vlastního stylu (v CSS)
−	* V otvírací značce doplníme atribut <code>class</code> s ~~odkazem na~~ název stylu.	+	* Stejně jako přiřazení vzhledu existujícímu elementu, ale místo názvu elementu uvedeme název stylu.
−	~~; Popis stylu (v CSS)~~	+	* Název vlastního styl uvozujeme tečkou.
−	* vlastní styl uvozujeme tečkou.	+
		+	<div class="Priklad">
		+	Soubor se styly: styly.css
		+	'''.'''OdbornyTermin {
		+	font-style: italic;
		+	color: lime;
		+	}
		+	</div>
		+
		+	; Použití stylu na vybraný text (v HTML)
		+	* Text ohraničíme značkami <code>span</code> nebo <code>div</code>:
		+	** <code>div</code> vytvoří samostatný odstavec z označeného textu
		+	** <code>span</code> pouze aplikuje styl na označený text.
		+	* V otvírací značce doplníme atribut <code>class</code> s název stylu jako hodnotou.

	<div class="Priklad">		<div class="Priklad">
Řádka 174:		Řádka 187:
	A druhý <span class="OdbornyTermin">pojem</span> je také odborný termín.		A druhý <span class="OdbornyTermin">pojem</span> je také odborný termín.
	</p>		</p>
−	~~CSS soubor: <tt>styl.css~~</tt>	+	</div>
−	~~.OdbornyTermin {~~	+
−	~~font-style: italic~~;	+	; Výsledek:
−	~~color~~: ~~lime;~~	+	<div class="Priklad">
−	}	+
	Výsledek (v prohlížeči):		Výsledek (v prohlížeči):