Tvorba webstránok

Úvod > Tipy a triky > Tvorba webstránok

Použitie CSS Grid pre rozloženie

Úvod CSS Grid je mocný nástroj pre pokročilé rozloženie webstránky. Ukážeme jednoduchý grid layout. 1. HTML štruktúra <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> </div> 2. CSS Grid štýly .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 10px; } .grid-item { background-color: #4CAF50...

Vytvorenie jednoduchého modálneho okna

Úvod Modálne okná sú skvelým spôsobom, ako zobraziť obsah bez opustenia aktuálnej stránky. Ukážeme jednoduché modálne okno s HTML a CSS. 1. HTML štruktúra modálu <button id="otvorModul">Otvoriť modál</button> × Toto je moje modálne okno. 2. CSS štýly modálneho okna .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .modal-content { background-color: #fff; margin: 15% auto; padding: 20px; width:...

Základné animácie v CSS

Úvod Animácie dokážu oživiť webstránku. V tomto článku vytvoríme jednoduchú animáciu pohybu a zmeny farby. 1. HTML prvok s animáciou <div class="animacia">Pozdrav!</div> 2. CSS animácia .animacia { width: 150px; padding: 20px; text-align: center; background-color: #f44336; color: white; border-radius: 8px; animation: pohybFarba 3s infinite alternate; } @keyframes pohybFarba { 0% { transform: translateY(0); background-color: #f44336; } 50% { transform: translateY(-20px); backgro...

Vytvorenie responzívnej galérie obrázkov

Úvod Galéria obrázkov je častým prvkom webstránok. Ukážeme si, ako vytvoriť jednoduchú a responzívnu galériu. 1. HTML štruktúra galérie <div class="galeria"> <img src="img1.jpg" alt="Obrázok 1"> <img src="img2.jpg" alt="Obrázok 2"> <img src="img3.jpg" alt="Obrázok 3"> <img src="img4.jpg" alt="Obrázok 4"> </div> 2. CSS štýly galérie .galeria { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .galeria img { width: 200px; border-radius:...

Použitie flexboxu pre rozloženie prvkov

Úvod Flexbox je výkonný nástroj pre rozloženie prvkov na webstránke. Naučíme sa základné použitie flexboxu. 1. HTML štruktúra <div class="container"> <div class="box">Prvok 1</div> <div class="box">Prvok 2</div> <div class="box">Prvok 3</div> </div> 2. CSS štýly flexboxu .container { display: flex; flex-wrap: wrap; gap: 10px; } .box { flex: 1 1 150px; padding: 20px; background-color: #ffecb3; text-align: center; border-radius: 8px; } @media ...

Vytvorenie tlačidla s efektom hover

Úvod Tlačidlá s vizuálnymi efektmi zlepšujú používateľskú skúsenosť. Naučíme sa vytvoriť tlačidlo s efektným hover efektom. 1. HTML tlačidlo <button class="efekt-tlacidlo">Klikni na mňa</button> 2. CSS štýl tlačidla .efekt-tlacidlo { padding: 12px 24px; font-size: 16px; border: none; border-radius: 8px; background-color: #2196f3; color: white; cursor: pointer; transition: background-color 0.3s, transform 0.2s; } .efekt-tlacidlo:hover { background-color: #1976d2; transform: scal...

Tvorba formulára pre kontakt

Úvod Formuláre sú základom interakcie s používateľom. V tomto článku sa naučíš vytvoriť jednoduchý kontaktný formulár s HTML a štýlovaný pomocou CSS. 1. HTML štruktúra formulára <form class="kontakt-form"> <label for="meno">Meno:</label> <input type="text" id="meno" name="meno"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <label for="sprava">Správa:</label> <textarea id="sprava" name="sprava"></...

Vytvorenie responzívnej galérie obrázkov s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť **galériu obrázkov** na webstránke pomocou HTML a CSS. Galéria umožní pekne zobraziť viacero obrázkov v mriežke. 1. HTML štruktúra galérie <div class="container"> <div class="box"><img src="obrazok1.jpg" alt="Obrázok 1"></div> <div class="box"><img src="obrazok2.jpg" alt="Obrázok 2"></div> <div class="box"><img src="obrazok3.jpg" alt="Obrázok 3"></div> <div class="box"><img src="obrazok...

Vytvorenie kontaktného formulára s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť **kontaktný formulár** na webstránke pomocou HTML a CSS. Formulár umožní návštevníkom posielať správy priamo z tvojej stránky. 1. HTML štruktúra formulára <form class="kontakt-form"> <label for="meno">Meno:</label> <input type="text" id="meno" name="meno" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="sprava">Správa:</label> <textarea ...

Responzívny kontaktný formulár s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť **formulár pre kontakt** na webstránke. Formulár umožní návštevníkom posielať správy, otázky alebo objednávky priamo cez web. 1. HTML štruktúra formulára <form class="kontakt-form"> <label for="meno">Meno:</label> <input type="text" id="meno" name="meno" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="sprava">Správa:</label> <textarea i...

Responzívna galéria obrázkov s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť **galériu obrázkov** pre svoju webstránku. Galéria umožňuje zobraziť viacero obrázkov v prehľadnej mriežke, ktorá sa prispôsobuje veľkosti obrazovky. 1. HTML štruktúra galérie <div class="galeria"> <div class="box"><img src="obrazok1.jpg" alt="Obrázok 1"></div> <div class="box"><img src="obrazok2.jpg" alt="Obrázok 2"></div> <div class="box"><img src="obrazok3.jpg" alt="Obrázok 3"></div> <div ...

Vytvorenie responzívneho kontaktného formulára s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť **formulár na kontakt** pre svoju webstránku. Formuláre umožňujú používateľom posielať správy alebo údaje priamo zo stránky a sú nevyhnutnou súčasťou kontaktnej sekcie. 1. HTML štruktúra formulára <form class="kontakt-form"> <label for="meno">Meno:</label> <input type="text" id="meno" name="meno" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="spra...

Vytvorenie responzívnej galérie obrázkov s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť **galériu obrázkov** na webstránke. Obrázkové galérie sú skvelé na prezentáciu portfólia, produktov alebo fotografií a dajú sa jednoducho vytvoriť pomocou HTML a CSS. 1. HTML štruktúra galérie <div class="galeria"> <img src="obrazok1.jpg" alt="Obrázok 1"> <img src="obrazok2.jpg" alt="Obrázok 2"> <img src="obrazok3.jpg" alt="Obrázok 3"> <img src="obrazok4.jpg" alt="Obrázok 4"> </div> 2. CSS štýly galérie .galeria { di...

Vytvorenie responzívneho kontaktného formulára s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť **formulár na webstránke**. Formuláre sú dôležité na získavanie informácií od používateľov, ako napríklad kontaktné údaje alebo prihlásenie na odber newslettera. 1. HTML štruktúra formulára <form class="kontakt-form"> <label for="meno">Meno:</label> <input type="text" id="meno" name="meno"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <label for="sprava">Správa:</label&...

Vytvorenie responzívnej galérie obrázkov s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť **galériu obrázkov** na webstránke. Galéria je ideálna na prezentáciu fotografií, produktov alebo portfólia. 1. HTML štruktúra galérie <div class="galeria"> <div class="obrazok"><img src="foto1.jpg" alt="Foto 1"></div> <div class="obrazok"><img src="foto2.jpg" alt="Foto 2"></div> <div class="obrazok"><img src="foto3.jpg" alt="Foto 3"></div> </div> 2. CSS štýly galérie .galeria { display:...

Vytvorenie responzívneho kontaktného formulára s HTML a CSS

Úvod V tomto článku sa naučíš, ako vytvoriť **formulár pre kontakt** na webstránke. Formulár umožňuje návštevníkom posielať správy, objednávky alebo otázky priamo z webu. 1. HTML štruktúra formulára <form class="kontakt-form"> <label for="meno">Meno:</label> <input type="text" id="meno" name="meno" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="sprava">Správa:</label> <text...

Vytvorenie responzívnej galérie obrázkov s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť **galériu obrázkov** na webstránke. Galéria je skvelý spôsob, ako vizuálne prezentovať produkty, projekty alebo fotografie. 1. HTML štruktúra galérie <div class="galeria"> <div class="box"><img src="obrazok1.jpg" alt="Obrázok 1"></div> <div class="box"><img src="obrazok2.jpg" alt="Obrázok 2"></div> <div class="box"><img src="obrazok3.jpg" alt="Obrázok 3"></div> <div class="box"><img src...

Vytvorenie kontaktného formulára s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť **kontaktný formulár** na webstránke. Formuláre umožňujú návštevníkom stránky odosielať správy alebo požiadavky priamo na tvoj email. 1. HTML štruktúra formulára <form action="/odoslat" method="post"> <label for="meno">Meno:</label> <input type="text" id="meno" name="meno" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="sprava">Správa:</label...

Vytvorenie galérie obrázkov s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť **galériu obrázkov** na webstránke. Galérie sú skvelý spôsob, ako prezentovať fotografie alebo produkty pre používateľov. 1. HTML štruktúra galérie <div class="gallery"> <div class="gallery-item"><img src="obrazok1.jpg" alt="Obrázok 1"></div> <div class="gallery-item"><img src="obrazok2.jpg" alt="Obrázok 2"></div> <div class="gallery-item"><img src="obrazok3.jpg" alt="Obrázok 3"></div> <!-- p...

Vytvorenie kontaktného formulára s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť jednoduchý **formulár pre kontaktnú stránku**. Formuláre sú kľúčové pre zber údajov od používateľov, napríklad pre odoslanie správy alebo registráciu. 1. HTML štruktúra formulára <form class="contact-form"> <label for="name">Meno:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <label for="message">Správa:</label> <te...

CSS Grid: jednoduché rozloženie obsahu

Úvod V tomto článku sa naučíš vytvoriť jednoduchý **grid layout** pre webstránku pomocou CSS Grid. Grid umožňuje presné rozloženie obsahu do riadkov a stĺpcov a prispôsobenie pre rôzne veľkosti obrazovky. 1. HTML štruktúra gridu <div class="grid-container"> <div class="grid-item">Obsah 1</div> <div class="grid-item">Obsah 2</div> <div class="grid-item">Obsah 3</div> <div class="grid-item">Obsah 4</div> </div> 2. CSS Grid štýly .gri...

Responzívny banner s HTML a CSS

Úvod V tomto článku sa naučíš vytvoriť jednoduchý **responzívny banner** pre webstránku pomocou HTML a CSS. Banner môže obsahovať text, obrázky a tlačidlo výzvy k akcii a prispôsobuje sa veľkosti obrazovky. 1. HTML banner <div class="banner"> <h2>Vitaj na našej stránke!</h2> <p>Objav naše služby a produkty.</p> <a href="#kontakt" class="btn">Kontaktuj nás</a> </div> 2. CSS štýly .banner { background-color: #ffecb3; text-align: center; padding:...

Vytvorenie responzívnej galérie obrázkov

Úvod V tomto článku sa naučíš, ako vytvoriť jednoduchý galériový blok obrázkov pomocou HTML a CSS. Galéria je ideálna na prezentáciu portfólia, produktov alebo fotografií a môže byť responzívna pre rôzne zariadenia. 1. HTML galéria <div class="container"> <div class="box"><img src="obrazok1.jpg" alt="Obrázok 1"></div> <div class="box"><img src="obrazok2.jpg" alt="Obrázok 2"></div> <div class="box"><img src="obrazok3.jpg" alt="Obrázok 3">&l...

Vytvorenie kontaktného formulára s HTML a CSS

Úvod V tomto článku sa naučíš, ako vytvoriť jednoduchý kontaktný formulár pre svoju webstránku pomocou HTML a CSS. Kontaktný formulár je dôležitý pre komunikáciu s návštevníkmi a môže obsahovať polia ako meno, email, správa a tlačidlo odoslania. 1. HTML formulár <form action="#" method="post"> <label for="name">Meno:</label> <input type="text" id="name" name="name"> <label for="email">Email:</label> <input type="email" id="email" name="email"> <la...

Tvorba navigácie a tlačidiel pre webstránku

Úvod Navigácia a tlačidlá sú kľúčové prvky každej webstránky. Správna navigácia zlepšuje použiteľnosť, tlačidlá zase umožňujú interakciu s používateľom. V tomto článku sa naučíš vytvoriť jednoduchú menu lištu a štýlované tlačidlá s HTML a CSS. 1. Základná navigácia <nav> <ul class="menu"> <li><a href="#home">Domov</a></li> <li><a href="#onas">O nás</a></li> <li><a href="#sluzby">Služby</a>...

Základy HTML a CSS pre moderné webstránky

Úvod Ak chceš vytvoriť vlastnú webstránku, musíš ovládať HTML a CSS. HTML definuje štruktúru stránky, CSS jej vzhľad. V tomto článku sa naučíš základné tagy a štýly, ktoré ti pomôžu vytvoriť moderný web. 1. Základná štruktúra HTML <!DOCTYPE html> <html lang="sk"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Moja prvá stránka</title> </head> <body> <h1>Vita...

Ako vytvoriť responzívnu webstránku, ktorá funguje na mobile aj desktopoch

Úvod V dnešnej dobe je viac ako polovica návštev webstránok z mobilných zariadení. Responzívny dizajn zabezpečuje, aby tvoja stránka vyzerala dobre a bola funkčná na všetkých zariadeniach – počítačoch, tabletoch aj smartfónoch. Tento článok ti ukáže základy tvorby responzívnej webstránky. --------------------------------------------------------------- 1. Čo je responzívny dizajn Responzívny dizajn znamená, že sa obsah webstránky automaticky prispôsobuje veľkosti obrazovky používateľa. Výhod...

Základy HTML a CSS pre úplných začiatočníkov

Úvod HTML a CSS sú základom každej webstránky. HTML (HyperText Markup Language) tvorí štruktúru stránky, zatiaľ čo CSS (Cascading Style Sheets) sa stará o vizuálny vzhľad – farby, fonty, rozloženie. Tento článok je určený pre úplných začiatočníkov a ukáže ti, ako vytvoriť jednoduchú a peknú webstránku od základov. 1. HTML – štruktúra stránky HTML je jazyk, ktorý vytvára obsah webstránky. Stránka sa skladá z tagov, ktoré označujú rôzne prvky. Základná štruktúra HTML: <!DOCTYPE html> &l...

Ako si vybrať správnu platformu na tvorbu webstránky

Úvod Výber správnej platformy je kľúčový pre úspech tvojej webstránky. Nesprávna voľba môže spôsobiť zbytočné komplikácie alebo obmedziť rozvoj stránky. V tomto článku sa pozrieme na najpoužívanejšie nástroje, ich výhody a nevýhody, a poradíme, kedy sa oplatí zvoliť CMS alebo tvorbu od nuly. Najpoužívanejšie platformy - WordPress - Výhody: flexibilita, množstvo pluginov, veľká komunita, vhodné pre blogy, skautské oddiely aj e-shopy. - Nevýhody: potreba pravidelných aktualizácií, mierne s...

Ako vytvoriť webstránku pre skautský oddiel: Praktický návod

Úvod V dnešnej digitálnej dobe je mať vlastnú webstránku nevyhnutnosťou aj pre skautské oddiely. Webstránka slúži nielen ako vizitka, ale aj ako komunikačný a organizačný nástroj pre členov, rodičov a verejnosť. V tomto článku si ukážeme, ako krok za krokom vytvoriť webstránku pre skautský oddiel, aj keď nemáš predchádzajúce skúsenosti s tvorbou webu. 1. Plánovanie obsahu a štruktúry webstránky Predtým, než sa pustíš do tvorby webstránky, je dôležité si premyslieť, aký obsah budeš zverejňovať...