HTML

Z MiS
(Rozdíly mezi verzemi)
Přejít na: navigace, hledání
(→Struktura stránky: Doplněny informace o struktuře HTML stránky.)
(→Tabulky a seznamy: Doplněny tabulky a seznamy podrobněji.)
Řádka 38: Řádka 38:
  
 
=== Tabulky a seznamy ===
 
=== Tabulky a seznamy ===
−
* table, tr, td, th
+
; Tabulky:
−
* ul, ol, li
+
* <code>table</code>... ohraničení celé tabulky,  
 +
* <code>tr</code>... řádek tabulky
 +
* <code>td</code>... buňka tabulky v řádku.
 +
* <code>th</code>... buňka tabulky, která je součástí hlavičky tabulky (bude zvýrazněná).
 +
 
 +
<div class="Priklad">
 +
&lt;table>
 +
&lt;tr>&lt;th>Id&lt;/th>&lt;th>Jméno&lt;/th>&lt;th>Počet bodů&lt;/th>&lt;/tr>
 +
&lt;tr>&lt;th>1&lt;/th>&lt;td>František Novák&lt;/td>&lt;td>15&lt;/td>&lt;/tr>
 +
&lt;table>
 +
</div>
 +
 
 +
; Seznamy s odrážkami/číslované
 +
* <code>ul</code> resp. <code>ol</code>... ohraničení seznamu (začátek a konec)
 +
* <code>li</code>... jedna položka seznamu, zobrazí se buď s odrážkou (uvnitř elementu <code>ul</code>) nebo číslem (uvnitř elementu <code>ol</code>).
 +
 
 +
<div class="Priklad">
 +
&lt;ul>
 +
&lt;li>Úkol první: zapište text&lt;/li>
 +
&lt;li>Úkol druhý:
 +
    &lt;ol>
 +
    &lt;li>Přeložte program&lt;/li>
 +
    &lt;li>Spusťte ho!&lt;/li>
 +
    &lt;ol>
 +
&lt;/li>
 +
&lt;ul>
 +
</div>
  
 
=== Struktura stránky ===
 
=== Struktura stránky ===

Verze z 21. 10. 2013, 15:11


Obsah

HTML

Podrobnější materiály: http://www.tvorba-webu.cz/html/

Princip jazyka HTML

Základní elementy

Příklad: 

<h1>Jižní Amerika</h1>
<p>Jižní Amerika je zajímavý 
    <a href="http://cs.wikipedia.org/wiki/Kontinent">kontinent</a>.
</p>
<p>
  <img src="amerika.jpg" alt="Jižní Amerika" />
</p>

Tabulky a seznamy

Tabulky
<table>
<tr><th>Id</th><th>Jméno</th><th>Počet bodů</th></tr>
<tr><th>1</th><td>František Novák</td><td>15</td></tr>
<table>
Seznamy s odrážkami/číslované 
<ul>
<li>Úkol první: zapište text</li>
<li>Úkol druhý:
   <ol>
   <li>Přeložte program</li>
   <li>Spusťte ho!</li>
   <ol>
</li>
<ul>

Struktura stránky 

<html>
 <head>
    <meta charset="windows-1250">
    <meta name="description" content="Web nejlepší cestovní kanceláře v ČR">
    <title>Cestovní kancelář Leť-tam!</title>
    <link rel="stylesheet" type="text/css" href="styly.css" />
 </head>
 <body>
 
 ... Zobrazitelný text stránky...
 
 </body>
</html>

Kaskádové styly (CSS)

Podrobnější materiály: http://www.tvorba-webu.cz/css/

Soubor se styly

Do hlavičky HTML souboru (element <head>) musíme doplnit odkaz na soubor se styly: 

<link rel="stylesheet" type="text/css" href="nazev_souboru.css" />

Základny formátování

Stylu můžeme nastavovat různé vlastnosti. Jejich výčet najdete na webu, nejběžnější uvádíme:

Příklad: 

h2 {
  color: blue;
  background-color: lightblue;
  border: solid 2px blue;
  text-align: center;
}

Vlastní styly

Označení textu, na který se aplikuje styl (v HTML)
Popis stylu (v CSS)

HTML soubor: index.html 

<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>

CSS soubor: styl.css 

.OdbornyTermin {
   font-style: italic;
   color: lime;
}

Výsledek (v prohlížeči):

Text, ve kterém je odborný termín. A druhý pojem je také odborný termín.

Další zdroje

Rozdělení stránky na oddíly

Vlastnosti v kaskádových stylech

Vlastnosti přiřazujeme speciálním stylům, uvozeným znakem #.

Na tyto styly se odkazujeme pomocí atributu id.

HTML soubor: index.html 

<div id="Menu">
  Položka 1

  Položka 2
</div>
<p>Text text text...</p>

CSS soubor: styl.css 

#Menu {
   float: left;
   width: 100px;
   background-color: yellow;
}

Výsledek (v prohlížeči):

Položka 1
Položka 2
Text text text...


Publikování stránek

Praktické

Užitečné nástroje
Časté chyby

Cvičení

  1. Cvičení HTML
  2. Cvičení HTML 2
  3. Cvičení HTML 3
  4. Cvičení HTML 4
  5. Cvičení HTML 5

Podrobnější zdroje

Citováno z „http://mis.e-mis.cz/index.php/HTML“
Osobní nástroje
Jmenné prostory
Varianty
Akce
Výuka
Navigace
Nástroje