HTML-kódokas

Ezen az oldalon pár html -kóddal készíthető designes dolgot fogok mutatni,
de előtt egy kis html "elmélet", hogy később jobban tudjátok alakítani a szövegeket.
(amiket leírok "elmélet néven azt magamtól találtam ki szóval nem feltétlen jó de nálam beváltak :)

 

Szöveg szerkesztés/szépítés | Hátlap/lap design | Egér | Görgetős szövegdoboz | Üdvözlő szövegek | Lapot mozgató nyilak | Hozzáadás a kedvencekhez


A kódok ból veszem ki a példákat és így magyarázom a dolgokat és amit tudok azt be is mutatok :)

Elmélet:
(itt a frontpage-ben tapasztalt észrevételeimet írom le máshol ez lehet, hogy máshogy van...)

width: "200"    //ez azt jelenti hogy milyen szélességig ban a szöveg ha eléri a határt a szöveg akkor új sort kezd (itt: 200 px ~ pixel)

 width: 100-al nem fér el 1 sorban                            width: 200-al igen

Itt pl a lejjebb látható elsötétülő szöveg látszik width: 100 -al mellette width: 200 all láthatod. Persze ezt mindig a szöveg hosszához érdemes igazítani meg ahhoz, hogy hogyan szeretnéd látni :)

----------------------------------------------------------------------

height: "0"    //ez ugyan olyan mint a width csak ez a szöveg alatt lévő távot jelenti. Vagyis minél nagyobb annál nagyobb helyet hagy ki utána a következő szöveg íráshoz a program.

 ide jöhet a szöveg
Ide tudsz legközelebb alá írni a szövegnek height: 50 -nél szóval sztem ezt érdemes 0-ra tenni ((a kódok ban ez általában 0 is )) de Te dontessz!

----------------------------------------------------------------------

color= "black"/"#FFFFFF"
//ez a kódokban szöveg illtve az "animáció" színét jelzi. Legtöbb helyen elfogadja az alapszínek nevét (pl.: black, yellow, pink...) de ha nem ilyen színt szeretnél akkor pedig szín kódot kell beírnod ami pedig egy #-ből és 6db betű és/vagy szám kombinációjából tevődik össze. Egyik legegyszerűbb megoldás a színkód kiderítésére: mondjuk egy új oldalra írsz egy kis szöveget kijelölöd, beállítod a kívánt színre a szöveget és utána a "Kód" nézetben pedig kimásolod a színkódot. pl.: asdgahígdh ennek a színnek a kódja: #336600. Vagy felmész erre
(<color= "#FFFF00") az oldalra és keresel valamilyen jó színt.

Pár alap szín kódja:

#000000
#FFFFFF
#C0C0C0
#808080
#FFFF00
#FF0000
#800000
#FF00FF
#00FFFF
#0000FF
#00FF00
#008000

----------------------------------------------------------------------

size= "3"
//ez a betűméret, a FrontPage-ban használtak szerint = 3 (12pt) ~ a word 12es betűméretének felel meg.

----------------------------------------------------------------------

face= "Arial"
//betűtípus

                                         Lap teteje | Főoldal

Szöveg szerkesztés/szépítés | Hátlap/lap design | Egér | Görgetős szövegdoboz | Üdvözlő szövegek | Lapot mozgató nyilak

 

Szöveg szerkesztés/szépítés


 

   Glow 1

<span style="position:relative; width:200; height:0; filter:glow(color=#FFFF00,strength=2)">IDE JÖN A SZÖVEG</SPAN>

szöveg színét pedig egyszerűen beállítod a "Tervezés" nézetben.

Lap teteje | Főoldal


 Elsötétülő szöveg

Ebben a fajtában az a jó h bármilyen színűre beállíthatod a "Tervezés" módban a szöveget :)

<span style="width: 100; height: 0; font-size: 20px; font-family: verdana; color: #808000; filter: alpha(opacity=100, finishopacity=0, style=1, startX=0, startY=0, finishX=200, finishY=0)">IDE JÖN A SZÖVEG</span><font color="#808000">
</font>

