Showing posts with label html. Show all posts
Showing posts with label html. Show all posts
March 28, 2011
November 25, 2010
การ Redirect / Refresh web page
การ redirect สามารถทำได้ด้วยการใช้ meta tag ของ html code สามารถกำหนดช่วงเวลาและ URL ที่ต้องการ Redirect ไปได้ ใน attribute CONTENT มีรูปแบบดังนี้
CONTENT="[ช่วงเวลาให้รอก่อนทำการ Redirect หน่วยเป็นวินาที];URL=[ใส่ URL ที่ต้องการ Link ไปหาที่นี่]"
หากต้องการให้ web page ของเรา Refresh หน้าทุกๆ 1 นาทีก็สามารถเซตได้ตามตัวอย่าง code ข้างล่าง code ต้องวางอยู่ระหว่าง tag <head> กับ </head> นะครับ
Code :
การ Redirect ด้วย Javascript เพียงแค่ใส่ URL ให้ถูกต้องหน้า web ของเราก็จะ Link ไปสู่ URL ที่เรากำหนดเอง
Code :
ยังมีรูปแบบ code javascript การ Redirect URL อื่นอีกซึ่งให้ผลการทำงานเหมือนกัน
Code :
CONTENT="[ช่วงเวลาให้รอก่อนทำการ Redirect หน่วยเป็นวินาที];URL=[ใส่ URL ที่ต้องการ Link ไปหาที่นี่]"
หากต้องการให้ web page ของเรา Refresh หน้าทุกๆ 1 นาทีก็สามารถเซตได้ตามตัวอย่าง code ข้างล่าง code ต้องวางอยู่ระหว่าง tag <head> กับ </head> นะครับ
Code :
| <META HTTP-EQUIV="Refresh" CONTENT="60;URL=http://www.yourname.com"> |
การ Redirect ด้วย Javascript เพียงแค่ใส่ URL ให้ถูกต้องหน้า web ของเราก็จะ Link ไปสู่ URL ที่เรากำหนดเอง
Code :
| <html> <head> <script langquage='javascript'> window.location="http://www.yourdomain.com/"; </script> </head></html> |
ยังมีรูปแบบ code javascript การ Redirect URL อื่นอีกซึ่งให้ผลการทำงานเหมือนกัน
Code :
| <html> <head> <script langquage='javascript'> window.location.href = "http://www.yourdomain.com/"; </script></head></html> |
November 23, 2010
มารู้จัก jQuery กัน
jQuery คือไลบรารีของโค้ดจาวาสคริปต์ ซึ่งเป็นส่วนหนึ่งของการสร้างเว็บไซต์ jQuery ช่วยให้เราเรียกเขียนหรือ ใช้งานจาวาสคริปต์ และ Ajax ให้ง่ายขึ้น jQuery เปิดตัวครั้งแรกในงานบาร์แคมป์นิวยอร์ก โดย จอห์น เรซิก (John Resig) เมื่อ 14 มกราคม พ.ศ. 2549 ตัวโค้ดของ jQuery มีลิขสิทธิ์และสัญญาอนุญาตแบบ open source โดยใช้สัญญาอนุญาตของ GFDL และ MIT License
ความสามารถของ Jquery
* ใช้งาน DOM element โดยการเขียนไม่จำเป็นต้องยึดติดกับ browser
* จัดการกับ Event เพิ่ม Event ลงในหน้าเว็บตามแต่ใจต้องการ
* การจัดการ CSS สามารถเพิ่ม ลบ class ,id ของ CSS
* Effects and animations ลูกเล่นบนหน้าเว็บ
* Ajax ช่วยให้เขียน Ajax ได้ง่ายขึ้นประหยัดเว็บเวลาในการเขียน Ajax และทำให้โค้ดสั้นลง
* สามารถสืบทอดคุณสมบัติของ Jquery ไปใช้งานต่อได้
* สามารถทำ UI ใหม่ บน Browser ได้
* Utilities
ใครที่นำ Jquery ไปใช้งานได้บ้าง
* Web Programmer
* Web design
* Jquery สามารถใช้งาน ร่วมกับ server-side scripting languages ได้ทุกภาษา ไม่ว่าจะเป็น PHP,JSP,Perl,ASP หรือ .net
* ใช้งานกับ html,CSS ได้เป็นอย่างดี รวมทั้ง xml ด้วย
เว็บไซต์ของ Jquery
http://www.jquery.com/
Code :
| <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ $('#idDiv').toggle(1000); }); }); </script> <style type="text/css"> #idDiv{ width: 200px; height: 100px; border: solid 1px black; background-color:LightGrey; text-align:center; display:none; } </style> <div id="idDiv">JQuery Example</div> <button id="btn">Click</button> |
JQuery Example
November 19, 2010
HTML เบื้องต้น
โครงสร้างพื้นฐานของ HTML
โครงสร้าง HTML 4 แบ่งหลักๆ เป็น 2 ส่วน คือ ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) ดังนี้
Code :
โครงสร้าง HTML 4 แบ่งหลักๆ เป็น 2 ส่วน คือ ส่วนหัว (Head) และส่วนที่เป็นเนื้อหา (Body) ดังนี้
Code :
| <HTML> <HEAD> <TITLE> ชื่อ web </TITLE> </HEAD> <BODY> คำสั่ง/ข้อความที่ต้องการให้แสดง </BODY> </HTML> |
HTML Code จะต้อง save ใน file นามสกุล .htm หรือ .html ด้วย
HTML Headings
HTML headings เป็นการกำหนดข้อความที่เราต้องการให้เป็นรูปแบบ Header มีตั้งแต่ tags <h1> ถึง <h6>
Code :
Output :
HTML Paragraphs
HTML Paragraphs เป็นการแบ่งย่อหน้าโดยใช้ tag <p>
Code :
Output :
This is a paragraph 1.
This is a paragraph 2.
HTML Headings
HTML headings เป็นการกำหนดข้อความที่เราต้องการให้เป็นรูปแบบ Header มีตั้งแต่ tags <h1> ถึง <h6>
Code :
| <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> |
Output :
This is a heading
This is a heading
This is a heading
HTML Paragraphs
HTML Paragraphs เป็นการแบ่งย่อหน้าโดยใช้ tag <p>
Code :
| <p>This is a paragraph 1.</p> <p>This is a paragraph 2.</p> |
Output :
This is a paragraph 1.
This is a paragraph 2.
Subscribe to:
Posts (Atom)