บทที่4 การจัดการข้อความ

บทที่4 การจัดการข้อความ

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

ผลลัพธ์ที่ได้

การกำหนดลักษณะตัวอักษร (Physical & Logical)

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

กำหนดข้อความเป็นตัวเอียง เป็นการเน้นข้อความ จากตัวอักษรปกติให้เป็นตัวเอียง เพื่อเน้นให้รู้ว่าเป็นข้อมูลที่่น่าสนใจ

รูปแบบของคำสั่ง ข้อความ

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

รูปแบบของคำสั่ง ข้อความ

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


แสดงข้อความที่มีขนาด n=1


แสดงข้อความที่มีขนาด n=2


แสดงข้อความที่มีขนาด n=3


แสดงข้อความที่มีขนาด n=4


แสดงข้อความที่มีขนาด n=5


แสดงข้อความที่มีขนาด n=6


แสดงข้อความที่มีขนาด n=7
 ผลที่ได้

บทที่3 การจัดวางเนื้อหาบนเว็บ

บทที่3 การจัดวางเนื้อหาบนเว็บ

การตัดคำขึ้นบรรทัดใหม่ 

ขั้นตอนการทำ
     1.คำสั่ง 
 เป็นคำสั่งขึ้นบรรทัดใหม่โดยตัวคำสั่งจะใช้เพียงตัวเดียวไม่ต้องใช้ 2 ตัวเหมือนคำสั่งอื่น อยู่ภายในคำสั่ง 
                              
     2.ตามตัวอย่าง code ดังนี้

     3.จะได้ผลดังนี้

     4.ตาม code ในส่วนที่ 1 เป็นการพิมพ์ข้อความต่อเนื่องกันแบบธรรมดา ในส่วนที่ 2เป็นแบบใช้คำสั่ง คั่นระหว่างข้อความเพื่อต้องการให้ข้อความขึ้นบรรทัดใหม่ หากพิมพ์คำสั่ง

 จะทำให้ข้อความขึ้นย่อหน้าใหม่

     5.ผลของส่วนที่ 1

     6.ผลของส่วนที่ 2

การใช้คำสั่ง 
ขั้นตอนการเขียน
     1.คำสั่ง เป็นคำสั่งขึ้นย่อหน้าใหม่ใช้กับข้อความ โดยใช้เพียวตัวเดียวแทรกในข้อความ ภายในคำสั่ง รูปแบบคำสั่งมีดังนี้ 

2.ตามตัวอย่าง code ดังนี้

3.จะได้ผลดังนี้

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

ถ้าหากเราใช้คำสั่ง
2 ตัว เช่น

 จะมีผลเหมือนกับการใช้คำสั่ง ได้ผลลัพธ์เหมือนกัน ลองเอาไปใช้ดู
   
การขึ้นย่อหน้าใหม่ และกำหนดตำแหน่งข้อความ (Paragraph)
     ในการจัด Paragraph ของข้อความ จะใช้ tag สามารถกำหนดการจัดวางตำแหน่งข้อความว่าจะชิดซ้าย / ขวา / กึ่งกลาง ด้วย attribute align และเมื่อแสดงผลแล้วจะขึ้นบรรทัดใหม่ให้อัตโนมัติ

การจัดข้อความอยู่กึ่งกลางหน้า
รูปแบบคำสั่ง

คำสั่งไม่ให้บราเซอร์ตัดข้อมูลขึ้นบรรทัดใหม่
รูปแบบคำสั่ง

คำสั่งกำหนดจุดบราเซอร์ตัดข้อมูลขึ้นบรรทัดใหม่
รูปแบบคำสั่ง

การใช้คำสั่ง 

    1.คำสั่ง เป็นคำสั่งจัดรูปแบบข้อความตามที่เราต้องการ ใช้ภายในคำสั่ง ในบางครั้งการใช้คำสั่ง และ ในข้อความหลายๆ จุด อาจทำให้สับสนได้ควรใช้คำสั่ง แทน ซึ่งมีรูปแบการเขียนดังนี้

    2.ตามตัวอย่าง code ดังนี้ 


    3.จะได้ผลดังนี้ 


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


คำสั่ง  คั่นเส้นแนวนอน รูปแบบคำสั่ง 




  
  

บทที่2 เริ่มต้นกับ HTML และ XHTML

แบบฝึกหัดก่อนเรียน
1.HTML  มาจากคำว่าอะไร
     ก.Hypertext Markap  languag
     ข.Hypertext languag  Markap
     ค.Hypertext Markap  language
     ง.Hypertext Markup  languag
