DoporučujemeZaložit web nebo e-shop

Tvorba webu

 

 

Banner Maker
počítače - keramika- Metla - ZŠ Metelkovo

 

Spočítejte si hodnotu svých stránek:O)


My site is worth $78.
How much is yours worth?

 

Velmi pěkně je základ tvorby html dokumentu vysvětlen na stránkách www. keli.websnadno. cz

       

 

 

 

 

Úvod do HTML

<HTML></HTML> určuje počátek a konec vlastních dat stránky. Tento tag je povinný, ale většina prohlížečů dokáže stránku zobrazit, i když chybí.

<HEAD></HEAD> je hlavička stránky, která obsahuje několik tagů, které určují vlastnosti stránky

<TITLE> </TITLE> . Do tohoto tagu se zapisuje titulek stránky. Neměl by být příliš dlouhý (max. 64 znaků)

  <BODY></BODY> určuje tělo dokumentu, právě tam budete zapisovat obsah stránky.

Odstavce

K oddělení jednotlivých odstavců slouží tag <P></P>.

Někdy vám může dělat problém, že je text u <P> tagu zarovnán podle velikosti okna prohlížeče, nemůžete přesně určit, jak bude text zarovnán.  Pokud tedy potřebujete určit, kdy se má text vypsat na nový řádek, vložte na konec předešlého řádku tag <BR>

<p> Ahoj, <BR>

 

snad vám to bude k užitku < BR>

 

keli </p>

 

Odstavce můžeme zarovnávat pomocí atributu align.

 

Hodnoty align mohou být: l eft, center, right.

<p align="left"> Odstavec zarovnaný vlevo (výchozí hodnota). </p>
<p align="center"> Odstavec zarovnaný na střed. </p>
<p align="right"> Odstavec zarovnaný vpravo. </p>

 

Nadpisy

Nadpisy se dělí podle úrovně a velikosti. Největší je nadpis první úrovně <H1></H1> a nejmenší je nadpis šesté úrovně <H6></H6>.

Pokud chcete   dokument trochu rozdělit, aby se jednotlivé části nepletly, použijte tag <HR>, který zobrazí horizontální čáru přes celou šířku okna prohlížeče.

Pokud vám nevyhovuje základní vzhled čáry, můžete si nastavit některé jeji vlastnosti:

WIDTH="10%" určuje délku čáry, můžete ji zadat

v procentech nebo v pixelech....Na ukázku jsem text odělila čarou  tloušťky1

SIZE="1" tloušťka čáry v pixelech

<HR WIDTH="100%" SIZE="1">

Písmo

Pokud potřebujete změnit fonty, barvu textu, použijte tag <FONT></FONT>, pomocí kterého můžete text různě měnit.

<FONT COLOR="BLACK" FACE="Arial"> text </FONT>

Odkazy

Odkaz je zvýrazněná část textu, ve které se skrývá adresa dalších WWW stránek (URL). Po kliknutí na odkaz prohlížeč otevře okno s novou adresou. V HTML lze odkaz zapsat takto:

<A HREF="http://www.keli.websnadno.cz">text odkazu</A>

Kromě textu můžeme odkazovat i obrázkem. Toho jednoduše docílíme vložením obrázku mezi tagy

<A></A>

<A HREF="http://www. keli.websnadno. cz"><IMG SRC="obrazek.gif BORDER="0"></A>

Atribut BORDER="0" u obrázku <IMG> použijeme pokud nechceme, aby byl okolo odkazujícího obrázku rámeček.

Jestli chcete vytvořit odkaz, který zjišťuje stažení nějakého souboru, do URL uvedete přesnou adresu, kde se soubor nachází.

<A HREF="http://www.odkaz.cz/soubor.zip">soubor.zip</A>

 

 
 

Změna barvy odkazu
<style>
<!--
a { color:red }
a:hover {c olor:green }
-->
</style>
Barvu si samozřejmě zvol podle svého
příklad:
<style>
<!--
a {color:red}
a:hover {color:green}
-->
</style> <a href="http://www.keli.websnadno.cz" title="popis">

Kurzor přesýpacích hodin
<style>
<!--
 a {cursor: wait;}
--->
</style>
<a href="http://www.keli.websnadno.cz">Kurzor přesýpacích hodin</a>

Vytvořte si vlastní ikonku

