Az itt leírtakról bővebben, a fenti témakörökben olvashatunk.

Ha valamit elfelejtettünk, a következő részekből átmásolhatjuk

Div a divben | Szöveg görgetése | Gördülő szöveg | Kép bemutató | Diakép bemutató | Csúsztatott diaképek | Pontos idő belépéskor | Utolsó modosítás | Lábléc

Egy div szakaszban, kettő div szakasz

Egy div szakaszon belül, kettő div szakasz
XHTML lapon:
<div id="fejlec">
<div id="fejegy"> </div>
<div id="fejketto"> </div>
</div>

CSS, azaz stíluslapon:
#fejlec {width: 770px; height: ... px; border: 2px solid #0f0;}
#fejegy {float: left; width: 60px; margin-top:5px; margin-left: 5px; border: 1px solid #f00;}
#fejketto {float: right; width:650px; height: ....px; margin: 5px; padding: 5px; border: 1px solid #00f;}

Vissza a lap elejére

Szöveg görgetése

Megírása azon XHTML lapon, melyen megjelenítjük a görgető ablakot.
<div id="gorgetes">
<table>
<tr>
<td valign="top"><h1 class="gorh1">Címsor megírása.(nem kötelező!)</h1>
<IFRAME src="görgetendő_fájl_neve.html" frameborder="0" width=430 height=295>
</IFRAME>
</td>
</tr>
</table>
</div>

