Best Page

HOME

vytváření www stránek, tvorba www stránek, webdesign, javascript download, javascript ke stažení zdarma, html kody, html barvy, html tagy, html obrázky, html kody na web

Rady pro Váš web, blog

1  2  3  4  5  6  Další stránka

 !!! Zde uvedené scripty a ostatní věci lze kopírovat. Pod názvem klikněte na slovo Download, poté lze kopírovat !!!

 

Kostra stránky

download

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

<HTML>
 <HEAD>
  <TITLE>
titulek stránky</TITLE>
 </HEAD>

<BODY>

</BODY>
</HTML>

 

Meta informace

download

<HEAD>

<TITLE>
titulek stránky</TITLE>
<META NAME="description" CONTENT="popis stránek">
<META NAME="keywords" CONTENT="klíčová slova">
<META NAME="author" CONTENT="jméno autora">

</HEAD>

 

Další možnosti META tagů

download

1.automatické přesměrování:  <META HTTP-EQUIV="refresh" content=" 4 ; URL=http://stránka.cz">

2.kodování češtiny:  <META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1250">

Pro správné zobrazení české diakritiky se používají především tyto dvě kódování:
- windows-1250 : Preferováno na platformě Windows
ISO 8859-2 : Podporované i Unixem,Linuxem, ve Windows známé jako Středoevropské jazyky (ISO)

3.doba platnosti:  <META HTTP-EQUIV="expires" content="21 Aug 2007 20:00:00">

Jedná se o datum a čas kdy informace na stránce přestávají platit.
Prohlížeč si stáhne aktuální stránku ze serveru (nikoli uloženou z paměti).

Tagy nijak neovlivňují funkčnost stránky a bez nic bude plnohodnotně fungovat.

 

Barvy v HTML

download

<font color="#3366FF">text</font>

<font color=rgb(255,55,5)>
text</font>

 

Barva v pozadí

download

<BODY BGCOLOR="#3366FF">

 

Obrázek v pozadí

download

<BODY BACKGROUND="obrazek.gif">

Je vhodné volit obrázky s malou velikostí (kB).
Barvu volíme podle barvy textu nebo naopak.
Můžeme použít textury (malý obrázek, který po spojení vypadá jako jeden celek).

<BODY BACKGROUND="
obrazek.gif" bgproperties=fixed>

Zafixuje obrázek napevno (při rolování stránky zůstává obrázek na místě a roluje jen text).

 

Písmo

download


< b >tučné< /b >
< i >kurzíva< /i >
< u >podtržené< /u >
< strike >preskrtnute< /strike >
< sup >horní index< /sup >

< center >zarovnání textu nebo obrázku na střed< /center >
< br >nový řádek
< p >odstavec
< hr >oddělující čára

 

Barva písma:

download

Červená = <font color="red">Text cervený</font> 
Zelená = <font color="green">Text zelený</font>
Modrá = <font color="blue">Text modrý</font>

 

Velikost písma:

download

<font size="1">Text </font> = Takhle vypadá
<font size="2">Text </font> = Takhle vypadá
<font size="3">Text</font> = Takhle vypadá 
<font size="4">Text </font> = Takhle vypadá 
<font size="5">Text </font> = Takhle vypadá

 

Styly písma:

download


 < FONT FACE= " comic sans ms " >
comic sans ms< /FONT >
< FONT FACE= " times new roman " >
times new roman< /FONT >
< FONT FACE= " thickhead " >
thickhead< /FONT >
< FONT FACE= " arial " >
arial < /FONT >
< FONT FACE= " monotype corsiva " >
monotype corsiva< /FONT >
< FONT FACE= " impact " >
impact< /FONT >
< FONT FACE= " script " >
script< /FONT >
< FONT FACE= " black chancery " >
black chancery< /FONT >
< FONT FACE= " ms sans serif " >
ms sans serif< /FONT >
< FONT FACE= " ms serif " >
ms serif< /FONT >

 

Zobrazení obrázku

download

<img src="obrazek.gif" width="70" height="70" alt="popis obrázku" border="2">

K vložení obrázku na stránku se používá nepárový tag <IMG>.
V tagu specifikujeme cestu k obrázku (src), velikost (width=šířka , height=výška)
 Atribut (alt) slouží k malému popisu obrázku, (border) určuje velikost rámečku.

 