2.สามารถแบ่งองค์ประกอบของ HTML ได้กี่ส่วน
     ก.1ส่วน
     ข.2ส่วน
     ค.3ส่วน
     ง.4ส่วน
3.หน้าที่ของ text editor คือข้อใด
     ก.กำหนดรูปแบบคำสั่งและข้อความ
     ข.กำหนดตัวอักษรพิเศษ
     ค.กำหนดพื้นหลัง
     ง.ถูกทุกข้อ
4.Web Browser มีหน้าที่อะไร
     ก.ใช้เรียกเอกสาร
     ข.ใช้ในการเก็บข้อมูล
     ค.ใช้ในการแก้ไขข้อมูล
     ง.หน้าแรกของ html
5.เครื่องมือที่ใช้ในการสร้างเอกสาร html ประกอบด้วยอะไรบ้าง
     ก.text editor
     ข.web browser
     ค.notepad
     ง.ถูกทั้งข้อ ก และ ข
6.xhtml เป็นภาษาที่เกิดจากสาเหตุได
     ก.การนำเอา shtml และ html มารวมกัน     
     ข.การนำเอา xml และ html มารวมกัน
     ค.การนำเอา shtml มาเป็น html 
     ง.ถูกทุกข้อ
7.ส่วนที่แสดงเนื้อหาของเว็บเพจทั้งหมด 
     ก.ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML  
     ข.ส่วนหัวเรื่อง (Head) 
     ค.ส่วนเนื้อหา (Body) 
     ง.ถูกทุกข้อ
8.ส่วนที่แสดงข้อความที่แถบหัวเรื่องของหน้าเว็บเพจ
     ก.ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML  
     ข.ส่วนหัวเรื่อง (Head) 
     ค.ส่วนเนื้อหา (Body) 
     ง.ถูกทุกข้อ
9.รูปแบบแท็กมีส่วนเริ่มต้นของแท็ก เรียกว่า อะไร
     ก.แท็กเปิด
     ข.แท็กปิด
     ค.แท็ก html
     ง.ถูกทุกข้อ
10.รูปแบบแท็กมีส่วนสิ้นสุดของแท็ก เรียกว่า อะไร
     ก.แท็กเปิด
     ข.แท็กปิด
     ค.แท็ก html 
     ง.ถูกทุกข้อ
เฉลย
1.ค     2.ข     3.ก     4.ก     5.ง     6.ข     7.ค     8.ข     9.ก     10.ข

รู้จักกับ  HTML
        HTML  ย่อมาจากคำว่า  Hypertext  Markup  Language  เป็นภาษาหลักที่ใช้ในการสร้างไฟล์เว็บเพจ  โดยมีแนวคิดจากการสร้างเอกสารไฮเปอร์เท็กซ์  (Hypertext  Document:  ข้อความในเอกสารที่เชื่อมโยงถึงข้อมูลต่างๆ  ได้)  ซึ่งพัฒนาขึ้นมาจากภาษา  SGML  (Standard  Generalized  Markup  Language) โดย  Tim  Burners-Lee  ในปี ค.ศ. 1990  ซึ่งใช้ในระบบของ  CERT (Consent  European  pour  la  Recherche  Nucleation) เบื้องต้นได้เริ่มใช้ที่สวิตเซอร์แลนด์  จากนั้นก็ได้แพร่ขยายออกไป  ระบบนี้ได้ถูกตั้งชื่อว่า World  Wide  Web: WWW  ที่เรารู้จักกันจนมึงยุคปัจจุบัน    ลักษณะของภาษา HTML                องค์ประกอบของภาษา HTML สามารถแบ่งออกได้เป็น 2 ส่วน คือ ส่วนที่เป็นข้อความทั่วๆไป และส่วนที่เป็นคำสั่งที่ใช้ในการกำหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกคำสั่งนี้ว่า แท็ก (Tag) โดยแท็กคำสั่งของ HTML จะอยู่ในเครื่องหมาย < และ > ซึ่งมีหลักในการเขียนดังนี้                รูปแบบแท็กจะแยกเป็น 2 ส่วน โดยจะต้องมีส่วนเริ่มต้นของแท็ก เรียกว่า "แท็กเปิด" และส่วนจบของแท็ก เรียกว่า "แท็กปิด" โดยส่วนของแท็กปิดจะต้องมีเครื่องหมายSlash (/)โครงสร้างพื้นฐานของภาษา HTML มีดังนี้ 
  โครงสร้างของภาษา HTML ประกอบด้วย 3 ส่วน คือ         1. ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML  ซึ่งจะมีแท็ก <html>…</html>กำกับอยู่ที่จุดเริ่มต้นและจุดสิ้นสุดของ แฟ้มข้อมูล       2. ส่วนหัวเรื่อง (Head) เป็นส่วนที่กำหนดให้แสดง ข้อความที่แถบหัวเรื่องของหน้าเว็บเพจนั้น ๆ เช่น แท็ก <title>....</title> และเก็บ แท็กพิเศษอื่น ๆ       3. ส่วนเนื้อหา (Body) เป็นส่วนที่แสดงเนื้อหาของเว็บเพจทั้งหมด ซึ่งประกอบด้วย ข้อความและแท็กต่าง ๆ เช่น แท็กสำหรับจัดการกับรูปแบบของข้อความ ตาราง รูปภาพ กราฟิกต่างๆ สีของตัวอักษร สีพื้น เป็นต้น

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

