การเขียน html นะครับ มายากครับ

[cokeza33]

อ่านแล้ว ก้อ ทั้ม ตาม นะครับ แต่ วันนี้ เรา จาเรียนกัล แค่ 3บทนะครับ



บทเรียนที่ 1 แนะนำ HTML

ขอต้อนรับสู่ HTML...
บทเรียนนี้เป็นหนึ่งใน 7 บท ที่จะแนะนำคุณเข้าสู่พื้นฐานของ HyperText Mark-up Language ซึ่งผมแนะนำให้คุณเรียนวันละหนึ่งบท... พอครบสัปดาห์ คุณจะมีความรู้พอเพียงที่จะสร้างเว็บของคุณเองได้สบายๆ ผมพูดจริงๆครับ
เหตุที่ผมพูดเช่นนั้น เพราะมีหลายคนไม่เชื่อว่า จริงๆแล้วพวกเขาสามารถที่จะเรียนบนอินเตอร์เน็ตได้ ผมยังรู้สึกประหลาดใจ ที่บรรดาหนังสือคอมพิวเตอร์ที่ขายดีมากทั้งหลายเรียกผู้อ่านว่า "Dummies"(แปลไม่ออกครับ คิดว่าคล้ายๆ หุ่นเชิด) และดูเหมือนว่าคนส่วนใหญ่ก็มักจะทำตัวแบบนั้น คนที่ฉลาดๆบางคนที่ผมรู้จัก ชอบที่จะป่าวประกาศว่าตัวเองเป็น "Dummies" ในทุกๆด้านของคอมพิวเตอร์ ซึ่งแปลกดีนะครับ ผมคิดว่าหลังทานข้าวขาหมูครั้งถัดไป(ขอแปลแบบไทยๆหน่อยครับ) คุณจะทำได้ดีมากกับการเขียนเว็บของคุณ แทนที่จะหัวเราะเยาะตัวเองว่า ทำไมเราโง่เง่าเรื่องที่เกี่ยวกับอินเตอร์เน็ตเสียจริง
คุณทำได้แน่ครับ!


--------------------------------------------------------------------------------

เริ่มต้น...

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

1. คอมพิวเตอร์ (ไม่ต้องบอกก็รู้)
2. โปรแกรมที่ใช้เปิดเน็ตหรือ Browser ได้แก่ Netscape Navigator , Microsoft Internet Explorer หรือ Opera และหากคุณกำลังอ่านหน้านี้อยู่ คุณก็มีตัวใดตัวหนึ่งเรียบร้อยแล้ว แต่หากคิดจะโหลดเวอร์ชั่นใหม่ๆ ให้ลองเข้าไปที่ link ของแต่ละตัวนะครับ
3. โปรแกรมพิมพ์ตัวหนังสืออย่างง่าย ถ้าคุณใช้ Windows โปรแกรมนี้คือ Notepad หรือ Wordpad หรือถ้าคุณใช้ Mac โปรแกรมนี้คือ Simple Text ให้ใช้โปรแกรมเหล่านี้เป็นตัวเริ่มของคุณครับ

หากคุณมีครบทั้งสามอย่างแล้ว คุณสามารถที่จะเขียน HTML ได้อย่างเต็มความสามารถที่ HTML ทำได้ แต่ตอนนี้คุณอาจมีคำถามว่า :

ถาม : ผมมีเครื่อง Mac ไม่ทราบว่าจะเขียนเว็บได้ไหม ?
ตอบ : ได้ครับ HTML ไม่เจาะจงว่าเป็นเครื่องคอมฯรุ่นใด มันทำงานได้ด้วยตัวอักษรธรรมดาๆ

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

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

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


--------------------------------------------------------------------------------



HTML คืออะไร ?

H - T - M - L เป็นชื่อย่อที่มาจากตัวอักษรแรกของ HyperText Markup Language (ผู้พัฒนาเกี่ยวกับคอมฯ ชอบใช้ชื่อย่อแบบนี้ครับ) ความหมายของแต่ละคำมีดังนี้ :

