Web Design: ธันวาคม 2010

วันอาทิตย์ที่ 12 ธันวาคม พ.ศ. 2553

การเขียน Code HTML บน Notepad และคำสั่งต่างๆ

ผมขออธิบายก่อนครับว่า สิ่งสำคัญคือโครงสร้างพื้นฐานในการเขียนเว็บด้วยภาษา HTML ไม่ว่าเราจะอะไรก็ตาม เราต้องรู้และต้องเข้าใจเกี่ยวกับโครงสร้างพื้นฐาน เทียบทุกเรื่อง ไม่ว่าเรื่องใด ก็ตาม ดังนั้นแล้ว เราก็สามารถที่จะประยุกต์ความรู้เพื่อต่อยอด และพัฒนาต่อไปได้ในอนาคต ผมเชื่อเหลือเกินครับ ว่าไม่ยาก และหากท่านตั้งใจด้วยแล้ว มันก็ไม่เกินความสามารถที่ท่านจะทำได้ครับ เอาละครับ เพื่อไม่ให้เป็นการเสียเวลา ผมจะเริ่มเข้าเรื่องต่อเลยครับ

โครงสร้างพื้นฐาน

รูปแบบการเชื่อมโยงที่เห็นกันอยู่ทั่วๆ ไปคือ

แบบเชิงเส้น

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

แบบเชิงเส้นพร้อมทั้งเลือกได้

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

แบบเป็นลำดับชั้น

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

การเชื่อมโยงแบบผสม

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

นอกเหนือจากรูปแบบที่กล่าวมาทั้งหมดนี้แล้วยังมีรูปแบบอื่นๆ อีก แต่ถ้าลองวิเคราะห์ดูแล้วก็จะพบว่า เป็นการผสมผสานเอารูปแบบทั้ง 4 นี้เข้าด้วยกัน ขึ้นอยู่กับรูปแบบของการนำเสนอซึ่งถ้าข้อมูลมีมากการเชื่อมโยงก็จะซับซ้อนมากขึ้น ดังนั้นในการออกแบบ Web Page จึงควรจะมีการเขียน Storyboard หรือแผนผังการเชื่องโยงเอาไว้ก่อนอย่างน้อยผู้สร้างเองก็จะได้ไม่งงในเวลาที่สร้าง หรือเมื่อถึงเวลาต้อง Up-dateข้อมูลเหล่านั้น

ทำความรู้จักกับภาษา HTML เบื้องต้น

เราลองมาศึกษาเกี่ยวกับภาษา HTML ดูกันนะครับ ไม่ยากเลยครับ ซึ่งผมจะขออธิบายดังนี้ครับ

โครงสร้างภาษา HTML

ไฟล์เอกสาร HTML ประกอบด้วยส่วนประกอบสองส่วนคือ Head กับ Body โดยสามารถเปรียบเทียบได้ง่าย ๆ ก็คือ ส่วน Head จะคล้ายกับส่วนที่เป็น Header ของหน้าเอกสารทั่วไป หรือบรรทัด Title ของหน้าต่างการทำงานในระบบ Windows สำหรับส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ โดยทั้งสองส่วนจะอยู่ภายใน Tag <HTML>…</HTML>
     รูปแบบของ Tag ซึ่งจะเขียนอยู่ในเครื่องหมาย มากกว่า และ น้อยกว่า < > แต่ละ Tag มีหน้าที่ที่แตกต่างกันออกไป
      Tag แบ่งออกเป็น 2 ประเภท คือ
     แท็กเดี่ยว คือ คำสั่งที่มีคำสั่งเพียงอย่างเดียว ซึ่งสามารถใช้และสิ้นสุดคำสั่งได้ด้วยตัวของมันเอง เช่น
<br>
     แท็กคู่ คือ คำสั่งที่ต้องมีส่วนเริ่มต้นและส่วนจุดจบของคำสั่งนั้นๆ โดยแท็กที่เป็นส่วนจบนั้นจะมีเครื่องหมาย slash / ติดเอาไว้ เช่น
<html> ส่วนของเนื้อหา ..... </html>
<center> ข้อความ..... </center>
<p> ข้อความ.... </p>

ซึ่งเราจะได้ Tag HTML ดังต่อไปนี้ นี่เป็นเบื้องต้นเท่านั้นครับ

html>
<head>
<meta http-equiv=content-type content="text/html; charset=tis-620">
<title>ข้อความปรากฏบน Title Bar</title>
</head>
<body>
.................................................................
.................................................................
</body>
</html>

เราสามารถเขียน HTML ได้จากโปรแกรม TEXT Editor ทั่วไป เช่น Notepad เป็นต้น โดยวิธีการเขียน ก็เหมือนกันการพิมพ์เอกสารทั่ว ๆ ไป เพียงแต่เวลาที่เราทำการเซพ (Save) ไฟล์ให้เราทำการ Save เก็บไว้เป็นไฟล์นามสกุลเป็น *.htm or *.html ซึ่งผมต้องบอกเลยครับว่าท่านที่คิดจะเขียนเว็บให้เป็นนั้น ต้องเริ่มจากภาษา HTML ก่อน เป็นอันดับแรกครับ