Lap teteje | Főoldal


 Elmosodó árnyékú szöveg

<span style="width: 300; height: 0; font-size: 20px; font-family: verdana; color: #FFFF00; filter: blur(add = 1, direction = 220, strength = 10)">IDE JÖN A SZÖVEG</span>

Lap teteje | Főoldal


 Felhívó szöveg

<span style="width: 900; height: 300; font-size: 25pt; font-family: Arial Black; color: black; text-align: center; Filter: Mask(Color=#FF0000)">IDE JÖN A SZÖVEG</span>

Itt a width és a height a doboz bnagyságát jelöli!

Lap teteje | Főoldal


 Üveges betük árnyékkal

<span style="width: 500; height: 0; font-size: 24pt; font-family: Arial Black; color: #FFFFFF; Filter: Blur(Add = 1, Direction = 125, Strength = 10)">IDE JÖN A SZÖVEG</span><td valign="top" height="578" width="109">



Lap teteje | Főoldal



Hátlap/lap design

Színátmenetes háttér:

<body style="filter:progid:DXImageTransform.Microsoft.Gradient (endColorstr='#000000', startColorstr='#FFFF00', gradientType='0');">

 ^    Két szín kódja             ^                                                  

Hóesés:

Látvány:

 

Kód:
Javaslom h ne állítsd túl nagyra a hópelyhek számát mert akkor belassul a géped!
Is itt semmit ne babrálj a hópehely képén, számán és a képernyőméreten kívül!

 

<script type="text/javascript" language="javascript1.2">
<!-- innen
/*
Letöltve a ThomasWebMűhely javascript archívumából:
http://www.thomas98.hu/webmuhely.php
*/
var snowsrc="http://www.freewebs.com/yang1984/snow.gif" // a hópehely kép url-je

var no = 20; // a hópelyhek száma a lapon

var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 1280, doc_height = 1024; // képernyő méretek

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i) {
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ns4up) {

document.write("<layer name='dot"+ i +"' left='15' top='15' visibility='show'><img src='"+snowsrc+"' border='0'></layer>");

} else if (ie4up||ns6up) {

document.write("<div id='dot"+ i +"' style='POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;'><img src='"+snowsrc+"' border='0'></div>");

}
}

function snowNS() {

for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i];
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", 10);
}

function snowIE_NS6() { // IE and NS6 funkció
for (i = 0; i < no; ++ i) {
yp[i] += sty[i];
if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth : document.body.clientWidth;
doc_height = ns6up?window.innerHeight : document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i];
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", 10);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
// eddig -->
</script>

EDDIG!!!!!!!!!!!!!!!!!!

Lap teteje | Főoldal


Ősz ~ falevél hullás:
Ide kellenek képek mert azt még nem találtam, és ha találsz jó képet akkor pls küld el nekem is :) darnet@citromail.hu
(úgy hogy ide nem is teszek látványt...)

 

<script type="text/javascript" language="javascript1.2">
<!-- innen
/*
Letöltve a ThomasWebMűhely javascript archívumából:
http://www.thomas98.hu/webmuhely.php
*/
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="al.gif";
Image1=new Image();
Image1.src=grphcs[1]="bl.gif"
Image2=new Image();
Image2.src=grphcs[2]="cl.gif"
Image3=new Image();
Image3.src=grphcs[3]="dl.gif"
Image4=new Image();
Image4.src=grphcs[4]="el.gif"
Image5=new Image();
Image5.src=grphcs[5]="fl.gif"

Amount=8;
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all)?1:0;

if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= Math.random()*5+3;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
var heightscroll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
var widthscroll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] > WinHeight){
Ypos[i]=-60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=Math.random()*5+3;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i]+heightscroll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
document.getElementById("si"+i).style.top=Ypos[i]+heightscroll;
}
else{
eval("document.all.si"+i).style.left=Xpos[i];
eval("document.all.si"+i).style.top=Ypos[i]+heightscroll;
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',20);
}

window.onload=fall
// eddig -->
</script>

EDDIG!!!!!!!!!!!!!!!!

