Sweetinka > Tahák na HTML kody

Tahák na HTML kody

05.09.2008 21:54

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 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.

Nevíte, kam se ty 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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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">

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

Čeština

Iso:

Windows:

UTF:

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

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

Popis tagů META

Zápis stylu

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

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

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

CSS prakticky

Zápis javascriptu

Přímo do stránky:

Volání externího souboru:

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

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

Poznámky

Poznámka v HTML:

a toto už ne
/* tohle taky ne */
// a tohle taky ne

Poznámka v CSS:

Poznámka v Javascriptu:

Odkazy

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

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

Zobrazí se to takto: Seznam

Odkaz na soubor stranka.html do stejného adresáře (bez https://, 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="https://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 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>:

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:

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:

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

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:

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ů:

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:

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

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

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

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

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

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:

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

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">
    Hlaní 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:

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

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