Skripta OVI

Html – základy

HTML – HyperText Markup Language

  • slouží k vytváření struktury a obsahu webových stránek
  • vytváří pomocí textu obsah webových stránek včetně grafických prvků
  • tento obsah je zobrazován pomocí webových prohlížečů

Webový prohlížeč

Na zobrazení html potřebujeme webový prohlížeč:

  • Google Chrome
  • Mozilla Firefox
  • Microsoft Edge
  • Opera
  • Safari

Každý prohlížeč může HTML kód zpracovávat trochu jinak, a proto je důležitá optimalizace.

Optimalizace pro různá zařízení a prohlížeče

Aby byly webové stránky správně zobrazeny, je třeba přizpůsobit jejich design a funkcionalitu různým zařízením a prohlížečům.

Při optimalizaci je potřeba brát ohledy na:

  • Typ prohlížeče a jeho verze: Starší verze prohlížečů nemusí podporovat moderní funkce HTML5 a CSS3.
  • Rozlišení obrazovky: Vytvoření responzivního designu, který se přizpůsobí různým velikostem obrazovek (mobilní telefony, tablety, počítače).
  • Podpora pluginů: Některé weby využívají pluginy, které mohou ovlivnit funkčnost.
  • Skripty a styly: Správné použití HTML5, JavaScriptu, jQuery a CSS pro dynamický a vizuálně příjemný obsah.

Možné problémy při zobrazení webu

Některé prvky mohou způsobit problémy se zobrazením stránky, například:

  • Aplikace: Například Unity nebo Sketchfab mohou mít problémy s kompatibilitou.
  • Multimédia: Velké soubory (videa, zvuky) mohou zpomalit načítání stránky.
  • Statické nastavení velikosti: Stránky pevně nastavené pro jedno rozlišení nemusí být vhodné pro různá zařízení.
  • Vnořené rámce (iframes): Mohou komplikovat načítání obsahu.
  • Velké obrázky: Neoptimalizované obrázky mohou zpomalit načítání stránky.

I tyto prvky je potřeba zohlednit při optimalizaci: řešením těchto problémů je responzivní design, který zahrnuje:

  • Použití různých verzí vzhledu podle šířky nebo výšky okna.
  • Optimalizaci obrázků pro různá rozlišení.
  • Testování webu na různých zařízeních a prohlížečích.

Zdroje informací o html:

Pro studium HTML lze využít různé online zdroje:

Nástroje pro psaní HTML

HTML lze psát prakticky v jakémkoliv textovém editoru, ale doporučují se speciální vývojová prostředí a editory, které usnadňují práci díky funkcím, jako je zvýraznění syntaxe nebo automatické doplňování kódu. Mezi nejčastěji používané nástroje patří:

  • Notepad++ (Poznámkový blok++) (pro jednoduchý kód).
  • Visual Studio Code (populární editor s velkým množstvím rozšíření).
  • Visual Studio (integrované vývojové prostředí od Microsoftu)
  • Adobe Dreamweaver (placený nástroj s vizuálním editorem)
  • WebStorm
  • CodePen Online editor vhodný pro experimentování s HTML, CSS a JavaScriptem.

Základy práce s HTML

Uložení souboru: Všechny HTML soubory musí mít příponu .html nebo .htm

Vstupní soubor: Hlavní stránka webu by měla být pojmenována jako index.html, protože webové servery toto jméno standardně vyhledávají.

HTML elementy a tagy

HTML stránky jsou složeny z elementů. Každý element se skládá z tagů, které vymezují obsah stránky:

  • Otevírací tag: <tag>
  • Zavírací tag: </tag>
  • Obsah mezi tagy: <tag>Obsah</tag>

Například:

<h1>Tohle je nadpis</h1>
<p>Tohle je odstavec.</p>

Struktura HTML dokumentu

Každý HTML dokument má základní strukturu:

<!DOCTYPE html>
<html>
  <head>
    <title>Titul stránky</title>
  </head>
  <body>
    <h1>Hlavní nadpis</h1>
    <p>Obsah stránky.</p>
  </body>
</html>
  • <!DOCTYPE html>: Deklarace, která informuje prohlížeč o použití HTML5.
  • <html>: Kořenový element dokumentu.
  • <head>: Obsahuje metadata o stránce (např. titulek, odkazy na styly, kódování).
  • <body>: Hlavní část dokumentu, kde se nachází obsah viditelný na stránce.

admin

,