เรียนรู้ภาษา HTML กัน...: 2011

เนื้อหา...

        สำหรับ เนื้อหาบทเรียนรู้ เรื่อง การสร้าง Homepage ด้วยภาษา HTML จะพื้นฐานสำหรับนิสิตในการสร้างโฮมเพจ ซึ่งจะเป็นจุดเริ่มต้นที่ดีในการสร้างโฮมเพจของตนเอง เนื้อหาในบทเรียนนี้จะประกอบด้วย

หน่วยการเรียนรู้ที่ 1 ความรู้พื้นฐาน HTML
                            1.1 การสร้าง Homepage
                            1.2 ความรู้เบื้องต้นภาษา HTML
                            1.3 โครงสร้างของภาษา HTML
                            1.4 เริ่มต้นกับภาษา HTML ด้วยNotepad

หน่วยการเรียนรู้ที่ 2 การจัดรูปแบบอักษร
                            2.1 การใส่ข้อความ
                            2.2 การทำตัวอักษรหนา เอียง ขีดเส้นใต้
                            2.3 การกำหนดขนาดตัวอักษร
                            2.4 การกำหนดรูปแบบและสีของตัวอักษร

หน่วยการเรียนรู้ที่ 3 การจัดรูปแบบเอกสาร
                            3.1 การขึ้นบรรทัดใหม่
                            3.2 การจัดย่อหน้า
                            3.3 การจัดตำแหน่งในหน้าเอกสาร
                            3.4 การเว้นวรรค
                            3.5 เส้นคั่นในแนวนอน

หน่วยการเรียนรู้ที่ 4 การใส่รูปภาพ
                            4.1 การใส่รูปภาพ
                            4.2 คุณสมบัติการนำเสนอรูปภาพ

หน่วนการเรียนรู้ที่ 5 การกำหนดพื้นหลัง
                           5.1 การกำหนด Background เป็นสี
                           5.2 การกำหนด Background เป็นรูปภาพ

หน่วยการเรียนรู้ที่ 6 การเชื่อมโยงข้อมูล (link)
                           6.1 การเชื่อมโยงข้อมูลไปยังแฟ้มเอกสารอื่น
                           6.2 การเชื่อมโยงข้อมูลไปยังเว็บไซต์
                           6.3 การเชื่อมโยงข้อมูลแบบอีเมลล์
                           6.4 การใช้รูปภาพเป็นจุดเชื่อมโยง

หน่วยการเรียนรู้ที่ 7 การสร้างตาราง
                            7.1 คำสั่งในการสร้างตาราง
                            7.2 โครงสร้างตาราง
                            7.3 การใส่ข้อความและรูปภาพในตาราง
                            7.4 ความกว้าง ความสูงของตาราง
                            7.5 เส้นตาราง

หน่วยการเรียนรู้ที่ 8 การอัพโหลด ( Upload ) ข้อมูล

1. ความรู้พื้นฐาน HTML

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

      html คืออะไร?

         HTML ย่อมาจาก Hyper Text Markup Language เป็นภาษาสากลที่ใช้สื่อสารกันแพร่หลายใน internet เช่นเดียวกับคำสั่งใน UNIX หรือ DOS ในเครื่องคอมพิวเตอร์แบบ PC
พูดง่ายๆ HTML ก็คือเอกสารข้อความที่มี ชุดคำสั่ง tag กำกับแต่ละส่วนของเอกสารเพื่อบอกให้โปรแกรมสำหรับอ่านซึ่งเราเรียกว่า Web browser รู้ว่า แต่ละส่วนของเอกสารจะต้องแสดงผลออกมาอย่างไร หรือจะต้องทำอย่างไรหากมีการเลือก(ด้วยการคลิกเมาส์หรือกด Enter) ตรงบริเวณที่กำหนด เป็นต้น

          นักพัฒนาเว็บทุกคนต้องมีความรู้เกี่ยวกับภาษา html เป็นภาษาเริ่มแรกๆ จนกระทั่งปัจจุบันนี้ แม้จะมีเครื่องไม้เครื่องมือทำให้เราไม่ต้องจดจำภาษา html ให้ยุ่งยากแต่ในความเป็นจริงแล้วถ้าจะทำเว็บในระยะยาวนั้น ทุกๆคนที่ทำเว็บไซต์จำเป็นที่จะต้องเข้าใจภาษา html เป็นอย่างดี แล้วค่อศึกษาและเพิ่มเติมความสามารถด้วยการศึกษาภาษาอื่นๆเช่น PHP JavaScript ASP JSP สคริปภาษาต่างๆ Flash ฯลฯ
