Nejdůležitější HTML tagy - přehled

kalendář

Kurz Úvod do programování dynamických webů vám dá základ v používání PHP HTML CSS a MySQL, na kterém budete konečně moci stavět vlastní projekty a nad vším rozvíjet už jen dílčí dovednosti. Díky tomuto školení ušetříte spoustu času, který byste jinak museli věnovat hledání správných řešení metodou pokus - omyl. Termín školení si vyberte zde.

atributy tagu <body>
atributvlastnosthodnota
bgcolorbarva pozadíbarva
backgroundobrázek na pozadíurl
textbarva textubarva
linkbarva odkazůbarva
vlinkbarva navštívených odkazůbarva
alinkbarva odkazů při kliknutíbarva
bgpropertiesposouvání obrázkového pozadíscroll | fixed
scrollrolování tělayes | no
leftmarginlevý okrajvzdálenost
topmarginhorní okrajvzdálenost
rightmarginpravý okrajvzdálenost
bottommarginspodní okrajvzdálenost

Příklad: <body background="image.gif" bgcolor="blue" text="#111111" link="#b35k58" vlink="#d16f03" alink="#ef7d00">

bloky
tagvýznamdruh
<p>odstavecpárový
<br>zalomení řádkunepárový
<div>kontejnerpárový
<center>vycentrovánípárový
<h1> až <h6>nadpisy 1. až 6. úrovněpárový
<blockquote>citace, odsazenípárový
<address>adresapárový
<pre>předformátovaný textpárový
<hr>vodorovná čáranepárový

Příklad: <p>Tady je odstavec<br></p>

seznamy, výčty
tagvýznamdruh
<ul>odrážkový seznampárový
<ol>číslovaný seznampárový
<li>položka seznamunepárový

Příklad:
<ul>
  <li>První položka seznamu</li>
  <li>Druhá položka seznamu</li>
  <li>Třetí položka seznamu</li>
</ul>

atributy tagu <a> (odkaz)
atributvlastnosthodnota
hrefcíl odkazuURL
namejméno záložkyzvolené
targetcílový rám nebo oknojméno rámu nebo virtuální okno

Příklad: <a href="index.html" target="_blank">Odkaz se otevře v novém okně</a>

atributy tagu <img> (image)
atributvlastnosthodnota
srcfyzické umístění obrázku (souboru)URL
altalternativní popistext
lowsrcnáhradní obrázek pro malé displejeURL
widthšířkavzdálenost nebo %
heightvýškavzdálenost nebo %
bordertloušťka rámečkuvzdálenost
vspacevertikální okraj (odsazení)vzdálenost
hspacehorizontální okraj (odsazení)vzdálenost
alignzarovnání obrázkuleft, right, top, texttop, middle, absmiddle, baseline, bottom, absbottom

Příklad: <img src="./images/image.jpg" width="100" alt="Pěkný obrázek">

tabulka (table)
tagvýznamdruh
<table>tabulkapárový
<tr>řádek tabulkypárový
<th>buňka záhlaví tabulkypárový
<td>buňka tabulkypárový
<caption>nadpis tabulkypárový
<col>úprava slouce tabulkynepárový
<colgroup>skupina slouců tabulkynepárový
<tbody>tělo tabulkypárový
<thead>hlavička tabulkypárový
<tfoot>patička tabulkypárový

Příklad:
<table>
  <tr><th>sloupec 1</th><th>sloupec 2</th></tr>
  <tr><td>buňka 1/1</td><td>buňka 1/2</td></tr>
  <tr><td>buňka 2/1</td><td>buňka 2/2</td></tr>
</table>

atributy tagu <table>
atributvlastnosthodnota
alignobtékání tabulky okolním textemleft, right, center
cellpaddingvnitřní okraj buněkvzdálenost
cellspacingvnější okraj buněkvzdálenost
widthminimální šířka tabulkyvzdálenost nebo %
height minimální výškavzdálenost nebo %
backgroundobrázek na pozadíURL
bgcolorbarva pozadíbarva
bordercolorbarva rámečkubarva
framevykreslení rámečku okolovoid, border, box, hsides, vsides, above, below, lhs, rhs
rulesvykreslení mřížkynone, all, rows, cols, groups

Příklad: <table align="left" width="200" bgcolor="#abcabd">

