อัพเดทวันที่: 05 ธ.ค. 2556
วีดีโอน่ารู้ : โปรเจคร้านอาหารแจกฟรี Project C#
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 ลำดับด้วยกัน ไล่ตั้งแต่ h2,h2,h3,h4,h5,h6 ซึ่งขนาดของ h2 จะใหญ่ที่สุดดังตัวอย่างที่แสดง
โดยเราจะใช้กับตัวอักษรที่ต้องการให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดดเด่น ขึ้นมา จะสังเกตุได้ว่าเมื่อใช้ h tag จะตัดตัวอักษรที่ต่อจาก h tag เป็นบรรทัดใหม่อัตโนมัติ
รูปแบบ h tag
<h2>head 1</h2>
<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'>
<h2> ดูสีพื้นหลัง </h2> </body>
7. การเขียนคำบรรยาย soure code
ในส่วนของคำบรรยาย soure code นั้นจะไม่แสดงที่ web browser เราเขียนเพื่อบรรยายว่า sorce code ส่วนนี้ใช้ทำอะไร เพื่อความสะดวกเมื่อกลับมาแก้ไข sorce code
ในภายหลังเพราะเราอาจจำไม่ได้ว่าเราเขียนส่วนนี้ไว้เพื่ออะไร เพราะว่าจริงๆแล้ว soure code ที่เราใช้งานจริงนั้นจะมีมากมายหลายร้อยบรรทัด ถ้าเราไม่เขียนบรรยายไว้ก็ทำให้เสียเวลาในการหาส่วนที่เราต้องการจะแก้ไข
รูปแบบการเขียนคำบรรยาย source code
<!-- คำบรรยาย source code --!>
ขอขอบคุณ : www.hellomyweb.com ที่เอื้อเฟื่อข้อมูล
Tag : คำสั่งที่ใช้ในการจัดย่อหน้า คำสั่งที่ใช้ในการขึ้นบรรทัดใหม คำสั่งที่ใช้กับข้อความที่เป็นห คำสั่งที่ใช้ในการขีดเส้นคั่น .คำสั่งที่ใช้ในการจัดตัวอักษร คำสั่งที่ใช้ในการเปลี่ยนสีพื้น
บทความวิกิฮาวนี้จะแนะนำวิธีการ center คือจัดหน้าให้ข้อความอยู่ตรงกลางในเว็บ HTML โดยใช้ Cascading Style Sheets (CSS) ปกติคุณทำให้ข้อความอยู่กลางหน้าใน HTML ได้ด้วยแท็ก <center> แต่ตอนนี้แท็กนี้ obsolete คือตกรุ่นไปแล้วในแทบทุกเบราว์เซอร์[1]
-
1
เปิดไฟล์ที่มี CSS styles. ถึงแท็ก <center> จะ obsolete ไปแล้ว แต่ก็สร้าง element ใหม่เพื่อเพิ่มในส่วนไหนก็ได้ของหน้า เพื่อทำให้ข้อความอยู่ตรงกลางภายในขอบเขตที่กำหนด ถ้าไม่มีไฟล์ CSS แยก ให้หา styles ด้านบนของไฟล์ HTML ระหว่างแท็ก "<style>" กับ "</style>"[2]
- ถ้ายังไม่มีแท็ก <style> กับ </style> ให้ใส่ไว้ล่าง <body> ทางด้านบนของไฟล์ ดังต่อไปนี้:
<!DOCTYPE html> <html> <body> <style> </style>
-
2
กำหนด class ที่ใช้จัดข้อความให้อยู่ตรงกลาง. แท็ก <div> จะเป็นตัวกำหนดให้โค้ด HTML อ้างถึงส่วนใดส่วนหนึ่งของข้อความ เพราะงั้นต้องกำหนด class ให้แท็ก โดยพิมพ์โค้ดต่อไปนี้ในช่องว่างระหว่างแท็ก "style" ต้องกด ↵ Enter 2 ครั้งด้วยหลังบรรทัดแรก
-
3
ใส่คุณสมบัติ text-align. พิมพ์ text-align: center; ในช่องว่างระหว่าง 2 ปีกกาในหัวข้อ div.a ก็จะได้ header ออกมาเป็น
<!DOCTYPE html> <html> <body> <style> div.a { text-align: center; } </style>
-
4
ใส่แท็ก div ที่เหมาะสมให้ข้อความที่จะปรับมาตรงกลาง. โดยใส่แท็ก <div class="a"> ด้านบนข้อความที่จะจัดอยู่ตรงกลาง แล้วปิดด้วยแท็ก </div> ล่างข้อความนั้น เช่น ถ้าจะให้ header และข้อความในย่อหน้า ขยับมาอยู่ตรงกลางหน้า ก็ให้พิมพ์โค้ดต่อไปนี้
<div class="a"> <h2>ยินดีต้อนรับสู่เว็บของฉัน</h2> <p>เว็บนี้จัดทำเพื่อการศึกษาเท่านั้น</p> </div>
-
5
ใช้แท็ก div.a เพื่อจัดส่วนอื่นให้อยู่กลางหน้า. ถ้าจะจัด element อื่นมาอยู่กลางหน้า (เช่น เนื้อหาระหว่างแท็กอย่าง <p></p> กับ <h2></h2>) ให้พิมพ์ <div class="a"> หน้าข้อความ แล้วปิดท้ายด้วย </div> ปกติคำสั่งปรับไอเท็มให้มาอยู่ตรงกลางคือ "div.a" ใช้คำสั่งนี้แล้วก็จะจัดหน้าให้ข้อความมาอยู่ตรงกลางเช่นกัน
<style> div.a { text-align: center; } </style> <div class="a"> <h2>ยินดีรับการสนับสนุน</h2> <p>ขอขอบคุณ</p> </div>
-
6
ตรวจทานโค้ด. ถึงจะเนื้อหาต่างกัน แต่โค้ดที่ได้จะออกมาประมาณนี้[3]
<!DOCTYPE html> <html> <body> <style> div.a { text-align: center; } </style> <div class="a"> <h2>ยินดีต้อนรับสู่เว็บของฉัน</h2> <p>เว็บนี้จัดทำเพื่อการศึกษาเท่านั้น</p> </div> <div class="a"> <h2>ยินดีรับการสนับสนุน</h2> <p>ขอขอบคุณ</p> </div> </body> </html>
โฆษณา
-
1
เปิดโค้ด HTML. เป็นวิธีการใช้แท็ก HTML <center> ที่ตอนนี้ obsolete หรือเลิกใช้ไปแล้ว ตั้งแต่ธันวาคม 2561 เป็นต้นมา บางเบราว์เซอร์อาจยังพอรองรับบ้าง แต่ไม่แนะนำให้ใช้แท็กนี้ในระยะยาว
-
2
หาข้อความที่จะจัดให้อยู่ตรงกลาง. เลื่อนลงไปจนเจอ header เนื้อหา หรือข้อความส่วนอื่นๆ ที่อยากจัดให้อยู่กลางหน้า
-
3
ใส่แท็ก "center" หัว-ท้ายข้อความ. แท็ก center จะอยู่ในฟอร์แมต <center>text</center> โดยเปลี่ยน "text" เป็นข้อความ ถ้าข้อความคุณมี tag อยู่แล้ว (เช่น "<p></p>" ของย่อหน้าข้อความ) แท็ก "center" จะอยู่นอกแท็กเดิมที่มีได้
<center><h2>ยินดีต้อนรับสู่เว็บของฉัน</h2></center> <center>อ่านให้สนุกจ้า!</center>
-
4
ตรวจทานโค้ด HTML. โค้ดที่ได้จะออกมาหน้าตาประมาณนี้[4]
<!DOCTYPE html> <html> <body> <h2><center>ยินดีต้อนรับสู่เว็บของฉัน</center></h2> <center>อ่านให้สนุกจ้า!</center> <p1>เว็บนี้จัดทำเพื่อการศึกษาเท่านั้น</p1> </body> </html>
โฆษณา
เกี่ยวกับวิกิฮาวนี้
มีการเข้าถึงหน้านี้ 21,723 ครั้ง