HTML tahák

Tento tahák hodně zjednodušuje a je určen začátečníkům, aby si z něj mohli kopírovat kousky HTML kódu. Spousta věcí je dělána pomocí CSS namísto HTML. Pomocí CSS je to funkčnější, systematičtější a asi i jednodušší než čistým HTML.

Struktura html souboru - Doctype - Čeština - Titulek - Keywords a description - Zápis stylu - Zápis javascriptu - Poznámky - Odkazy - Barvy stránky a odkazů - Nadpisy - Odstavce a vynucené zalomení řádku - Zarovnání odstavce - Nastavení fontu - Barva písma - Tučnost a kurzíva - Podtržení - Obrázek - Seznamy - Div = oddíl - Rozvržení stránky - Tabulky - Iframe - Bublina na přejetí myší - Flash - Přesměrování - Stažení souboru - Vyšší dívčí

Nevíte, kam se ty HTML kódy píšou? Podívejte se na návod jak si udělat stránku a na základy HTML. Seznam všech tagů naleznete o úroveň výš v HTML příručce.

Struktura html souboru

Nejčastější "kopyto" stránky:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="windows-1250">
  <title>Jméno</title>
</head>
<body>
  samotný text stránky
</body>
</html>

(upravte si Jméno stránky, samotný text stránky, případně to doctype a windows-1250)

Struktura stránky v jazyce HTML: html, head, body, doctype

Doctype

Nejčastější přechodový (quirk)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Nejčastější striktní HTML:

<!doctype html>

DTD - Document type definition v HTML, Módy prohlížečů, vliv doctype

Čeština

Windows - pokud nevíte, v jakém píšete kódování, tak pravděpodobně v tomhle:

<meta charset="windows-1250">

UTF-8:

<meta charset="UTF-8">

Iso:

<meta charset="iso-8859-2">

Čeština na webu v HTML

Titulek

<title>Titulek stránky</title>

V titulku stránky se nesmějí používat žádné html tagy.

Titulek stránky v HTML

Keywords a description

Klíčová slova, keywords (vyhledávače je již ignorují):

<meta name="keywords" content="slova, slova, slova">

Popisek stránky, description (objevuje se občas jako popisek v Google a v Seznamu):

<meta name="description" content="Co to čte princ dánský">

Popis tagů META

Zápis stylu

Píše se do hlavičky (mezi <head> a </head>). Například nastavení nulových okrajů těla:

<style type="text/css">
body {margin: 0px;}
</style>

CSS - Kaskádové styly

Připojení externího stylu

Takto lze připojit soubor.css k souboru (vkládá se obvykle do každé stránky mezi <head> a </head>):

<link rel="stylesheet" href="soubor.css" type="text/css">

v tomto případě se soubor.css předpokládá v tomtéž adresáři, jako je stránka. Nebo:

<style type="text/css">
@import url("soubor.css");
</style>

CSS prakticky

Meta tag viewport

Tento meta tag řekne mobilům, že nemají předstírat, že mají větší šířku než skutečně mají. To je důležité pro responzivní design.

<meta name="viewport" content="width=device-width,initial-scale=1">

Pokud nevíte, co přesně děláte, použití tohoto tagu se vyhněte.

Zápis javascriptu

Přímo do stránky:

<script type="text/javascript">
zápis javascriptu
</script>

Volání externího souboru:

<script type="text/javascript" src="cesta/soubor.js"></script>

Skripty a styly, vložení do HTML: script, style

Javascript - návod, objekty, příklady na javascript

Poznámky

Poznámka v HTML:

<!-- toto je poznámka v HTML --> a toto už ne
/* tohle taky ne */
// a tohle taky ne

Poznámka v CSS:

<style type="text/css">
/* toto je poznámka v CSS stylu */
// toto není poznámka v CSS
</style>

Poznámka v Javascriptu:

<script type="text/javascript">
/* toto je poznámka ve skriptu */
toto není poznámka // a tohle ano
// a toto taky
</script>

Podmíněné komentáře pro Internet Explorer

Odkazy

Odkaz do jiného webu musí obsahovat http:// (to je absolutní adresování)

<a href="http://www.seznam.cz">Seznam</a>

Zobrazí se to takto: Seznam

