ติดอันดับการสืบค้น

July 24th, 2009

ไปเจอวิธีการทำให้เราสามารถติดอันดับการสืบค้นมาครับ ผมก็เอามาใช้ด้วย และก็มาแบ่งปั่นกันครับ มาดูกันเลย

หากคุณต้องการทำให้เว็บของคุณ อยู่ในกลุ่มของการค้นหาข้อมูลจากผู้ให้บริการสืบค้นข ้อมูลอัตโนมัติ (Search Engine) อย่าลืมกำหนด Title ของเอกสารเว็บนั้นๆ โดยควรเป็นข้อความภาษาอังกฤษ มีความหมายกระชับถึงเรื่องที่นำเสนอ แต่มีความยาวไม่เกิน 64 ตัวอักษร (ปัจจุบันสามารถใช้ภาษาไทยได้ แต่แนะนำให้ใช้ร่วมกัน หรือผสมกัน) ซึ่งข้อความในส่วนนี้จะปรากฏในส่วนบนสุดของหน้าต่างเ บราเซอร์ (Title Bar)

<HEAD>
<TITLE>abciloveu.com</TITLE>
</HEAD>

นอกจากนี้ สามารถกำหนดค่าเพิ่มเติมเกี่ยวกับคำสำคัญ หรือ Keyword ของเอกสารเว็บ เพื่อช่วยให้การสืบค้น ได้ผลดีขึ้น อาศัยแท็กคำสั่ง

<META NAME=”Keywords” CONTENT=”คำที่ 1, คำที่ 2, …”>

ซึ่งกำหนดแท็กนี้ในส่วน Head Section ของเอกสารเว็บ
ตัวอย่างการลงรหัสเพื่อกำหนด TITLE และ META Tag

<HEAD>
<TITLE>abciloveu.com</TITLE>
<META NAME=”Keywords” CONTENT=”Introduction, HTML, HyperText Markup Language”>
</HEAD>

ทั้งนี้ยังมีแท็ก Meta อีก 2 รูปแบบที่ควรนำมาประกอบด้วย คือ

<META NAME=”Description” CONTENT=”ข้อความอธิบายเว็บไซต์”>

และ

<META NAME=”Robots” CONTENT=”all/none/index/noindex/follow/nofollow”>

โดย Description จะเป็นการใส่คำอธิบายให้กับเว็บไซต์ และ Robots เป็นการบอกให้กับ Spider หรือ Robot (โปรแกรมของ Search Engine ที่ทำหน้าที่ค้นหาข้อมูลของเว็บไซต์ต่างๆ) ว่าควรจัดการหน้าเว็บต่างๆ ในเว็บไซต์อย่างไร เช่น ถ้าต้องการให้เก็บข้อมูลทุกหน้า ก็กำหนด Contect=”All” หรือไม่ต้องการให้เก็บข้อมูลหน้าใด ก็กำหนด Contect=”noindex” หรือให้เก็บเฉพาะหน้าที่ระบุ ไม่ต้องเก็บหน้าอื่นๆ ก็ใช้ Contect=”NoFollow” เป็นต้น อย่างไรก็ตามแท็กชุดนี้ไม่ใช่แท็กมาตรฐาน ดังนั้นผู้พัฒนาเว็บ ควรให้ความสำคัญของ Title มากที่สุด

<HEAD>
<TITLE>abciloveu.com</TITLE>
<META NAME=”Keywords” CONTENT=”Introduction, HTML, HyperText Markup Language”>
<META NAME=”Description” CONTENT=”Introduction to HTML and Web Design for All”>
<META NAME=”Robots” CONTENT=”All”>
</HEAD>

นอกจากแท็กที่ได้แนะนำ ก็กำหนดข้อความอธิบายรูปภาพด้วย Attribute ALT ของแท็ก IMG ก็เป็นจุดที่น่าสนใจ โดย Spider บาง Search Engine จะสนใจคำอธิบายชุดนี้ด้วยเช่นกัน อย่างไรก็ตาม คำอธิบายชุดนี้ก็มีประโยชน์มาก สำหรับคนพิการทางสายตา เพราะสามารถรู้ความหมายของรูปภาพที่มองไม่เห็นได้จาก คำอธิบาย ที่อ่านด้วยเบราเซอร์ เฉพาะของคนพิการทางตา ดังนั้นผู้พัฒนา ควรให้ความสำคัญของการใส่คำอธิบายรูปภาพกับรูปภาพทุก ภาพด้วย