ทดลองสร้างเว็บเพจอย่างง่ายตามขั้นตอนต่อไปนี้     1.สร้าง Folder สำหรับเก็บข้อมูลที่ไดร์ฟ D: ชื่อHTML1       2.เปิดโปรแกรม Notepad และนำคำสั่ง (Tag) ต่อไปนี้ไปใส่ในโปรแกรมและทำการจัดเก็บ (Save)    ชื่อ MyWeb2.HTML<html><head><title>การสร้างเว็บเพจอย่างง่าย...</title></head><body>เว็บเพจ หมายถึง หน้าเอกสาร HTML หน้าต่าง ๆโฮมเพจ หมายถึง หน้าเอกสาร HTML หน้าแรกของเว็บไซต์เว็บไซต์ หมายถึง กลุ่มของโฮมเพจและเว็บเพจ หรือแหล่งข้อมูลองค์กรต่าง ๆ </body></html      3. แสดงผลการทำงานในข้อ 2 โดยใช้โปรแกรมInternet Explorer          เปิดโปรแกรม Internet Explorer และเปิดหน้าเว็บเพจจากข้อ 2 ชื่อ MyWeb2.html ที่เก็บในไดร์ฟD:โฟลเดอร์
HTML1  ขึ้นมาแสดงผลการทำงานโดยขยายหน้าต่างการแสดงผลให้เต็มจอภาพ  และให้สังเกตความสัมพันธ์ของคำสั่ง
       ในภาษา HTML กับผลการทำงานในโปรแกรมInternet Explorer เพื่อเปรียบเทียบกับการเพิ่มคำสั่งใหม่ต่อไปHTML1  ขึ้นมาแสดงผลการทำงานโดยขยายหน้าต่างการแสดงผลให้เต็มจอภาพ  และให้สังเกตความสัมพันธ์ของคำสั่ง       ในภาษา HTML กับผลการทำงานในโปรแกรมInternet Explorer เพื่อเปรียบเทียบกับการเพิ่มคำสั่งใหม่ต่อไปHTML1  ขึ้นมาแสดงผลการทำงานโดยขยายหน้าต่างการแสดงผลให้เต็มจอภาพ  และให้สังเกตความสัมพันธ์ของคำสั่ง       ในภาษา HTML กับผลการทำงานในโปรแกรมInternet Explorer เพื่อเปรียบเทียบกับการเพิ่มคำสั่งใหม่ต่อไป XHTML  ภาษามาตรฐานใหม่ที่มาแทน HTML        XHTML (ย่อมาจาก Extensible HyperText Markup Language)เป็นภาษาที่เกิดจากการนำ XML และ HTML มารวมกัน กลายเป็นมาตรฐานใหม่ของ HTML    คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป
ตัวอย่างการเขียนโปรแกรมโครงสร้างหลักของภาษาHTML    

แบบฝึกหัดหลังเรียน
1.HTML  มาจากคำว่าอะไร
     ก.Hypertext Markap  languag
     ข.Hypertext languag  Markap
     ค.Hypertext Markap  language
     ง.Hypertext Markup  languag
2.สามารถแบ่งองค์ประกอบของ HTML ได้กี่ส่วน
     ก.1ส่วน
     ข.2ส่วน
     ค.3ส่วน
     ง.4ส่วน