Velikost obrázku

download

<img src="obrazek.gif" width="70" height="70">

Width a height se dají libovolně měnit což zmenšuje nebo zvětšuje obrázek (horší kvalita).
Hodnoty jsou v pixelech.

 

Zarovnání obrázku

download

<img src="obrazek.gif" align="left" >

Atribut ALIGN může nabývat pěti hodnot :

1. TOP - obrázek se zarovná s horní řádkou textu
2. MIDDLE - obrázek je vzhledem k řádce vertikálně vycentrován
3. BOTTOM - obrázek se zarovná s dolní řádkou textu
4. LEFT - obrázek je umístěn u levého okraje stránky a obtéká ho text
5. RIGHT - obrázek je umístěn u pravého okraje stránky a obtéká ho text

 

Mezera okolo obrázku

download

<img src="obrazek.jpg" hspace="10" vspace="10">

Horizontální a vertikální mezera okolo obrázku v pixelech

 

Orámování obrázku

download

<img src="obrazek.gif" border="1">

Odkaz na URL

download

<a href="http://stranka.cz" title="popis">text</a>

» Odkaz na webovou stránku musí obsahovat http://
» Popis se narozdíl od obrázků zapisuje jako title="text"
» Odkaz v podobě tlačítka se zapisuje takto:

<form><input type="button" value="text" onClick="window.location.href='http://stranka.cz'"></form>

 

Odkaz na další stránku

download

<a href="dalsi_stranka.html">další</a>

Zápis platí jen pro stránku ve stejném adresáři!
Pro stránku v nadřazeném adresáři platí příklad b).
Pro stránku ve vedlejším adresáři platí příklad c) (za písmeno x se dosadí název složky).

b) <a href="../
stranka.html"></a>
c) <a href="../x/
stranka.html"></a>

 

 

Odkaz do rámů

download

a)  <a href="url" target="_blank"></A>
b)  <a href="url" target="_název rámu"></A>
c)  <a href="url" target="_self"></A>

a) Odkaz do nového okna prohlížeče.
b) Odkaz do určitého rámu.
c) Odkaz uvnitř rámu na url rámu, z kterého byl odkaz aktivován.

 

Odkazy na stránce

download

a)  <a href="#odkaz"></a>
b)  <a name="odkaz"></a>

a) První část odkazu.
b) Druhá část odkazu.
Po kliknutí na a) prohlížeč skočí na místo na stránce kde se nachází b).

 

Odkaz jako obrázek

download

<a href="http://stranka.html"><img src="obrazek.gif" width="88" height="31"></a>

 

Odkaz bez kliknutí

download

<a href="stranka.html" onMouseOver="parent.location=''stranka.html"> zde </a>

 

Odkaz bez rámečku

download

<a href="stranka.html">Původní</a>
<a href="
stranka.html"onFocus="if(this.blur)this.blur()">Nový</a>


Tlačítko

download

 

<input type="button" value="tlačítko">

 

 

Zaškrtávatko

download

 

<input type="checkbox" name="" value="">

 

 

Přepínač

download

 

<input name="a" type="radio" value="">
<input name="a" type="radio" value="">

 

Výběr

download

 

<select name="">
    <option>
první
    <option>
druhý
    <option>
třetí
</select>

 

Výběrové pole

download

 

<select name="" size="3">
   <option>
první
   <option>
druhý
   <option>
třetí
</select>

 

Procházení souborů

download

 

<input type="file" value="">

 

Textové pole

download

 

<input name="" type="text" size="15">

 

Posunovací textové pole

download

 

<textarea name="" rows=3 cols=15>text</textarea>

 

Typ seznamu

download

Značky seznamu

download

<DL></DL> - seznam definic
<DD></DD> - definice pojmu
<OL></OL> - uspořádaný seznam
<UL></UL> - neuspořádaný seznam
<LI></LI> - položka seznamu
<OL type=A></OL> - .. velká písmena (A B C ...)
<OL type=a></OL> - .. malá písmena (a b c ...)
<OL type=I></OL> - .. velké řecké číslice (I II III IV ...)
<OL type=i></OL> - .. malé řecké číslice (i ii iii iv ...)
<OL type=1></OL> - .. číslice (1 2 3 4 ...)

 

Dělící čára - velikost a barva

download