Hyper หมายถึงสิ่งที่ตรงข้ามกับเส้นตรง ซึ่งแต่ก่อนโปรแกรมคอมฯทั้งหมด จะทำงานในแบบเส้นตรง เช่นว่าต้องมีสิ่งนี้เกิดขึ้นก่อน อีกสิ่งจึงเกิดตามมา แล้วสิ่งต่อๆไปจึงเกิดขึ้นได้อะไรทำนองนั้นครับ แต่ HTML ไม่ได้มีรูปแบบเช่นนั้น HTML ทำให้ผู้ใช้เข้าถึงข้อมูลต่างๆทั่วโลก โดยไม่จำกัดสถานที่และเวลา
Text อันนี้เป็นสิ่งที่คุณจะใช้ในการเขียน(พิมพ์) HTML ใช้ทั้งภาษาอังกฤษและไทย(หรือภาษาอื่นๆ)
Mark up หมายถึงการปรับรูปแบบลักษณะของข้อมูลที่คุณพิมพ์ลงไปธรรมดาๆ ให้ตัวใหญ่เล็ก หรือจะมีตาราง หรือใส่สีสัน ฯลฯ
Language แปลว่า "ภาษา" เพราะว่ามันเป็นภาษาครับ เป็นเพียงภาษาอังกฤษและไทย(หรือภาษาอื่นๆ)ธรรมดาๆ


--------------------------------------------------------------------------------


เตรียมตัวเขียนครับ

จริงๆแล้วคุณจะเริ่มเขียน HTML ในบทที่ 2 ซึ่งจะเป็นวันพรุ่งนี้ ตามแผนที่เราวางไว้ให้คุณเรียนจบใน 7 วัน ตอนนี้ผมขอบอกสิ่งต่างๆที่คุณกำลังจะทำ...
คุณจะเขียน(จริงๆแล้วเป็นพิมพ์ แต่ผมจะใช้เขียนแทนนะครับ)เอกสาร HTML ด้วยโปรแกรมพิมพ์ตัวหนังสืออย่างง่ายต่างๆ เช่น Notepad , Wordpad หรือ Simple Text เมื่อคุณเขียนเสร็จแล้ว คุณจะเปิดเอกสารนั้นใน Browser เช่น Internet Explorer หรือ Netscape Navigator Browser จะแปรผล HTML ให้มาแสดงบนหน้าจอ
ตอนนี้บางคนคงเคยเรียน HTML มาเรียบร้อยแล้ว และมีความเห็นว่า คุณควรใช้โปรแกรมที่ช่วยสร้างเอกสาร HTML เพราะว่าจะทำให้ง่ายกว่า ซึ่งมันก็จริงอยู่ แต่มันจะทำให้คุณเรียนได้ยากขึ้น เพราะโปรแกรมจะช่วยคุณเขียนไปแล้วครึ่งหนึ่ง โปรดเชื่อผมสักครั้ง...ใช้โปรแกรมที่ผมแนะนำสักเจ็ดวัน แล้วค่อยหาโปรแกรมช่วย หากคุณต้องการ แล้วคุณจะทำได้ดีขึ้นมากกว่าเดิม ผมเขียน HTML มาแล้ว 6 ปี และยังคงใช้ Notepad เป็นประจำ


--------------------------------------------------------------------------------


ขั้นตอนการใช้โปรแกรมพิมพ์ตัวหนังสือสำหรับเขียน HTML

1. เขียน(พิมพ์)ลงในนั้นตามต้องการ
2. เมื่อคุณจะบันทึกสิ่งที่พิมพ์มาลงคอมฯ(save) ให้เลือกที่ File แล้วกด Save Asเสมอ
3. หลังกด Save As จะมีหน้าต่างเล็กๆขึ้นมา ซึ่งคุณจะต้องระบุรูปแบบการ save ว่าเป็นเอกสารชนิดใด ให้สังเกตทางด้านล่างของหน้าต่างนั้น ตรงนั้นจะเป็นจุดที่คุณเลือกรูปแบบการ save ได้
4. หากคุณมี PC ให้ save แบบ ASCII TEXT DOS หรือเพียง TEXT ซึ่งใช้ได้ทั้งสองแบบ
5. หากคุณมี MAC ให้ save แบบ TEXT
6. ตอนที่ผมเริ่มเขียน HTML ผมจะ save แต่ละหน้า แต่ละส่วน ลงใน floppy disc ซึ่งจะช่วยให้แยกแยะได้ง่าย แต่หากคุณจะ save ลงในเครื่อง ก็ทำได้เลยครับ ผมเพียงแนะนำแบบของผมเท่านั้น

