คำสั่งในการจัดหน้า
HTML
ในบทความนี้จะเป็นเนื้อหาของคำสั่งที่ใช้ในส่วนของ body section ทั้งหมดโดยจะเป็นคำสั่งในส่วนของการจัดหน้าซึ่งการเรียนรู้ที่ดีที่สุดคือการลองพิมพ์ดู ดังนั้น Hellomyweb.com จึงได้ทำ text editor และหน้าจอแสดงผลไว้ด้วยกันให้คุณลองพิมพ์ลองแก้ไขกันดู โดยคลิกที่ลิงก์ที่หัวข้อได้เลย
ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
1.คำสั่งที่ใช้ในการจัดย่อหน้า
คำสั่ง P นี้จะเพิ่มบรรทัดว่างก่อนและหลังตัวอักษรที่เราพิมพ์ไปโดยอัตโนมัติ ตามที่แสดงในตัวอย่าง
รูปแบบ p tag
|
<p> ย่อหน้าที่ 1 </p> <p> ย่อหน้าที่ 2 </p> <p> ย่อหน้าที่ 3 </p> |
2.คำสั่งที่ใช้ในการขึ้นบรรทัดใหม่
การตัดบรรทัดใหม่นั้นปรกติ web browser จะทำการตัดให้อยู่แล้ว แต่การตัดคำของ web browser จะตัดเมื่อแสดงผลไม่ได้ แต่ถ้าเราใส่คำสั้ง <br> เข้าไป web browser จะตัดให้ทันที ซึ่งคุณอาจจำเป็นที่จะต้องตัดคำเป็นบรรทัดสั้นๆเช่น การเขียนกลอนดังตัวอย่าง
รูปแบบ br tag
|
บรรทัดที่ 1 <br> บรรทัดที่ 2 <br> บรรทัดที่ 3 <br> |
3.คำสั่งที่ใช้กับข้อความที่เป็นหัวเรื่อง
คำสั่ง h จะมีทั้งหมด 6 ลำดับด้วยกัน ไล่ตั้งแต่ h1,h2,h3,h4,h5,h6 ซึ่งขนาดของ h1 จะใหญ่ที่สุดดังตัวอย่างที่แสดง โดยเราจะใช้กับตัวอักษรที่ต้องการให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดดเด่นขึ้นมา จะสังเกตุได้ว่าเมื่อใช้ h tag จะตัดตัวอักษรที่ต่อจาก h tag เป็นบรรทัดใหม่อัตโนมัติ
รูปแบบ h tag
|
<h1>head 1</h1> <h2>head 2</h2> <h3>head 3</h3> <h4>head 4</h4> <h5>head 5</h5> <h6>head 6</h6> |
4. คำสั่งที่ใช้ในการขึดเส้นคั่น
คำสั่งที่ใช้ในการขีดเส้นคั่น
รูปแบบ hr
|
<p>เนื้อหาบทที่ 1</p> <hr> <p>เนื้อหาบทที่ 2</p> <hr> |
5.คำสั่งที่ใช้ในการจัดตัวอักษรชิดซ้าย ชิดขวา หรือกึ่งกลาง
การจัดให้ตัวอักษรให้ชิดซ้าย ขวา หรือกึ่งกลาง เราจะใช้ Attributes ให้รายละเอียดของ tag โดยเราจะใช้ aling เพื่อบอกว่าให้ชิดซ้าย (align = 'left') ชิดขวา (align = 'right') และ จัดกึ่งกลาง (align = 'center')
รูปแบบ align
|
<h3 align = 'left'>ชิดซ้าย</h3> <h3 align = 'right'>ชิดขวา</h3> <h3 align = 'center'>จัดเข้ากลาง</h3> |
6. คำสั่งที่ใช้ในการเปลี่ยนสีพื้นหลัง
bgcolor เป็น Attributes อย่างหนึงเหมือนกันที่ใช้กำหนดสี คุณอาจเปลี่ยนจาก สีเขียว(green) เป็น เหลือง(yellow) หรือสีอื่นๆก็ได้
รูปแบบ bgcolor
|
<body bgcolor ='green'> <h1> ดูสีพื้นหลัง </h1> </body> |
7. การเขียนคำบรรยาย soure code
ในส่วนของคำบรรยาย soure code นั้นจะไม่แสดงที่ web browser เราเขียนเพื่อบรรยายว่า sorce code ส่วนนี้ใช้ทำอะไร เพื่อความสะดวกเมื่อกลับมาแก้ไข sorce code ในภายหลังเพราะเราอาจจำไม่ได้ว่าเราเขียนส่วนนี้ไว้เพื่ออะไร เพราะว่าจริงๆแล้ว soure code ที่เราใช้งานจริงนั้นจะมีมากมายหลายร้อยบรรทัด ถ้าเราไม่เขียนบรรยายไว้ก็ทำให้เสียเวลาในการหาส่วนที่เราต้องการจะแก้ไข
รูปแบบการเขียนคำบรรยาย source code
| <!-- คำบรรยาย source code --!> |
เกี่ยวกับบทความนี้
- ระดับความยาก : พื้นฐาน
- คะแนนของบทความนี้ : 7
- สร้างเมื่อ : 16-05-2010
- จำนวนครั้งที่เปิด : 6,951
- เนื้อหาที่เกี่ยวข้อง :
- -
คลิกที่ เวิร์คมาก! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ
บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (12 เรื่อง)
บทนำ HTML
ที่มาของ HTML และพื้นฐานการใช้งาน HTML ในบทนี้จะเป็นต้องใช้โปรแกรมอย่าง Text editer ถ้าคุณยังไม่เคยใช้งานแนะนำให้อ่านหัวข้อ ลองทำเว็บแบบง่ายๆ ดูก่อนเพื่อเป็นพื้นฐานในการอ่านบทนี้
สร้างเมื่อ : 16-05-2010 9:01 | จำนวนครั้งที่เปิด : 7,530
โครงสร้างคำสั่งของ HTML
ในบทนี้จะเป็นโครงสร้างคำสั่ง(tag) ของ HTML
สร้างเมื่อ : 16-05-2010 10:12 | จำนวนครั้งที่เปิด : 10,527
คำสั่งในการจัดหน้า
ในบทนี้จะเป็นคำสั่ง Tag พื้นฐานของ HTML ในส่วนของ body section ที่ใช้ในการจัดหน้าเช่น จัดย่อหน้า จัดให้ชิดซ้าย ชิดขวา
สร้างเมื่อ : 16-05-2010 8:18 | จำนวนครั้งที่เปิด : 6,951
คำสั่งในการกำหนดลักษณะตัวอักษร และแสดงสัญลักษณ์ต่างๆ
ตัวเอียง ตัวหนา บทนี้จะบทคำสั่งที่เกี่ยวกับตัวอักษรทั้งหลายกัน รวมถึงสัญลักษณ์ต่างๆ
สร้างเมื่อ : 16-05-2010 8:18 | จำนวนครั้งที่เปิด : 6,732
เชื่อมต่อเอกสารของเราด้วย hyperlink
เว็บไซต์ของเราประกอบด้วย web page มากมาย ซึ่งเราจะใช้ hyperlink ในการเชื่อมโยงเอกสารเหล่านั้น
สร้างเมื่อ : 16-05-2010 8:19 | จำนวนครั้งที่เปิด : 4,252
แบ่งหน้าจอโดยใช้ Frame
ปรกติเราจะแสดงเว็บเพจใน browser ได้ที่ละ 1 เว็บเพจ แต่ถ้าเราใช้ Frame เราจะสามารถแสดงเว็บเพจได้หลายๆเว็บเพจในหน้าเดียว โดยจะแบ่งหน้าของ browser ออกเป็นส่วนๆ โดยใช้ Frame
สร้างเมื่อ : 16-05-2010 9:59 | จำนวนครั้งที่เปิด : 4,994
Table คำสั่งที่สำคัญสุดในการทำเว็บเพจ
ในหน้าเว็บเพจของเราประกอบด้วยข้อมูลมากมาย จึงจำเป็นที่จะต้องจัดเรียงข้อมูลให้เป็นระเบียบเพื่อให้อ่านงาน และใช้งานพื้นที่ได้คุ้มค่าที่สุด ซึ่งตารางจะช่วยเราได้มาก และนิยมใช้มากในการจัดรูปแบบหน้าตาของเว็บไซต์
สร้างเมื่อ : 16-05-2010 8:23 | จำนวนครั้งที่เปิด : 4,781
list จัดข้อมูลในเว็บเพจให้เป็นระเบียบ
list tag ใช้ในการจัดข้อมูลเป็นชุดๆ หรือเป็นหัวข้อ ซึ่งจะทำให้ข้อมูลอ่านได้ง่ายขึ้น
สร้างเมื่อ : 16-05-2010 8:23 | จำนวนครั้งที่เปิด : 2,696
การสร้างแบบฟอร์ม
เว็บไซต์นั้นต่างจากเอกสารธรรมดา ตรงที่สามารถตอบโต้กับผู้ใช้งานได้ เช่นการใช้ search (ค้นหา) ในเว็บไซต์ hellomyweb.com ช่องรับค่าของ search นั้นก็คือแบบฟอร์มใน html นั่นเอง
สร้างเมื่อ : 16-05-2010 8:37 | จำนวนครั้งที่เปิด : 3,642
การใส่รูปในเว็บเพจ
รูปนั้นสามารถบรรยายรายละเอียดได้ดีกว่าคำพูดมาก ดังนั้นแทบทุกเว็บไซต์จึงมีรูปอยู่เกือบทุกเว็บไซต์ ในบทความนี้เราจะมาใส่รูปในเว็บเพจกัน
สร้างเมื่อ : 16-05-2010 8:24 | จำนวนครั้งที่เปิด : 3,878
การใส่ภาพพื้นหลัง ให้เว็บเพจ
ภาพพื้นหลังเป็นสิ่งที่ทำให้เว็บของเราดูสวยงามแต่ถ้าเราใช้ภาพพื้นหลังที่ไม่ดี อาจส่งผลเสียกับเว็บเราได้ ในบทความนี้จะเป็นตัวอย่างของการใส่พื้นหลังที่ดี และไม่ดี
สร้างเมื่อ : 16-05-2010 10:17 | จำนวนครั้งที่เปิด : 8,833
การใช้งานสีในเว็บเพจ
สีสันนั้นอยู่คู่กับเว็บเพจอยู่แล้ว เพราะนอกจากจะทำให้เว็บดูสวยงามน่าสนใจแล้ว ยังช่วยให้การอธิบายข้อความดีขึ้นอีก ในบทความนี้เราจะมีดูการใช้งานสีกัน
สร้างเมื่อ : 16-05-2010 8:26 | จำนวนครั้งที่เปิด : 3,237