<hr>
<hr size="1">
<hr size="2">
<hr size="3">
<hr size="4">
<hr size="10">
barva:
<hr color="#3366FF">

 

 

Dělící čára - délka a zarovnání

download

<hr width="100" align="left">
délka 100 pixelů, zarovnání vlevo

<hr width="50%" align="right">
délka 50% stránky, zarovnání vpravo
možnost zarovnání na střed ( align="center")

 

Tabulky a rámy

 download

<table></table> začátek a konec tabulky
<table border="x"> velikost okraje (rámečku) tabulky (x= 1,2..)
<table cellspacing="x"> volný prostor mezi buňkami (x= 1,2..)
<table cellpadding="x"> tloušťka vnitřního okraje buněk (x= 1,2..)
<table width="x"> šířka tabulky (x=100,200.. nebo 50%,100%.. )
<tr></tr> řádek tabulky
<tr align="x" valign="y"> horizontální a vertikální zarovnání řádku tabulky
(x=right, left, center - y=top, middle, bottom)
<td></td> buňka tabulky uvnitř tabulkových řádků
<td align="x" valign="y"> horizontální a vertikální zarovnání obsahu buňky
(x=right, left, center - y=top, middle, bottom)
<td nowrap> zákat zalomení řádku
<td colspan="x"> počet sloupců, přes které se má buňka roztáhnout ve vodorovném směru (x=1,2,3..)
<td rowspan="x"> počet sloupců, přes které se má buňka roztáhnout ve svislém směru (x=1,2,3..)
<td width="x"> šířka buňky (x=10,20.. nebo 10%, 20%..)
<th></th> záhlaví tabulky
<th align="x" valign="y"> horizontální a vertikální zarovnání obsahu buňky v záhlaví tabulky
(x=right, left, center - y=top, middle, bottom)
<th nowrap> zákaz zalamování řádků uvnitř buňky záhlaví tabulky
<th colspan="x"> počet sloupců pro buňku záhlaví tabulky, přes které se má buňka roztáhnout ve vodorovném směru
<th rowspan="x"> počet sloupců pro buňku záhlaví tabulky, přes které se má buňka roztáhnout ve svislém směru
<th width="x"> šířka buňky záhlaví tabulky
(x=10,20.. nebo 10%, 20%..)
<caption align="x"></caption> nadpis tabulky a jeho zarovnání
(x=top, bottom)
<table bgcolor="#3366FF"></table> barva pozadí tabulky (nebo její části)
<table background="obrazek.jpg"></table> obrázek v pozadí tabulky


 

Příklady tabulek

download



pondělí úterý středa
1 2 3

<table border="1" cellspacing="0" cellpadding="5">
<tr>
      <td bgcolor="#
CCCCCC">pondělí</td>
      <td bgcolor="#
CCCCCC">úterý</td>
      <td bgcolor="#
CCCCCC">středa</td>
</tr>
<tr>
      <td bgcolor="#
CCCCCC">1</td>
      <td bgcolor="#
CCCCCC">2</td>
      <td bgcolor="#
CCCCCC">3</td>
</tr>
</table>


Rok
2008 2009 2010

<table border="1" cellspacing="5" cellpadding="5">
<tr>
      <td colspan="3"><center>
Rok</center></td>
</tr>
<tr>
      <td>
2008</td>
      <td>
2009</td>
      <td>
2010</td>
</tr>
</table>


Rok 2008
Měsíc 1. 2. 3.
Leden Únor Březen

<table border="5" cellpadding="5" bgcolor="#CCCCCC">
<tr>
      <td colspan="4" bgcolor="#"
999999>Rok 2008</td>
</tr>
<tr>
      <td rowspan="2">
Měsíc</td>
      <td><center>1.</center></td>
      <td><center>2.</center></td>
      <td><center>3.</center></td>
</tr>
<tr>
      <td>Leden</td>
      <td>Únor</td>
      <td>Březen</td>
</tr>
</table>



     
  MENU







 
     