Lap teteje | Főoldal


Keret az ablakra:

<BODY style="border-left: 15px ridge red; border-right: 15px solid red; border-top: 15px solid blue; border-bottom: 20px ridge green;">

Mindegyik oldalnek más-más színt tudsz megadni :)

Lap teteje | Főoldal



Lap teteje | Főoldal

 



Egér

Egy labda követi az egeret:
a labda képét neked kell betenni!

<script type="text/javascript" language="javascript1.2">
<!-- innen
/*
Letöltve a ThomasWebMűhely javascript archívumából:
http://www.thomas98.hu/webmuhely.php
*/
var stringcolor="black" //string color
var ballsrc="ball.gif" //képfájl elérési úttal

///A további részben ne változtass//////////////////////////

if (document.all&&window.print){
document.write('<IMG id=Om style="LEFT: -10px; POSITION: absolute" src="'+ballsrc+'">')
ddx=0;ddy=0;PX=0;PY=0;xm=0;ym=0
OmW=Om.width/2;OmH=Om.height/2
}

function Ouille(){
x=Math.round(PX+=(ddx+=((xm-PX-ddx)*3)/100))
y=Math.round(PY+=(ddy+=((ym-PY-ddy)*3-300)/100))
Om.style.left=x-OmW
Om.style.top=y-OmH
elastoc.to=x+","+y
//elastoc.strokecolor="RGB("+x+","+(2*y)+",0)"
elastoc.strokecolor=stringcolor
setTimeout("Ouille()",1)
}
function momouse(){
xm=window.event.x+5
ym=window.event.y+document.body.scrollTop+15
elastoc.from=xm+","+ym
}

if(document.all&&window.print){
code="<v:line id=elastoc style='LEFT:0;POSITION:absolute;TOP:0' strokeweight='1.5pt'></v:line>"} else {
code="<v:group style='LEFT:-10;WIDTH:100pt;POSITION:absolute;TOP:0;HEIGHT:100pt' coordsize='21600,21600'><v:line id=elastoc style='LEFT:0;WIDTH:100pt;POSITION:absolute;TOP:0;HEIGHT:100pt' strokeweight='1.5pt'></v:line></v:group>"}

if(document.all&&window.print){
document.body.insertAdjacentHTML("afterBegin",code)
document.onmousemove=momouse
Ouille()
}
// eddig -->
</script>



Lap teteje | Főoldal



Görgetős szövegdoboz

 

aasdfasdgadfghsgdkvjhgklvjhagljfvhgkdjdvhfgljfhvkghvk dfhvgkyljdhfgvkjhydfjgvkhyvyjhgvkjd khjv kyjhv kyjhbv jyghvb kjhdfygvkjygh dflhbj fg dbhyflvjh dfljogbh lxdjfb lxdjfbh lydbkvhxfgbv ljkxbcf vkh xgdfklv hbxljkc bh vldxfgvbgky dxhfg bllh

width és height a szövegdoboz magassága és szélessége, más dolgot nincs csak ezt akét paramétert megadni és gépelni :)

Kód:

<div style="width: 400px;height: 200px;overflow: scroll;">
szöveg szélesség magasság
enterekkel
elválasztva ...
</div>

Lap teteje | Főoldal



Lap teteje | Főoldal



Üdvözlő szövegek

Váltakozó szöveg:
kód elvileg jó (ugyan ez van a főoldalon is) de valamiért itt nem működik...
ha új sort akarsz írni akkor illesd be ezt a 0-s mögé és mindig sorban kell lennie a számoknak de amúgy annyit teszel be amennyit akarsz...
textStr[0] = "sor 1";
textStr[1] = "sor 2";
textStr[2] = "sor 3";
textStr[3] = "sor 4";....

 

<script type="text/javascript" language="javascript">
<!-- innen
/*
Letöltve a ThomasWebMűhely javascript archívumából:
http://www.thomas98.hu/webmuhely.php
*/

