For You And For Me *** Mỗi bạn một website!

Các mã HTML hay nhất

Trang này chúng tôi sẽ cung cấp cho bạn những mã HTML,Java độc đáo nhất, hay được sử dụng nhất để bạn có thể tùy biến tạo ra cho mình một Website cá nhân không chuyên nghiệp thì cũng phải độc đáo. Hãy đọc [hướng dẫn]!

Bạn chọn mã nào?

Các mã JavaScript hay

Các mã HTML Hay

Nước chảy mây trôi

Đồng hồ bay theo chuột

Hiệu ứng tuyết rơi

Cấm chuột phải

Chữ chạy trong thanh trạng thái

Tạo màu cho chuột

Chiếu sáng liên kết

Tạo ảnh nền dính

Tạo ảnh nền trượt

Nhạc nền cho web

Thay đổi kiểu chuột

http://web.good.to

Hướng dẫn:

Để sử dụng các đoạn mã dưới đây bạn hãy chuyển chế độ soạn thảo của FrontPage sang Code( Soạn thảo bằng mã HTML) . Sau đó Copy đoạn mã này và dán vào vị trí được hướng dẫn.

Hãy nhớ: Java Scrip thì đẹp nhưng thường làm chậm web của bạn. Trên trang này tôi đã áp dụng đoạn Java Scrip "Đồng hồ bay theo chuột"

Chú ý:

Nếu tôi không đề cập đến vị trí đặt mã thì tức là bạn có thể đặt bất cứ chỗ nào sau thẻ <body>.

Coi như các trang web bạn đã chọn bảng mã là UTF-8

Lên trên

Các mã JavaScript hay:

Nước chảy mây trôi

Thay thẻ <body> bằng đoạn mã sau. Với đoạn mã java scrip này nền web của bạn sẽ trôi từ trên xuống như mây bay, trông khá thú vị. Kết hợp với nền nhạc nữa là bạn đã có thể tạo ra cho mình một khung cảnh thiên nhiên kỳ thú rồi đấy!

<BODY background=http:/xaydungcauduong.net/xdcd3/bgmay.jpg> <SCRIPT language=JavaScript>   </SCRIPT>

Lên trên

Đồng hồ bay theo chuột

<SCRIPT language=JavaScript> //Đồng hồ bay theo chuột. Sưu tầm: http://you.good.to dCol='red';//màu ngày. fCol='#3333ff';//màu mặt. sCol='Red';//màu kim giây. mCol='#0033ff';//màu kim phút. hCol='Black';//màu kim giờ. ClockHeight=50; //chiều cao đồng hồ ClockWidth=40; // chiều rộng đồng hồ ClockFromMouseY=0; ClockFromMouseX=100; //Alter nothing below! Alignments will be lost! d=new Array("CHỦ NHẬT","THỨ HAI","THỨ BA","THỨ TƯ","THỨ NĂM","THỨ SÁU","THỨ BẢY"); m=new Array( "THÁNG MỘT","THÁNG HAI ","THÁNG BA ","THÁNG TƯ ","THÁNG NĂM ","THÁNG SÁU ","THÁNG BẢY ","THÁNG TÁM ","THÁNG CHÍN","THÁNG MƯỜI ","THÁNG 11 ","THÁNG 12 "); date=new Date(); day=date.getDate(); year=date.getYear(); if (year < 2000) year=year+1900; TodaysDate=" "+d[date.getDay()]+" "+day+" "+m[date.getMonth()]+" "+year; D=TodaysDate.split(''); H='...'; H=H.split(''); M='....'; M=M.split(''); S='.....'; S=S.split(''); Face='1 2 3 4 5 6 7 8 9 10 11 12'; font='Arial'; size=1; speed=0.6; ns=(document.layers); ie=(document.all); Face=Face.split(' '); n=Face.length; a=size*10; ymouse=0; xmouse=0; scrll=0; props="<font face="+font+" size="+size+" color="+fCol+"><B>"; props2="<font face="+font+" size="+size+" color="+dCol+"><B>"; Split=360/n; Dsplit=360/D.length; HandHeight=ClockHeight/4.5 HandWidth=ClockWidth/4.5 HandY=-7; HandX=-2.5; scrll=0; step=0.06; currStep=0; y=new Array();x=new Array();Y=new Array();X=new Array(); for (i=0; i < n; i++){y[i]=0;x[i]=0;Y[i]=0;X[i]=0} Dy=new Array();Dx=new Array();DY=new Array();DX=new Array(); for (i=0; i < D.length; i++){Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0} if (ns){ for (i=0; i < D.length; i++) document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>'); for (i=0; i < n; i++) document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>'); for (i=0; i < S.length; i++) document.write('<layer name=nsSeconds'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>'); for (i=0; i < M.length; i++) document.write('<layer name=nsMinutes'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>'); for (i=0; i < H.length; i++) document.write('<layer name=nsHours'+i+' top=0 left=0 width=15 height=15><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>'); } if (ie){ document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < D.length; i++) document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</B></font></div>'); document.write('</div></div>'); document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < n; i++) document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</B></font></div>'); document.write('</div></div>'); document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < H.length; i++) document.write('<div id="ieHours" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>'); document.write('</div></div>'); document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < M.length; i++) document.write('<div id="ieMinutes" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>'); document.write('</div></div>') document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i=0; i < S.length; i++) document.write('<div id="ieSeconds" style="position:absolute;width:16px;height:16px;font-family:Arial;font-size:16px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>'); document.write('</div></div>') } (ns)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt){ ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY; xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX; } (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse; function ClockAndAssign(){ time = new Date (); secs = time.getSeconds(); sec = -1.57 + Math.PI * secs/30; mins = time.getMinutes(); min = -1.57 + Math.PI * mins/30; hr = time.getHours(); hrs = -1.575 + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/360; if (ie){ Od.style.top=window.document.body.scrollTop; Of.style.top=window.document.body.scrollTop; Oh.style.top=window.document.body.scrollTop; Om.style.top=window.document.body.scrollTop; Os.style.top=window.document.body.scrollTop; } for (i=0; i < n; i++){ var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style; F.top=y[i] + ClockHeight*Math.sin(-1.0471 + i*Split*Math.PI/180)+scrll; F.left=x[i] + ClockWidth*Math.cos(-1.0471 + i*Split*Math.PI/180); } for (i=0; i < H.length; i++){ var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style; HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll; HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs); } for (i=0; i < M.length; i++){ var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style; ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll; ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min); } for (i=0; i < S.length; i++){ var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style; SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll; SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec); } for (i=0; i < D.length; i++){ var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style; DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/180)+scrll; DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/180); } currStep-=step; } function Delay(){ scrll=(ns)?window.pageYOffset:0; Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed); Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed); for (i=1; i < D.length; i++){ Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed); Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed); } y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed); x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed); for (i=1; i < n; i++){ y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed); x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed); } ClockAndAssign(); setTimeout('Delay()',20); } if (ns||ie)window.onload=Delay; </SCRIPT>