Odkaz na soubor stranka.html do stejného adresáře (bez http://, takže relativní adresování):

<a href="stranka.html">Odkaz na stranka</a>

Odkaz na soubor stranka.html ležící v adresáři o úroveň výš (dvě tečky znamenají úroveň výš):

<a href="../stranka.html">Odkaz do vyššího adresáře</a>

Otevření odkazu do nového okna:

<a href="stranka.html" target="_blank">odkaz do nového okna</a>

nebo

<a href="http://www.seznam.cz" target="_blank">odkaz na Seznam do nového okna</a>

Odkazy v HTML

Záložky (kotvy, anchory)

Kotva někde v dokumentu:

<a name="jmeno_zalozky"></a>

a po kliknutí na tento odkaz se na kotvu po kliknutí odroluje:

<a href="#jmeno_zalozky">odrolovat</a>

Odkazy na kotvy

Barvy stránky a odkazů

Tag <style> patří mezi tagy <head> a </head>:

<style type="text/css">
body {color: black; background-color: white; background-image: url("pozadi.gif");} /* text černý, barva pozadí bílá, obrázek na pozadí */

a:link {color: blue;} /* nenavštívený odkaz */
a:visited {color: navy;}/* navštívený odkaz */
a:hover {color: red} /* odkaz, přes který se jede myší*/
</style>

Dříve se to dělalo pomocí atributů tagu <body>, to je zastaralé.

Pozadí

Různé barvy odkazů pomocí CSS

Bezpečné barvy, Pojmenované HTML barvy, Základní webové barvy

Nadpisy

<h1>Nadpis nejvyšší úrovně</h1>
<h2>Nadpis kapitoly nebo odstavce</h2>
<h3>Podnadpis</h3>
...
<h6>Sedmička už nefunguje</h6>

Kromě čtenářů si nadpisů všímají i vyhledávače.

Odstavce a vynucené zalomení řádku

<p>Odstavec zalamuje řádky podle šířky prostoru, který má (nejčastěji okna). Na konci odstavce se zalomí řádek.</p>

Je-li potřeba uvnitř odstavce zalomit řádek, použije se tag <br>, v normálních textech k tomu ale není důvod:

<p>Text odstavce plyne<br> a najednou se zalomí řádek.</p>

Bloky v HTML

Zarovnání odstavce

Normálně se odstavce (i jiné tagy) zarovnávají doleva. Zarovnání jednoho odstavce doprava:

<p style="text-align: right">Odstavec zarovnaný doprava.</p>

Zarovnání na střed a do bloku:

<p style="text-align: center">Odstavec zarovnaný na střed.</p>
<p style="text-align: justify">Odstavec zarovnaný do bloku.</p>

Lepší je ale nastavit všechny odstavce najednou globálním stylem:

<style type="text/css">
p {text-align: center;} /* všechny odstavce budou zarovnány na střed */
address {text-align: right;} /* tag address bude zarovnán doprava */
.doleva {text-align: left} /* ale tag, který bude v sobě mít class="doleva", se bude zarovnávat doleva */
</style>

Text-align

Nastavení fontu

<span style="font-family: Arial, sans-serif">Text arialem</span>

nebo použití na odstavec:

<p style="font-family: Arial, sans-serif">Odstavec arialem</p>

dá se použít na každý tag, třeba i na body, což ovlivní celou stránku:

<body style="font-family: Arial">

Lepší je to ale zapsat globálně stylem do hlavičky:

<style  type="text/css">
  body {font-family: Arial, sans-serif;}/* pro celý dokument /*
  p {font-family: "Times New Roman", serif} /* pro všechny odstavce <p>*/
  .trida {font-family: Verdana, sans-serif} /* pro všechny tagy s class="trida" */
</style>

Víceslovné názvy písem musejí být v uvozovkách.

Font-family

Barva písma

<span style="color: red;">Červené písmo</span>

nebo třeba pro odstavec

<p style="color: blue">Odstavec modrým písmem</p>

Dá se to napsat do libovolného tagu, ale nemusí to fungovat u odkazů (tag <a>), u nich se to musí udělat globálním stylem <style>, což je ale stejně lepší i v jiných případech:

<style  type="text/css">
body {color: maroon; background-color: white;}/* hnědé písmo pro celý dokument, barva pozadí bílá /*
p {color: green;} /* zelené písmo pro všechny odstavce <p> */
.zlute {color:yellow;} /* pro všechny tagy s class="zlute" */
a:link {color: blue;} /* nenavštívený odkaz modrý*/
a:visited {color: navy;}/* navštívený odkaz tmavě modrý */
a:hover {color: red} /* odkaz, přes který se jede myší červený */
</style>

Color, Barvy v HTML, Základní barvy, Pojmenované HTML barvy

Tučnost, kurzíva

<b>Tučné písmo</b>

<i>Kurzíva</i>

Normální písmo, <b>tučné písmo, <i>tučná kurzíva</i></b>, <i>normální kurzíva</i>.

<strong>také tučné písmo (zvýraznění)</strong>

<em>také kurzíva (zvýraznění)</em>

Úprava textu pomocí HTML: b, i, span...

Podtržení

<u>Podtržený text</u>

Ale nepoužívejte to, plete se to s odkazem. Taky se to blbě čte.

<span style="text-decoration: underline">podtržení pomocí stylu</span>

také doporučuji nepoužívat.

Odkazy se podtrhávají automaticky:

<a href="soubor.html">automaticky podtržený odkaz</a>

Jak zrušit podtrhávání odkazů:

<style type="text/css">
a {text-decoration: none;}
a: hover {text-decoration: underline;}
</style>

ale podtrhávání odkazů doporučuji nevypínat.

Text-decoration, Jak zdokonalit odkazy

Obrázek

Obrázek ze stejného adresáře, ve kterém je html stránka:

<img src="obrazek.gif" width="100" height="200" alt="obrázek">

nebo obrazek.jpg nebo obrazek.png. Zadané rozměry by měly být skutečné rozměry obrázku (jednotka se v HTML neuvádí, ale rozměry jsou v pixelech = obrazovkových bodech).

Obrázek z nadřazeného adresáře (to jsou ty dvě tečky):

<img src="../obrazek.gif" width="100" height="200" alt="obrázek">

Obrázek z webu (absolutní adresa, začíná http://):

<img src="http://www.jakpsatweb.cz/images/jakpw.gif" width="100" height="200" alt="obrázek">

Obrázek fungující jako odkaz (kliká):

<a href="cilova_stranka.html"><img src="obrazek.gif" width="100" height="200" alt="obrázek"></a>

Obrázek fungující jako odkaz, ale bez modrého rámečku:

<a href="cilova_stranka.html"><img src="obrazek.gif" width="100" height="200" alt="obrázek" border="0"></a>

Příprava obrázků pro web, Obrázky v HTML (výklad), Obrázky v HTML (vlastnosti tagu img), Proč nefungují obrázky

Seznamy

Odrážkový seznam (puntíky):

<ul>
  <li>první položka</li>
  <li>druhá položka</li>
</ul>

Obrázkové odrážky se dělají stejně jako puntíky, ale přidává se styl:

<style type="text/css">
ul li {list-style-image: url("obrazek.gif"}
</style>

Seznamy v HTML (odrážky a číslování), List-style-image

Číslovaný seznam:

<ol>
  <li>první položka, čísluje se to automaticky</li>
  <li>druhá položka</li>
</ol>

Jiný typ číslování, třeba a) b) c):

