Jdi na obsah Jdi na menu
Reklama
Založte webové stránky zdarma - eStránky.cz
 


Rady, tipy a triky pro web,blog-javascripty,CSS, .htaccess atd.

27. 3. 2011

 

Rady pro Váš web, blog

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

  • text
  •    <li type=disc>text</li>
  • text
  •    <li type=circle>text</li>
  • text
  •    <li type=square>text</li>

     

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.

 TOPlist

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

 

ZDROJ: http://bestpage.cz

 

Komentáře

Přidat komentář

Přehled komentářů

Zatím nebyl vložen žádný komentář