formulář (form)
tagvýznamdruh
<form>formulářpárový
<input>pole, volba nebo tlačítkonepárový
<select>roletka pro výběrpárový
<option>položka v selectunepárový
<textarea>velké textové polepárový
<label>popis polepárový
<fieldset>ohraničení skupiny polípárový
<legend>popis skupiny polí fieldsetpárový
<optgroup>ohraničení skupiny volebpárový
<button>tlačítkopárový
atributy tagu <form>
atributvlastnosthodnota
actionskript, který bude zpracovávat dataURL
methodzpůsob přenosu datget | post
enctypezpůsob zakódování datapplication/x-www-form-urlencoded | multipart/form-data | libovolná mime deklarace
targetcílové okno nebo rám_self, _blank, _top, _parent, nebo jméno rámu nebo okna
atributy tagu <input>
atributvlastnosthodnota
typedruh vstupního poletext | password | hidden | radio | checkbox | submit | reset | image | file | button
namejméno vstupního polevolitelné
valuedefaultní hodnota pole nebo text zobrazovaný na tlačítkuvolitelné
alignzarovnánístandardní hodnoty pro zarovnání
atributy tagu <input type="atribut">
atributvlastnostvlastnosti
texttextové polesize= šířka ve znacích, maxlength = nejvyšší možný počet zadaných znaků, autocomplete = doplňování známých hodnot
passwordtextové pole s hvězdičkamisize= šířka ve znacích, maxlength- maximum znaků
hiddenskryté polepřenos ostatních proměnných
radiotéž radiobutton - přepínačchecked - defaultně označené
checkboxzatrhávací boxchecked - defaultně označené
submittlačítko pro odeslání
resettlačítko pro vyčištění polí
imagepotvrzující tlačítko odesílající navíc souřadnice kliknutí (name.x a name.y)src = URL obrázku
fileumožní vložit a odeslat souboraccept = MIME typ nabízených souborů

Příklad:
<form method="get" action="./input_form.php">
  <input type="text" name="telefon" value="000 000 000"
  size="18">
  <input type="checkbox" name="souhlas"
  checked="checked">
  <input type="radio" name="vyber"
  value="1" checked="checked">
  <input type="radio" name="vyber" value="2">
  <select name="barva">
  <option value="red" selected="selected">červená</option>
  <option value="blue">modrá</option>
  </select>
  <textarea name="clanek" cols="30" rows="5">
  Vlož článek
  </textarea>
  <input type="submit" value="odeslat">
</form>


Výsledek:
(Výše uvedený kód je bez popisu polí.)

Telefon:

Souhlasím s podmínkami:

Zaslat pokyny:
ano:
ne:   

Barva:



Odeslat

Novinka! Nyní internetový on-line kurz PHP MySQL XHTML CSS

  • on-line kurz PHP je určen všem, ktěří se chtějí stát svým pánem a chtějí tvořit webové stránky v programových kódech
  • úspěšná metoda i-learning/GMH (Gradually - Mode - Help) spojuje postupné skládání webu se třemi řežimy zobrazení a nápovědou
  • úspěšný absolvent se stane nezávislým tvůrcem dynamických webů

Z pohodlí vašeho domova. Více na www.onlinephp.cz.

Kurz tvorba www stránek - PHP XHTML CSS SQL

Název: úvod do programování dynamických webů

Nyní s 30% slevou za pouhých 1990,- Kč

Individuální přístup, neformální prostředí, žádná konfrontace, v kurzu max 4 žáci!!!

  • Ukážu Vám krok za krokem co je to tvorba www stránek z ničeho až po funkční dynamické www stránky s administrací
  • Odnesete si kódy těchto www stránek, které si můžete nainstalovat na svůj hosting nebo server, nasadit vlastní design a přidávat nové funkcionality
  • Získáte tak funkční www stránky a zejména nové vědomosti, které můžete využít k dalšímu studiu a vylepšování Vašich nově získaných www stránek

Kurz Úvod do programování dynamických webů je určen začátečníkům (minimum základy HTML), nebo těm, které už nebaví být otrokem všelijakých redakčních systémů, ale chtějí být svým pánem. Anebo těm, kteří "programují" tzv. statické weby v HTML, ať už pomocí různých Dreamweavrů, nebo v HTML kódu, a chtěli by pokročit dále. A vlastně, v neposlední řadě i těm, kteří po tvorbě webů zatím jen pošilhávají. Je zbytečné učit vás jednotlivé příkazy PHP, XHTML, CSS a SQL, jako se to děje ve většině (drahých) kurzů, to si najdete zadarmo v kdejaké přírůčce nebo na internetu. Co Vám tedy ukážu? Ukážu Vám jak na to!

Co dřív?