Lên trên

Hiệu ứng tuyết rơi

<SCRIPT language=JavaScript1.2>      </SCRIPT>

Lên trên

Cấm chuột phải:

Đoạn mã sau có tác dụng hiện lên hộp cảnh báo khi người khác click chuột phải lên web của bạn. Chèn trước thẻ </HEAD>
<SCRIPT language=JavaScript>   </SCRIPT>

Lên trên

Chữ chạy trong thanh trạng thái:

Xem mẫu tại Website http://xd603.good.to

Lên trên

Tạo màu cho chuột:

Đoạn mã sau sẽ tạo 3 vệt màu chuyển động quanh chuột trông rất đẹp.
<script language="JavaScript"> //tao mau cho chuot --- http://web.good.to var a_Colour="red"; var b_Colour="blue"; var c_Colour="green"; var Size=50; var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0 ;step=0.03; if (document.layers){ window.captureEvents(Event.MOUSEMOVE); function nsMouse(evnt){ xpos = window.pageYOffset+evnt.pageX+6; ypos = window.pageYOffset+evnt.pageY+16; } window.onMouseMove = nsMouse; } else if (document.all) { function ieMouse(){ xpos = document.body.scrollLeft+event.x+6; ypos = document.body.scrollTop+event.y+16; } document.onmousemove = ieMouse; } function swirl(){ for (i = 0; i < 3; i++) { YDummy[i]=ypos+Size*Math.cos(ThisStep+i*2)*Math.sin((ThisStep)*6); XDummy[i]=xpos+Size*Math.sin(ThisStep+i*2)*Math.sin((ThisStep)*6); } ThisStep+=step; setTimeout('swirl()',10); } var amount=10; if (document.layers){ for (i = 0; i < amount; i++) { document.write('<layer name=nsa'+i+' top=0 left=0 width='+i/2+' height='+i/2 +' bgcolor='+a_Colour+'></layer>'); document.write('<layer name=nsb'+i+' top=0 left=0 width='+i/2+' height='+i/2 +' bgcolor='+b_Colour+'></layer>'); document.write('<layer name=nsc'+i+' top=0 left=0 width='+i/2+' height='+i/2 +' bgcolor='+c_Colour+'></layer>'); } } else if (document.all){ document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">' +'<div id="IDiv" style="position:relative">'); for (i = 0; i < amount; i++) { document.write('<div id=x style="position:absolute;top:0px;left:0px;width:'+i/2 +';height:'+i/2+';background:'+a_Colour+';font-size:'+i/2+'"></div>'); document.write('<div id=y style="position:absolute;top:0px;left:0px;width:'+i/2 +';height:'+i/2+';background:'+b_Colour+';font-size:'+i/2+'"></div>'); document.write('<div id=z style="position:absolute;top:0px;left:0px;width:'+i/2 +';height:'+i/2+';background:'+c_Colour+';font-size:'+i/2+'"></div>'); } document.write('</div></div>'); } function prepos(){ var ntscp=document.layers; var msie=document.all; if (document.layers){ for (i = 0; i < amount; i++) { if (i < amount-1) { ntscp['nsa'+i].top=ntscp['nsa'+(i+1)].top;ntscp['nsa'+i].left=ntscp['nsa'+(i+1)]. left; ntscp['nsb'+i].top=ntscp['nsb'+(i+1)].top;ntscp['nsb'+i].left=ntscp['nsb'+(i+1)]. left; ntscp['nsc'+i].top=ntscp['nsc'+(i+1)].top;ntscp['nsc'+i].left=ntscp['nsc'+(i+1)]. left; } else { ntscp['nsa'+i].top=YDummy[0];ntscp['nsa'+i].left=XDummy[0]; ntscp['nsb'+i].top=YDummy[1];ntscp['nsb'+i].left=XDummy[1]; ntscp['nsc'+i].top=YDummy[2];ntscp['nsc'+i].left=XDummy[2]; } } } else if (document.all){ for (i = 0; i < amount; i++) { if (i < amount-1) { msie.x[i].style.top=msie.x[i+1].style.top;msie.x[i].style.left=msie.x[i+1].style. left; msie.y[i].style.top=msie.y[i+1].style.top;msie.y[i].style.left=msie.y[i+1].style. left; msie.z[i].style.top=msie.z[i+1].style.top;msie.z[i].style.left=msie.z[i+1].style. left; } else { msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0]; msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1]; msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2]; } } } setTimeout("prepos()",10); } function Start(){ swirl(),prepos() } window.onload=Start; </script>