Příprava ikonky

Ikonku si můžete připravit v nějakém grafickém editoru nebo si jí stáhnou někde z internetu.
Pokud si budete chtít připravit vlastní ikonku držte se následujících rad:

  • Ikonku vytvářejte v rozlišení 16x16, nebo 32x32 v žádném případě nedělejte větší ikonku.
  • Ikonka se musí jmenovat přesně "favicon.ico".
  • Ikonka by měla být jednoduchá nic složitého nejde stejně nakreslit na obrázek s rozlišením
  • 16x16, nebo 32x32.
  • Ikonka tohoto webu je velmi jednoduchá.  

Ikonka v Internet exploreru

V IE se ikonka zobrazuje jen pokud si stránku přidáte k oblíbeným,
ikonka se musí jmenovat favicon.ico a musí být umístěna v hlavní složce webu.

Ikonka v prohlížečích: Mozilla, Netscape, Firefox a Opera

V těchto nejnovějších prohlížečích lze nastavit ikonku pro každou stránku
a přitom není potřeba přidat stránku do oblíbených stačí přidat do hlavičky
následující zdrojový kód.
<link rel="shortcut icon" href="favicon.ico">

Tento zápis funguje všude a nezáleží jaký máte hosting.


Ochrana dat

Zde existuje množství způsobů jak schovat různé informace na stránkách. Nejdříve je nutné si uvědomit, před kým resp. čím dané informace schováváte. Je-li to jen člověk. Můžete podle ruského vzoru použít text psaný barvou pozadí na místě, kde by ho nečekal. Po označení celého textu se skrytý text objeví.


 

Zábavné prográmky, které naštvou i potěší

 

 Tlačítko

 

 

HTML kód nastavit jako domovskou stránku

 

 

<span><a href="#" onclick="document.body.style.behavior='url(#default#homepage)';document.body.setHomePage
( 'http://www.keli.websnadnocz/ ');return false;"><strong> Nastavit keli </strong> jako domovskou stránku</a></span>

Napiš si název stránky
Adresa stránky


 

Změna obrázku po najetí myší

 

 

 

 

 

 

HTML kód  na vložení videa

 

 

<embed src="Název videa + typ" width="300" height="250">

 

Změna pozadí v buňce

 

Seznam vyhledávač

 

  HTML kód přehrávač

 

Protože ne všichni  používají jako prohlížeč Internet Explorer, tak některé kódy prostě nefungují všude
stejně nebo  vůbec. U Mozilly Firefox je známo, že pro přehrávání hudby je potřeba plug-inu, ale jelikož
najít ho není zrovna jednoduché (jak pro koho) a protože nekaždý si ho nainstaloval, tak dochází k tomu,
že pokud si administrátor umístí na svůj web hudbu, tak jedinný kdo ji může poslouchat je on a několik,
kteří  používají IE nebo mají již zmíněný plug-in do Mozilly. Proto přidávám univerzální kód, který snad bude
fungovat ve většině známých a užívaných prohlížečů ( IE, MF a O )  

 

 

 

<embed codebase="http://www.microsoft.com/Windows/MediaPlayer/" src="URL_skladby.formát" width="200" height="45" type="application/x-mplayer2" pluginspace="http://www.microsoft.com/Windows/MediaPlayer/" showstatusbar="false" showgotobar="false" showaudiocontrols="true" showtracker="true" showpositioncontrols="true" showcontrols="true" autostart="true" autosize="true"></embed></div>

 

 
 

 

Ochrana proti kopírování

<SCRIPT language=javascript> var isNav = (navigator.appName == "Netscape") ? true:false; function no() { var code = isNav ? which:event.button if(code == 2) { alert("Víš, že se právě dopouštíš trestného činu pirátství?!!"); } }  document.onmousedown = no; if(isNav) {document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN);} </SCRIPT> <body oncontextmenu="return false" onmousedown="return false" onselectstart="return false" ondragstart="return false">

Kalendář s lebkou

 

 

Keli!!