var beforeMsg = "<CENTER><P><B>";
var afterMsg = "</B></P></CENTER>";
var msgRotateSpeed = 2000; // Váltás üteme (millisec.)
var textStr = new Array();
textStr[0] = "Anyí sort írsz amennyit akarsz!";
textStr[1] = "Beállíthatod a váltás idejét!";
if (document.layers) {
document.write('<ilayer id="NS4message" height=25 width=100%><layer id="NS4message2" height=25 width=100%></layer></ilayer>')
temp = 'document.NS4message.document.NS4message2.document.write(beforeMsg + textStr[i++] + afterMsg);'+
'document.NS4message.document.NS4message2.document.close()';
}
else if (document.getElementById) {
document.write(beforeMsg + '<div id="message" style="position:relative;">IE division</div>' + afterMsg);
temp = 'document.getElementById("message").firstChild.nodeValue = textStr[i++];';
}
else if (document.all) {
document.write(beforeMsg + '<div id="message" style="position:relative;">IE division</div>' + afterMsg);
temp = 'message.innerHTML = textStr[i++];';
}
var i = 0;
function msgRotate() {
eval(temp);
if (i == textStr.length) i = 0;
setTimeout("msgRotate()", msgRotateSpeed);
}
window.onload = msgRotate;
// eddig -->
</script>

 

Lap teteje | Főoldal



Lapot görgető nyilak

 

<head> -ba másold!

Egy új lapnál így néz ki a <head> kódja és az IDE helyre másold be a kódot úgy, hogy ne legyen közte enter:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
<title>Új lap - 2</title>
IDE
</head>
 

<script type="text/javascript" language="javascript">
<!-- innen
/*
Letöltve a ThomasWebMűhely javascript archívumából:
http://www.thomas98.hu/webmuhely.php
*/

var isNS=(document.layers);
var _all=(isNS)? '' : 'all.' ;
var _style=(isNS)? '' : '.style' ;
var _visible=(isNS)? 'show' : 'visible';
var w_x, w_y, item, okscroll=false, godown;
function init(){
item=eval('document.'+_all+'item'+_style);
getwindowsize();
item.visibility=_visible;
scrollpage();
}
function getwindowsize() {
w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
w_y=(isNS)? window.innerHeight : document.body.clientHeight;
(isNS)? item.clip.width=42: item.width=42;
(isNS)? item.clip.height=20 : item.height=20;
moveitem();
}
function resizeNS() {
setTimeout('document.location.reload()',400);
}
function moveitem() {
if (isNS) {
item.moveTo((pageXOffset+w_x-150),(w_y+pageYOffset-100)) // a nyilak helyzete
}else{
item.pixelLeft=document.body.scrollLeft+w_x-150; // a nyilak helyzete
item.pixelTop=w_y+document.body.scrollTop-100; // a nyilak helyzete
}
}
window.onload=init;
(isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ;
function scrollpage() {
status = '';
if (okscroll) {
if (godown) {
(isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ;
} else {
(isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ;
}
}
moveitem();
setTimeout('scrollpage()', 40);
}
// eddig -->
</script>
<STYLE type="text/css">
<!--
#item {position:absolute; visibility:hidden; left:0px}
-->
</STYLE>

-----------------------------

<body> -ba másold!

<!-- a forráskód végére, a /BODY elé másolni -->
<DIV id="item">
<a href="javascript:void(0)"
onMouseover="okscroll=true; godown=false" onMouseout="okscroll=false"><img src="http://velenceito.hu/terkep/nyil-fel.gif" border="0"></a>
<a href="javascript:void(0)" onMouseover="okscroll=true; godown=true"
onMouseout="okscroll=false"><img src="http://www.canga.hu/seonyar2008/files/nyil-le_m.gif" border="0"></a>
</DIV>

a nyilakat nyugodtan kicserélheted az    <img src="........"border="0"> ba illeszd be a kép URL címét! (a ... helyére)



Lap teteje | Főoldal



Hozzáadás a kedvencekhez

 

<FORM>
<INPUT TYPE="BUTTON" VALUE="IDE ÍRHATOD A SZÖVEGET!" onClick='window.external.AddFavorite(location.href, document.title);'>
</FORM>