Lên trên

Các mã HTML Hay:

Chiếu sáng liên kết:

Có mấy bạn gửi thư hỏi tôi về mã dùng để "làm đỏ" liên kết như trên trang chủ của For You And For Me . Câu trả lời như sau:
Đoạn mã sau sẽ cho bạn có một trang mà liên kết sẽ có mà đỏ khi chỉ chuột vào! [Ví dụ] . Bạn Đưa nó vào trong tag <head>:
<STYLE>A:link { COLOR: blue; TEXT-DECORATION: none } A:visited { COLOR: blue; TEXT-DECORATION: none } A:active { COLOR: white; BACKGROUND-COLOR: red; TEXT-DECORATION: none } A:hover { COLOR: white; TEXT-DECORATION: none } A:hover { BACKGROUND-COLOR: red; TEXT-DECORATION: none } </STYLE>

Lên trên

Tạo ảnh nền dính:

Chữ sẽ dính vào nền. Ví dụ như ảnh nền cây tre trên trang này. Thay thẻ <body> bằng đoạn mã sau đây bạn sẽ có một nền web hoa đào tuyệt đẹp trong ngày xuân.

Lên trên

Tạo ảnh nền trượt:

Chữ sẽ trượt trên nền là hình ảnh của một vệ tinh bay trong vũ trụ trông rất ấn tượng. Nó hoạt động giống như ảnh nền trên trang chủ For You And For Me cũ

Lên trên

Nhạc nền cho web.

Khi truy cập web mà nghe thấy nhạc quả thật là rất thú vị phải không? Nhiều bạn hỏi làm thế nào để trang chủ you.good.to và 12a7.good.to có thể đưa nhạc nền vào. Việc này rất đơn giản, bạn chỉ cần đặt thẻ sau vào trang web, sau tag <body>:

Trong đó loop="1" nghiã là chạy một lần. Bạn có thể cho chạy nhiều lần. Nếu muốn nhạc phát liên tục không dừng thì bạn cho "-1".

Lên trên

Thay đổi kiểu chuột:

Bạn có muốn thay đổi chuột của người truy cập Web theo ý bạn không? Hãy chèn đoạn mã sau vào trang web của bạn, con chuột của người truy cập sẽ biến thành con ngựa đang chạy, trông rất độc đáo! [Xem thêm các kiểu con trỏ chuột khác]

<STYLE>BODY { CURSOR: url('http://xaydungcauduong.net/anh/Cursor horse.ani') } </STYLE>

Xem tiếp Các mã HTML chuyên nghiệp nhất

Vào thư viện JavaScrip

Lên trên

Hôm nay, Bạn là lượt truy cập thứ: ở trang này

Tổng số trang được truy cập là: trang kể từ ngày 20/05/2005

Trang chủ | Mục lục tạo web bằng FrontPage | Quay lại | Lên trên

Copyright © 2005 For You And For Me http://web.good.to