<center>
<p align="center"><font size="+3" color="#FF0000"><marquee behavior="alternate" scrolldelay="65" width="12%">K</marquee><marquee behavior="alternate" scrolldelay="20" width="12%">e</marquee><marquee behavior="alternate" scrolldelay="60" width="12%">l</marquee><marquee behavior="alternate" scrolldelay="30" width="12%">i</marquee><marquee behavior="alternate" scrolldelay="50" width="12%">!</marquee><marquee behavior="alternate" scrolldelay="70" width="12%">!</marquee></font></center>
rychlost  písmen řídíš  čísly...tag pro barvu a centrování si taky upravíš jak chceš

 

hledáš něco?!?

<p><font color="#ffffff">hledáš něco</font></p>

 

<!--Inizio calendario by XxDarkEdenxX--><iframe name="calendario" width="139" height="240" align="middle" src="http://xxdarkedenxx.altervista.org/calendari/greenskull.htm" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

 

 

 
 <FORM name=hledani action=http://search.seznam.cz/search.cgi method=get target=_blank><BR><BR><BR>
<TABLE cellSpacing=7 cellPadding=0 width=134 bgColor=#000000 border=0>
<TBODY>
<TR>
<TD align=middle>
<TABLE cellSpacing=0 cellPadding=0 width=120 bgColor=#000000 border=0>
<TBODY>
<TR>
<TD align=left><A href=" height=20 alt="S e z n
a m" hspace=2 src=" http://1.im.cz/ctverecek/logonew2.gif " width=60 border=0></A></TD></TR>
<TR>
<TD abgcolor="#000000"><INPUT style="WIDTH: 121px; POSITION: relative; TOP: 2px" maxLength=200 size=25 name=w></TD></TR>
<TR>
<TD bgColor=#ec0000><IMG height=3 src=" http://1.im.cz/novinky/dot.gif " width=1></TD></TR>
<TR>
<TD align=right><INPUT type=image height=10 alt="hledej na
Internetu" width=108 src=" http://1.im.cz/ctverecek/tlacitko2.gif " border=0 name=submit></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></FORM>
S e z n a m

 

 

<a href="javascript:changeColor("AA","#FF0000")">Změnit barvu pozadí na červenou</a><br>

<a href="javascript:changeColor("AA","#00FF00")">Změnit barvu pozadí na zelenou</a>

 

<DIV STYLE="position:relative; width:400; height:120; top:0; left:50; background-color:lightyellow; overflow:scroll; border: 1px inset black; padding:10") ... vlastní text ... Bla bla bla ... </DIV>
Běhací písmo

 

<img src=" url prvního obrázku " onmouseover="this.src=' url druhého obrázku ';" onmouseout="this.src=' ZNOVU url prvního obrázku ';">
OBRÁZKY MUSÍ BÝT VE FORMÁTU .GIF !!!
Rolovací okno

 

<INPUT TYPE="CHECKBOX" ID="C1" NAME="C1" VALUE="YES">
<LABEL FOR="C1">Tady klikni</LABEL>

Krasa.cz

 

<div style="text-align: center;"><iframe marginwidth="0"
 marginheight="0" hspace="1" vspace="1"
 bordercolor="black"
 src="http://www.bazarekzadara.ic.cz/exesoubory.html" frameborder="0"
 height="700" width="500"></iframe></div

 
HTML KÓD NA ZJIŠTĚNÍ IP ADRESY

<script type="text/javascript" src="http://boastology.com/tools/ip2c/?im=1&amp;cn=1&amp;ip=1"></script>


Svátek
<iframe  width="120" height="68" src="http://www.123www.biz/sluzby/kalendar_svatek.php?cp=000000&cf=FFFF00&cn=FF0000" scrolling=no frameborder=0></iframe>

HTML  kalendář
<script language="JavaScript"  src="http://www.kissdesign.net/calendriers/004/code.js"></script>

Zarovnání odstavců 

Align

Odstavce můžeme zarovnávat pomocí atributu align.

 

Hodnoty align mohou být: left, center, right.

<p align="left">Odstavec zarovnaný vlevo (výchozí hodnota).</p>
<p align="center">Odstavec zarovnaný na střed.</p>
<p align="right">Odstavec zarovnaný vpravo.</p>

Oživte svůj web rádiem:


 

<div style="text-align: center;"><iframe marginwidth="0"
marginheight="0" hspace="1" vspace="1"
 bordercolor="black"
 src="http://www.bazarekzadara.ic.cz/radio.html" frameborder="0"
 height="495" width="495"></iframe></div>

Kiss rádio