<IMG SRC=”test.jpg” ALT”ทดสอบการใส่คำอธิบาย”>

เป็นไงครับลองดูกันนะครับ ^^

View source IE โดยไม่สน Notepad

July 24th, 2009

เผื่อใครเบื่อที่จะดูใน notepad ก็เอาไปประยุกต์ได้นะครับ

ปกติเวลาวิวซอร์ส HTML ใน Internet Explorer โค้ดทั้งหมดจะถูกโหลดเข้าไปในโปรแกรม Notepad สำหรับวินทิปในครั้งนี้ ขอแนะนำวิธีเปลี่ยนให้ IE วิวซอร์ส HTML ด้วย WordPad แทน
บางท่านอาจจะไม่ชอบ Notepad ในการแก้ไขไฟล์ข้อความต่างๆ เนื่องจากมันมีข้อจำกัดในการใช้งานอยู่พอสมควร แต่ด้วยขนาดโปรแกรมที่เล็ก โหลดเร็ว และใช้ง่าย ทำให้มันกลายเป็นโปรแกรมแก้ไขยอดฮิตสำหรับไฟล์ข้อควา ม อย่างไรก็ดี ในระบบปฏิบัติการ Windows จะมีโปรแกรม WordPad ที่มีประสิทธิภาพดีกว่าให้ใช้ด้วย ซึ่งสำหรับผู้สนใจต้องการใช้ WordPad แทน Notepad ในการวิวซอร์ส IE ก็สามารถทำได้ โดยมีขั้นตอนแก้ไขดังนี้
1. คลิกปุ่ม Start เลือกคำสั่ง Run พิมพ์ regedit เข้าไปในเท็กซ์บ๊อกซ์ Open:
2. คลิกเข้าไปที่ HKEY_CLASSES_ROOT.htmOpenWithListNOTEPAD.EXE
3. เปลี่ยนชื่อคีย์ย่อย NOTEPAD.EXE เป็น WORDPAD.EXE หรือถ้ายังต้องการเก็บ NOTEPAD ไว้ใช้ ก็เพิ่มคีย์ย่อยสำหรับ WORDPAD.EXE เข้าไปในคีย์ OpenWithList
4. ตรวจสอบว่ามีคีย์ข้างล่างนี้ หรือไม่ ถ้าไม่มีให้เพิ่มเข้าไปให้เรียบร้อย
กรอบด้านซ้าย HKEY_CLASSES_ROOTApplicationsWORDPAD.EXEshelleditc ommand
กรอบด้านขวา (Default) “C:Program FilesAccessoriesWORDPAD.EXE” “%1”
5. ปิดโปรแกรม regedit
ขั้นตอนต่อไป เป็นการเปลี่ยน HTML Editor ใน IE โดยให้คลิกเมนู Tools เลือกคำสั่ง Internet Options คลิกแท็บ Programs จากนั้นคลิกดรอปดาวน์ลิสต์บ๊อกซ์ HTML editor แล้วลากลงมาจนถึงรายการ WordPad คลิกปุ่ม OK คราวนี้ ทดลองวิวซอร์ส HTML ดูสิครับ คุณจะพบว่า ตอนนี้ซอร์สโค้ดถูกเปิดขึ้นด้วยโปรแกรม WordPad แล้ว

ทำ effect ตอนเปลี่ยนหน้า

July 24th, 2009

ลองทำดูนะครับ

อยากได้ Effect แปลกคล้ายๆ PowerPoint เวลาเปลี่ยนหน้าเว็บ ไม่ยากเลยครับ ลองใส่ชุดคำสั่งนี้ในส่วน Head Section ดูสิครับ
ค่าตัวเลขของ Duration และ Transition ลองปรับเปลี่ยนเล่นๆ ดูน่ะครับ

<META http-equiv=”Page-Enter” content=”RevealTrans (Duration=3, Transition=23)”>
<META http-equiv=”Page-Exit” content=”RevealTrans (Duration=2, Transition=23)”>