<table cellSpacing="0" cellPadding="0" width="150" border="0">
<tbody>
<tr>
<td vAlign=top width="5" bgcolor="#
999999">&nbsp;</td>
<td vAlign=top width="140" bgcolor="#
999999">&nbsp;</td>
<td vAlign=top width="5" bgcolor="#
999999">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#
999999">&nbsp;</td>
<td bgcolor="#
CCCCCC">
<center>
MENU
<br><br><br><br>
</td>
<td bgcolor="#
999999">&nbsp;</tr>
</tr>
<tr>
<td vAlign=top bgcolor="#
999999">&nbsp;</td>
<td vAlign=top bgcolor="#
999999">&nbsp;</td>
<td vAlign=top bgcolor="#
999999">&nbsp;</td>
</tr>
</tbody>
</table>


 

Rámy

download

<frameset></frameset> Definuje prvky rámu (zapisuje se do HEAD)
<frameset cols="x,x"> šířka sloupcových rámů v pixelech nebo procentech (200,600 nebo 20%,80%)
<frameset rows="x,x"> výška řádkových rámů v pixelech nebo procentech (20,580 nebo 5%,95%)
<frameset border="x"> velikost okraje rámu (x=1,2,3..)
<frameset framespacing="x"> mezery mezi rámy (x=1,2,3..)
<frameset frameborder="x"> velikost okraje rámu
<frame scr="url"> adresa k natažení do rámu
<frame align=x> zarovnání položek uvnitř rámu
(x=left, center, right)
<frame frameborder="x"> velikost okrajů rámů
<frame bordercolor="#xxxxxx"> barva okraje pro rám
<frame framespacing="x"> mezera přidaná mezi rámy
<frame name="xxx"> jméno rámu
<frame noresize> zakazuje měnit velikost rámu
<frame marginwidth="x" marhinheight="x"> šířka a výška okraje uvnitř rámů
<frame scrolling="x"> určuje zda rám bude mít rolovací lištu (x=0,1,auto)


E-mail

download

e-mail <a href="mailto:email@bestpage.cz?subject=Bestpage">e-mail</a>

Subject = předmět

 

 

Komentář

download

<!-- text -->
 

 

Hudba na stránce

download

<bgsound src="melodie.mid">

 

Ostatní značky

download

<br> - zalomení řádku
<nobr> - zakáže zalamování
&nbsp; - mezera
<p></p> - nový odstavec
<center></center> - centruje

 

 

Speciální znaky

download

< - &lt;
> - &gt
& - &amp
" - &quot
© - &copy
¶ - &para
§ - &sect
« - &laquo
» - &raquo
± - &plusmn
µ - &micro
® - &reg
ß - &szlig
¤ - &curren
Ð - &ETH
£ - &pound
³ - &sup3
¦ - &brvbar
° - &deg
½ - &frac12

 

 

 

Měnící se obrázek

download

<img src="obrazek.gif" onmouseover="this.src='obrazek.gif';" onmouseout="this.src='obrazek.gif';">
 

 


Průhledné objekty

download

<img src="obrazek.gif" border="2" style="{ filter:alpha(opacity=20) }">

 

Změna kurzoru

download

<body style="cursor:url('sipka.cur')">

<table style="cursor:url('sipka.cur')"></table>



Kurzor se dá změnit na celé stránce v tagu BODY (první řádek) nebo jen na určitém prvku třeba TABLE (druhý řádek)
Bestpage doporučuje zapsání do CSS.

Odkaz bez podtržení

download

<a href="http://bestpage.cz"  target="_blank" style="text-decoration: none">BestPage</a>

 

Přechod bez kliknutí:

download

<a href="" onmouseover="parent.location=''http://bestpage.cz">BestPage</A>

 

Stínový přechod na jinou stránku:

download

<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1.0)">

 

Rozlučka, pokud se chystá  návštěvník odejít:

download

<body OnUnload = "alert ('Děkujeme za návštěvu, přijďte opět');">

 

Rychlé psaní znaků

download

< > Špičaté závorky jdou nejsnadněji psát za použití klávesy Alt Gr + <>, které jsou hned nad touto klávesou (pravý Alt).
# Křížek, který využijeme pro zapsání barvy, má klávesovou zkratku Alt + 35.
" Uvozovek dosáhneme po stisku Shift + ů .
; Středník najdeme pod klávesou Esc.
= % Pro = a % použijeme stejnou klávesu s těmito znaky (u % za použití Shiftu).
/ Toto lomítko najdeme na numerické klávesnici vedle klávesy NumLock
& Pro symbol & je nejrychlejší klávesová zkratka Alt + 38.

1  2  3  4  5  6  Další stránka