3.หน้าที่ของ text editor คือข้อใด
     ก.กำหนดรูปแบบคำสั่งและข้อความ
     ข.กำหนดตัวอักษรพิเศษ
     ค.กำหนดพื้นหลัง
     ง.ถูกทุกข้อ
4.Web Browser มีหน้าที่อะไร
     ก.ใช้เรียกเอกสาร
     ข.ใช้ในการเก็บข้อมูล
     ค.ใช้ในการแก้ไขข้อมูล
     ง.หน้าแรกของ html
5.เครื่องมือที่ใช้ในการสร้างเอกสาร html ประกอบด้วยอะไรบ้าง
     ก.text editor
     ข.web browser
     ค.notepad
     ง.ถูกทั้งข้อ ก และ ข
6.xhtml เป็นภาษาที่เกิดจากสาเหตุได
     ก.การนำเอา shtml และ html มารวมกัน     
     ข.การนำเอา xml และ html มารวมกัน
     ค.การนำเอา shtml มาเป็น html 
     ง.ถูกทุกข้อ
7.ส่วนที่แสดงเนื้อหาของเว็บเพจทั้งหมด 
     ก.ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML  
     ข.ส่วนหัวเรื่อง (Head) 
     ค.ส่วนเนื้อหา (Body) 
     ง.ถูกทุกข้อ
8.ส่วนที่แสดงข้อความที่แถบหัวเรื่องของหน้าเว็บเพจ
     ก.ส่วนที่กำหนดให้เว็บเบราว์เซอร์ทราบว่าเป็นแฟ้มข้อมูลชนิด HTML  
     ข.ส่วนหัวเรื่อง (Head) 
     ค.ส่วนเนื้อหา (Body) 
     ง.ถูกทุกข้อ
9.รูปแบบแท็กมีส่วนเริ่มต้นของแท็ก เรียกว่า อะไร
     ก.แท็กเปิด
     ข.แท็กปิด
     ค.แท็ก html
     ง.ถูกทุกข้อ
10.รูปแบบแท็กมีส่วนสิ้นสุดของแท็ก เรียกว่า อะไร
     ก.แท็กเปิด
     ข.แท็กปิด
     ค.แท็ก html 
     ง.ถูกทุกข้อ
เฉลย
1.ค     2.ข     3.ก     4.ก     5.ง     6.ข     7.ค     8.ข     9.ก     10.ข
     

บทที่1 เริ่มต้นกับการสร้างเว็บเพจ

บทที่1 เริ่มต้นกับการสร้างเว็บเพจ

แบบฝึกหัดก่อนเรียน

1.ความหมายของเว็บเพจตรงกับข้อใด

                ก.เอกสารที่ใช้ในการเผยแพร่ข้อมูลข่าวสาร

                ข.กลุ่มของหน้าเว็บ หรือเว็บหลายๆหน้ารวมกัน

                ค.เป็นช่องทางเข้าเว็บเพจทั้งหมดภายในเว็บไซต์

                ง.เป็นที่เก็บเว็บเพจเมื่อต้องการเปิดดูเว็บเพจ

2.ประโยชน์ของเว็บเพจคือข้อใด

                ก.ประชาสัมพันธ์บริษัทและองค์กร

                ข.เอกสารที่ใช้ในการเผยแพร่ข้อมูลข่าวสาร  
                ค.การแสดงผลของเว็บเพจ
                ง.เป็นที่เก็บเว็บเพจ

3. .com เป็นตัวย่อขององค์กรใด

                ก.บริษัทหรือองค์กรพาณิชย์

      ข.สถาบันการศึกษา

                ค.องค์กรรัฐบาล

                ง.บริษัทหรือองค์กรทางธุรกิจ

4. .gov   เป็นตัวย่อขององค์กรใด

     ก.องค์กรรัฐบาล

               ข.บริษัทหรือองค์กรพาณิชย์

               ค.สถาบันการศึกษา

               ง.บริษัทหรือองค์กรทางธุรกิจ

5. บริษัทหรือองค์กรทางธุรกิจใช้ตัวย่อใด

               ก. .biz

     ข. .imfo

               ค. .org

               ง. .net

6. องค์กรที่ทำหน้าที่เป็นเกตเวย์ หรือจุดเชื่อมต่อเครือข่าย ใช้ตัวย่อใด

               ก..net
               ข..biz

     ค..info

               ง..org

7. Domain Name มีกี่ระดับ

               ก. 3 ระดับ

               ข. 5 ระดับ

               ค. 7 ระดับ

               ง. 9 ระดับ

