Jdi na obsah Jdi na menu
 


Html kody

 

Struktura html souboru

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

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; 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ý

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

Nejčastější striktní HTML

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

A ideální nejjednodušší

<!doctype html>

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

Čeština

Iso:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

Windows:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">

UTF:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Č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):

<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

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 o úroveň výš (dvě tečky):

<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

Záložka někde v dokumentu:

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

a takhle se na ni po kliknutí odroluje:

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

Odkazy na záložky

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</span>

dá se použít na každý tag, třeba i na body:

<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 jsou 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</b>

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í

Meta tagem, čeká to 2 sekundy:

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

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 www.blueboard.cz a vložte si do stránky vygenerovaný kód.

Nejlepší počitadlo se statistikami zdarma je na www.toplist.cz.

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