Proč potřebujeme HTML

HTML je HyperText Markup Language. Zní to jako něco z vědeckofantastického filmu, že? Ale je to jednodušší, než si myslíme!

• HyperText: Představme si, že čteme knihu, a najednou se objeví kouzelné slovo. Když na něj klikneme, přeneseme se na jinou stránku v té samé knize, nebo dokonce na úplně jinou knihu! To jsou odkazy. HTML nám umožňuje dělat tyto "kouzelné" odkazy mezi různými stránkami na internetu. Díky tomu můžeme kliknout na obrázek a dostat se na jinou stránku, nebo kliknout na text a přeskočit na jinou část stejné stránky.
• Markup Language (Značkovací jazyk): To znamená, že nepíšeme jen obyčejný text. Používáme speciální "značky" (říkáme jim tagy), které obklopují náš text a říkají prohlížeči, co je to za část textu. Například, značka řekne prohlížeči: "Hele, to, co je uvnitř, je nadpis!"

HTML, CSS a JavaScript: Tři kamarádi webu

Představme si webovou stránku jako dům, který si chceme postavit. Potřebujeme tři hlavní věci:

• 🏡 HTML: Kostra domu (struktura)

  HTML je jako kostra domu. Bez kostry by to nebyl dům, ale jen hromada cihel a dřeva. HTML tvoří základ stránky – říká, kde bude nadpis, kde odstavec, kde obrázek, kde tlačítko. Dává stránce smysl a řád.

  <!-- HTML kód -->
  <h1>Můj Dům</h1>
  <p>Tohle je obývák.</p>
  

• 🎨 CSS: Barvy a výzdoba (vzhled)

  Když už máme kostru (HTML), chceme, aby dům vypadal hezky, že? K tomu slouží CSS. CSS je jako barvy, tapety, nábytek a závěsy v domě. Říká HTML prvkům, jak mají vypadat – jakou mají mít barvu, jak velké mají být, kde se mají na stránce objevit.

  /* CSS kód */
  h1 {
      color: blue; /* Nadpis bude modrý */
  }
  p {
      font-size: 18px; /* Odstavec bude mít větší písmo */
  }
  

• 🧠 JavaScript: Chytré funkce (interaktivita)

  A co když chceme, aby se v domě něco hýbalo nebo rozsvicovalo? K tomu je JavaScript! JavaScript je jako elektřina, vodovod a chytré spotřebiče v domě. Díky němu se stránka může hýbat, měnit se, reagovat na klikání myši nebo zadávání textu do formulářů.

  // JavaScript kód
  document.getElementById("mojeTlacitko").onclick = function() {
      alert("Dobrý den! Klikli jsme na tlačítko!");
  };