โปรดจำไว้ว่า : ทุกครั้งที่เริ่มเขียน HTML คุณควรจะ save ด้วย Save As ทุกครั้ง มิฉะนั้น เอกสารที่คุณ save ได้จะอยู่ในรูปที่โปรแกรมนั้นกำหนดไว้ ซึ่งอาจไม่ได้อยู่ในรูปของ TEXT แต่หากคุณจะ save ทับของเก่าหลังจากแก้ไขหรือเพิ่มเติม ให้กดที่ save อย่างเดียวได้
คุณอาจจะเห็นว่าเมื่อคุณ save งานใน Word หรือในโปรแกรมพิมพ์อื่นๆ คุณไม่ได้ save แต่ตัวอักษรเท่านั้น แต่ยังรวมถึงการกั้นหน้า เว้นขอบกระดาษ รูปแบบตัวอักษร หรืออีกหลายๆอย่าง เพื่อให้หน้านั้นแสดงออกมาได้ถูกต้อง ซึ่งคุณไม่จำเป็นต้อง save ทั้งหมดนั้นในการเขียน HTML เลย เพียงแค่ตัวอักษรธรรมดาๆก็พอ (ด้วยเหตุนี้เอกสาร HTML จึงมีขนาดเล็กมาก เมื่อเทียบกับเอกสารคอมฯแบบอื่นๆ ซึ่งคงเป็นเหตุผลหนึ่งที่ HTML ถูกนำมาใช้ส่งข้อมูลถึงกันทั่วโลก เพราะส่งข้อมูลได้เร็วกว่าแบบอื่นๆนั่นเอง)


--------------------------------------------------------------------------------


จะตั้งชื่อเอกสารที่คุณทำขึ้นมาได้อย่างไร

การตั้งชื่อเอกสารสำคัญมาก คุณจะต้องตั้งชื่อก่อน แล้วตามด้วย .htm หรือ .html ซึ่ง .htm ใช้เปิดได้สำหรับ คอมฯที่ใช้ Windows 3.x ส่วนเครื่องที่เป็น Mac หรือ Windows อื่น ให้ใช้ .html (ใช้ได้ทั้งสองแบบล่ะครับ แต่แนะนำให้ใช้ .html เพราะ Windows 3.x มันเก่าแล้วครับ ไม่มีใครใช้กันแล้ว) การตั้งชื่อไฟล์(เอกสาร)คอมฯทุกประเภท ต้องมีจุดและชื่อย่อภาษาอังกฤษตามหลังเสมอครับ ซึ่งเป็นการระบุชนิดของไฟล์นั้น ซึ่ง ".html" จะเป็นตัวบอกคอมฯว่า นี่เป็นเอกสาร HTML หากคุณเห็นชื่อไฟล์รูปภาพต่างๆ ก็จะมีจุดแล้วตามด้วยตัวย่อเช่นเดียวกัน ไฟล์ทุกๆอย่างบนอินเตอร์ก็มีตัวย่อตามหลังเช่นกันครับ ไม่เว้นแม้แต่หน้านี้ ซึ่งที่อยู่(Address)ของหน้าตามหลังด้วย .html


--------------------------------------------------------------------------------


เปิดสิ่งที่คุณเขียนใน Browser

หลังจากที่คุณ save เอกสาร HTML ที่คุณสร้างขึ้นแล้ว ไม่ว่าจะลงคอมฯหรือ floppy disc คุณจำเป็นจะต้องเปิดมันใน Browser ซึ่งง่ายๆครับ เนื่องจากคุณก็กำลังใช้ Browser อ่านบทเรียนที่ 1 นี้อยู่ ทำได้ดังนี้ครับ

1. คลิ๊กเข้าไปในคอมฯหรือ floppy disc ที่คุณ save ไว้ แล้วดับเบิ้ลคลิ๊กบนไฟล์นั้น Browser จะจัดการเปิดให้คุณ
2. เปิด Browser (อย่างที่คุณปิดอยู่ในขณะนี้) แล้วคลิ๊กที่ File ซึ่งอยู่มุมซ้ายบนสุด แล้วกดเลือก open แล้วกด Browse เพื่อหาไฟล์ที่คุณ save ไว้ แล้วดับเบิ้ลคลิ๊กเพื่อเปิดไฟล์นั้น