PHP bez XHTML je jako mozek bez lebky. A XHTML bez CSS je zase lebka bez tváře. A bez SQL se zase nepodíváte do mozku. Z počátku asi budete kroutit hlavou, proč se v jednom skriptu míchají čtyři různé kódy mezi sebou. Ale velice brzy v tom začnete plavat jak ryba ve vodě a příjde Vám to naprosto přirozené. A kdybych měl odpovědět na zhora položenou otázku - co dřív? Odpověď zní - hezky pěkně všechno najednou.

A co Vám ukážu?

Ukážu Vám skvělé pomocníky XAMPP, PSPad a IEtester. Ukážu Vám jak strukturovat a minimalizovat kód a uspořádat root. Ukážu Vám něco z PHP a jeho možností, ukážu Vám jak vytvářet PHP funkce a jak s nimi zacházet, ukážu Vám principy práce s MySQL databází, připojení k databázi, nastavení češtiny. Ukážu Vám, co je to XHTML, tvorbu XHTML šablony, CSS stylování a co je validita kódu. Řekneme si něco o principech optimalizace pro vyhledávače (SEO). Ukážu Vám co je to session a jak pomocí ní zaheslovat administraci. Taky si zopákneme něco o grafice na webu. A vůbec postavíme si takový malý web s administrací. Vše bez zbytečné teorie a na praktických příkladech (teorii dohoníte později sami). A kódy? Ty si odnesete domů. A hlavně, získáte základ, na kterém budete konečně moci stavět vlastní projekty a nad vším rozvíjet už jen dílčí dovednosti. Díky tomuto školení ušetříte spoustu času, který byste jinak museli věnovat hledání správných řešení metodou pokus - omyl. A jak víme, čas jsou peníze.

Podmínky

Školení (celkem 8 hodin) probíhá:

  • dvoudenní - pondělí + úterý (vždy od 17 do 21 hod)
  • jednodenní - sobota (od 11 do 19 hod)
  • Termín je možné dohodnout i mimo hlavní termíny

Cena: 2990,- Kč !NYNÍ SE SLEVOU ZA 1990,- Kč!
Maximální počet žáků: 4
Minimum: základy HTML
Kde: Vokovická 48, 160 00 Praha 6

Selský rozum a taky něco o mně...

Programovat jsem začal nechtíc před 3 lety, když jsem si "nepotykal" s jedním z nejrozšířenějších redakčních systémů Drupal. Druhým RS v pořadí byla o mnoho přívětivější Joomla, ale když jsem po ní chtěl víceúrovňové menu, tvářila se zarputile. Zařval jsem: vy mě s tím... já si to naprogramuju sám! Koupil jsem pár přírůček např. PHP a MySQL bez předchozích znalostí a CSS pro zelenáče, dlužno podotknout, že jsem ani jednu nedočetl do konce. Bez teorie to samozřejmě nejde, ale když jsem u ní usínal, rozhodl jsem se to vzít za opačný konec. A tak jsem začal rovnou programovat (nejlepší způsob, jak se stát programátorem). Pro začátek jsem si zvolil úkol naprogramovat web pro svůj fotbalový tým Hanspaulské ligy. Samozřejmě, že dynamický web, generující výsledky, tabulky, statistiky hráčů a taky s diskusním fórem, fotogalerií a zaheslovanou administrací. Je jasné, že to byl z počátku porod (nic jsem neuměl), ale Vy prostě musíte každý problém vyřešit a já Vám říkám, že ho vyřešíte, když chcete (to nastává fáze euforická). Na stejné problémy už před Váma někdo narazil a tak se dá spoustu fíglů vygooglovat. A hlavně, všechno se dá řešit selským rozumem (jiný nemám). Když říkám všechno, tak všechno. Kdyby mi někdo řekl, že budu ve svých skriptech používat vícerozměrná pole, vezmu motyčku a zatnu mu jí mezi oči. Dnes je vícerozměrné pole mým dobrým přítelem, který nikdy nezklame. Ale už dost, nechci Vás strašit. Určitě je dobré umět myslet v souvislostech, protože většinou budete řešit několik problémů souběžně (nejspíš 4 :-), a taky je dobré myslet vždy pokud možno dopředu. Když budete něco programovat, vždy se to snažte programovat tak, aby se to dalo používat opakovaně do budoucna (univerzálně - na to je dobré objektově orientované PHP, ale o tom někdy jindy). Jestli se chcete stát programátorem, záleží to jen na Vás. Pokud si na úvod zvolíte toto školení, určitě nebudete litovat, z vlastní zkušenosti totiž vím, na co jsem pracně ve svých začátcích hledal odpovědi a kde jsem dělal chyby. A navíc, PHP má tu výhodu, že s pár příkazy dokážete velké věci. Milan Makovec