<style type="text/css">
ol li {list-style-type: lower-alpha;}
</style>

List-style-type

Div = oddíl

Tag div slouží nejčastěji na obalení více blokových prvků. Například když budu chtít mít tři odstavce červeným písmem a odsazené zleva o 30px:

<div style="color: red; margin-left: 30px;">
  <p>odstavec</p>
  <p>odstavec</p>
  <p>odstavec</p>
<div>

Ale dá se to dělat samozřejmě i jinak, stejně tak <div> má širší použití, většinou na rozvržení designu stránky.

Rozvržení stránky

Rozvržení stránky se dá dělat desítkami různých způsobů. Toto je jen příklad:

<body>
<div id="cela-stranka">
  <div id="hlavicka">
    Hlavička
  </div>
  <div id="leve-menu">
    Levé menu
  </div>
  <div id="hlavni-text">
    Hlavní text
  </div>
  <div id="paticka">
    Patička
  </div>
</div>
</body>

a k tomu se dá napsat styl mnoha a mnoha různými způsoby. Příklad stránky s pevnou šířkou:

<style type="text/css">
body {text-align: center; }
#cela-stranka {width: 760px; margin: 0px auto;}
#leve-menu {width: 160px; float: left;}
#hlavni-text {width: 500px; float: left;}
#paticka {clear: left;}
</style>