--------------------------------------------------------------------------------


ฝากไว้อีกอย่าง...

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

แล้วจะทำเช่นนั้นไปทำไมล่ะ ?

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

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

นี่เป็นวิธีที่คุณจะดูเอกสาร HTML (ถูกเรียกว่า Source Code) :

1. เมื่อคุณพบหน้าที่คุณชอบ ให้คลิ๊กที่ View ที่อยู่ตรงเมนู
2. ให้คลิ๊กเลือกที่ Source
3. เอกสาร HTML จะถูกเปิดขึ้นมา หรืออีกวิธีคือคลิ๊กขวาในหน้านั้น แล้วคลิ๊กที่ View Source
ลองทำดูสิครับ กับหน้านี้ ทำตามข้อ 1 ถึง 3 ได้เลย

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

บทเรียนที่ 2 คำสั่งของ HTML (tags)


สวัสดีครับ และขอต้อนรับเข้าสู่วันที่ 2 คุณกำลังจะเขียนเอกสารเล็กๆ ด้วยโปรแกรมพิมพ์ตัวอักษรอย่างง่าย แล้ว save ไว้ในรูป Text หรือ ASCII TEXT DOS และคุณยังจำได้ว่า save โดยลงท้ายชื่อด้วย .html หรือ .htm ผมมั่นใจว่าคุณจำได้... ดีครับ เรามาเริ่มบทเรียนสำหรับวันนี้กันครับ วันที่เราจะเริ่มเขียน!


--------------------------------------------------------------------------------


HTML Tags

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

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

รูปแบบของ tag หรือคำสั่งจะเหมือนๆกันทุกๆคำสั่ง จะเริ่มต้นด้วยเครื่องหมายน้อยกว่า < และลงท้ายด้วยเครื่องหมายมากกว่า > ซึ่งต้องเป็นเช่นนี้เสมอ ไม่มีข้อยกเว้น และสิ่งที่อยู่ในระหว่างสองเครื่องหมายนี้ คือคำสั่งของ HTML (หรือ tag) การเรียน HTML จึงเป็นการเรียนรู้ว่า คำสั่งต่างๆจะให้ผลอย่างไรบ้าง เพื่อนำมาใช้อย่างที่คุณต้องการ และนี่คือตัวอย่างแรกของคำสั่ง :

คำสั่งที่ทำให้ตัวหนังสือเป็นตัวหนาคือ "b" หรือจะใช้ "B" ก็ได้ครับ จะพิมพ์คำสั่ง HTML เป็นตัวใหญ่หรือเล็กก็ได้ และนี่เป็นการเขียน HTML เพื่อให้ข้อความ "ข้าวมันไก่" เป็นตัวหนา (ลองพิมพ์ลงไป save ไว้ แล้วเปิดดูครับ) :

ข้าวมันไก่

ลองดูว่าเกิดอะไรขึ้นบ้างครับ

1. เป็นคำสั่งเริ่มต้นที่ทำให้เป็นตัวหนา
2. "ข้าวมันไก่" เป็นข้อความที่เราต้องการให้เป็นตัวหนา
3. เป็นคำสั่งปิดท้ายที่บอกว่า การทำให้เป็นตัวหนาจบที่ตรงนี้ คำสั่งปิดท้ายทุกคำสั่งจะเหมือนกับคำสั่งเริ่มต้น แต่จะมีเครื่องหมายทับ / อยู่ก่อนหน้าคำสั่งนั้น
4. ข้าวมันไก่ จะให้ผลในหน้าจอเช่นนี้ : ข้าวมันไก่



ไขข้อข้องใจ

ถาม : คำสั่งปิดของคำสั่งอื่นๆ จะเหมือนกับคำสั่งเปิด เพียงแต่เพิ่มเครื่องหมาย / เข้าไปใช่ไหมคะ ?
ตอบ : แม่นแล้ว

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