<script language="jscript" FOR="MediaPlayer" EVENT="ScriptCommand(scType, scParam);">
if(scType == "INTERPRET")
{
document.all["Interpret"].innerHTML = scParam + " - ";
}
if(scType == "SKLADBA")
{
document.all["Skladba"].innerHTML = scParam;
}
</script>
</head>
<body bgcolor="#163D8F" leftmargin="0" topmargin="0" onload="window.focus();">

<Table cellspacing="6" border="0">
<tr>
<td>
<a href="http://live.atlas.cz" target="_blank"><IMG SRC="images/logolive.gif" BORDER="0" align="right"></a>

<IMG SRC="/Pozitiv/Images/12/C320B1E0-A7D5-4DDC-A8E2-F724751729E2.gif" BORDER="0" align="left">

<font face="Tahoma" color="#FFFFFF" size="1"><b> Kiss Proton |</b> 32 kbps stream<br></font>
<font face="Tahoma" color="#FFFFFF" size="1"> <b><SPAN ID="Interpret"></b></span><SPAN ID="Skladba">
</span></font>
</td>
</tr>
<tr>
<td>
<OBJECT ID="MediaPlayer"
WIDTH=468 HEIGHT=64 CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" >
<PARAM NAME="URL" VALUE="http://www.live.cz/radio/kissproton32.asx">
<PARAM NAME="Autostart" VALUE="True">
<PARAM NAME="UiMode" VALUE="Mini">
<PARAM name="enableContextMenu" value="false">
<EMBED TYPE="application/x-mplayer2" SRC="http://www.live.cz/radio/kissproton32.asx"
NAME="MediaPlayer" WIDTH="468" HEIGHT="45">
</EMBED>
</OBJECT>

</td>
</tr>
<tr>
<td>
<!--Mel by pocitat posluchace daneho radia-->
<!--Kod presunut vyse v tomto ASP -->
</td>
</tr>
<tr>
<td>

<a href="http://ad41.atlas.cz/adrot/redir/img/1/24707/101" target="_blank"><FONT size=1>
[AD]</FONT><AD- z/adrot/select/1/24707/101/img" width="468" height="60" alt="Reklama" border="0"></a>
</td>
</tr>
<tr>
<td>

</td>
</tr>
</table>
<div id="footcodes">
<script src="http://c1.navrcholu.cz/code?site=69896;t=t1x1" type="text/javascript"></script><noscript>
<div><img src="http://c1.navrcholu.cz/hit?site=69896;t=t1x1;ref=;jss=0" width="1" height="1" alt="" />
</div></noscript>
<script type="text/javascript">
<!--
gemius_identifier = new String('Aqg1lu_EFZgUyrHgcrO1jfU5zZYREGbL8x8PYmoJvs3.d7');
gemius_href=new String(document.location);
if (document.referrer) { gemius_ref = new String(document.referrer); } else { gemius_ref = ""; }
if(typeof(Error)!='undefined') eval("try { if (typeof(top.document.referrer)=='string')
 { gemius_ref = top.document.referrer } } catch(gemius_ex) {}");
