สุธาสินี ชัยเดช

วันพฤหัสบดีที่ 24 ธันวาคม พ.ศ. 2558

W E B S I T E

บทความนี้เราจะมาลองทำเว็บไซต์กัน โดยการทำเว็บไซต์ในบทความนี้จะเป็นแบบพื้นฐานเพื่อให้คุณได้เข้าใจถึงการทำงานของเว็บไซต์ ซึ่งเราจะใช้โปรแกรม notepad ซึ่งจะมีอยู่ในทุกเครื่องที่ใช้ระบบ window

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

ซึ่งในบทนี้เรามาลองทำเว็บเพจดู ขั้นตอนตามนี้

1.ให้คุณเปิดโปรแกรม Notepad ขึ้นมา โดยไปที่ All programs > Accessories > Notepad

ซึ่งโปรแกรม notepad จะมีหน้าตาแบบนี้

2. ให้คุณพิมพ์ข้อความต่อไปนี้ ใน notepad

<html>

<head>

<title>ทดลองทำเว็บไซต์แบบง่ายๆ</title>

</head>

<body>

Hellomyweb นี่คือเว็บไซต์แรกของฉัน

</body>

</html>

ข้อความที่คุณพิมพ์ไปนั้นเราเรียกว่า SOURCE CODE เป็นภาษาคอมพิวเตอร์ เรียกว่าภาษา HTML ซึ่งใช้ในการจัดหน้าของเว็บเพจ คุณสามารถศึกษารายละเอียดของภาษา html ได้ที่หัวข้อของ html

เมื่อพิมพ์เสร็จแล้วให้เราเลือก save as จะมีหน้าต่างออกมา ให้เราใส่ชื่อไฟล์เป็น index.html และเลือกชนิดไฟล์ (save as type) เป็นแบบ All files จากนั้นก็ save ไฟล์

เราจะได้ไฟล์มาดังรูปข้างล่าง ให้เราคลิกเพื่อเปิดไฟล์ index.html เราก็จะเห็นเว็บไซต์แรกของเรา ซึ่งจะถูกเปิดโดยโปรแกรม internet explorer (ต่อไปนี้เราจะเรียกว่า Web Browser)

จากรูปจะบรรยายการทำงานของ html ที่เขียนเอาไว้ ซึ่งจะเห็นว่าตัวหนังสือที่อยู่ใน <title>....</title> จะแสดงที่ส่วนหัวของโปรแกรม internet explorer และในส่วนของ <body>....</body> จะแสดงในส่วนแสดงผลของโปรแกรม

เราก็ได้เห็นเว็บไซต์ที่เราทำเองไปแล้ว ซึ่งในบางเครื่องที่ลองทำเว็บอาจมีปัญหาได้ เราจะมาลองดูว่าจะแก้ปัญหาอย่างไร

1.เปิดไฟล์ไม่ได้ ให้เราลองเปิดโดยวิธีนี้แทน

เปิดโปรแกรม internet explorer ไปที่ file > open > browse เลือกไฟล์ที่ เรา save และกดที่ open

2.เปิดแล้วเป็นภาษาต่างดาว อ่านไม่ออก จากรูปให้เราไปที่ file > view > encoding > thai

หลังจากที่เราลองเขียน sorce code ไปแล้ว เราจะลองไปดูเว็บไซต์อื่นกันบ้างว่าเค้าเขียน source code กันอย่างไร ซึ่งการดู sorce code ของเว็บไซต์อื่นก็ทำได้โดย คลิกขวาที่เว็บที่เรากำลังดูอยู่ เลือก view soure