รูปโปรแกรม Google Chrome ที่กำลังมาแรงด้วยการทำงานที่รวดเร็ว และสะดวก สบาย

ความรู้เกี่ยวกับ Web Site, Domain Name , Hosting

ต่อไปผมจะอธิบายเกี่ยวกับเว็บไซต์ ความรู้เกี่ยวกับด้านเว็บไซต์ครับ

เว็บไซต์ หมายถึง ข้อมูลทั้งหมดที่แสดงผ่านทาง Browser ซึ่งประกอบด้วย Home page
และ Web page ทั้งหมด Web site เหล่านี้ ผู้สร้างสามารถกำหนดให้ผู้ใช้หรือผู้เยี่ยมชม
สามารถสำเนาข้อมูล แฟ้มเอกสาร หรือโปรแกรมคอมพิวเตอร์ต่าง ๆ ไปใช้งานได้ หรือกำหนดให้ส่ง
E-mail ถึงเจ้าของหรือผู้ดูแลระบบได้ทันที

เว็บไซต์ (website) หมายถึง หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ส่วนใหญ่จัดทำขึ้นเพื่อนำเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้าแรกของเว็บไซต์ที่เก็บไว้ที่ชื่อหลักจะเรียกว่า โฮมเพจ เว็บไซต์โดยทั่วไปจะให้บริการต่อผู้ใช้ฟรี แต่ในขณะเดียวกันบางเว็บไซต์จำเป็นต้องมีการสมัครสมาชิกและเสียค่าบริการเพื่อที่จะดูข้อมูล ในเว็บไซต์นั้น ซึ่งได้แก่ข้อมูลทางวิชาการ ข้อมูลตลาดหลักทรัพย์ หรือข้อมูลสื่อต่างๆ ผู้ทำเว็บไซต์มีหลากหลายระดับ ตั้งแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดับเว็บไซต์สำหรับธุรกิจหรือองค์กรต่างๆ การเรียกดูเว็บไซต์โดยทั่วไปนิยมเรียกดูผ่านซอฟต์แวร์ในลักษณะของ เว็บเบราว์เซอร์ (Web Browser)

ส่วนประกอบของเว็บไซต์

Homepage (โฮมเพจ) คือเว็บเพจหน้าแรกที่เป็นหน้าดัชนีหรือรายการที่บอกรายละเอียดของเว็บไซต์นั้น ๆ เราอาจจะเปรียบโฮมเพจเหมือนหน้าบ้านของเว็บไซต์ก็ได้

Webpage (เว็บเพจ) เป็นหน้าเอกสารเว็บที่สร้างขึ้นด้วย ภาษา HTML (Hypertext Markup Language) ซึ่งโปรแกรมเบราเซอร์จะทำหน้าที่แปลภาษา HTML ออกมาเป็นหน้าเอกสารทางจอคอมพิวเตอร์ เว็บเพจอาจจะประกอบด้วย ข้อความ ภาพกราฟิก หรือภาพเคลื่อนไหว อาจมีเสียงประกอบด้วยก็ได้ ทำให้ดึงดูดความ สนใจ และทำให้เวิล์ดไวด์เว็บได้รับความนิยม

Link (ลิงค์) หรือ Hyperlink (ไฮเปอร์ลิงค์) คือ หัวข้อต่างๆ ที่สามารถโยงหรือว่าคลิก ไปยังเว็บไซต์หรือรายละเอียดที่ระบุเอาไว้ โดยการใช้เมาส์เลื่อนไป คลิก ยังลิงค์ เหล่านี้ โดยส่วนใหญ่ มักจะมีการขีดเส้นใต้ไว้ ซึ่งหากเราเลื่อน ลูกศรเมาส์ ไปอยู่บน ลิงค์ ก็จะปรากฎ เป็นรูปมือที่ยื่น นิ้วชี้ ออกมาบนหัวข้อนั้นๆ

รูปแบบของ Link
1. การ Link ภายใน คือเป็นการลิงค์ภายในเว็บไซต์เดียวกัน โดยลิงค์ไปยังไฟล์ HTML ต่างๆของไซต์ที่ได้จัดทำขึ้น
2. การ Link ภายนอก คือ เป็นการลิงค์ไปยัง URL หรือเว็บไซต์อื่นๆ ที่ไม่ได้อยู่ในไซต์ของเรา เช่น http://www.hunsa.com/ , http://www.kapook.com/ เป็นต้น
3. การ Link ภายในหน้าเดียวกัน เป็นการลิงค์ภายในหน้าเว็บเพจหน้าใดหน้าหนึ่งโดยจะมีการลิงค์ในลักษณะของหัวข้อสำคัญไปยังเนื้อหาที่อยู่ภายในหน้าเว็บเพจเดียวกันนั่นเองครับ