Damiánova zahrádka :3

Webové prezentace ve formátu HTML5

3 min read

XHTML

  • eXtensible hypertext markup language rozšiřitelný hypertextový značkovací jazyk
  • Striktnější než html
    • Nepodporuje křížení tagů (např. <b><i>text</b></i> - špatně, <b><i>text</i></b> - správně)
    • Nepárové tagy končí lomítkem
    • Všechny atributy mají hodnoty v uvozovkách
    • Dokument by měl mýt XML prolog <?xml version="1.0" encoding="UTF-8"?>

HTML

  • Název značkovacího jazyka používaného pro tvorbu webových stránek, které jsou propojeny hypertextovými odkazy. HTML je hlavním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu. Dnes se používá HTML5.
  • Klient-server architektura

HTML Tagy

  • Tagy = značky
  • HTML soubor je obyčejný text obalený značkami, které se nazývají tagy.
  • Tagy určují, jak bude text vypadat, tedy jakou bude mít formu.
  • Všechny tagy jsou uzavřeny v <ostrých závorkách>.
  • Co není v ostrých závorkách, je text, který se bude zobrazovat.
  • Tagy jsou párové a nepárové.
  • Příklady tagů:
    • <h1>, </h1>
      • vymezení nadpisu první úrovně (lze použít až šest úrovní nadpisů tedy až <h6>).
      • Vykreslují se různě velké podle důležitosti.
    • <p>, </p>
      • vymezení odstavce. Možná vůbec nejpoužívanější tag. Po jeho konci prohlížeč automaticky zalomí řádek a udělá vertikální mezeru.
    • <b>, </b>
      • text mezi těmito tagy bude tučný.
    • <i>, </i>
      • kurzíva
    • <span>, </span>
      • dvojice tagů vymezující nějak odlišný text.
    • <br>
      • Zalomí řádek. Text po tomto tagu bude vždy začínat na novém řádku, ale není to nový odstavec. Pozor, tento tag je nepárový, to znamená, že žádné
        neexistuje!
  • Nové tagy v HTML5: zde

Meta tagy

  • Definují metadata HTML dokumentu
  • Metadata nejsou zobrazena na stránce 
    <meta charset="UTF-8">
<meta name="description" content="Popis obsahu webové stránky">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Viewport
  • Prohlížeč na mobilních zařízení stránku zmenšuje, aby se na display vešla celé
  • Většina webů je ale navržená tak, aby byla responzivní a je nežádoucí, aby prohlížeč měnil velikost, proto využijeme viewport 
    <meta name="viewport" content="width=device-width,initial-scale=1">
SEO
  • Search Engine Optimization (zkratka SEO, optimalizace pro vyhledávače nebo též optimalizace nalezitelnosti) je v informatice označení metodiky vytváření a upravování webových stránek takovým způsobem, aby jejich forma a obsah byly vhodné pro automatizované zpracování v internetových vyhledávačích. Cílem SEO je získat ve výsledcích vyhledávání lepší pozici (odkaz na stránky bude zobrazen mezi prvními), a tím i četnější a zároveň cílené návštěvníky.

HTML struktura

<!DOCTYPE html>
<html>
  <head>
    <title>Má první stránka</title>
  </head>
 
  <body>
    Moje první html stránka.
    A nějaké další texty.
  </body>
</html>
Validace
  • Ověřování zdrojového kódu, zda je správně napsán podle standardů.
  • V případě nalezení chybného zápisu napíše chybu.
  • Buď ji validátor sám opraví, nebo to musíte přepsat vy. (Záleží na validátoru)
  • W3C validátor

Reference

Graph View

Backlinks