เราอาจจะเห็นว่าทำไมเว็บอื่น soure code เยอะมาก ซึ่งเราก็ไม่ต้องตกใจครับจริงแล้ว source code พวกนี้เราไม่ได้ใช้ notepad เขียน เพราะจะลำบากในการเขียนมากแต่ที่ในบทความนี้ให้ใช้ notepad เพราะเป็นโปรแกรมที่มีอยู่ในทุกเครื่อง จริงแล้วเราจะใช้โปรแกรมช่วยเขียน เช่น DREAMWEAVER , HTML - KIT , EDIT PLUS เป็นต้น ซึ่งในบทความต่อไปจะเป็นการลองใส่รูปในเว็บไซต์เพื่อเพิ่มสีสันในเว็บของเรา

I P A d d r e s s..

IP Address ย่อมาจากคำเต็มว่า Internet Protocal Address คือหมายเลขประจำเครื่องคอมพิวเตอร์แต่ละเครื่องในระบบเครือข่ายที่ใช้โปรโตคอลแบบ TCP/IP

ถ้าเปรียบเทียบก็คือบ้านเลขที่ของเรานั่นเอง ในระบบเครือข่าย จำเป็นจะต้องมีหมายเลข IP กำหนดไว้ให้กับคอมพิวเตอร์ และอุปกรณ์อื่นๆ ที่ต้องการ IP ทั้งนี้เวลามีการโอนย้ายข้อมูล หรือสั่งงานใดๆ จะสามารถทราบตำแหน่งของเครื่องที่เราต้องการส่งข้อมูลไป จะได้ไม่ผิดพลาดเวลาส่งข้อมูล ซึ่งประกอบด้วยตัวเลข 4 ชุด มีเครื่องหมายจุดขั้นระหว่างชุด เช่น 192.168.100.1 หรือ 172.16.10.1 เป็นต้น โดยหมายเลข IP Address ของเครื่องคอมพิวเตอร์แต่ละเครื่องจะมีค่าไม่ซ้ำกัน สิ่งตัวเลข 4 ชุดนี้บอก คือ Network ID กับ Host ID ซึ่งจะบอกให้รู้ว่า เครื่อง computer ของเราอยู่ใน network ไหน และเป็นเครื่องไหนใน network นั้น เราจะรู้ได้อย่างไรว่าNetwork ID และ Host ID มีค่าเท่าไหร่ ก็ขึ้นอยู่กับว่า IP Address นั้น อยู่ใน class อะไร

เหตุที่ต้องมีการแบ่ง class ก็เพื่อให้เกิดความเป็นระเบียบ เป็นการแบ่ง IP Address ออกเป็นหมวดหมู่นั้นเอง สิ่งที่จะเป็นตัวจำแนก class ของ network ก็คือ bit ทางซ้ายมือสุดของตัวเลขตัวแรกของ IP Address (ที่แปลงเป็นเลขฐาน 2 แล้ว) นั่นเอง โดยที่ถ้า bit ทางซ้ายมือสุดเป็น 0 ก็จะเป็น class A ถ้าเป็น 10 ก็จะเป็น class B ถ้าเป็น 110 ก็จะเป็น class C ดังนั้น IP Address จะอยู่ใน class A ถ้าตัวเลขตัวแรกมีค่าได้ตั้งแต่ 0 ? 127 (000000002 ? 011111112) จะอยู่ใน class B ถ้าเลขตัวแรกมีค่าตั้งแต่ 128 ? 191 (100000002 ? 101111112) และ จะอยู่ใน class C ถ้าเลขตัวแรกมีค่าตั้งแต่ 192 - 223 (110000002 ? 110111112) มีข้อยกเว้นอยู่นิดหน่อยก็คือตัวเลข 0, 127 จะใช้ในความหมายพิเศษ จะไม่ใช้เป็น address ของ network ดังนั้นnetwork ใน class A จะมีค่าตัวเลขตัวแรก ในช่วง 1 ? 126

สำหรับตัวเลขตั้งแต่ 224 ขึ้นไป จะเป็น class พิเศษ อย่างเช่น Class D ซึ่งถูกใช้สำหรับการส่งข้อมูลแบบMulticast ของบาง Application และ Class E ซึ่ง Class นี้เป็น Address ที่ถูกสงวนไว้ก่อน ยังไม่ถูกใช้งานจริง ๆ โดย Class D และ Class E นี้เป็น Class พิเศษ ซึ่งไม่ได้ถูกนำมาใช้งานในภาวะปกติ

