Studijní portál OA Znojmo Studijní portál OA Znojmo
  • Úvod
  • Základy informatiky
    • 1. Základní pojmy informatiky
    • 2. Předchůdci počítačů
    • 3. Počítač obecně
    • 4. Hardware
    • 5. Operační systémy
    • 6. Klávesové zkratky
    • 7. E-mailová komunikace
    • 8. Internet jako základní pojem informatiky
    • 9. Organizace dat v počítači
  • HTML + CSS
    • Zajímavé odkazy k HTML a CSS
    • Soubor .htaccess
  • JavaScript
    • Ochrana proti SPAMu pomocí JavaScriptu
    • Filtrování dat v tabulce
  • PHP
    • 1. Úvod do PHP
    • 2. Datové typy v PHP
    • 3. Podrobné výpisy v PHP
    • 4. Řetězce v PHP
    • 5. Proměnná v PHP
    • 6. Čísla v PHP
    • 7. Podmínky v PHP
    • 8. Operátory porovnávání hodnot v PHP
    • 9. Logické operace v PHP
    • 10. Cykly v PHP
    • 11. Pole v PHP
    • 12. Funkce v PHP
    • 13. Vložené soubory v PHP
    • 14. PHP a databáze
    • 15. Komunikace PHP s databází
    • 16. Formuláře v PHP
    • 17. BMI – příklad k formulářům v PHP
    • 18. Jednoduchá návštěvní kniha v PHP
    • 19. Články v databázi přes PHP
    • 20. Session v PHP
    • 21. Počítadlo přístupů v PHP
    • 23. Datum a čas v PHP česky
    • 24. Odesílání zpráv na email v PHP
    • 25. Jak na aktivní položky menu v PHP
    • 26. Jak nahrát soubor na server
  • Grafika
    • Základní typy grafických souborů
    • Základní pojmy (témata) grafiky
    • Barevné modely
    • Zajímavé odkazy pro grafiku
  • Různé
    • Kolik stojí hodina práce webmastera na volné noze?
    • Kancelářské programy
    • Odkazy na zajímavé weby
Studijní portál OA Znojmo Studijní portál OA Znojmo
  • Úvod
  • Základy informatiky
    • 1. Základní pojmy informatiky
    • 2. Předchůdci počítačů
    • 3. Počítač obecně
    • 4. Hardware
    • 5. Operační systémy
    • 6. Klávesové zkratky
    • 7. E-mailová komunikace
    • 8. Internet jako základní pojem informatiky
    • 9. Organizace dat v počítači
  • HTML + CSS
    • Zajímavé odkazy k HTML a CSS
    • Soubor .htaccess
  • JavaScript
    • Ochrana proti SPAMu pomocí JavaScriptu
    • Filtrování dat v tabulce
  • PHP
    • 1. Úvod do PHP
    • 2. Datové typy v PHP
    • 3. Podrobné výpisy v PHP
    • 4. Řetězce v PHP
    • 5. Proměnná v PHP
    • 6. Čísla v PHP
    • 7. Podmínky v PHP
    • 8. Operátory porovnávání hodnot v PHP
    • 9. Logické operace v PHP
    • 10. Cykly v PHP
    • 11. Pole v PHP
    • 12. Funkce v PHP
    • 13. Vložené soubory v PHP
    • 14. PHP a databáze
    • 15. Komunikace PHP s databází
    • 16. Formuláře v PHP
    • 17. BMI – příklad k formulářům v PHP
    • 18. Jednoduchá návštěvní kniha v PHP
    • 19. Články v databázi přes PHP
    • 20. Session v PHP
    • 21. Počítadlo přístupů v PHP
    • 23. Datum a čas v PHP česky
    • 24. Odesílání zpráv na email v PHP
    • 25. Jak na aktivní položky menu v PHP
    • 26. Jak nahrát soubor na server
  • Grafika
    • Základní typy grafických souborů
    • Základní pojmy (témata) grafiky
    • Barevné modely
    • Zajímavé odkazy pro grafiku
  • Různé
    • Kolik stojí hodina práce webmastera na volné noze?
    • Kancelářské programy
    • Odkazy na zajímavé weby
  1. Jste zde:  
  2. HTML a CSS