ถาม : คำสั่งของคุณใช้ B ตัวใหญ่น่ะ ทุกคำสั่งต้องเป็นตัวใหญ่ด้วยไหม ?
ตอบ : เล็กหรือใหญ่ Browser ไม่ใส่ใจหรอกครับ มันจะเห็นทั้งตัวใหญ่และเล็กเท่ากัน แต่ผมคิดว่า หากคุณฝึกนิสัยให้พิมพ์คำสั่งเป็นตัวใหญ่ จะช่วยให้สามารถแยกแยะคำสั่งออกจากตัวหนังสือธรรมดา และยังช่วยให้คุณกลับมาแก้ไขโค้ดได้ง่ายขึ้น

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

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

ถาม : ทุกๆคำสั่งของ HTML ต้องมีทั้งคำสั่งเปิดและปิดไหม ?
ตอบ : ไม่ครับ มีข้อยกเว้นในกฏนี้อยู่ แต่ตอนนี้ให้คุณใช้กฏนี้ไปก่อนครับ


--------------------------------------------------------------------------------


คำสั่งต่างๆในแบบเปิดและปิด

คำสั่ง HTML ส่วนใหญ่ต้องใช้ทั้งคำสั่งเปิดและปิด และส่วนใหญ่จะเข้าใจได้ง่าย นี่เป็นบางส่วนที่ให้ผลแบบต่างๆ :


อธิบายคำสั่ง โค้ด ตัวอย่างการใช้โค้ด ผลของโค้ด
ทำให้เป็นตัวหนา B หนา หนา
ทำให้เป็นตัวเอียง I เอียง เอียง
ทำการขีดเส้นใต้ U ขีดเส้นใต้ ขีดเส้นใต้


ใช้สองคำสั่งพร้อมกันได้รึเปล่าครับ ?

ได้ครับ แต่ต้องใส่ทั้งคำสั่งเปิดและปิดให้ครบและเป็นไปตามลำดับ เช่น :

หนาและเอียง จะได้ หนาและเอียง
หนาและขีดเส้นใต้ จะได้ หนาและขีดเส้นใต้

หากคุณใช้คำสั่งมากกว่าสอง ให้ใช้คำสั่งเปิดและปิดให้ถูกต้อง ลองดูตัวอย่างนี้สิครับ

ข้อความ

รูปแบบข้างบนนี้ไม่ถูกต้องนะครับ มีการวางตำแหน่งคำสั่งเปิดและปิดผิดไป (ฝรั่งบอกอย่างนี้ แต่ผมทดลองแล้วได้ผลดังนี้ครับ.. ข้อความ เอาเถอะครับใช้รูปแบบที่มีระเบียบดีกว่า)

ที่ถูกต้องนั้น ต้องวางคำสั่งเปิดแล้วปิดหุ้มข้อความเป็นชั้นๆ ดังนี้ :
ข้อความ


--------------------------------------------------------------------------------


คำสั่งที่ไม่ต้องใช้คำสั่งปิด

คำสั่ง HTML ส่วนใหญ่ใช้ทั้งคำสั่งเปิดและปิด แต่มีบางคำสั่งที่ใช้ด้วยคำสั่งเดี่ยว ไม่มีคำสั่งปิด ซึ่งนี่เป็น 3 ตัวอย่างที่นิยมใช้กันมาก


คำสั่ง หน้าที่ของคำสั่ง

---

สร้างเส้นในแนวนอนของหน้าจอ(ย่อจากคำว่า Horizontal(แนวนอน) Reference)

มาจากคำว่า BREAK ซึ่งหมายถึงการขึ้นบรรทัดใหม่

มาจากคำว่า Paragraph ซึ่งแปลว่าย่อหน้า ทำหน้าที่คล้าย
แต่จะเป็นการเว้นหนึ่งบรรทัดแล้วขึ้นบรรทัดใหม่ ซึ่งจะใช้

ติดต่อกันในการเว้นหลายๆบรรทัดไม่ได้




--------------------------------------------------------------------------------


เขียน HTML หน้าแรกของคุณ

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

ให้เริ่มต้นทุกหน้าด้วยคำสั่ง :
ซึ่งหมายความว่านี่คือเอกสารแบบ HTML

