ผลการเรียนรู้

อธิบายความหมายของเว็บเพจและโครงสร้างภาษา HTML และการกำหนดค่าเบื้องต้นของเว็บเพจได้

       จุดประสงค์

-  บอกความหมาย และกฎของการเขียนเว็บเพจที่ดี

-  อธิบายข้อควรคำนึงของการเขียนเว็บเพจ

-  บอกเครื่องมือและภาษาของการเว็บเพจ

-  อธิบายโครงสร้างภาษา HTML  ได้

เว็บเพจ

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

         เว็บเพจ  หมายถึง  เอกสารไฮเปอร์เท็กซ์  ที่ใช้ในการเผยแพร่ข้อมูลข่าวสารซึ่งประกอบด้วยข้อความ  รูปภาพ  เสียง  หรือส่วนประกอบอื่น ๆ ที่ใช้ในการสื่อสาร  เอกสารไฮเปอร์เท็กซ์โดยทั่วไปเขียนขึ้นและวางไว้ในตำแหน่งที่อยู่  (Address)  ขององค์กรหรือของหน่วยงาน  หรืออยู่ในส่วนของที่เก็บข้อมูลเฉพาะบุคคลและยอมให้ผู้อื่นเข้ามาเปิดดูได้เราจึงเรียกเอกสารนี้ว่า “เว็บเพจ” (Web Page)

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

การเขียนเว็บเพจที่ดี

         การออกแบบเว็บเพจที่ดีย่อมหมายถึง  การสำเสนองานได้น่าสนใจ  การเขียนเว็บเพจจึงนำมาซึ่งความน่าเชื่อถือ  ย่อมชักนำให้เกิดความรู้สึกอยากอ่านไม่เบื่อหน่ายง่าย ซึ่งสามารถสรุป กฎของการออกแบบเว็บเพจที่ดีได้  4  กฎ  ดังนี้

         กฎข้อที่ 1  ความแปลกแตกต่าง

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

         กฎข้อที่ 2  การย้ำซ้ำ

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

         กฎข้อที่ 3  การจัดแนว  วางแนว

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

      กฎข้อที่ 4  ความใกล้เคียง  ความเกี่ยวเนื่อง

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

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

ภาษา HTML

HTML  ย่อมาจากคำว่า  Hyper Text Markup Language  เป็นภาษาที่ใช้ในการสร้างเว็บเพจ  โดยมีแนวคิดจากการสร้างเอกสารไฮเปอร์เท็กซ์  (Hypertext Document :  ข้อความในเอกสารที่เชื่อมโยงถึงข้อมูลต่าง ๆ )  ซึ่งพัฒนาขึ้นจากภาษา  SGML  (Standard Generalized Markup Language) ภาษา HTML  จะเป็นตัวกำหนดโครงสร้างของเว็บเพจ  ว่าส่วนใดเป็นส่วนหัว  (head) ส่วนใดเป็นส่วนเนื้อหา (body)  แล้วให้เว็บบราวเซอร์แสดงผล

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

       การสร้างเว็บเพจสามารถเลือกสร้างได้  2  วิธี  ดังนี้

       1.  ใช้โปรแกรมประเภทเท็กซ์อีดิเตอร์ (Text Editor)  ซึ่งโปรแกรมที่นิยมใช้กันมากคือ Notepad  เพราะเป็นโปรแกรมที่ใช้ง่าย  และมีอยู่ในเครื่องคอมพิวเตอร์ที่ใช้ระบบปฏิบัติการวินโดว์ส

       2.  ใช้โปรแกรมประเภทเว็บอีดิเตอร์  (Web Editor)  เช่น  Microsoft FrontPage, Macromedia  Dreamweaver, Homesite และ Thai HTML  เป็นต้น  โดยส่วนใหญ่โปรแกรมสำเร็จเหล่านี้มีวิธีการใช้ที่คล้ายกัน

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

ภาษา  HTML ใช้แท็ก (tag) ในการกำหนดโครงสร้างและลักษณะของข้อความ  หรือ รูปภาพ  ซึ่งโครงสร้างหลักที่สำคัญ มีดังนี้ 

    1.  โครงสร้างรูปแบบของเอกสาร  HTML จะต้องขึ้นต้นด้วยแท็กเปิด  <HTML>  และ  ปิดท้ายด้วยแท็กปิด </HTML>

       2.  ทุกเอกสาร  HTML  จะต้องมี  Head ของเอกสาร

                <HTML>

                          <Head>

 </Head>

                </HTML>

       3.  ในแท็ก  Head  จะต้องบอกชื่อของเว็บเพจด้วยแท็ก TITLE  ซึ่งจะปรากฏที่ขอบด้านบนของหน้าต่างบราวเซอร์

                <HTML>

                          <Head>

<Title>My First Page</Title>

                          </Head>

                </HTML>

       4.  ส่วนรายละเอียดของข้อมูลต่าง ๆ ทั้งที่เป็นตัวอักษร  รูปภาพและภาพเคลื่อนไหวต่าง ๆ จะอยู่ในส่วนของแท็ก Body  ซึ่งจะเป็นส่วนที่อยู่ถัดไปจากแท็ก Head

                <HTML>

                          <Head>

<Title>My First Page</Title>

                          </Head>

       <Body>

                              <P>เนื้อหา การสร้างเว็บเพจ</P>

       </Body>

                </HTML>

เครื่องมือที่ใช้เขียน HTML

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

         1.  คลิกปุ่ม Start > All Program > Accessories > Notepad  หรือ คลิกปุ่ม Start  พิมพ์ Note  ในช่อง Search program and file  ดังรูปที่  2.1(1) และ (2) 

           2.  ได้หน้าต่าง  Notepad  ขึ้นมา

      3.  พิมพ์ข้อความต่าง ๆ ตามโครงสร้างของภาษา HTML  หรือ โค้ด HTML  รูปที่ 2.2