Zajímavé odkazy k HTML a CSS

Základní údaje
Kategorie: HTML a CSS
Zobrazení: 688

Web obecně

Základní zdroje informací najdete např. na těchto stránkách:

  • https://w3schools.com/html/
  • https://jakpsatweb.cz/
  • https://itnetwork.cz
  • http://polopate.jakpsatweb.cz/ 
  • https://tvorba-webu.cz/
  • a mnoho dalších

Webhostingy zdarma:

  • https://webzdarma.cz
  • https://endora.cz
  • https://infinityfree.net
  • https://hz.cz
  • https://php5.cz

Redakční systémy

Bez nutnosti MySQL databáze:

  • Wonder CMS
  • GetSimple CMS
  • Get Grav
  • appRain
  • jCore
  • ImpressPages
  • QuickCMS
  • Monstra
  • Sitemagic CMS
  • Fork CMS
  • Bludit

Nutno vytvořit databázi:

  • ProcessWire
  • SilverStripe
  • YetiForce
  • Pagekit
  • Cotonti
  • SunLight

Nejčastěji používané redakční systémy:

  • WordPress
  • Joomla
  • Drupal
  • a další

Seznam expirovaných domén:

  • https://monitoruju.net/expirovane-domeny/

Chcete doménu s diakritikou?

  • https://www.punycoder.com/
  • https://www.name.com/punycode-converter
  • https://www.punycode.io/

Webové statistiky:

  • http://gs.statcounter.com/

Sledovač pohybu na webových stránkách:

  • https://www.smartlook.com

Odkazy k HTML

Editory

HTML editory on-line

  • https://html-online.com/editor/
  • https://bestonlinehtmleditor.com/
  • https://alex-d.github.io/Trumbowyg/
  • JCE editor
  • https://ckeditor.com/
  • https://www.tinymce.com/index.php
  • https://www.quackit.com/html/online-html-editor/
  • https://nicedit.com (jen velmi jednoduchý)
  • https://editor.asbrusoft.com/webeditor/index.frameset.html
  • https://www.freetextbox.com/demos/

Nejlepších editory (recenze, srovnání):

  • https://www.g2.com/categories/wysiwyg-editors?utf8=%E2%9C%93&order=g2_score
  • https://www.1stwebdesigner.com/10-best-wysiwyg-text-and-html-editors-for-your-next-project/
  • https://gloriathemes.com/best-wysiwyg-html-editors/
  • https://www.hongkiat.com/blog/wysiwyg-html-editors/
Editor pro textarea ve formuláři:
  • https://summernote.org/

Jedna z nejrozsáhlejších sbírek nástrojů pro webmastery:

  • https://beautifytools.com/

Převodníky zdrojového kódu na HTML

  • hilite.me
  • highlight.hohli.com
  • https://tohtml.com/
  • https://andrewsun.com/tools/syntax-highlighter/

Tvorba tlačítek a log:

  • http://dabuttonfactory.com/
  • https://www.onlinelogomaker.com/
  • https://www.graphicsprings.com/start-your-logo
  • https://www.designimo.com/

Tvorba ikon pro web:

  • https://fonts.google.com/icons
  • https://icons.getbootstrap.com/
  • https://feathericons.com/
  • https://lineicons.com/icons/
  • https://fontawesome.com/
  • https://friconix.com/
  • https://www.flaticon.com/
  • https://forkaweso.me/Fork-Awesome/
  • https://icons8.com/
  • https://iconarchive.com/
  • https://css.gg/
  • https://boxicons.com/
  • https://thenounproject.com/
  • https://www.onlinewebfonts.com/icon/
  • https://www.vecteezy.com/

Odkazy k CSS

  • Základní pojmy CSS (odkaz na portál jakpsatweb.cz)
  • https://cssportal.com/
  • CSS triky - https://css-tricks.com
  • udělejte si vlastní úpravu Bootstrapu - https://bootstrap.build/app
  • tvorba šablony online - https://bootply.com/
  • spousta užitečných nástrojů - https://angrytools.com/

CSS frameworky:

  • Bootstrap
  • UIkit
  • Bulma
  • Foundation
  • a spousta dalších