ตัวอย่าง IP Address

Class A ตั้งแต่ 10.xxx.xxx.xxx

Class B ตั้งแต่ 172.16.xxx.xxx ถึง 172.31.xxx.xxx

Class C ตั้งแต่ 192.168.0.xxx ถึง 192.168.255.xxx

จาก IP Address เราสามารถที่จะบอก ได้คร่าวๆ ว่า computer 2 เครื่องอยู่ใน network วงเดียวกันหรือเปล่าโดยการเปรียบเทียบ Network ID ของ IP Address ถ้ามี Network ID ตรงกันก็แสดงว่าอยู่ใน networkวงเดียวกัน เช่น computer เครื่องหนึ่งมี IP Address 1.2.3.4 จะอยู่ใน network วงเดียวกับอีกเครื่องหนึ่งซึ่งมีIP Address 1.100.150.200 เนื่องจากมี Network ID ตรงกันคือ 1 (class A ใช้ Network ID 1 byte)

วิธีตรวจสอบ IP Address

1.คลิกปุ่ม Start เลือก Run

2.พิมพ์คำว่า cmd กดปุ่ม OK

3.จะได้หน้าต่างสีดำ

4.พิมพ์คำว่า ipconfig กด enter

5.จะเห็นกลุ่มหมายเลข IP Address

H T M L .

ความหมายและความเป็นมาของภาษา HTML

HTML ย่อมาจากคำว่า HyperText Markup Language เป็นภาษาหลักในการสร้างเว็บเพจ โดยมีแนวคิดจากการสร้างเอกสารไฮเปอร์เท็กซ์ (Hypertext Document : ข้อความในเอกสารที่เชื่อมโยงถึงข้อมูลต่าง ๆ ได้) ซึ่งพัฒนามาจากภาษา SGML (Standard Generalized Markup Language) โดย Tim Berners-Lee ใน ปี ค.ศ.1990 ซึ่งใช้ในระบบของ CERN (Conseil Europeen pour la Recherche Nucleaire) เบื้องต้นได้เริ่มใช้ในประเทศสวิตเซอร์แลนด์ จากนั้นก็ได้แพร่ขยายออกไป ระบบนี้ได้ถูกตั้งชื่อว่า World Wide Web ( WWW ) ที่เรารู้จักกันมาจนถึงปัจจุบัน

ภาษา HTML ได้รับการพัฒนาและนำไปใช้อย่างแพร่หลายจึงทำให้เกิดมาตรฐานในเวอร์ชั่นต่างๆ ดังนี้