Ta mříž # se vždycky vztahuje k prvku se stejným id=.

Návod na centrování celé stránky.

Tabulky

Nejjednodušší tabulka 2x2:

<table cellspacing="0">
  <tr>
    <td>První buňka prvního řádku</td>
    <td>Druhá buňka prvního řádku</td>
  </tr>
  <tr>
    <td>První buňka druhého řádku</td>
    <td>Druhá buňka druhého řádku</td>
  </tr>
</table>

Zapnutí rámečku (border) a vnitřních okrajů buněk (cellpadding):

<table border="1" cellpadding="6" cellspacing="0">...

Jednoduchý rámeček (nebude dvojitý):

<table border="1" style="border-collapse: collapse;">
<tr>první buňka...<td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>

Buňka přes dva řádky (v druhém řádku se zapíše o jednu buňku méně):

<td rowspan="2">buňka přes dva řádky</td>

Buňka přes tři sloupce:

<td colspan="3">Buňka přes tři sloupce</td>.

Tabulky v html stránkách

Iframe

Do stránky se vloží obdélník a v něm se zobrazí jiná stránka:

<iframe src="jina-stranka.html" width="300" height="400" name="vnoreny">
alternativní text
</iframe>

Iframe -- vnořené plovoucí rámy

Bublina na přejetí myší

Do libovolného tagu stačí napsat atribut title="text bubliny", například:

<span title="text, který se objeví ve žluté bublině">text, přes který když se přejede myší, se to objeví</span>

Flash

Vložení flashe (soubor swf) do stránky. Jednoduše:

<embed src="soubor.swf" type="application/x-shockwave-flash" width="100" height="200">

Složitě:

<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000"  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="100" height="200">
<param name="movie" value="soubor.swf">
<param name="quality" value="High">
<embed src="soubor.swf"  type="application/x-shockwave-flash" name="obj1" width="100" height="200"></object>

Přesměrování

Jediné pořádné přesměrování se nedá udělat v HTML, nýbrž na serveru (v .htaccess nebo programovat). Níže popsané metody jsou jenom náhražky.

Přesměrování meta tagem, čeká to 2 sekundy:

<meta http-equiv="refresh" content="2;URL=http://www.nekam.cz/cesta/soubor.html">

Přesměrování javascriptem:

<script type="text/javascript">
top.location.href="http://www.nekam.cz/cesta/soubor.html";
</script>

Přesměrování stránky, různé možnosti

Stažení souboru

Třeba soubory .docx, .avi a podobné. Normálně odkazem na ten soubor:

<a href="pisemka.docx">stáhnout písemku</a>

Nechat stáhnout soubory, které prohlížeče interpretují (třeba .html nebo .js) můžete tak, že je zabalíte do .zip nebo do .rar. To se hodí i na stažení více souborů najednou:

<a href="archiv.zip">stáhnout archiv</a>

Stahované soubory je samozřejmě nutné umístit na server.

Vyšší dívčí

Anketa, počítadlo, diskuse, návštěvní kniha

To není sranda naprogramovat, musí to běžet na serveru. Zaregistrujte na miniaplikace.blueboard.cz a vložte si do stránky vygenerovaný kód.

Nejlepší počitadlo se statistikami zdarma je na www.toplist.cz. Na statistiky se hodně se používá Google Analytics, také zdarma.

Služby vzdálených serverů

Přístup na heslo

To taky neni sranda.

Zaheslování stránek -- různé způsoby

Vložení kusu html z jiného souboru

Nelze nijak jednoduše. Různé způsoby, jak to udělat, popisuji na stránce Skládání stránek z kousků.

Zvuky

Taky docela komplikovaná věc.

Zvuky na webových stránkách

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

HTML tagy Abecedně Příklady HTML tahák

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.