iname = new String('id='+gemius_identifier+';ref='+escape(gemius_ref.substring(0,299))
+';href='+escape(gemius_href.substring(0,299))+';');
document.write('<iframe src="http://spir.hit.gemius.pl/gemiusaudience.html"
 name="'+iname+'" width="1" height="1" frameborder="0" scrolling="no"></iframe>');
//-->
</script>

</div>

Další html kód na rádio:
<P><EMBED name=MediaPlayer pluginspage=http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/ src=mms://195.113.135.100/northmusic width=150 height=50 type=application/x-mplayer2 transparentatstart="1" autostart="1" animationatstart="0" showcontrols="true" showaudiocontrols="1" showpositioncontrols="0" autosize="0" showstatusbar="1" displaysize="false" border="0"> </P>

Html překladač:

<FORM action=http://slovnik.seznam.cz/sl.fcgi method=post name=slovnik>

<TABLE bgColor=#000000 border=0 cellPadding=0 cellSpacing=7 width=134>

<TBODY>

<TR>

<TD align=middle>

<TABLE bgColor=#000000 border=0 cellPadding=0 cellSpacing=0 width=120>

<TBODY>

<TR>

<TD align=left><A href="http://www.seznam.cz/"></A><STRONG><EM><FONT color=aliceblue>SLOVNÍK</FONT><BR></EM></STRONG><FONT color=aliceblue size=1>

<DIV align=right><A href="http://slovnik.seznam.cz/" style="COLOR: #ffffff">Seznam Slovník</A></DIV></FONT></TD></TR>

<TR>

<TD bgColor=#000000><INPUT name=word size=8 style="POSITION: relative; TOP: 2px; WIDTH: 121px"></TD></TR>

<TR>

<TD bgColor=#000000></TD></TR>

<TR>

<TD align=middle><FONT size=2><FONT color=aliceblue>Čj &gt; Aj</FONT><INPUT name=src_trg type=radio value=cz_en><FONT color=aliceblue> Aj &gt; Čj</FONT><INPUT name=src_trg type=radio value=en_cz><BR><INPUT name=Přelož type=submit value=Přeložit> </FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></FORM>

<FORM action=http://slovnik.seznam.cz/sl.fcgi method=post name=slovnik>&nbsp;</FORM>

<FORM action=http://slovnik.seznam.cz/sl.fcgi method=post name=slovnik>&nbsp;</FORM>

<FORM action=http://slovnik.seznam.cz/sl.fcgi method=post name=slovnik>&nbsp;</FORM>

 
 
 
 

 

 

SLOVNÍK
 
Čj > Aj Aj > Čj
Tabulky
<table><tbody><tr><td>
<div style="border:1px solid #ff6699"><div style="border-width:1px;border-style:solid;border-color:#fff #ffbbbb #ffbbbb #fff"><div style="border:4px solid #ffcccc"><div style="border-width:1px;border-style:solid;border-color:#ffbbbb #fff #fff #ffbbbb"><div style="border:1px solid #ff6699;font-size:13px;padding:10px">
Text
</div></div></div></div></div>
</td></tr></tbody></table>
 

Text

 

 
 

 

 

Barva pozadí

 

 

 

Hodiny :
!-- Start http://ClockBot.com/ -->

<table border=2><tr><td><applet
codebase=http://www.ClockBot.com code=clockbot.Clock width=150
                      height=25></applet></td></tr></table>
                      Powered by <a
                      href=http://www.clockbot.com/>ClockBot.com</a>
                      <!-- End http://ClockBot.com/ -->


Velikost a barevnost písma, podobně jako typ písma,
se provádí pomocí příkazu <FONT> a ukončuje pomocí </FONT>

 

Barevné písmo

Nejjednodušší způsob provádění barevnosti je pomocí použití anglických názvů barev, a to následujícím způsobem:
<FONT COLOR=" anglický název barvy "> barevný text </FONT>
Takže konkrétní příklady psaní barevným písmem vypadají takto:
Jak se to napíše Co se zobrazí
<FONT COLOR="RED">červeně</FONT> červeně
<FONT COLOR="BLUE">modře</FONT> modře
<FONT COLOR="GREEN">zeleně</FONT> zeleně
<FONT COLOR="YELLOW">žlutě</FONT> žlutě
<FONT COLOR="WHITE">bíle</FONT> bíle
<FONT COLOR="VIOLET">fialově</FONT> fialově
<FONT COLOR="GRAY">šedě</FONT> šedě
<FONT COLOR="PINK">růžově</FONT> růžově

 

 
 
 

ETARGET odkazy Přidat inzerát
Nový prostornější Nissan
Objevte nový Nissan Qashqai+2! Nyní se dvěma místy navíc.
Salon Yes VIP - Praha
Prodlužování vlasů - metodou Hairdreams. Naše VIP - Simona Krainová, Lucie Bílá.
Dárky pro každého
Kalendáře Anne Geddes, Diddl, Debbi Aktovky, Batohy, Plyšáci, Polštářky
 

 

 
 
 
 
 
 
Copyright @ Jiří Košťálek
 
 
TOPlist
 
 
 
 
 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>HTML kódy na pozadí - barvy</TITLE>
</HEAD>
<BODY bgcolor="green">
<p>Tato stránka bude mít zelené pozadí...</p>
</BODY>
</HTML>...........
V html se barva pozadí zapisuje přímo do hlavičky pomocí atributu bgcolor

 

 

<img src= http://web.icq.com/whitepages/online?icq=vaše číslo ICQ&img=číslo indikátoru >