Slovník tvorby webů a online marketingových pojmů

Element

Co je Element

Element v kontextu webdesignu označuje základní stavební blok webové stránky. Elementy jsou jednotlivé části HTML kódu, které definují strukturu a obsah stránky. Každý element má svůj specifický význam a účel, který je určen jeho HTML tagem.

Typy webových elementů

Blokové elementy

Blokové elementy vytvářejí na stránce bloky obsahu, které zabírají celou šířku svého kontejneru. Mezi běžné blokové elementy patří:

  • <div>: Univerzální kontejner pro jiné elementy, často používaný pro rozložení a stylování pomocí CSS.
  • <header>: Definuje hlavičku stránky nebo sekce, obvykle obsahuje nadpisy, navigaci nebo loga.
  • <footer>: Definuje patičku stránky nebo sekce, obvykle obsahuje kontaktní informace, odkazy na podmínky používání nebo autorská práva.
  • <section>: Skupina tematicky spojeného obsahu, která může obsahovat nadpisy, odstavce, obrázky a další elementy.
  • <article>: Samostatný kus obsahu, který může být nezávislý na zbytku stránky, například blogový příspěvek nebo novinový článek.
  • <nav>: Definuje navigační menu obsahující odkazy na různé části webu.
  • <aside>: Sekce obsahující doplňkový obsah, jako jsou reklamy, odkazy na související články nebo boční panely.

Řádkové elementy

Řádkové elementy zabírají pouze takovou šířku, jakou potřebuje jejich obsah, a jsou zobrazeny na stejné řádce s okolním textem. Mezi běžné řádkové elementy patří:

  • <span>: Univerzální kontejner pro text nebo jiné řádkové elementy, často používaný pro stylování pomocí CSS.
  • <a>: Hypertextový odkaz na jinou stránku nebo část aktuální stránky.
  • <img>: Vložený obrázek.
  • <strong>: Definuje důležitý text, obvykle zobrazený tučně.
  • <em>: Definuje zdůrazněný text, obvykle zobrazený kurzívou.
  • <br>: Vloží přechod na novou řádku.

Struktura HTML dokumentu

HTML dokument se skládá z následujících základních částí:

  • <html>: Kořenový element, který obsahuje celou HTML stránku.
  • <head>: Sekce obsahující metadata stránky, jako je název, odkazy na stylové listy a skripty.
  • <body>: Hlavní obsah stránky, kde se nachází všechny viditelné elementy.

Příklad HTML dokumentu

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Příklad stránky</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Vítejte na mé webové stránce</h1>
<nav>
<ul>
<li><a href="#home">Domů</a></li>
<li><a href="#about">O mně</a></li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>Domovská stránka</h2>
<p>Toto je úvodní text na mé webové stránce.</p>
</section>
<section id="about">
<h2>O mně</h2>
<p>Zde je několik informací o mně.</p>
</section>
<section id="contact">
<h2>Kontakt</h2>
<p>Kontaktujte mě prostřednictvím e-mailu nebo telefonu.</p>
</section>
<footer>
<p>&copy; 2023 Moje webová stránka</p>
</footer>
</body>
</html>

Stylování elementů

Pro stylování HTML elementů se používá CSS (Cascading Style Sheets). Pomocí CSS můžete definovat vzhled a rozložení elementů na stránce.

Příklad CSS

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: white;
padding: 1em;
text-align: center;
}

nav ul {
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 1em;
}

nav ul li a {
color: white;
text-decoration: none;
}

section {
padding: 2em;
border-bottom: 1px solid #ccc;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
position: absolute;
bottom: 0;
width: 100%;
}

Interaktivita pomocí JavaScriptu

Pro přidání interaktivity k HTML elementům se používá JavaScript. Pomocí JavaScriptu můžete manipulovat s DOM (Document Object Model) a reagovat na uživatelské akce.

Příklad JavaScriptu

document.addEventListener("DOMContentLoaded", function() {
var navLinks = document.querySelectorAll("nav ul li a");

navLinks.forEach(function(link) {
link.addEventListener("click", function(event) {
event.preventDefault();
var targetId = this.getAttribute("href").substring(1);
var targetSection = document.getElementById(targetId);
targetSection.scrollIntoView({ behavior: "smooth" });
});
});
});

Závěr

Elementy jsou základními stavebními bloky webových stránek a jejich správné používání je klíčové pro efektivní a přístupný webdesign. Kombinací HTML pro strukturu, CSS pro stylování a JavaScriptu pro interaktivitu můžete vytvářet komplexní a uživatelsky přívětivé webové stránky.