HTML 1.0	เกิดขึ้นในปี ค.ศ.1993 โดย Tim Berners-Lee และ Dave Raggett ได้กำหนดให้เอกสาร HTML ที่ได้พัฒนาขึ้นแม้จะเขียนมาตรฐานใด ๆ ก็ตาม ต้องสามารถอ่านได้
HTML 2.0	เกิดขึ้นในปี ค.ศ. 1995 โดย IETF (Internet Engineering Task ForceX) ซึ่งมุ่มหวังให้สามารถ เปิดแสดงผลกับบราวเซอร์ที่ใช้งานทั่วไปได้
HTML 3.0	เกิดขึ้นในปี ค.ศ. 1995 ได้พัฒนา HTML ให้มีความสามารถเพิ่มขึ้น โดยเพิ่มการทำงานที่เกี่ยวกับตาราง การปรับข้อความล้อมรอบภาพ และแสดงส่วนที่มีความสับซ้อนได้ดีขึ้น รวมทั้งช่วยให้เบราว์เซอร์ย้อนกลับไปดูเว็บเพจหน้าที่ผ่านมาหรือหน้าที่เคยเข้าชมมาก่อนหน้า ได้ดีกว่าเวอร์ชั่น 2.0 หรือที่ี่เรียกว่า Backward
HTML 3.2	เกิดขึ้นในปี ค.ศ. 1996 ได้มีการเพิ่มคำสั่งและคุณสมบัติต่าง ๆ ที่สามารถทำงานร่วมกับหลาย ๆ เบราว์เซอร์ได้มากขึ้น และมีชื่อเรียกโค้ดแบบนี้ว่า "Wibur"
HTML 4.0	เกิดขึ้นในปี ค.ศ. 1997 องค์กรกลางที่ชื่อว่า W3C (The World Wide Web Consortium) ได้มีการพัฒนาและดูแลมาตรฐานของภาษา HTML เพื่อพัฒนาเทคโนโลยี WWW ให้ล้ำหน้ายิ่งขึ้นโดยมีการเพิ่มประสิทธิภาพในการทำงานด้วย Style Sheet , Frame , การฝั่งออบเจคต์ของโปรแกรมเสริมเพื่อแสดงภาพและเสียง การสร้างฟอร์ม และการใช้งานร่วมกับภาษา Script ต่าง ๆ
HTML 4.01	เกิดขึ้นในปี ค.ศ. 1997 มีการปรับปรุงข้อผิดพลาดต่าง ๆ ให้ดีขึ้น หลังจาก HTML 4.01 องค์กร W3C ได้หยุดพัฒนา HTML โดยเปลี่ยนไปพัฒนาภาษามาตรฐานใหม่ที่ชื่อว่า XHTML เพื่อใช้ใน การสร้างเว็บเพจ เพื่อจะขยายการใช้เว็บสู่อุปกรณ์ต่าง ๆ เพิ่มมากขึ้น แต่ยังคงให้เบราว์เซอร์ใช้งานโปรแกรมภาษา HTML ได้เช่นเดิม
XHTML	ก่อนที่จะมาถึง XHTML ทาง W3C ผู้พัฒนาเทคโนโลยี ได้พบข้อจำกัดของ HTML จึงได้สร้างภาษามาตรฐานใหม่ ชื่อว่า XML สามารถใช้ได้หลายแพลตฟอร์ม ต่อมาเมื่อมีความต้องการให้การเขียนเว็บเพจมีรูปแบบที่รัดกุมมากยิ่งขึ้น จึงได้รวบรวมคำสั่ง HTML 4.0 กับมาตรฐานของ XML เข้าไว้ด้วยกันเกิดเป็นภาษา HTML ที่มีกฎระเบียบมากยิ่งขึ้น และตั้งชื่อใหม่เป็น XHTML (Extensible HyperText Markup Language) คำสั่งต่าง ๆ ใน XHTML ยังสามารถใช้คำสั่งในภาษา HTML 4.0 ได้ แต่มีการเพิ่มคำสั่งใหม่และการจัด ระเบียบการใช้คำสั่งให้มีความแน่นอนมากยิ่งขึ้น

ลักษณะของภาษา HTML

    องค์ประกอบของภาษา HTML สามารถแบ่งออกได้ 2 ส่วน คือ
         1.ส่วนที่เป็นข้อความทั่ว ๆ ไป
         2.ส่วนที่เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกคำสั่งเหล่านี้ว่า แท็ก (Tag) โดยแท็ก
            หรือคำสั่ังของภาษา HTML จะอยู่ในเครื่องหมาย < > ซึ่งมีหลักในการเขียนดังนี้

หลักในการเขียนคำสั่งหรือแท็กในภาษา HTML

1.รูปแบบแท็กจะแยกออกเป็น 2 ส่วน คือแท็กเริ่มต้น เรียกว่า "แท็กเปิด" และส่วนจบของแท็ก เรียกว่า
"แท็กปิด" แท็กปิดจะต้องมีเครื่องหมาย Slash (/) ดังนี้