8.การออกแบบโครงสร้างมีกี่รูปแบบ         
               ก. 4 รูปแบบ
               ข. 5 รูปแบบ
               ค. 6 รูปแบบ
               ง. 8 รูปแบบ
9.โดเมนเนม  3 ระดับ  จะมีรูปแบบ เช่นไร
ก.ส่วนที่ 2 หลังเครื่องหมายจุดใช้ระบุประเภทขององค์กร  และคำย่อส่วนที่  3  หลังเครื่องหมายจุดใช้ระบุประเทศที่ตั้งขององค์กรนั้น 
ข.คำย่อของประเภทองค์กร  ซึ่งคำย่อของประเภทองค์กรที่จะพบบ่อย
ค.ส่วนที่ 2 หลังเครื่องหมายจุดใช้ระบุประเภทขององค์กร  
ง.ส่วนที่  3  หลังเครื่องหมายจุดใช้ระบุประเทศที่ตั้งขององค์กร
10.ออสเตรเลียใช้ตัวย่ออะไร
               ก..au
               ข..cn
               ค..th
               ง..jp
เฉลย
1.ก     2.ก     3.ก     4.ก      5.ก      6.ก      7.ก       8.ก      9.ก      10.ก

บทที่1 เริ่มต้นกับการสร้างเว็บเพจ

เว็บเพจคืออะไร

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

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

ประโยชน์ของเว็บเพจ

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

-ข่าวและเหตุการณ์ในปัจจุบัน

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

-ข้อมูลความรู้และห้องสมุด

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

-ประชาสัมพันธ์บริษัทและองค์กร

เป็นเว็บเพจที่แนะนำความเป็นมา  สินค้า  บริการ  ที่อยู่ที่ติดต่อ และข่าวประชาสัมพันธ์องค์กร

-ความบันเทิง

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

-การเงิน  การลงทุน

เป็นเว็บที่นำเสนอข้อมูลทางการเงินและการลงทุน  รวม

ไปถึงบริการสำหรับทำธุรกรรมการเงินออนไลน์ผ่านเครือข่ายอินเทอร์เน็ต

-ซื้อ-ขายสินค้า  และบริการ

เป็นเว็บที่เหมือนร้านค้าสำหรับขายสินค้า  และบริการต่างๆ  รวมทั้งยังบริการรับฝากขายสินค้าผ่านร้านเหล่านี้ได้อีกด้วย

-ดาวน์โหลดข้อมูล

เป็นเว็บที่ไห้บริการดาวน์โหลดไฟล์ต่างๆ เช่น  ไฟล์โปแกรม  ไฟล์ภาพ และไฟล์เพลง  เป็นต้น

-บริการติดต่อสื่อสาร

เป็นเว็บที่ให้บริการในการติดต่อสื่อสารถึงกัน  เข่น  การรับส่งจดหมายอิเล็กทรอนิกส์ (E-mail) เว็บบอร์ด และเว็บแช็ตสนทนาต่างๆ เป็นต้น

เว็บเพจทำงานได้อย่างไร

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

คำศัพท์พื้นฐานเกี่ยวกับการสร้างเว็บเพจ

                คือ  คำศัพท์ต่างๆ  ที่วยทำให้เราเข้าใจและสามารถศึกษาการสร้างเว็บเพจได้อย่างถูกต้อง

ไคลเอนต์-เซิร์ฟเวอร์ (Client-Server)

                มีการติดต่อสื่อสารอยู่ 2 แบบ  คือ แบบส่งข้อมูลและรับข้อมูล  โดยเครื่องคอมพิวเตอร์ที่ทำการส่งข้อมูล เรียกว่า  เครื่องให้บริการ  Server และเครื่องคอมพิวเตอร์ที่รับข้อมูล เราจะเรียกว่า เครื่องรับบริการ Client

เครือข่ายใยแมงมุม  WWW  (world  wide  web)

                WWW หรือเรียกสั้นๆว่า  เว็บ  การให้บริการในรูปแบบนี้  คือ  การเรียกบราวเซอร์  เช่น  internet Explorer หรือ Firefox จากเครื่องของเราและระบุ  URLเพื่อใช้ในการอ้างที่อยู่ที่เก็บเว็บ