ต่อมาให้ใส่คำสั่ง :
คำสั่งนี้มีผล... เอ่อ ...ลองสังเกตด้านบนสุดของหน้าต่างที่เหนือเมนู File Edit View... ที่เป็นแถบสีน้ำเงินที่ตอนนี้มีตัวหนังสือเขียนว่า "บทเรียนที่ 2 คำสั่งของ HTML (tags)" ซึ่งนั่นเป็นหัวข้อ(Title) ซึ่งเป็นผลจากคำสั่งนี้ คุณจะนำชื่อหัวข้อมาวางระหว่างคำสั่งเปิดและปิดนี้ครับ สุดท้าย ให้ปิดทุกๆหน้าด้วย :
เข้าใจไหมครับ ? คุณเริ่มเขียนด้วย HTML และปิดด้วย /HTML


--------------------------------------------------------------------------------


มาเริ่มกันเลย !

ผมอยากให้คุณเล่นกับคำสั่งเหล่านี้ ให้จำไว้ว่า HTML อ่านเหมือนกับที่คุณอ่าน บนลงล่าง ซ้ายไปขวา และให้ผลต่างๆ เมื่อคุณใส่คำสั่งเปิดและปิดในช่วงที่คุณต้องการ และอย่าลืมใส่ทุกๆคำสั่งไว้ใน < และ >

และนี่เป็นหน้าตัวอย่างเพื่อที่จะแสดง... เอ่อ ..หมายถึงให้คุณทำในค่ำคืนนี้




นี่เป็นหน้าแรกของฉัน

ฉันสามารถเขียนตัว เอียง หรือ หนา

---

หรือทั้งสองแบบรวมกัน

---

...พอแค่นี้





--------------------------------------------------------------------------------

สังเกตว่าผมจะใช้แต่คำสั่งที่แสดงในหน้านี้ครับ เป็นหน้าที่ง่ายๆธรรมดาๆครับ เพราะว่าคุณเพิ่งเริ่มต้นเท่านั้น ให้สังเกตการใช้ และ กับการใช้ แล้วสังเกตการใช้ P และ BR ว่าเกิดช่องว่างระหว่างบรรทัดได้ต่างกันเพียงใด แน่นอน ครับ ถ้า คุน ได้ ทั้มตามนี้ คุนก้อเซฟ นะครับ

บทเรียนที่ 3 ปรับรูปแบบตัวหนังสือ

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

---

,
และ

ซึ่งช่วยให้จัดวางข้อความในบรรทัดต่างๆ คราวนี้ เราจะพูดถึงการเปลี่ยนขนาดตัวอักษร


--------------------------------------------------------------------------------


คำสั่ง Heading(แปลว่าหัวข้อ)

คำสั่ง Heading ถูกใช้อย่างมากในเอกสาร HTML ซึ่งนำมาใช้สร้างตัวอักษร แบบหัวข้อ ที่เป็นตัวใหญ่ๆ กว่าปกติ คำสั่ง Heading มี 6 คำสั่ง ไล่ตั้งแต่

ถึง

โดยในคำสั่งเหล่านี้

เป็นคำสั่งที่ทำให้ตัวหนังสือใหญ่สุด ส่วน

ทำให้ตัวอักษรเล็กสุด ด้านล่างเป็นตัวอย่างจริงๆที่ใช้ Heading แบบต่างๆ (ถ้าเห็นเป็นตัวเล็กมาก ให้ปรับโดยกดที่ View บนเมนูแล้วเลือก Text Size แล้วกดเลือก Largest)

ข้อความนี้ใช้ H1

ข้อความนี้ใช้ H2

ข้อความนี้ใช้ H3

ข้อความนี้ใช้ H4

ข้อความนี้ใช้ H5

ข้อความนี้ใช้ H6

คำสั่ง Heading ทำให้ตัวหนังสือใหญ่และหนา(ผมว่ายังเล็กไปหน่อยนะครับ) และง่ายต่อการนำมาใช้ แต่ว่ามีคุณลักษณะที่ไม่ดีอย่าง คือไม่สามารถนำคำสั่งอื่นๆมาหุ้มเพื่อสร้างผลเพิ่มเติมได้


--------------------------------------------------------------------------------


คำสั่งปรับขนาดอักษร

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

คำสั่งปรับขนาด 12 แบบให้คุณเลือก : +6 ถึง +1 และ -6 ถึง -1

คุณอาจเดาได้ว่า +6 เป็นขนาดใหญ่สุด(ใหญ่มาก) และ -6 เป็นขนาดเล็กสุด(เล็กมากไปหน่อย) และนี่เป็นตัวอย่างจริงๆของคำสั่งเหล่านี้ ซึ่งผมขอแสดงเพียงคำสั่ง +6 , +3 , -1 และ -6 ซึ่งคำสั่งอื่นๆ คุณคงพอประมาณขนาดได้นะครับ