ภาษา html เป็นภาษาสำหรับเขียนโปรแกรม แต่เป็นภาษาที่ง่ายซึ่งคนที่ไม่มีพื้นฐานด้านภาษามาเลยก็สามารถเรียนด้วยตัวเองได้ (จะง่ายเหมือนตอนผมเรียนเทอรโบปาสคาลป่าวไม่รู้ ไว้ต้องรอดู อิอิ)
เว็บเพจแต่ละเว็บจะมีหน้าตาต่างๆกันออกไป แต่เว็บทุกเว็บนั้นมีองค์ประกอบพื้นฐานเหมือนๆกัน (อ่ะเห็นคำว่า เว็บ เว็บเพจ เว็บไซต์ โฮมเพจ ไรพวกเนี๊ยะ มันต่างกันอย่างไร) ผมก็ไปเสาะหามาแล้วได้ความดังนี้

        เว็บเพจ (WebPage) คือหน้าเว็บหน้าหนึ่งที่เราเปิดมานั่นแหละครับ เช่นBlog ที่ผมกำลังเขียนอยู่เนี๊ยะก็เป็น เว็บเพจ หน้าหนึ่งครับ โดยจะเซฟเป็นไฟล์ที่มีนามสกุล *.htm หรือ *.html

        เว็บไซต์ (WebSite) คือการเอาหน้าเว็บเพจที่เราทำๆขึ้นมามารวมกันครับ ก็เปรียบได้กับเว็บพวก sanook.com, yahoo.com ฯลฯ ทั่วๆไปนี่แหละครับ หรือจะเป็น Blogger.com อันนี้ก็ได้

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

         บราวเซอร์(Browser) คือเครื่องมือในการอ่านภาษา html มีหน้าที่ติดต่อกับ เว็บเซิฟเวอร์ แปลงภาษาhtml เป็นหน้าเว็บเพจ
         ถ้ามีติดเครื่องตอนลงโปรแกรมวินโดวส์มาเลยก็เช่น Internet Exploer หรือตัว e สีฟ้าๆเวลาจะเล่นอินเตอร์เนตนั่นแหละครับ และก็มีอิกตัวที่ผมใช้อยู่ก็ FireFox น้องใหม่มาแรงมีระบบป้องกันพวกไวรัส adware มาให้ในระดับนึงครับ ยังมีพวก Netscape Navigator และ Opera อื่นๆอีก (เยอะแฮะ เอาเป็นว่าใช้ตัว e ที่มากับเครื่องหรือไม่ก็ Firefox ก็พอครับ- -")
ยังมีศัพท์ที่จำเป็นต้องรู้อิกเช่น พวก URL, Domian Name, Web Server, HyperLink ฯลฯ ไว้เมื่อมีศัพท์พวกนี้ในเนื้อหาผมจะอธิบายกำกับไว้ให้(ไม่อยากให้มัน อัดๆจำๆกันเกินไปเด๋วจะพาลลืมและเบื่อเปล่าๆ ซะงั้น)

           นอกจากศัพท์ที่จะต้องรู้แล้ว ก็ยังมีพวกประวัติความเป็นมาต่างๆ อันนี้ถ้าเรารู้ก็จะเป็นการดีครับและถือว่าเป็นการเคารพเจ้าของคนคิดค้นภาษาขึ้นมา และจะรู้ด้วยว่าเค้าปัต-ตะ-นา กันไปถึงไหนแล้ว แต่ผมจะไม่เอามาลงใน Blog หรอกครับ มันยาววมาก แหะๆ ใครอยากอ่านก็ลองหาใน WiKipedia สารานุกรมโลก(อินเตอร์เนต)ดูนะครับ
           รู้ไหมครับว่าขนาดของหน้าเว็บเพจที่เราทำขึ้นมานั้น ถ้านำไปเปิดผ่าน เครื่องคอมพิวเตอร์ที่ตั้งความละเอียดของหน้าจอต่างกัน หรือเปิดผ่านเว็บบราวเซอร์คนละตัวกัน ผลลัพธ์ที่ออกมานั้นก็อาจจะแตกต่างกันไปด้วย แล้วเราควรจะกำหนดขนาดของหน้าเว็บเท่าไหร่ดีหล่ะ? อันนี้ขอตอบว่าต้องลองทำตามที่เครื่องเราใช้ก่อนครับ ไม่ต้องไปกำหนดกฎเกณฑ์มัน เพราะอย่างน้อย คนที่ใช้บราวเซอร์ กับความละเอียดแบบเราก็ยังมีเยอะครับ(คิดง่าย :P) ซึ่งถ้าตั้งความละเอียดไม่ต่างกันมากผลที่ออกมาก็จะเหมือนๆกันครับ แต่มันจะมีคำสั่งในการจัดรูปแบบการแสดงผลทางจอภาพ ไม่ว่าจะตั้งค่าต่างๆไว้เท่าไร ผลที่ออกมาจะทำให้เราใกล้เคียงกับที่เราสร้างไว้ ไว้เด๋วเรียบเรียงบทความแล้วจะนำมาลงอีกทีครับ
โปรกแกรมที่ผมจะนำมาใช้เขียนภาษา html ในตอนนี้เป็นโปรแกรมที่มีมาให้ใน วินโดวส์ทุกๆเครื่องอยู่แล้วครับ ลองเปิดขึ้นมาเลยก็ได้ โปรแกรม Notepad นั่นเอง

หน้าถัดไป --->>>

____1.1 การสร้าง Homepage

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

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

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

โฮมเพจสถาบันกาศึกษา โฮมเพจความบันเทิง

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

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

ในบทเรียนนี้จะใช้โปรแกรม Notepad ใช้ในการสร้างโฮมเพจ

<<-- ก่อนหน้านี้ หน้าถัดไป -->>

____1.2 ความรู้เบื้องต้นภาษา HTML

HTML ย่อมาจาก Hypertext Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง ที่มีโครงสร้างการเขียนโดยอาศัยตัวกำกับ (Tag) ควบคุมการแสดงผลข้อความ รูปภาพ หรือวัตถุ อื่น ๆ ผ่านโปรแกรมเบราเซอร์ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สำหรับระบุ หรือควบคุมการแสดงผล ของเว็บได้ด้วย HTML เป็นภาษาที่ถูกพัฒนาโดย World Wide Web Consortium (W3C) จากแม่แบบของภาษา SGML (Standard Generalized Markup Language) โดยตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย และด้วยประเด็นดังกล่าว ทำให้บริการ www เติบโตขยายตัวอย่างกว้างขวาง

Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket (<) และ greater-than bracket (>) โดยที่ Tag HTML แบ่งได้ 2 ลักษณะ คือ

1. Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <hr>(Tag กำหนดเส้นคั่น), <br> (Tag กำหนดขึ้นบันทัดใหม่) เป็นต้น

2. Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash ( / ) นำหน้าคำสั่งใน Tag นั้น ๆ เช่น <B>……</B> (Tag กำหนดตัวหนา), <a href=URL>…จุด link..</a> (Tag กำหนดการเชื่อมโยงข้อมูล) เป็นต้น

3. Tag เปิด/ปิด บาง tag ละ tag ปิดได้ เช่น <tr> (Tag กำหนดแถวตาราง), <th> (Tag กำหนดคอลัมภ์ตาราง)

4. คำสั่งใน Tag เขียนด้วยอักษรตัวใหญ่หรือเล็กก็ได้ เช่น <Body> หรือ <BODY> หรือ <body>

<<-- ก่อนหน้านี้ หน้าถัดไป --->>

____1.3 โครงสร้างของภาษา HTML

การเขียนโฮมเพจด้วยภาษา HTML นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ 2 ส่วน ดังนี้

1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง (Title) ของหน้าต่างการทำงานในระบบ Windows

เคยสังเกตไหมว่า เวลาเปิดเว็บขึ้นมาตรงแถบสีน้ำเงิน (บนสุดของ Browser) จะแสดงเป็นชื่อเว็บต่างๆ เราสามารถใช้ <Title> กำหนดหรือใส่คำจำกัดความของเว็บนั้นๆ โดยรูปแบบ จะใช้อยู่ระหว่าง <HEAD>...</HEAD> ยกตัวอย่างเช่น

<HTML>

<HEAD>

<Title> สวัสดีครับ ยินดีต้อนรับ ^o^ </Title>

</HEAD>

</HTML>

(อ่ะๆ ผมลืมบอกไปนิดหนึ่ง เวลาเราพิมพ์โค้ดใส่ลงบน Program Notepad แล้ว ถ้าจะให้สามารถเปิดดูได้แบบเว็บเพจ เวลาเซฟก็ให้ใส่นามสกุลเป็น .html ด้วยนะครับ เช่น test.html แล้วเซฟครับ แล้วถ้าเราอยากจะแก้ไขโค้ดก็คลิกขวาที่ไฟล์ test.html แล้วเลือก OpenWith --> Notepad ได้เลยครับ)

ทีนี้รอง เปิดไฟล์ test.html ขึ้นมาก็จะพบว่า

Tital Bar ของเราได้เปลี่ยนไปแล้ว

การกำหนดชื่อตรงส่วน Title นี้เราไม่สามารถใส่พวกตัวเอียง ตัวหนา ลงสี หรือ ตัวขีดเส้นใต้ได้ แต่เราก็สามารถทำให้มันสะดุดตาได้โดย ทำการจัดเรียงตัวอักษรใหม่ เช่น

...ก็ประมาณเนี้ย...

โดยปกติแล้วส่วน Title นี้ ถ้าเราไม่ได้ทำการกำหนดเอาไว้ เวลาเปิด Browser ขึ้นมา ตรงส่วน TitleBar นี้ก็จะแสดงเป็นชื่อไฟล์ .html ขึ้นมาแทนครับ

2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML

ในทั้งสองส่วนนี้จะอยู่ภายใน Tag <HTML>…</HTML> ดังนี้

     <html>
     <head> <title> ส่วนชื่อเอกสาร </title> </head>
     <body>
          tag คำสั่ง
     </body>
     </html>

คำสั่ง หรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า "<" ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า ">" เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม "/" (Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย

ในการเขียนคำสั่งภาษา HTML สามารถเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนคละกันได้ เช่น <HTML> หรือ <Html> หรือ <html> ซึ่งจะให้ผลเหมือนกัน

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

<HTML>

<HEAD> <Title> สัวสดีครับ ยินดีต้อนรับ ^o^ </Title></HEAD>

<BODY>โอ้ว ว้าว เรานี่ก็เก่งเหมือนกันนะนี่ อิอิ :-P </BODY>

</HTML>

คำสั่งเริ่มต้นของเอกสาร HTML

เว็บแต่ละหน้านั้น จะมี <TAG> หลักๆอยู่3อันคือ

1. ส่วนขอบเขต <html>

2. ส่วนหัว <head>

3. ส่วนเนื้อหา<body>

คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML ส่วนหัวเรื่องเอกสารเว็บ (Head Section)

Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ(Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ

ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา เอียง หรือสี และควรใช้ภาษาที่มีความหมายครอบคลุม ถึงเนื้อหาของเว็บเพจ นั้น หรือเป็นคำสำคัญในการค้นหา (Keyword)

Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่ส่วนใหญ่จะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY>

สรุป

<HTML>....</HTML> คำสั่งเริ่มต้น คำสั่ง html เป็นคำสั่งเริ่มการเขียน

<HEAD>....</HEAD> เป็นส่วนหัวของเว็บเพจ บอกคุณสมบัติของเว็บเพจ

<TITLE>....</TITLE> ใช้บอกชื่อของเว็บเพจ

<BODY>....</BODY> เป็นส่วนสำคัญที่สุด เพราะเป็นส่วนที่แสดงเนื้อหาทั้งหมด อาจรวมถึง ข้อความ รูปภาพ ตาราง การเชื่อมโยง

<<-- ก่อนหน้านี้ หน้าถัดไป -->>