เว็บไซต์  Web site

                กลุ่มของหน้าเว็บ  หรือเว็บหลายๆหน้ารวมกัน  โดยจะมีการกำหนดหน้าเว็บเพจหน้าหนึ่งไว้เป็นหน้าแรก  ที่เรียกว่าโฮมเพจ ที่เป็นช่องทางเข้าเว็บเพจทั้งหมดภายในเว็บไซต์นั้น

เว็บบราวเซอร์  และเว็บเซิร์ฟเวอร์ Web Browser &Web Server

                เว็บบราวเซอร์ คือ โปรแกรมที่เป็นประตูเข้าสู่โลก World Wide Web เป็นโปรแกรมที่อยู่ในเครื่องคอมพิวเตอร์ลูกข่าย ที่มีหน้าที่ในการส่งข้อมูลร้องขอและนำเสนอข้อมูลเว็บ

                เว็บเซิร์ฟเวอร์  เป็นที่เก็บเว็บเพจ  เมื่อต้องาการเปิดดูเว็บเพจ  ต้องใช้บราวเซอร์ดึงข้อมูล

โดเมนเนม Domain Name

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

ประเภทของบโดเมนเนม

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

โดเมนเนม 2 ระดับ  จะมีรูปแบบ เช่น success media.com

                คือ  คำย่อของประเภทองค์กร  ซึ่งคำย่อของประเภทองค์กรที่จะพบบ่อย

ตัวย่อ	ประเภทองค์กร
.com	บริษัทหรือองค์กรพาณิชย์  เช่น  บริษัท  ไอบีเอ็ม  มีอินเทอร์เน็ตแอดเดรสเป็น  ibm.com
.edu	สถาบันการศึกษา เช่น  มหาวิทยาลัยฮาร์วาร์ด  มีอินเทอรืเน็ตแอดเดรสเป็น  harvard.edu
.gov	องค์กรรัฐบาล  เช่น  องค์กรนาว่า  มีอินเทอร์เน็ตแอดเดรสเป็น  nasa.gov
.mil	องค์กรทางทหาร  เช่น  af.mil  เป็นอินเทอร์เน็ตแอดเดรสของกองทัพอากาศสหรัฐ
.net	องค์กรที่ทำหน้าที่เป็นเกตเวย์  หรือจุดเชื่อมต่อเครือข่าย  เช่น  mci.net
.org	องค์กรที่ไม่เข้าข่ายประเภทองค์กรทั้งหมดที่ได้กล่าวถึง
.biz	บริษัทหรือองค์กรทางธุรกิจ
.info	ใช้ในโอกาสโปรโมทสินค้า   เหตุการณ์สำคัญ  เช่น  บอกข้อมูลส่วนลดของสินค้า

โดเมนเนม  3 ระดับ  จะมีรูปแบบ เช่น success.co.Th

                โดยคำย่อในส่วนที่ 2 หลังเครื่องหมายจถดใช้ระบุประเภทขององค์กร  และคำย่อส่วนที่  3  หลังเครื่องหมายจุดใช้ระบุประเทศที่ตั้งขององค์กรนั้น เช่น

ตัวย่อส่วนที่2		ตัวย่อส่วนที่3
.co	บริษัทหรือองค์กรพาณิชย์	.cn	จีน
.ac	สถาบันการศึกษา	.th	ไทย
.go	องค์กรรัฐบาล	.jp	ญี่ปุ่น
.or	องค์กรไม่แสวงผลกำไร	.au	ออสเตรเลีย
.net	องค์กรที่ให้บริการเครือข่าย

รายละเอียดเกี่ยวกับ  URL

               http://www.disney.com/Disneylnteractive/Hercules/index.html

     http://   คือ content identifier ส่วนที่แจ้งให้บราวเซอร์ทราบว่าต้องจัดการกับข้อมูลที่พบอย่างไร  สำหรับเว็บเพจใน world  wide  web  จะใช้โปรโตคอลมาตรฐาน

     WWW.Disney.com  คือ host  name  ส่วนที่ระบุชื่อของเว็บไซต์ที่ทำหน้าที่เผยแพร่
เว็บเพจ

     Disneyland  คือ ส่วนระบุตำแหน่ง  ระบุที่เก็บข้อมูลเว็บในเครื่อง

     index.HTML  คือ ชื่อไฟล์ข้อมูล  ส่วนสุดท้ายของUPL เป็นชื่อไฟล์ข้อมูล

โปรแกรมที่ใช้สร้างเว็บเพจ

       ขึ้นอยู่กับรูปแบบของการสร้างเว็บเพจ  ดั้งนี้

