3 HTML = Hypertext markup language

Nacházíš se zde: rozcestník kroužku → 1. Úvodní lekce → 1. lekce - Teorie klient a server → 2. lekce - Úvod do vývoje webových aplikací → 3. lekce - XHTML (XHTML tahák)

3.1 Opakování

3.1.1 Opakování z minula.

3.1.2 Tagy (=značky), atributy

Každý prvek je ve webové stránce reprezentován pomocí tzn. tagu. Tag se značí pomocí ostrých šipek < a > (píšeme je pomocí pravého ALTu a kláves čárka , a tečka .). Každý tag má název, ten je uveden hned za otevírací ostrou šipkou <. Pokud má tag obsah, musí mít dvě značky, otevírací a zavírací (např. <p>text</p>). Pokud ovšem tag obsah nemá, není nutné zavírací část uvádět (např. <meta ... />).

Každý tag může mít určité vlastnosti, ty se zapisují pomocí tzn. atributů, vždy mezi ostré šipky první (otvírací) značky tagu. Atribut (vlastnost) se zapisuje ve tvaru <znacka vlastnost="hodnota" />, například tedy <meta name="author" content="Tomas Vitek; http://tomik.jmx.cz" />. Atributů může být v tagu více.

3.1.3 Zdrojový kód

Zdrojový kód je předpis, pomocí kterého prohlížeči říkáme jak a co má uživateli zobrazit a ukázat.U každé stránky (každá jej má) si jej můžeme zobrazit pomocí kliknutí pravým tlačítkme myši mimo text a kliknutím na položku Zobrazit zdrojový kód v menu. My se zde budeme učit (a učíme) tento zdrojový kód psát. K prasí tohoto kódu používáme program PSPadu? (http://www.pspad.com).

3.1.3 Co vidím po založení nového souboru v PSPadu?

3.2 HTML a XHTML - co to je, a včem je rozdíl?

3.2.1 HTML

3.2.2 XHTML

3.3 Jak se pracuje s textem?

3.4 Seznamy

3.4.1 Příklad seznamu číslovaného

Tento kód:

    <ol>
        <li>Párek</li>
        <li>Rohlík</li>
        <li>Kečup</li>
    </ol>

se zobrazí takto:

  1. Párek
  2. Rohlík
  3. Kečup

3.4.1 Příklad seznamu odrážkovéhoho

Tento kód:

    <ul>
        <li>Pizza</li>
        <li>Coca Cola</li>
        <li>Spánek</li>
    </ul>

se zobrazí takto:

3.5 Tabulky

Jednotlivé buňky se vypisují po řádcích, takto:

<table>
  <tr>
    <th>Číslo</th>
    <th>Jméno</th>
    <th>Příjmení</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Pepa</td>
    <td>Novák</td>
  </tr>

  <tr>
    <td>2</td>
    <td>Josefína</td>
    <td>Nováková</td>
  </tr>
</table>

Výše uvedený příklad se zobrazí takto:

Číslo Jméno Příjmení
1 Pepa Novák
2 Josefína Nováková

3.6 XHTML „tahák“

3.6.1 Lorem ipsum? Co to je?

Protože při návrhu stránek je občas potřeba stránku vyplnit „zkušebním textem“, používá se tzn. Lorem ipsum, pokud si chceš nechat vygenerovat tento „výplňový text“, můžeš tak učinit přímo v programu PSPad (v nabídce Nástroje → Lorem Ipsum generátor) nebo na adrese http://www.lipsum.com. Takto vygenerovaný text je tzv. pseudolatinský, tzn. že má podobné vlastnosti jako latinský text, vzhledem k tomu, že i náš text má podobné vlastnosti (tedy jazyk český), používáme tuto výplň také.

3.6.1 Tahák

Jedná se o šablonu pro vytváření XHTML stránek. Vždy, pokud budete vytvářet novou stránku, můžete si tuto otevřít, zkoupírovat si její kód a ten použít jako kostru, a upravit si tento kód potom již podle potřeby.

Otevřít XHTML tahák

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    <!-- autor -->
    <meta name="author" content="Jmeno Prijmeni" />
    <meta name="copyright" content="Copyright 2008 Jmeno Prijmeni" />

    <!-- aby prohlizec vedel, v jakem kodovani stranka je -->
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!-- aby prohlizec vedel, ze stranka je cesky = cs -->
    <meta http-equiv="content-language" content="cs" />

    <title>Titulek stránky</title>

  </head>
  <body>
    <h1>Nadpis první úrovně</h1>
    <h2>Nadpis druhé úrovně</h2>
    <!-- dalsi nadpis v pulce odradkujeme, pomoci <br /> -->
    <h3>Nadpis třetí <br />úrovně</h3>
    <h4>Nadpis čtvrté úrovně</h4>
    <h5>Nadpis páté úrovně</h5>
    <h6>Nadpis šesté úrovně</h6>

    <p>
      Doporučuji si zobrazit zdrojový kód této stránky (tohoto XHTML taháku) a to pomocí
      kliknutím pravého tlačítka myši mimo text a potom zvolením <code>Zobrazit zdrojový
      kód<code>. Ve Firefoxu lze použít klávesovou zkratku <code>CTRL</code> + <code>U</code>.</p>

    <h2>Text</h2>
    <p>
      <strong>Lorem ipsum dolor</strong> sit amet consectetuer Praesent tellus accumsan
      <a href="http://www.jakpsatweb.cz" title="JakPsatWeb.cz">www.jakpsatweb.cz</a> id.
      Ante ac mollis dignissim Pellentesque <em>lacinia Sed nibh <br />tellus sociis dolor</em>.
      Donec <a href="http://www.jakpsatweb.cz" title="JakPsatWeb.cz">www.jakpsatweb.cz</a>
      In libero et wisi id habitasse Nulla ligula ante. Amet <em>tortor elit massa</em>
      laoreet condimentum et Vestibulum nisl <strong>consectetuer</strong> quis. Sapien
      eget id lacus quis Morbi.
    </p>

    <h3>Tabulka</h3>
    <table>
      <tr>
        <th>Číslo</th>
        <th>Jméno</th>
        <th>Příjmení</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Pepa</td>
        <td>Novák</td>
      </tr>

      <tr>
        <td>2</td>
        <td>Josefína</td>
        <td>Nováková</td>
      </tr>
    </table>

    <h3>Obrázek</h3>

    <p><img src="3-html/obrazek.png" alt="Obrázek" title="Obrázek" height="200" width="200" /></p>
    <p>
      Všimněte si, že <strong>obrázek</strong> v s párovém tagu <code>&lt;p&gt;</code>
      (protože by měl být zarovnaný a <em>umístěný v odstavci</em> (anglicky paragraf) - tedy
      tag <code>&lt;p&gt;</code>.
    </p>

    <h3>Seznamy</h3>
    <h4>Číslovaný</h4>
    <ol>
        <li>Párek</li>
        <li>Rohlík</li>
        <li>Kečup</li>
    </ol>

    <p>
      Consequat <a href="http://www.jakpsatweb.cz" title="JakPsatWeb.cz">www.jakpsatweb.cz</a>
      eros mauris condimentum Morbi semper laoreet a parturient dis. Quis Praesent sed quis
      <a href="http://www.jakpsatweb.cz" title="JakPsatWeb.cz">www.jakpsatweb.cz</a> ligula
      justo <em>condimentum</em> leo volutpat <strong>lobortis</strong>. Semper scelerisque
      mi elit eu wisi et congue ligula <strong>tristique</strong> Nam. Vitae enim et et ut
      et <strong>laoreet</strong> tellus sit<br />convallis Nulla. Integer Pellentesque porttitor
      feugiat nec Ut Vestibulum In pede facilisi Vestibulum. In fringilla porta non risus
      cursus pede<br />laoreet justo Vestibulum et. Vestibulum turpis.</p>
    <h4>S odrážkou</h4>
    <ul>
        <li>Pizza</li>
        <li>Coca Cola</li>
        <li>Spánek</li>
    </ul>

    <p>
      Consectetuer velit Quisque Curabitur leo <em>nunc</em> Curabitur leo dictumst Suspendisse
      Nam. Integer Aliquam et odio vel quis a Nam natoque risus Nulla.
      <a href="http://www.jakpsatweb.cz" title="JakPsatWeb.cz">www.jakpsatweb.cz</a> vel sit
      netus ut libero libero nibh at Pellentesque nibh. Eu massa fames arcu <strong>Nunc et
      ligula</strong> a augue a amet. <em>Feugiat</em> sem <a href="http://www.jakpsatweb.cz"
      title="JakPsatWeb.cz">www.jakpsatweb.cz</a> et consequat mollis congue vitae laoreet
      turpis tellus.
    </p>

    <!-- sem dame vodorovnou caru -->
    <hr />

    <p>
      Feugiat ac Curabitur <a href="http://www.jakpsatweb.cz" title="JakPsatWeb.cz">
      www.jakpsatweb.cz</a> pretium nec Proin nulla sed Maecenas Nam. Orci condimentum et
      id et Donec dui Quisque quis id ac. <a href="http://www.jakpsatweb.cz" title="JakPsatWeb.cz">
      www.jakpsatweb.cz</a> et libero elit et metus <em>vitae justo</em> adipiscing ridiculus
      tempor. Felis Sed aliquet nunc <strong>tempus libero</strong> at nulla platea adipiscing
      <strong>convallis</strong>. <a href="http://www.jakpsatweb.cz" title="JakPsatWeb.cz">
      www.jakpsatweb.cz</a> at pretium volutpat consequat wisi est Curabitur rhoncus.
    </p>
  </body>
</html>

Máš chuť na další lekci?