คำสั่งในการจัดหน้า
HTML
ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์
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 --!> |
รูปแบบการใช้งาน mail(ผู้รับ,หัวข้อ,ข้อความ,ผู้ส่ง);
1.) สร้างแบบฟอร์ม สำหรับกรอกข้อมูล เพื่อส่งอีเมล์ผ่านหน้าเว็บ ตั้งชื่อไฟล์เป็น form2mail.html
ตัวอย่างการแสดงผลหน้า form2mail.html
2.) สร้าง script php เพื่อรับค่า input จาก formmail.html แล้วส่งข้อมูลไปให้ผู้รับตามที่กำหนด โดยตั้งชื่อไฟล์เป็น sendmail.php
$send_mail = mail($emailto,$subject,$messages,$header);
3.) เปลี่ยนอีเมล์ผู้รับ จาก contactus@yourdomain.com เป็น ที่อยู่อีเมล์ของท่าน จากนั้น Upload ทั้ง 2 ไฟล์ ขึ้นไปไว้บน Server
4) ทดสอบการใช้งานโดยเปิดหน้า http://www.yourdomain.com/form2mail.html กรอกข้อมูลให้ครบทุกช่อง แล้วคลิกปุ่ม "Send Mail"
ตัวอย่างการแสดงผลหน้า sendmail.php
5) เข้าไปเช็ค inbox ของอีเมล์ผู้รับ ว่าได้รับอีเมล์หรือไม่ อย่าลืมตรวจสอบใน Junk box หรือ ถังขยะด้วย
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
<title>แบบฟอร์มติดต่อสอบถาม</title>
</head>
<body>
<center><br>
<b>แบบฟอร์มติดต่อสอบถาม<b></br></br>
<form id="form1" name="form1" method="post" action="sendmail.php">
<table width="415" border="0" cellspacing="1" cellpadding="1">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="179">ชื่อ-นามสกุลผู้ส่ง</td>
<td width="229"><label>
<input name="name" type="text" id="name" />
</label></td>
</tr>
<tr>
<td>อีเมล์ผู้ส่ง</td>
<td><label>
<input name="sender" type="text" id="sender" />
</label></td>
</tr>
<tr>
<td>หัวข้อ</td>
<td><label>
<input name="header" type="text" id="header" />
</label></td>
</tr>
<tr>
<td valign="top">ข้อความ</td>
<td><label>
<textarea name="messages" cols="30" rows="5" wrap="virtual" id="messages"></textarea>
</label></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<label>
<input type="submit" name="Submit" value="Send Mail" />
</label>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
2.) สร้าง script php เพื่อรับค่า input จาก formmail.html แล้วส่งข้อมูลไปให้ผู้รับตามที่กำหนด โดยตั้งชื่อไฟล์เป็น sendmail.php
<?
$emailto='contactus@yourdomain.com'; //อีเมล์ผู้รับ
$subject='$header'; //หัวข้อ
$header.= "Content-type: text/html; charset=windows-620\n";
$header.="from: ".$name."E-mail :".$mail; //ชื่อและอีเมลผู้ส่ง
$messages.= "$text</br>"; //ข้อความ
$messages.= "จาก $sender<br>"; //ข้อความ
$send_mail = mail($emailto,$subject,$messages,$header);
if(!$send_mail)
{
echo"ยังไม่สามารถส่งเมลล์ได้ในขณะนี้";
}
else
{
echo "ส่งเมลล์สำเร็จ";
}
?>
3.) เปลี่ยนอีเมล์ผู้รับ จาก contactus@yourdomain.com เป็น ที่อยู่อีเมล์ของท่าน จากนั้น Upload ทั้ง 2 ไฟล์ ขึ้นไปไว้บน Server
4) ทดสอบการใช้งานโดยเปิดหน้า http://www.yourdomain.com/form2mail.html กรอกข้อมูลให้ครบทุกช่อง แล้วคลิกปุ่ม "Send Mail"
5) เข้าไปเช็ค inbox ของอีเมล์ผู้รับ ว่าได้รับอีเมล์หรือไม่ อย่าลืมตรวจสอบใน Junk box หรือ ถังขยะด้วย
ความคิดเห็น
แสดงความคิดเห็น