โปรแกรมที่ใช้เขียนโค้ตเว็บเพจด้วยภาษา html

        การเขียนภาษา  html  เพื่อสร้างเว็บเพจ  เพื่อให้เราสามารถเข้าใจโครงสร้างของภาษาและคำสั่ง จะนำไปสู่การเป็นนักพัฒนาเว็บต่อไป

โปรแกรมที่ใช้สร้างเว็บเพจและจัดองค์ประกอบบนหน้าเว็บ

        คือ Macro media  Dream weaver, Microsoft Front Page และ Net Objects  Fusion  เป็นต้น  เราจัดวางภาพ  หรือข้ความแบบไหน  โปรแกรมจะทำการเขียนโค้ด  html ให้อัตโนมัติ

หลักการออกแบบเว็บไซต์

         กำหนดขนาดของเว็บเพจ

1.ขนาดของเว็บไซต์แบบ 800x600 pixels ซึ่งเป็นขนาดมาตรฐานที่ใช้กับหน้าจอคอมพิวเตอร์ได้ทุกขนาด

2.ขนาดของเว็บไซต์แบบ1024x768pixels  การออกแบบและสร้างเว็บไซต์

ออกแบบและสร้างเว็บเพ็จ  

เป็นขั้นตอนการนำเอาข้อมูลทั้งหมดมาสร้างเป็นเว็บไซด์ด้วยภาษา  HTML  หรือ  เครื่องมือการสร้างเว็บอื่น ๆ  หลักสำคัญในการออกแบบและสร้างเว็บไซด์  คือ
     1.กำหนดจุดประสงค์ของเว็บไซด์  โดยวางเป้าหมายของผู้เข้าชมว่าจะเป็นกลุ่มใด  เช่น  เว็บไซด์ด้านการท่องเที่ยว เว็บไซด์ด้านเผยแผ่ธรรมะ  เว็บไซด์ขายสินค้าโอทอป  เว็บไซด์ขายหนังสือเก่า  ฯลฯ  ซึ่งเว็บไซด์แต่ละประเภทจะมีกลุ่มคนที่สนใจอยู่กลุ่มหนึ่ง  ผู้สร้างเว็บไซด์ควรกำหนดลงไปให้ชัดเจนตั้งแต่แรกว่า  ผู้ชมกลุ่มเป้าหมายหลักเป็นใคร  จำนวนประมาณเท่าไร
     2.เลือกเว็บเบราว์เซอร์  เป็นการเลือกเว็บเบราว์เซอร์ที่ใช้แสดงผลเว็บไซด์  จะได้กำหนดขนาดกว้าง  ยาว  และลักษณะการวางองค์ประกอบเว็บให้สวยงาม  แสดงผลได้เร็ว
     3.วางโครงร่างของเว็บไซด์  กำหนดโครงร่างของเว็บไว้ว่าจะมีทั้งหมดกี่เว็บเพ็จ  แต่ละเว็บเพจมีเนื้อหาอะไรบ้าง  ควรเขียนเป็นแผนผังเว็บไซด์ออกมาบนกระดาษ
     4.ออกแบบหน้าตาของเว็บ  เป็นขั้นตอนการลงมือสร้างเว็บเพ็จแต่ละหน้าตามที่ได้ออกแบบไว้  พร้อมกับทดสอบผ่านเว็บเบราว์เซอร์  (แบบ offline   

การออกแบบและสร้างเว็บไซต์     

ออกแบบและสร้างเว็บเพ็จ  เป็นขั้นตอนการนำเอา ข้อมูลทั้งหมดมาสร้างเป็นเว็บไซด์ด้วยภาษา  HTML  หรือ เครื่องมือการสร้างเว็บอื่น ๆ  หลักสำคัญในการออกแบบและสร้างเว็บไซด์  คือ 
     1.  กำหนดจุดประสงค์ของเว็บไซด์  โดยวางเป้าหมายของผู้เข้าชมว่าจะเป็นกลุ่มใด  เช่น  เว็บไซด์ด้านการท่องเที่ยว  เว็บไซด์ด้านเผยแผ่ธรรมะ  เว็บไซด์ ขายสินค้าโอทอป เว็บไซด์ขายหนังสือเก่า  ฯลฯ  ซึ่งเว็บไซด์แต่ละประเภทจะมีกลุ่ม คนที่สนใจอยู่กลุ่มหนึ่ง  ผู้สร้างเว็บไซด์ควรกำหนด ลงไปให้ชัดเจนตั้งแต่แรกว่า  ผู้ชมกลุ่มเป้าหมาย หลักเป็นใคร จำนวนประมาณเท่าไร 
     2.  เลือกเว็บเบราว์เซอร์  เป็นการเลือกเว็บเบราว์เซอร์ที่ใช้แสดงผลเว็บไซด์  จะได้กำหนดขนาดกว้าง  ยาว  และลักษณะการวางองค์ประกอบเว็บให้สวยงาม  แสดง ผลได้เร็ว 
     3.  วาง โครงร่างของเว็บไซด์  กำหนดโครงร่างของเว็บไว้ ว่าจะมีทั้งหมดกี่เว็บเพ็จ  แต่ละเว็บเจพมีเนื้อหา อะไรบ้าง  ควรเขียนเป็นแผนผังเว็บไซด์ออกมาบนกระดาษ 
     4.  ออกแบบหน้าตาของเว็บ  เป็นขั้นตอนการลงมือสร้างเว็บเพ็จแต่ละหน้าตามที่ได้ออกแบบไว้  พร้อมกับทดสอบผ่านเว็บเบราว์เซอร์  (แบบ 
  

 แบบฝึกหัดหลังเรียน

1.ความหมายของเว็บเพจตรงกับข้อใด

                ก.เป็นช่อง ทางเข้าเว็บเพจทั้งหมดภายในเว็บไซต์

                ข.กลุ่มของหน้าเว็บ หรือเว็บหลายๆหน้ารวมกัน

                ค.เอกสารที่ ใช้ในการเผยแพร่ข้อมูลข่าวสาร

                ง.เป็นที่เก็บเว็บเพจเมื่อต้องการเปิดดูเว็บเพจ

2.ประโยชน์ของเว็บเพจคือข้อใด

                ก.การแสดงผล ของเว็บเพจ

                ข.เอกสารที่ ใช้ในการเผยแพร่ข้อมูลข่าวสาร  
                ค.ประชา สัมพันธ์บริษัทและองค์กร
                ง.เป็นที่เก็บเว็บเพจ

3. .com เป็นตัวย่อขององค์กรใด

                ก.องค์กร รัฐบาล

      ข.สถาบันการศึกษา

                ค.บริษัท หรือองค์กรพาณิชย์

                ง.บริษัทหรือองค์กรทางธุรกิจ

4. .gov   เป็นตัวย่อขององค์กรใด

      ก.สถาบันการศึกษา

                ข.บริษัทหรือองค์กรพาณิชย์

                ค.องค์กร รัฐบาล

                ง.บริษัทหรือองค์กรทางธุรกิจ

5. บริษัทหรือองค์กรทางธุรกิจใช้ตัวย่อใด

                ก. .org

      ข. .imfo

                ค. .biz

                ง. .net

6. องค์กรที่ทำหน้าที่เป็นเกตเวย์ หรือจุดเชื่อมต่อเครือข่าย ใช้ตัวย่อใด

                ก..info
                ข..biz

      ค..net

                ง..org

7. Domain Name มีกี่ระดับ

                ก. 1 ระดับ

                ข. 2 ระดับ

                ค. 3ระดับ

                ง. 4ระดับ

8.การออกแบบโครงสร้างมีกี่รูปแบบ         
               ก. 1 รูปแบบ
               ข. 2รูปแบบ
               ค. 4รูปแบบ
               ง. 8รูปแบบ
9.โดเมนเนม  3 ระดับ  จะมีรูปแบบ เช่นไร
              ก.ส่วนที่ 2 หลังเครื่องหมายจุดใช้ระบุประเภทขององค์กร
              ข.คำย่อของประเภท องค์กร  ซึ่งคำย่อของประเภทองค์กรที่จะพบบ่อย
              ค.ส่วนที่ 2 หลังเครื่องหมายจุดใช้ระบุประเภทขององค์กร  และคำย่อส่วนที่  3  หลังเครื่องหมายจุดใช้ระบุประเทศที่ตั้งขององค์กร  
              ง.ส่วนที่  3  หลัง เครื่องหมายจุดใช้ระบุประเทศที่ตั้งขององค์กร
10.ออสเตรเลีย ใช้ตัวย่ออะไร
              ก..th
              ข..cn
              ค..au
              ง..jp
เฉลย
1.ค    2.ค      3.ค     4.ค       5.ค       6.ค    7.ค       8.ค      9.ค       10.ค