<แท็กเปิด>ข้อความ......</แท็กปิด> เช่น <title>ข้อความที่ต้องการให้ปรากฎในแถบหัวเรื่อง </title>

2.บางแท็กอาจไม่ต้องมีแท็กปิดก็สามารถใช้งานได้ เช่น คำสั่งขึ้นบรรทัดใหม่ <br>

3.เราสามารถพิมพ์ตัวอักษรเป็นตัวเล็ก หรือใหญ่ก็ได้ (เวอร์ชั่น 4.0 ขึ้นไป) เช่น <HTML>,<Html>,<html> จะมี
ความหมายเหมือนกัน แต่แนะนำให้ใช้ตัวอักษรตัวเล็กทั้งหมด เพื่อรองรับกับมาตรฐานของ XHTML ต่อไป

4.บางแท็กจะมีตัวกำหนดคุณสมบัติ ที่เรียกว่า แอตทริบิวท์ (Attribute) และมีค่าที่ถูกกำหนดให้ใช้ในแท็ก (Value)
   โดยจะเขียนไว้หลังแท็ก เช่น

       <hr width=600 size=5>

               แท็ก hr เป็นการกำหนดเส้นขั้นทางแนวนอน
               แอททริบิวต์ width กำหนดคุณสมบัติความยาวของเส้น
               แอททริบิวต์ size คือการกำหนดความหนาของเส้น
               ค่าที่กำหนดให้ใช้ 600 เป็นค่าความยาวของเส้น
               ค่าที่กำหนดให้ใช้ 5 คือเส้นมีความหนา 5 จุด (Pixel)

โครงสร้างพื้นฐานของภาษา HTML มีดังนี้

โครงสร้างของภาษา HTML ประกอบด้วย 3 ส่วน คือ

        1. ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML  ซึ่งจะมีแท็ก <html>…</html> กำกับอยู่ที่จุดเริ่มต้นและจุดสิ้นสุดของแฟ้มข้อมูล
       2. ส่วนหัวเรื่อง (Head) เป็นส่วนที่กำหนดให้แสดงข้อความที่แถบหัวเรื่องของหน้าเว็บเพจนั้น ๆ เช่น แท็ก <title>....</title> และเก็บแท็กพิเศษอื่น ๆ
       3. ส่วนเนื้อหา (Body) เป็นส่วนที่แสดงเนื้อหาของเว็บเพจทั้งหมดซึ่งประกอบด้วย ข้อความและแท็กต่าง ๆ เช่น แท็กสำหรับจัดการกับรูปแบบของข้อความตาราง รูปภาพ กราฟิกต่างๆ สีของตัวอักษร สีพื้น เป็นต้น

ความหมายของคำสั่ง หรือแท็กต่างๆ ในโครงสร้างของภาษา HTML
(ซึ่งต้องมีคำสั่งหรือแท็ก 4 ส่วนนี้เป็นหลักในเว็บเพจทุก ๆ หน้า)

<html> ..... ..... </html>	หมายถึง แสดงถึงจุดเริ่มต้นและจุดสิ้นสุดของภาษา HTML
<head> ..... ..... </head>	หมายถึง กำหนดรายละเอียดส่วนหัวเอกสาร HTML เช่น <title>......</title>
<title>...</title>	หมายถึง กำหนดชื่อเว็บเพจในแถบหัวเรื่อง หรือที่เรียกว่าไตเติ้ลบาร์ ของหน้าต่างเว็บเพจ
<body> .... </body>	หมายถึง ส่วนที่มีไว้สำหรับให้ผู้เขียนเว็บเพจใส่คำสั่งหรือแท็กต่าง ๆ บางครั้งอาจเรียกว่า "โค้ด" (Code) เช่น คำสั่งแสดงรูปภาพ, การกำหนดสีตัวอักษร, การทำอักษรวิ่ง, การสร้างตาราง, การทำชุดเชื่อมโยง เป็นต้น