กลุมสาระภาษาไทยกลุ่มสาระคณิตศาสตร์กลุ่มสาระวิทยาศาสตร์กลุ่มสาระศิลป-(ทัศนศิลป์-ดนตรี-นาฏศิลป์)กลุ่มสาระสุขศึกษาและพลศึกษากลุ่มสาระสังคมศึกษาศาสนาและวัฒนธรรมกลุ่มสาระการงานอาชีพและเทคโนโลยีกลุ่มสาระภาษาต่างประเทศกิจกรรมพัฒนาผู้เรียน

กลุมสาระภาษาไทยกลุ่มสาระคณิตศาสตร์กลุ่มสาระวิทยาศาสตร์กลุ่มสาระศิลป-(ทัศนศิลป์-ดนตรี-นาฏศิลป์)กลุ่มสาระสุขศึกษาและพลศึกษากลุ่มสาระสังคมศึกษาศาสนาและวัฒนธรรมกลุ่มสาระการงานอาชีพและเทคโนโลยีกลุ่มสาระภาษาต่างประเทศกิจกรรมพัฒนาผู้เรียน
หน้าแรก » ชุดคำสั่ง ภาษา html » บทที่ 3 การจัดการกับตัวอักษร
บทที่ 3 การจัดการกับตัวอักษร
บทที่ 3 การจัดการกับตัวอักษร
เรื่องของตัวอักษร 
         หลังจากอ่านมา 2 บท ตอนนี้คุณก็เข้าใจเกี่ยวกับคำสั่งพื้นฐาน และการตั่งค่าต่างๆของ page แลัว ในบทที่3นี้เราจะว่ากันด้วยเรื่อง ตัวอักษร ตัวอักษรถืว่าเป็นตัวหลักในการเขียนโฮมเพจ เราสามารถใช้ ภาษา HTML กำหนดค่าต่างๆ ให้กับตัวอักษรของเราได้ เช่น ขนาดตัวอักษร สีของตัวอักษร ฯลฯ เรามาเริ่มกันที่การจัดตำแหน่งตัวอักษร 
การจัดตำแหน่งตัวอักษร 
เราต้องทำความเข้าใจกันนิดนึงว่า ภาษา HTML นั้นไม่เข้าใจการเว้นวรรค การเว้นบรรทัด ถ้าคุณไม่ใส่ tag คำสั่งบอกมัน เรามาดูที่คำสั่งแรกกันเลย เป็นคำสั่งการขึ้นบรรทัดใหม่ 
คำสั่งการขึ้นบรรทัดใหม่ 
ลองดูตัวอย่างข้างล่าง เมื่อคุณพิมพ์แบบนี้ลงไป
<body> 
สวัสดีจ้า ทุกคน 
ยินดีต้อนรับสู่ โฮมเพจแรกของฉัน
 
</body>
ผลที่ได้ 
สวัสดีจ้า ทุกคน ยินดีต้อนรับสู่ โฮมเพจแรกของฉัน 
จะเห็นได้ว่า มันไม่ยอมขึ้นบรรทัดใหม่ให้เรา เพราะเราไม่ได้เขียนคำสั่งบอกให้มันทำ วิธีการขึ้นบรรทัดใหม่นั้นก็แค่เติม tag <br> ลงไปหน้าข้อความที่จะขึ้นบรรทัดใหม่ ดังนี้
<body> 
สวัสดีจ้า ทุกคน 
<br>ยินดีต้อนรับสู่ โฮมเพจแรกของฉัน
 
</body>
ผลที่ได้ 
สวัสดีจ้า ทุกคน 
ยินดีต้อนรับสู่ โฮมเพจแรกของฉัน 
เย้...ในที่สุดก็ขึ้นบรรทัดใหม่ได้แล้ว เป็นไงครับง่ายดีมั๊ย 
คำสั่งการเว้นบรรทัด 
ทำได้โดยการเติม tag <p> ลงไปหน้าข้อความที่จะให้เว้นบรรทัดลงมา ดังตัวอย่างนี้
<body> 
สวัสดีจ้า ทุกคน 
<p>ยินดีต้อนรับสู่ โฮมเพจแรกของฉัน
 
</body>
ผลที่ได้ 
สวัสดีจ้า ทุกคน
ยินดีต้อนรับสู่ โฮมเพจแรกของฉัน 
การจัดชิดซ้าย,จัดกลางหน้า,จัดชิดขวา 
ดูตัวอย่างข้างล่างเลยครับ
<body> 
<div align="left">สวัสดีจ้า ทุกคน</div> 
<center>ยินดีต้อนรับสู่</center> 
<div align="right">โฮมเพจแรกของฉัน</div>
 
</body>
ผลที่ได้ 
สวัสดีจ้า ทุกคน
ยินดีต้อนรับสู่
โฮมเพจแรกของฉัน
โดยที่ tag <div align="left"> คือการจัดชิดซ้าย 
tag <center> คือการจัดให้อยู่กึ่งกลางหน้า 
tag <div align="right"> การจัดชิดขวา 
การตั้งค่าให้กับตัวอักษร 
หลังจากเรียนรู้เรื่องตำแหน่งของข้อความแล้ว คราวนี้เราจะมาพูดถึง การตั้งค่าให้กับตัวอักษร เรามาเริ่มที่ขนาดตัวอักษรกันก่อน 
การกำหนดขนาดตัวอักษรแบบ Heading 
เป็นการกำหนดขนาดตัวอักษรที่ใช้ทำหัวเรื่อง โดยใส่ tag ลงไป มีให้เลื่อง 6 ระดับ คือ ตั้งแต่ h1 ถึง h6 ลองดูตัวอย่างข้างล่างนี้ จะแสดงให้เห็น 3 ระดับ
<body> 
<h1>สวัสดีจ้า ทุกคน</h1> 
<h3>สวัสดีจ้า ทุกคน</h3> 
<h6>สวัสดีจ้า ทุกคน</h6>
 
