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
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>titulek stránky</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Meta informace
<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ů
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
<font color="#3366FF">text</font>
<font color=rgb(255,55,5)>text</font>
Barva v pozadí
<BODY BGCOLOR="#3366FF">
Obrázek v pozadí
<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
<
< i >kurzíva< /i >
< u >podtržené< /u >
< strike >preskrtnute< /strike >
< sup >horní index< /sup >
< br >nový řádek
< p >odstavec
< hr >oddělující čára
Barva písma:
Červená = <font color="red">Text
cervený</font>
Zelená = <font color="green">Text zelený</font>
Modrá = <font color="blue">Text modrý</font>
Velikost písma:
<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:
<
< FONT FACE= " times new roman " >
< FONT FACE= " thickhead " >
< FONT FACE= " arial " >
< FONT FACE= " monotype corsiva " >
< FONT FACE= " impact " >
< FONT FACE= " script " >
< FONT FACE= " black chancery " >
< FONT FACE= " ms sans serif " >
< FONT FACE= " ms serif " >
<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
<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
<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
<img src="obrazek.jpg"
hspace="10" vspace="10">
Horizontální a vertikální mezera okolo obrázku v pixelech
Orámování obrázku
<img src="obrazek.gif"
border="1">
Odkaz na URL
<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
<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ů
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
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
<a href="http://stranka.html"><img
src="obrazek.gif"
width="88" height="31"></a>
Odkaz bez kliknutí
<a href="stranka.html" onMouseOver="parent.location=''stranka.html"> zde </a>
Odkaz bez rámečku
<a href="stranka.html">Původní</a>
<a href="stranka.html"onFocus="if(this.blur)this.blur()">Nový</a>
Tlačítko
<input type="button" value="tlačítko">
Zaškrtávatko
<input type="checkbox" name="" value="">
Přepínač
<input name="a"
type="radio" value="">
<input name="a" type="radio" value="">
Výběr
<select name="">
<option>první
<option>druhý
<option>třetí
</select>
Výběrové pole
<select name=""
size="3">
<option>první
<option>druhý
<option>třetí
</select>
Procházení souborů
<input type="file" value="">
Textové pole
<input name="" type="text" size="15">
Posunovací textové pole
<textarea name="" rows=3 cols=15>text</textarea>
Typ seznamu
Značky seznamu
<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
<hr>
Dělící čára - délka a zarovnání
<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
<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 |
|
<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> |
|
<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> |
|
<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> |
|
<table
cellSpacing="0" cellPadding="0" width="150" border="0"> <tbody> <tr> <td vAlign=top width="5" bgcolor="#999999"> </td> <td vAlign=top width="140" bgcolor="#999999"> </td> <td vAlign=top width="5" bgcolor="#999999"> </td> </tr> <tr> <td bgcolor="#999999"> </td> <td bgcolor="#CCCCCC"> <center> MENU <br><br><br><br> </td> <td bgcolor="#999999"> </tr> </tr> <tr> <td vAlign=top bgcolor="#999999"> </td> <td vAlign=top bgcolor="#999999"> </td> <td vAlign=top bgcolor="#999999"> </td> </tr> </tbody> </table> |
<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 <a
href="mailto:email@bestpage.cz?subject=Bestpage">e-mail</a>
Subject = předmět
Komentář
<!--
text
-->
Hudba na stránce
<bgsound src="melodie.mid">
Ostatní značky
<br> - zalomení řádku
<nobr> - zakáže zalamování
- mezera
<p></p> - nový odstavec
<center></center> - centruje
Speciální znaky
< - < > - > & - & " - " © - © |
¶ - ¶ § - § « - « » - » ± - ± |
µ - µ ® - ® ß - ß ¤ - ¤ Ð - Ð |
£ - £ ³ - ³ ¦ - ¦ ° - ° ½ - ½ |
Měnící se obrázek
<img src="obrazek.gif"
onmouseover="this.src='obrazek.gif';"
onmouseout="this.src='obrazek.gif';">
Průhledné objekty
<img src="obrazek.gif" border="2" style="{ filter:alpha(opacity=20) }">
Změna kurzoru
<body style="cursor:url('sipka.cur')">
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í
<a href="http://bestpage.cz" target="_blank" style="text-decoration: none">BestPage</a>
Přechod bez kliknutí:
<a href="" onmouseover="parent.location=''http://bestpage.cz">BestPage</A>
<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:
<body OnUnload = "alert ('Děkujeme za návštěvu, přijďte opět');">
Rychlé psaní znaků
< > | Š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. |