ห้องเรียน การพัฒนาเว็บแอพพลิเคชัน

กิจกรรมที่ 2
การสอดแทรกคำสั่งภาษา PHP ในเอกสาร HTML

notecyber

         เพื่อเป็นการบ่งบอกให้รู้ว่า ส่วนใดเป็นคำสั่ง PHP ที่อยู่ภายในเอกสาร HTML จึงได้มีการกำหนดสัญลักษณ์ไว้ดังนี้ ซึ่งสามารถทำได้หลายรูปแบบ เช่น

1. <? ... ?> (SGML style)
2. <?php ... ?>? (XML style)
3. <script language="php"> ... </script> (JavaScript style)
4. <% ... %> (ASP style)
         ที่นิยมก็คือแบบแรก โดยเริ่มต้นด้วย <? และจบด้วย ?> และตรงกลางจะเป็นคำสั่งในภาษา PHP เราสามารถวางคำสั่ง PHP ไว้ภายในเอกสาร HTML ตามที่ต้องการได้ อาจจะสลับกับ Tag ของภาษา HTML ก็ได้ ตัวอย่างเช่น

<HTML>  
<HEAD>  
<TITLE> Hello World </TITLE>  
</HEAD>  
<BODY BGCOLOR=#FFFFFF>
<H1><?php echo "Hello World"; ?></H1>   
Your web browser is 
<?php echo $HTTP_USER_AGENT; ?>.   
</BODY>  
</HTML
 

คำสั่งแรกที่ง่ายที่สุดสำหรับการเรียนรู้ ก็คือคำสั่ง echo แล้วตามด้วยข้อความหรือสตริงค์ (string) ข้อความในภาษา PHP จะเริ่มต้นและจบด้วย double quote (") เหมือนในภาษาซี

ตัวอย่าง แสดงข้อความลงในเอกสาร HTML

<?php  
echo "Hello World!";   
?>

สังเกตว่า คำสั่งแต่ละคำสั่งในภาษา PHP จะจบท้ายคำสั่งด้วย semicolon (;) เหมือนในภาษาซี ซี่ง คำสั่งหรือฟังก์ชันในภาษา PHP นั้นจะเขียนด้วยตัวพิมพ์เล็กหรือใหญ่

ตัวอย่างคำสั่งที่ใช้
- การเชื่อมโยง (ลิงค์)

การเชื่อมโยงนี้ สามารถแบ่งได้ทั้ง 4 ประเภท คือ
1. การเชื่อมโยงระหว่างเว็บเพจ
<a href="ไฟล์เว็บเพจ">...สิ่งที่จะลิงค์...</a>
2. การเชื่อมโยงนอกเว็บไซต์
<a href="URL">...สิ่งที่จะลิงค์...</a>
3. การเชื่อมโยงภายในหน้าเว็บเพจ
<a name="กำหนดชื่อปลายทาง"></a> และ <a href="#ชื่อปลายทาง">..สิ่งที่จะลิงค์...</a>
4. การเชื่อมโยงแบบอีเมล์
<a href="mailto: E-mail address ที่ต้องการส่งถึง">..สิ่งที่จะลิงค์...</a>

- การแทรกรูปภาพ

HTML images คือ การใส่รูปภาพในเอกสาร html
1. ใส่รูปภาพแบบปกติ ไม่มีการกำหนดอะไร
<img src="/ใส่ URL ของภาพ" />
2. ในกรณีที่ต้องการใส่ชื่อภาพ ซึ่งอาจใช้เป็นข้อความสำรองในกรณีที่รูปภาพเกิดข้อผิดพลาดไม่สามารถแสดงผลบนหน้าเว็บเพจได้
<img src="/url" alt="ข้อความอธิบายภาพสำรอง"/>
3. ใส่ขนาดของภาพ
<img src="/URL ของภาพ" alt="ข้อความอธิบายภาพสำรอง" width="กรอกตัวเลขที่ต้องการ" height="กรอกตัวเลขที่ต้องการ"/>

- การแทรกตาราง

HTML Tables คือการสร้างตาราง ในเอกสาร html
    เราสามารถสร้างตาราง ด้วยแท็ก table ตารางจะแบ่งออกเป็นแถวๆ (ใช้แท็ก tr) และแต่ละแถวจะแบ่งออกเป็นเซลล์ (ใช้แท็ก td) td ย่อมาจาก table data ซึ่งจะเก็บข้อมูลของแต่ละเซลล์ โดยแต่ละเซลล์สามารถใส่ข้อความ, รูปภาพ, แบบฟอร์ม, รายการ หรือ ตารางอื่น ๆ ก็ได้
    แอตทริบิวต์ border ในแท็ก table คือส่วนที่ใช้กำหนดเส้นขอบตาราง โดยใส่เป็นค่าตัวเลข ในส่วนนี้อาจไม่กำหนดก็ได้ หากว่าเราต้องการให้ตารางไม่มีเส้นขอบ
    เราสามารถกำหนดหัวตารางโดยใช้แท็ก th เว็บเบราว์เซอร์ส่วนมากจะแสดงผลข้อความในแท็ก th เป็นตัวหนาและจัดกึ่งกลางเซลล์
ตัวอย่าง

<html>  
<body>    
<table border="15">    
<tr>      
 <th>วัน</th> 
 <th>สิ่งที่ทำ</th> 
</tr>    
<tr>      
 <td>จันทร์</td>
 <td>ทำงาน</td>
</tr>    
<tr>      
 <td>อาทิตย์</td>
 <td>พักผ่อน</td
</tr>  
</table>    
</body>  
</html>

ผลลัพธ์ที่ได้คือ

notecyber

 

 

 

  • ใบงานกิจกรรม

    • ใบงานกิจกรรมที่ 2

 



©Notecyber.Com | ครูวรเทพ วันกาล