</body>
ผลที่ได้

สวัสดีจ้า ทุกคน

สวัสดีจ้า ทุกคน

สวัสดีจ้า ทุกคน

การกำหนดรูปแบบตัวอักษร
<body> 
<font face="AngsanaUPC">สวัสดีจ้า ทุกคน</font> 
<font face="CordiaUPC">สวัสดีจ้า ทุกคน</font> 
<font face="MS sans serif">สวัสดีจ้า ทุกคน</font> 
</body>
เมื่อคุณใส่ tag <font face="ชื่อแบบอักษร"> ลงไปข้อความเหล่านั้นก็จะเปลี่ยนเป็นแบบมี่คุณเลือก 

การกำหนดสีตัวอักษร
<body> 
<font face="AngsanaUPC" color="ff0000">สวัสดีจ้า ทุกคน</font> 
</body>
เมื่อคุณใส่ tag color="ff0000" ลงไปข้อความในส่วนนี้จะกลายเป็นสีแดง โดยที่ ff0000 คือ รหัสสี 

การกำหนดขนาดด้วย size
<body> 
<font face="AngsanaUPC" color="ff0000" size="+2">สวัสดีจ้า ทุกคน </font> 
</body>
การกำหนดขนาดด้วย size มีอยู่หลายระดับ ตั้งแต่ -1 ถึง +7 ในที่นี้กำหนดไว้ที่ระดับ +2 

การเพิ่มลูกเล่นให้ตัวอักษร 
การทำตัวหนา ตัวเอียง และ ขีดเส้นใต้
<body> 
<br><b>สวัสดีจ้า ทุกคน </b> 
<br><i>สวัสดีจ้า ทุกคน </i> 
<br><u>สวัสดีจ้า ทุกคน </u> 
</body>

สวัสดีจ้า ทุกคน 
สวัสดีจ้า ทุกคน 
สวัสดีจ้า ทุกคน


         เอาหละครับ จบบทที่ 3 แล้ว บทนี้อาจจะยากหน่อยสำหรับมือใหม่ ก็ต้องพยายามทดลองทำตามไปเรื่อยๆนะครับ ต่อไปในบทที่ 4 ก็จะว่าด้วยเรื่องของการใส่รูปภาพ ไปบทที่ 4
<body> 
<h1>สวัสดีจ้า ทุกคน</h1> 
<h3>สวัสดีจ้า ทุกคน</h3> 
<h6>สวัสดีจ้า ทุกคน</h6>
 
</body>
ผลที่ได้
สวัสดีจ้า ทุกคน
สวัสดีจ้า ทุกคน
สวัสดีจ้า ทุกคน
การกำหนดรูปแบบตัวอักษร
<body> 
<font face="AngsanaUPC">สวัสดีจ้า ทุกคน</font> 
<font face="CordiaUPC">สวัสดีจ้า ทุกคน</font> 
<font face="MS sans serif">สวัสดีจ้า ทุกคน</font> 
</body>
เมื่อคุณใส่ tag <font face="ชื่อแบบอักษร"> ลงไปข้อความเหล่านั้นก็จะเปลี่ยนเป็นแบบมี่คุณเลือก 
การกำหนดสีตัวอักษร
<body> 
<font face="AngsanaUPC" color="ff0000">สวัสดีจ้า ทุกคน</font> 
</body>
เมื่อคุณใส่ tag color="ff0000" ลงไปข้อความในส่วนนี้จะกลายเป็นสีแดง โดยที่ ff0000 คือ รหัสสี 
การกำหนดขนาดด้วย size
<body> 
<font face="AngsanaUPC" color="ff0000" size="+2">สวัสดีจ้า ทุกคน </font> 
</body>
การกำหนดขนาดด้วย size มีอยู่หลายระดับ ตั้งแต่ -1 ถึง +7 ในที่นี้กำหนดไว้ที่ระดับ +2 
การเพิ่มลูกเล่นให้ตัวอักษร 
การทำตัวหนา ตัวเอียง และ ขีดเส้นใต้
<body> 
<br><b>สวัสดีจ้า ทุกคน </b> 
<br><i>สวัสดีจ้า ทุกคน </i> 
<br><u>สวัสดีจ้า ทุกคน </u> 
</body>

สวัสดีจ้า ทุกคน 
สวัสดีจ้า ทุกคน 
สวัสดีจ้า ทุกคน


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

ตั้งคำถามโดย อาจารย์ วรัญญู  บุตรรินทร์ 
หัวใจของการปฏิรูปการศึกษา คือ การปฏิรูปการเรียนรู้ และหัวใจของการปฏิรูปการเรียนรู้ คือ การปฏิรูปจากการยึดวิชาเป็นตัวตั้ง หรือที่เรียกว่า .ผู้เรียนเป็นสำคัญที่สุด. 
Fanpage เพื่อการศึกษา 
เมื่อ 16 พฤศจิกายน 2555 13:16:12 สอนโดย >> ครูเอ็กซ์
อ่าน 421 ตอบ 0 183.88.88.173