4.  การบันทึกแฟ้มข้อมูล  

                 4.1  เลือกเมนู  File

                 4.2 คลิกคำสั่ง  Save As…

                 4.3  ในช่อง Save in :   ให้เลือกเส้นทางและชื่อโฟลเดอร์ที่ต้องการนำไฟล์ไปเก็บไว้

                 4.4  ตั้งชื่อไฟล์ตามต้องการ  โดยต้องกำหนดให้ไฟล์มีนามสกุลเป็น  .HTM  หรือ  .HTML  ทุกครั้งหากไม่กำหนด  จะทำให้แฟ้มเปิดใช้งานไม่ได้

                 4.5  ในช่อง  Save as type  ให้เลือก  All File (*.*)

                 4.6  คลิกปุ่ม   Save  เพื่อบันทึกไฟล์  ดังรูปที่  2.3

5.  การเรียกดูผลลัพธ์จากเว็บบราวเซอร์

                 5.1  คลิกเมาส์ขวามือที่ Icon Chrome ของ file 

                 5.2  เลือก Open with  แล้วเลือก Google chrome ดังรูปที่ 2.4

  5.3  บราวเซอร์ จะแสดงผลงาน  ดังรูปที่ 2.5

            6.  การปรับปรุงและแก้ไขเว็บเพจ

                 หลังจากที่เรียกดูผลลัพธ์จากเว็บบราวเซอร์แล้ว  ผลที่ได้อาจไม่เป็นที่พอใจของผู้เขียน  หรือเกิดข้อผิดพลาดขึ้น  เราสามารถแก้ไขได้ดังนี้

      6.1  การเปิดไฟล์ Source code  ด้วยโปรแกรม Notepad  

               1.  คลิกปุ่ม Start > Program > Accessories > Notepad   ดังรูปที่  2.1 (1)

               2.  คลิกที่  Menu File > Open  เลือกไดร์ฟที่เก็บข้อมูล   คลิกเลือกชื่อแฟ้มที่ต้องการปรับปรุงและแก้ไข

               3. คลิก Open  เพื่อเปิดแฟ้มดังกล่าวมาดำเนินการแก้ไข  

     6.2  การเปิดไฟล์ Source code  วิธีลัด

                       1.  คลิกเมาส์ขวามือที่ Icon Chrome ของ file Page1 ดังรูปที่ 2.4  แล้ว

               2. เลือก Open with  Notepad  จะแสดงดังรูปที่  2.2

3. ดำเนินการแก้ไขแล้ว Save ในชื่อไฟล์เดิม

การกำหนดคุณสมบัติของหน้าเว็บ   

       คุณสมบัติพื้นฐานของเว็บเพจแต่ละหน้าประกอบไปด้วย

     กำหนด  Title bar   ส่วนใหญ่จะเป็นการบอกชื่อหรือคำจำกัดความของเว็บ  ซึ่งเป็นส่วนที่อยู่ด้านบนสุดของบราวเซอร์  จะปรากฏข้อความขึ้นมาแตกต่างกัน 

  รูปแบบการใช้งาน

  ชื่อแท็ก         TITLE

       รูปแบบ       <TITLE>ชื่อหรือคำจำกัดความ</TITLE>

       ตัวอย่าง      <title>nrschool.ac.th  ยินดีต้อนรับ</title>

       การกำหนดชื่อ     title ให้กับเว็บเพจ  สามารถทำได้ดังนี้

การนำไปใช้

<Head>

             <title>สวัสดี</title> 

       </Head>

การกำหนดรูปแบบพื้นหลัง 

1.  การกำหนดพื้นหลังด้วยสี

    รูปแบบการใช้งาน        

       แอตทริบิวต์  BGCOLOR

       รูปแบบ       <BODY BGCOLOR = ชื่อสีหรือค่าสี></BODY>

       ตัวอย่าง       <body bgcolor = lightblue></body>

                      <body bgcolor = #afd7e0></body>

       การกำหนดพื้นหลังด้วยสี   สามารถทำได้ดังนี้

การนำไปใช้     

<html>

       <head><title>สวัสดี</title></head>

       <body bgcolor=lightblue>  …………………เนื้อหา………………………………… 

</body>

       </html>

       2.  การกำหนดพื้นหลังด้วยรูปภาพ

    รูปแบบการใช้งาน         

       แอตทริบิวต์  BACKGROUND

       รูปแบบ       <body backrgound = ชื่อไฟล์รูปภาพ></BODY>

การกำหนดพื้นหลังด้วยภาพ   สามารถทำได้ดังนี้

การนำไปใช้ 

       <Html>

             <head>     <title>  สวัสดี</title></head>

             <body background=a1.gif> …………………เนื้อหา…………………………………  

             </body>

       </html>

        3. กำหนดรูปพื้นหลังให้อยู่กับที่

รูปแบบการใช้งาน

       แอตทริบิวต์  BGPROPERTIES

       รูปแบบ       <body background = ชื่อไฟล์รูปภาพ  bgpropertise = fixed></body>

       ตัวอย่าง      <body background = a1.gif  bgproperties=fixed></body>

                   <body background = nangrong.jpg bgproperties=fixed></body>

       การกำหนดภาพพื้นหลังให้อยู่กับที   สามารถทำได้ดังนี้

การนำไปใช้ 

<html>

             <head><title>สวัสดี</title></head>

             <body background=a1.gif bgproperties= fixed> …………………เนื้อหา…………………………………

             </body>

       </html>