Online bootstrap editory:

  • Layoutit
  • Frontenda
  • Bootply

Potřebujete najít nějakou ikonu pro web?

  • https://www.iconfinder.com/
  • https://dryicons.com/

Online tvorba slideru:

  • https://imageslidermaker.com/

Ukázka jednoduchého menu bez použití JavaScriptu

Ukázka jednoduchého menu bez použití JavaScriptu.

Demo

<style>
 .menu {color: #000000; padding: 0; margin: 0; list-style-type: none; display:block} 
 .menu ul {margin-top: 0px; position: absolute; visibility: hidden; background-color: #A72135; margin: 0; padding: 0; list-style-type: none;}
 .menu li {float: left; padding: 2px 2px 0 2px; width: 200px; white-space: nowrap;}
 .menu a {padding: 2px; text-align: left; padding-left: 15px; color: #fff; background-color: rgb(141,135,81); display: block; text-decoration: none; font-weight: bold;}
 .menu ul a:link {color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
 .menu ul a:visited {color: #fff; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
 .menu ul a:hover {color: #4f4f4f; background-color: rgb(233,233,233);}
 .menu li:hover ul, ul.menu li.hover ul { visibility: visible;}
 .menu li li {float: none; border: none; padding: 0; margin: 0;}
 </style>
 <table>
<tbody>
<tr>
<td>
<ul class="menu">
<li><a href="http://moodle.oaznojmo.eu/html/">HTML</a>
<ul>
<li><a href="http://moodle.oaznojmo.eu/html/text.php">Textové značky</a></li>
<li><a href="http://moodle.oaznojmo.eu/html/seznamy.php">Seznamy</a></li>
<li><a href="http://moodle.oaznojmo.eu/html/odkazy.php">Odkazy</a></li>
</ul>
</li>
</ul>
</td>
<td>
<ul class="menu">
<li><a href="http://moodle.oaznojmo.eu/css/">CSS</a>
<ul>
<li><a href="http://moodle.oaznojmo.eu/css/border/">border</a></li>
<li><a href="http://moodle.oaznojmo.eu/css/margin/">margin</a></li>
<li><a href="http://moodle.oaznojmo.eu/css/font/">font</a></li>
<li><a href="http://moodle.oaznojmo.eu/css/color/">color</a></li>
</ul>
</li>
</ul>
</td>
<td>
<ul class="menu">
<li><a href="http://moodle.oaznojmo.eu/php/">PHP</a>
<ul>
<li><a href="http://moodle.oaznojmo.eu/php/kniha_navstev.php">Kniha návštěv</a></li>
<li><a href="http://moodle.oaznojmo.eu/php/generovani-formulare.php">Generování formuláře</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</tbody>
</table>

Soubor .htaccess

Základní údaje
Kategorie: HTML a CSS
Zobrazení: 711

Chování webového serveru se dá nakonfigurovat (mimo jiné) za pomoci souboru httpd.conf. Na ten ale většinou jako standardní uživatelé webhostingu nevidíme a nemáme možnost jej editovat. Chování našeho webu (jako celku) lze konfigurovat v souboru .htaccess. Některé webhostingové programy to bohužel mají zakázané. Co můžeme např. pomocí souboru .htaccess konfigurovat nebo nastavit:

  • vypnutí/zapnutí procházení adresářů
  • chybové stránky
  • přesměrování
  • nastavení výchozího souboru, např. místo index.html
  • zákaz/povolení přístupu z určitých IP

Souborů .htacces se v adresářové struktuře webové serveru může vyskytovat i několik. Třeba i v každém adresáři. Jestliže v adresáři .htacces není, funguje zde dědičnost z nadřazeného adresáře. Příklady použití:

  • Blokování přístupu z IP
    • Blokování přístupu z IP adresy 194.228.2.61 denny from 194.228.2.61
    • Blokování přístupu ze skupiny adres začínající 194.228 denny from 194.228
    • Povolení  přístupu z 194.228.3.211 allow from 194.228.3.211
  • Chybové stránky
    • ErrorDocument 404 /chyba/404.html
    • ErrorDocument 403 /chyba/403.html
  • Výpis obsahu adresářů
    • zákaz výpisu Options -Indexes
    • povolení výpisu Options +Indexes
  • Hlášení chyb v PHP
    • zákaz výpisu chybových hlášení php_flag display_errors off
    • povolení výpisu chybových hlášení php_flag display_errors on
  • Výchozí (startovní) soubor webu
    • Server se pokusí najít a zobrazit index.php, potom zkouší index.html, potom muj.html DirectoryIndex index.php index.html muj.html

Další odkazy:

  • Co je to .htaccess
  • Generátor souboru .htaccess

Jak vložit video na pozadí stránek

Základní údaje
Kategorie: HTML a CSS
Zobrazení: 332

Pro pozadí stránek můžeme použít i video. Dnes nejčastěji uložené na Youtube.com. Použití těchto videí je však značně problematické. proto je vhodnější si potřebné video stáhnout a používat vlastní adresu. Funkční stránka může vypadat např. takto:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
video {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
html, body {
  height: 100%;
}
html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 150%;
  line-height: 1.4;
}
body {
  margin: 0;
}
.viewport-header {
  position: relative;
  height: 50vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  font-family: Helvetica;
  color: #ac9272;
  text-transform: uppercase;
  letter-spacing: 2vw;
  line-height: 1.2;
  font-size: 3vw;
  text-align: center;
}
main {
  width: 80vw;
  left: 10%;
  overflow: auto;
  background: rgba(black, 0.66);
  color: white;
  position: relative;
  padding: 1rem;
  padding: 20px;
  border: 1px solid #ac9272;
  text-align:center;
  color: #ac9272;
  font-weight: bold;
}
</style>
</head>
<body>
<video src="https://oaznojmo.eu/demo/video-na-pozadi/videopozadi3.mp4" autoplay loop playsinline muted></video>
<header class="viewport-header">
  <h1>Ukázka videa na pozadí</h1>
</header>
<main>oaznojmo.eu</main>
</body>
</html>

Výsledek takto vloženého videa najdete v této ukázce.

Vyhledávání

Reklamní blok

Rychlé odkazy

  • Webové stránky školy
  • Moodle GPOA Znojmo
  • Office 365
  • Bakaláři GPOA Znojmo
© Studijní portál OA Znojmo 2025, vytvořil Portal70.cz.
  • Úvod
  • Základy informatiky
    • 1. Základní pojmy informatiky
    • 2. Předchůdci počítačů
    • 3. Počítač obecně
    • 4. Hardware
    • 5. Operační systémy
    • 6. Klávesové zkratky
    • 7. E-mailová komunikace
    • 8. Internet jako základní pojem informatiky
    • 9. Organizace dat v počítači
  • HTML + CSS
    • Zajímavé odkazy k HTML a CSS
    • Soubor .htaccess
  • JavaScript
    • Ochrana proti SPAMu pomocí JavaScriptu
    • Filtrování dat v tabulce
  • PHP
    • 1. Úvod do PHP
    • 2. Datové typy v PHP
    • 3. Podrobné výpisy v PHP
    • 4. Řetězce v PHP
    • 5. Proměnná v PHP
    • 6. Čísla v PHP
    • 7. Podmínky v PHP
    • 8. Operátory porovnávání hodnot v PHP
    • 9. Logické operace v PHP
    • 10. Cykly v PHP
    • 11. Pole v PHP
    • 12. Funkce v PHP
    • 13. Vložené soubory v PHP
    • 14. PHP a databáze
    • 15. Komunikace PHP s databází
    • 16. Formuláře v PHP
    • 17. BMI – příklad k formulářům v PHP
    • 18. Jednoduchá návštěvní kniha v PHP
    • 19. Články v databázi přes PHP
    • 20. Session v PHP
    • 21. Počítadlo přístupů v PHP
    • 23. Datum a čas v PHP česky
    • 24. Odesílání zpráv na email v PHP
    • 25. Jak na aktivní položky menu v PHP
    • 26. Jak nahrát soubor na server
  • Grafika
    • Základní typy grafických souborů
    • Základní pojmy (témata) grafiky
    • Barevné modely
    • Zajímavé odkazy pro grafiku
  • Různé
    • Kolik stojí hodina práce webmastera na volné noze?
    • Kancelářské programy
    • Odkazy na zajímavé weby