ข้อความนี้ใช้ +6
ข้อความนี้ใช้ +3
ข้อความนี้ใช้ -1
ข้อความนี้ใช้ -6

โปรดสังเกตว่า คำสั่ง จะทำหน้าที่ 2 อย่าง :

1. บอกว่าจะปรับเปลี่ยนขนาดตัวอักษร (ในส่วน 2. ให้ค่าขนาดอักษรที่ต้องการเปลี่ยน (ในส่วน SIZE="--")

ซึ่งแบบนี้ผมจะเรียกว่ามีคำสั่งอยู่ภายในคำสั่ง หรือในทางเทคนิคของ HTML จะเรียกคำสั่งภายในว่า "attribute"(แปลว่า คุณสมบัติ) ซึ่งในตัวอย่างข้างบน SIZE คือคุณสมบัติของ FONT ซึ่งคำสั่งปรับคุณสมบัติจะตามด้วยเครื่องหมายเท่ากับแล้วเครื่องหมายคำพูด ซึ่งมีค่าของคุณสมบัติอยู่ภายใน
และสังเกตว่าคำสั่ง จะถูกปิดด้วย ไม่ต้องปิดด้วย ซึ่งผมหมายความว่า ยังมีคุณสมบัติอื่นๆอีกสองตัว ที่สามารถนำมาใช้ในคำสั่ง FONT ได้แก่ : COLOR และ FACE (ทั้งสองนี้มีบทเรียนเป็นของตัวเอง ลองเข้าไปดูสิครับ) ถึงแม้ว่าคุณจะใช้ทั้งสามคุณสมบัติร่วมกันในคำสั่ง FONT คุณยังคงต้องปิดคำสั่งด้วย


--------------------------------------------------------------------------------


การจัดให้อยู่กลางหน้า

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



ทุกตัวหนังสือในนี้จะอยู่กลางหน้า




--------------------------------------------------------------------------------

(หัวข้ออยู่ทางขวาครับ)
การจัดให้อยู่ขวาสุด

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

ที่เราเรียนไปแล้วในบทที่ 2 แต่มาถึงจุดนี้ เราต้องปรับเปลี่ยนใหม่ตามแบบข้างขวาล่างนี้

ตัวหนังสือในนี้จะถูกจัดให้อยู่ขวาสุด

เห็นรึเปล่าครับว่าผมเพิ่ม ALIGN="right" (align แปลว่า จัดวาง , right แปลว่า ขวา) เข้าไปในคำสั่ง

OK มั้ยครับ แต่หากคุณเพิ่มคุณสมบัติ(attribute) เข้าไปในคำสั่งเดี่ยวที่ไม่มีคำสั่งปิดในตอนแรก อย่างเช่น

หรือ
(ใช่แล้วครับ มีคุณสมบัติสำหรับ BR ด้วย) คุณต้องจำเป็นต้องเพิ่มคำสั่งปิดเข้าไป ในกรณีนี้เป็น

สังเกตเห็นไหมครับ..

ถ้าคุณใช่

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


--------------------------------------------------------------------------------

ในที่สุดก็จบบทที่ 3 ...สังเกตว่าบทนี้มีตัวหนังสือน้อยลงไหมครับ ?... ตอนนี้เราอยากให้คุณใช้คำสั่ง Heading , FONTSIZE และ CENTER เขียนลงในหน้าที่คุณสร้างขึ้น การปฎิบัติคือการเรียนรู้... นักปราชญ์เขาเคยพูดไว้เช่นนั้น ผมคิดว่าเขามีหนวดยาวๆด้วย เซฟ เหมือนเดิม นะครับ
-----------------------------------------------------------------------------

[cokeza33]

อ่าๆๆ นะครับ เดียว วันหลัง เรา มาต่อกัลอีก นะครับ

สำหรับ อัน 3 ก้อ ขอ อภัย ด้วยนะครับ

เดียว เรา จา มาต่อ กัล บทที่ 4 นัย วันหลัง ต่อเลยนะครับ

เว็บบอร์ดนี้สามารถใช้ html เต็มรูปแบบเลยนะ

---