CSS megírása azon XHTML laphoz, melyen megjelenítjük a görgető ablakot.
#gorgetes { margin-top: 20px; margin-left: 90px;}
.gorh1 {text-align: center; color: #ffffff; border-bottom: 2px solid #fff;}

Azon XHTML lap megírása, melynek tartalmát görgetni akarjuk.
<html> <head>
<title>XHTML fájl elnevezése, vagy egy rövid szöveg a tartalomról</title>
<link href="Stíluslap fájl neve.css" rel="stylesheet" type="text/css" />
</head> <body>
<table width="90%" border="2" cellpadding="5" summary="Mit tartalmaz a táblázat.">
<tr> <td>
<h3>Témakör címsora</h3>
<p>Tartalom megírása </p>
</td> </tr>
</table> </body> </html>

CSS fájl megírása azon XHTML laphoz, melynek tartalmát görgetni akarjuk.
body { background-color: #FF0000; }
body,td,th {color: #FFFFFF; }
h1, h2, h3, h4 {text-align: center;}
h2 {padding-top: 1em; border-top: 2px solid #ffffff;}
h4 {font-size: 20pt; padding-top: 2em; border-top: 2px solid #ffffff; border-bottom: 1px solid #ffffff;}
table {margin-left: 5px;}
p {font-size: 10pt; line-height: 150%;}

Vissza a lap elejére

Automatikusan gördülő szövegablak.

Megírása XHTML lapon
<head>
<title>Mozgó szövegablak</title>
<script language="JavaScript" type="text/javascript" src="java_fájl_neve.js">
</script>
<link rel="stylesheet" type="text/css" href="Stíluslap_fájl_neve.css">
</head>
<body>
<div id="szovegablak">
<div id="szoveg">
<p>Szöveg megírása. </p>
</div>
</div>

CSS fájl megírása
#szovegablak { position: relative; width: 400px; height: 350px; margin-left: 150px; overflow: hidden; border: 5px solid red; background-color: #f63; }
#szoveg { position: absolute; width: 300px; left: 45px; top: 100px; background-color: #ff0000;}
#szoveg p { color: #000000; padding: 0px 10px 0px 10px; }

JavaScript fájl megírása
var pos=100 ; function Scroll ( )
{ if (!document.getElementById) return ; obj=document.getElementById("szoveg") ;
pos -=0.5;
if ( pos < 0-obj.offsetHeight+130) return ; obj.style.top=pos;
window.setTimeout ("Scroll ( ) ; ",30) ; }
window.onload = Scroll;

Vissza a lap elejére

Képeink bemutatása

Készítsünk egy külön mappát, melyben a képfájlokat (képeinket) tároljuk.
A nagykép megtekintése után, visszalépni a böngésző ablakában lévő vissza nyíllal lehet.
Megírása stílusokkal együtt, az XHTML lapon.
Stílusok megírása a head szakaszban:
<head>
<title> Kepeink, bemutatása </title>
<style type="text/css">
body {background-color: #ccc; }
h1, h2 {text-align: center;} h1 {border-bottom: 2px solid black;}
.kepek {clear: left; }
.kepek img { float: left; padding-right: 15px; padding-bottom: 5px; }
p {font: 1em Arial ; color: black; text-align: left; }
</style>
</head>

Kiskép és szöveg elrendezése.
Ebből a div szakaszból annyit készítünk, ahány képünk van.
<div class="kepek">
<p>
<a href="Képet tároló mappa/nagykép_fájl_neve.jpg"><img src="Képet tároló mappa/kiskép_fájl_neve.jpg" alt=" ... " width="200" height="110" border="0" />
</a>
....... ..... írjunk a képről egy rövid ismertetőt. ... .......
</p>
</div>

Vissza a lap elejére

Diakép bemutató

Megírása XHTML lapon
<head> <title>Diabemutató</title>
<script language="javascript" type="text/javascript" src="javascript fájl neve.js" >
</script>
<link href="css fájl neve.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="kepek">
<img class="diakep" src="kep1.jpg" width="400" height="300">
<img class="diakep" src="kep2.jpg" width="400" height="300">
<img class="diakep" src="kep3.jpg" width="400" height="300">
<img class="diakep" src="kep4.jpg" width="400" height="300">
<img class="diakep" src="kep5.jpg" width="400" height="300">
</div>
</body>

CSS fájl megírása.
#kepek { width: 450px; margin-left: 150px;}

JavaScript fájl megírása. 

var diakepek=0, aktualiskep=0; var diakep=new Array( ) ;
function DiakepBemutato( )  
{ imgs=document .getElementsByTagName ("img") ;
   for (i=0 ; i<imgs.length; i++) 
      { if ( imgs [ i ] .className  != "diakep") continue ;
        diakep [diakepek]=imgs [ i ];
       if (diakepek==0) { imgs [ i ].style,display="block" ; } 
       else { imgs [ i ].style.display="none" ; }

         imgs [ i ].onclick=KovetkezoDiakep ; diakepek++ ;
      } 
}  

function KovetkezoDiakep ( )   
 { diakep [aktualiskep].style.display="none"; aktualiskep++ ; 
   if (aktualiskep >= diakepek) aktualiskep=0; 
   diakep [aktualiskep] .style.display="block" ; }

window.onload=DiakepBemutato ;

Vissza a lap elejére

Csúsztatott_diaképek

Megírása XHTML lapon
<head>
<title>Csúsztatott_diaképek</title>
<link rel="stylesheet" type="text/css" href="CSS fájl neve.css">
<script language="javascript" type="text/javascript" src="javascript fájl neve.js" > </script>
</head>
<body>
<div id="diakepek">
<img class="diakep" src="kep1.jpg" width="400" height="300">
<img class="diakep" src="kep2.jpg" width="400" height="300">
<img class="diakep" src="kep3.jpg" width="400" height="300">
<img class="diakep" src="kep4.jpg" width="400" height="300">
<img class="diakep" src="kep5.jpg" width="400" height="300">
</div>
</body>

CSS fájl megírása.
#diakepek {position: relative; overflow: hidden; width: 400px; height: 300px; margin-left: 200px; }
img.diakep {position: absolute; left: 0px; top: 0px;}

JavaScript fájl megírása.
var diakepek=0; var aktualiskep= 0, elozodia= 4; var x= 0 ; var diak = new Array( ) ;
function DiakepBemutato ( ) { imgs=document .getElementsByTagName ("img") ;
for (i=0 ; i<imgs.length; i++)
{ if ( imgs[ i ] .className != "diakep") continue ; diak [diakepek] = imgs [ i ] ;
if (diakepek== 0 )
{ imgs [ i ] .style.zIndex=10; } else { imgs [ i ] .style.zIndex=0; }
imgs[ i ] .onclick=KovetkezoDiakep; diakepek++; }
}
function KovetkezoDiakep ( ) { diak [aktualiskep].style.zIndex= 9; diak [ elozodia ].style.zIndex=0 ; elozodia = aktualiskep ; aktualiskep++; if (aktualiskep>=diakepek) aktualiskep = 0 ; diak [aktualiskep] .style .left= 400; x= 400; diak [aktualiskep] .style .zIndex=10; AnimaciosDiakep ( ) ; }
function AnimaciosDiakep ( ) { x= x - 4; diak [aktualiskep].style .left= x; if ( x > 0 )
window.setTimeout ("AnimaciosDiakep ( ) ; " ,10 ) ; }
window.onload = DiakepBemutato;

Vissza a lap elejére

Pontos idő belépéskor, vagy oldal frissítésekor.

Megírása XHTML lapon
<script language="JavaScript" >
now = new Date ( ) ;
hours = now.getHours ( ) ;
mins = now.getMinutes ( ) ;
secs = now.getSeconds ( ) ;
document.write (" <h1>") ;
document.write ( hours + " : " + mins + " : " + secs );
document.write ("</h1>");
</script>

Megjelenése a monitoron.

Vissza a lap elejére

A HTML lap utolsó modosításának ideje

Megírása XHTML lapon
<div id="datum">
<p> Modosítás dátuma és ideje: Hónap / Nap / Év sorrendben.
<h1><script language="JavaScript" type="text/javascript">
document.write (document.lastModified) ;
</script>
</h1>
</p>
</div>


Megjelenése a monitoron.

Modosítás dátuma és ideje: Hónap / Nap / Év sorrendben.

Vissza a lap elejére

Lábléc

Lábléc div szakasza.
XHTML lapon:
<div id="footer">
<p> Szöveg megírása </p>
</div>

Css, azaz stíluslapon:
#footer {clear: both; font-size: 80%; color: #999; margin-top: 4em; }

Vissza a lap elejére

 

 

Weblap